Jump to content

custom avatars and signatures


Recommended Posts

@ Tripredacus:

Before I decided on exactly what I wanted to do in making your Ravage animation, I spent some time gathering a bunch of resources.

One website had letters on a transparent background, animated in different ways.

One animation I liked was a 5-frame "sparkly T".

I saved each frame as a .psd file, so I could add a colored background.

A black background worked great.

A red background didn't work well, because it showed the outline of the "T", which was very ragged. (This ragged outline didn't show up on the black background.)

I prepared a "sparkly T" animated GIF for you -- (it only took about 15 minutes) -- http://i1196.photobucket.com/albums/aa403/larryb123456/SparkleyT5frames010sec60x55px255colorsOOED51KB.gif

SparkleyT5frames010sec60x55px255colorsOOED51KB.gif

Specs: 5 frames, 0.10 sec display time per frame, 60x55px, 255 colors, 5.1 KB.

I hope you like it and can use it someplace.

Edited by larryb123456
Link to comment
Share on other sites


@ Tripredacus:

Since it didn't take long to do, I went ahead and made another version of the "Sparkly T" shown in my last Post, http://postimage.org/image/q3qeabl5f/

Sparkly_T_with_pulsed_Trip_25_frames_0_10sec_83x.gif

This is a frame-by-frame animation: 25 unique frames, 0.10 sec display time per frame, 255 colors, 83x70px, 23 KB.

It was fortuitous that the pixel letter "Tripredacus" worked great in size with respect to the sparkly T in my last Post, so that I didn't have to re-size it. The colors of "Tripredacus" and the pulses were sampled from the "T".

In the 25 frames, the sparkly T 5-frame animated GIF loops 5 times. 11 frames are used to pulse "Tripredacus" and the remaining 14 frames serve as a "pause" so that sparkly T is not overshadowed by the Tripredacus letter pulsations. I made the pulsations very subtle, so that they would not overshadow the sparkles on sparkly T.

I hope you like the animation and can use it someplace.

Andthatsalltherewastoit.gif

Edited by larryb123456
Link to comment
Share on other sites

Now what in the world do you expect me to do with the image in that link?

It was my idea that the original image was in higher resolution than my current avatar, meaning that the original Ravage from that picture would be "larger" and better to use to make a larger image.

With my Photoshop 5.0, I'm a little limited in getting *crystal clear* letters at a small size, such as 7px, with the xenotron font.

I agree, I've noticed over the years that the Xenotron font doesn't work well at a small size. For most of my uses I have it fairly large... I don't know exactly what size I use since I haven't made any new images for at least 7 years now.

I prepared a "sparkly T" animated GIF for you

I like how this one looks (and the other one) ... I'll have to think of how to use it since I have to do some formatting changes soon. I'm thinking of something to replace an existing animation that fits nicely next to the w3C CSS badge... unless I rearrange how that is used. Either way, I may consider using the sparkly T as a favicon, since I don't have one of those.

This is the old one I made in Photoshop 5, over 10 years ago now! Wow that seems like a long time.

brick2.gif

Link to comment
Share on other sites

@ Tripredacus:

In my Post # 327, I made your animated Ravage avatar at 150x150px.

I also presented one version at 100x100px that was re-sized in my animator from the 150x150px size.

Unfortunately, this downsizing really blurred the lettering.

I wanted to correct this blurriness, but I made a *mistake in strategy*.

In my Post # 330, I took this 100x100px image with the blurred letters and tried to correct *that image*, with results that were not perfect.

Garbage in, garbage out !!!

I should have started from "scratch" at the 100x100px size to make a good image.

So, that's what I did to create the ABSOLUTELY PERFECT Ravage animated avatar presented below.

Notice how all the lettering (i.e., Tripredacus, please wait, and endure !!) is taller for a given letter width.

It should be clear that this allows for easier "correcting" of the output from the Photoshop Type Tool.

I've presented below 3 animations using the top quality settings in my animator for 255 colors, 127 colors, and 63 colors.

I've also presented the actual JPEGs used in the animation, at 100% opacity, for the Tripredacus title page, please wait, and endure !!

In case you're interested, my fade-outs occurred with an opacity-change sequence of 100%, 80%, 60%, 40%, 30%, and 20%. My fade-ins were simply the reverse of this sequence (i.e., 20%, 30%, 40%, 60%, 80%, and 100%).

Here are the results:

255 colors, 316 KB, http://i1196.photobucket.com/albums/aa403/larryb123456/Tripredacusanimatedavatar255colors316KB.gif

Tripredacusanimatedavatar255colors316KB.gif

127colors, 250 KB, http://i1196.photobucket.com/albums/aa403/larryb123456/Tripredacusanimatedavatar127colors250KB.gif

Tripredacusanimatedavatar127colors250KB.gif

63 colors, 229 KB, http://i1196.photobucket.com/albums/aa403/larryb123456/Tripredacusanimatedavatar63colors229KB.gif

Tripredacusanimatedavatar63colors229KB.gif

Tripredacus title page, 100% opacity, http://postimage.org/image/c334g9x51/

Tripredacus_title_page_100_opacity.jpg

please wait, 100% opacity, http://postimage.org/image/8yfbds5a7/

please_wait_100_opacity.jpg

endure !!, 100% opacity, http://postimage.org/image/a0ocpegu5/

endure_100_opacity.jpg

Andthatsalltherewastoit.gif

--------------------------------------------------------------------------------------------------------

"The pursuit of perfection, then, is the pursuit of sweetness and light."

Matthew Arnold

--------------------------------------------------------------------------------------------------------

Edited by larryb123456
Link to comment
Share on other sites

@ Tripredacus:

Just curious.

For the 15 frame, 88x31px animation you presented in your Post # 333, I'd guess that you had the bottom layer (i.e., white "Tripredacus.net" on a black background) and simply "overlayed" it with a "vibrating smokey black" animation that was on a transparent background.

Am I correct?

Or did you use some type of voodoo magic, the details of which you are not at liberty to discuss ?

Link to comment
Share on other sites

No I don't think I was using transparencies back then... It is simply white text on black background, maybe the "layer" is 1: background, 2:font. But the filter was applied to the letters only. I made multiple different attempts, then just stuck them all together. But it has been quite some time so I may be mistaken. :rolleyes:

iirc it was my first attempt at animation. I had another one made as well, but that file is not as good (IMO) and probably saved on my Windows 98 PC. Probably the last time I used Photoshop 5 (it was the LE version that came with something I bought) before getting Fireworks 2 at college.

Link to comment
Share on other sites

I was in the process of making some userbars in which I scroll animated GIFs -- (as I've done in my most recent Posts) -- when I came across a great JPEG of a smiling chimp.

The image was on a solid white background which was easy to remove with the Photoshop Magic Wand.

Scrolling static images, such as JPEGs, is very easy compared to scrolling animated GIFs, so I thought I'd take a little break and make the 2 userbars shown in this Post.

Notice how I used the xenotron font for the word "Smile". This is the font I used in making Tripredacus's animated Ravage avatar.

I figure the chimp is smiling full-blast like that because one of his jungle compatriot chimps told him a great joke about a banana.

First is an animation on a flowered background.

It's hard to recognize it as flowered, since I manipulated my resource image so much in order to have the word "Smile" on a light part of the background.

So, the background is more or less "abstract". IMO, nothing wrong with that.

http://postimage.org/image/jyjoihndj/

Ani_MS_0_07sec_90_frames_80_unique_350x19px_255c.gif

This is a frame-by-frame animation: 90 frames (80 unique), 0.07 sec display time per frame, 255 colors, 350x19px, 185 KB. Chimp JPEGs are scrolled vertically -- at the rate of 1 pixel per frame -- on each end of the userbar.

I really like bold, simple colors, and purple is my favorite, so I made the second animation shown below:

http://postimage.org/image/wswpanlxh/

Ani_MS_0_07sec_90unique_frames_255colors_OO_ED_3.gif

This is also a frame-by-frame animation: 90 unique frames, 0.07 sec display time per frame, 255 colors, 350x19px, 363 KB. Chimp JPEGs are scrolled vertically -- at the rate of 1 pixel per frame -- on each end of the userbar. The background with the moving scanlines is a 2-frame animated GIF.

This background animation is what makes the file size of this GIF so much greater than that of the first-presented image in this Post.

Frame 1 of the background has blue diagonal scanlines with a 5px horizontal spacing. Frame 2 of the background was made from Frame 1 by moving Frame 1's scanlines to the left by 3px. When these 2 Frames alternate back and forth in the main animation, the illusion of motion is created, like this: http://postimage.org/image/wjku8iyp5/

Ani_Background_2_frame_0_07sec_255colors_OO_ED_3.gif

Because I used letter pulsations that were dynamic and showed up well, I was able to scroll the chimps at a relatively fast rate (i.e., at a display time of 0.07 sec per frame). These are the type of energetic animations that I really like.

Andthatsalltherewastoit.gif

Edited by larryb123456
Link to comment
Share on other sites

I made this userbar to honor the great Jamaican sprinter, Usain "Lightning" Bolt. A few hours ago, he won the gold medal in the 200 meters at the 2012 London Olympics. Earlier, he also won the gold medal in the 100 meters at these Olympics. He might win another gold medal in the upcoming 4x100 meters. He won gold in the 100m, 200m, and 4x100m at the 2008 Beijing Olympics. He holds the world records in the 100m and 200m, setting them at the 2009 World Championships. Currently, then, he is the fastest man on earth.

http://postimage.org/image/6wif538y5/

Ani_MS_UB_0_06sec_78unique_frames_255colors_350x.gif

This is a frame-by-frame animation: 78 unique frames, 0.06 sec display time per frame, 255 colors, 350x19px, 126 KB. A 6-frame animated Jamaican flag GIF is scrolled on the left side of the userbar and a JPEG image of Usain Bolt is scrolled on the right side, both scrolled at a rate of 1 px per frame.

There were 2 main requirements in making this userbar:

1) The height of the 6-frame animated flag GIF scrolling unit has to be the same as that of the JPEG image of Usain Bolt. Recall that a GIF scrolling unit consists of all frames aligned and linked so that they scroll as a unit. At each vertical position in the scrolling, the appropriate GIF frame is copied (i.e., released from the scrolling unit) and becomes the image in the main animation for that vertical position.

2) The total number of frames in the main animation has to be an integer multiple of the number of frames in the scrolled sub animation. This integer multiple is the number of loops of the sub animation for 1 loop of the main animation. In this case, there are 78 frames in the main animation and 6 frames in the sub animation, (78/6)=13, and the integer requirement is satisfied.

Here is Bolt's famous trademark "Archer's Pose", which he assumes at all his races. He holds the pose for 20-30 sec and it's fun to watch him since he's quite a showman, http://postimage.org/image/xvc9bao01/

Usain_Bolt_trademark_archer_s_pose.jpg

Andthatsalltherewastoit.gif

--------------------------------------------------------------------------------------------------------

Usain Bolt quotes:

"I was looking at myself and I'm like, 'that guy's fast.' "

"I've written history, pretty much."

"I'm now a legend. I'm also the greatest athlete to live."

--------------------------------------------------------------------------------------------------------

Edited by larryb123456
Link to comment
Share on other sites

I was prompted to make the animated userbars shown below from watching the London Olympics with all the pretty flags and the athletes' pride in country.

As I mentioned before, I really like strong, simple, bold colors and nowhere else will you find them than on the flags of different nations.

All the userbars shown below are frame-by-frame.

The number of frames for each userbar is around 50, and the file size for each userbar is around 25 KB.

In each userbar: 1) the bright highlight on each flag is displayed for 0.07 sec; 2) each letter pulsation is displayed for 0.10 sec, since I had to increase the display time so that the pulsations could be seen better; 3) 255 colors are used; and 4) the image size is 350x20px.

In the presentation below, I have purposely left a lot of space between userbars so that each userbar can be seen more or less by itself and not be "visually interfered with" by its neighbor.

As a note, these types of animations are very, very simple to make, which explains the fact that I made so many of them.

The bright highlights on the flags were achieved by increasing the Photoshop Brightness, and the letter pulsations were achieved in the usual way, by coloring them in with the Pencil Tool.

--------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------

Eastern Europe

http://postimage.org/image/60yxklfgb/

01_Ani_Eastern_Europe_0_07sec_flags_0_10sec_text.gif

From left to right on the userbar, the flags represent the following countries: Poland, Hungary, Romania, Russian Federation, Belarus, Slovakia, Ukraine, and Czech Republic.

--------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------

Western Europe

http://postimage.org/image/4fbat99qn/

04_Ani_Western_Europe_0_07sec_flags_0_10sec_text.gif

From left to right on the userbar, the flags represent the following countries: The Netherlands, Liechtenstein, France, Germany, Switzerland, Luxembourg, Belgium, and Austria.

--------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------

Northern Europe

http://postimage.org/image/5uc08fbpp/

02_Ani_Northern_Europe_0_07sec_flags_0_10sec_tex.gif

From left to right on the userbar, the flags represent the following countries: Norway, Lithuania, Sweden, Ireland, Denmark, Great Britain, and Finland.

--------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------

Southern Europe, Version 1

http://postimage.org/image/tdi6kdwy1/

03_A_Ani_Southern_Europe_A_0_07sec_flags_0_10sec.gif

From left to right on the userbar, the flags represent the following countries: Albania, Malta, Greece, Spain, Portugal, and Serbia.

--------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------

Southern Europe, Version 2

http://postimage.org/image/dxb1tavf3/

03_B_Ani_Southern_Europe_B_0_07sec_flags_0_10sec.gif

From left to right on the userbar, the flags represent the following countries: Italy, Montenegro, Bosnia and Herzegovina, Slovenia, Andorra, and Croatia.

--------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------

Africa

http://postimage.org/image/xb2scbx01/

05_Ani_Africa_0_07sec_flags_0_10sec_text_51uniqu.gif

From left to right on the userbar, the flags represent the following countries: Egypt, Congo, Algeria, Ethiopia, Angola, Ghana, Nigeria, Kenya, and South Africa.

--------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------

Asia

http://postimage.org/image/vgz1b8zv3/

06_Ani_Asia_0_07sec_flags_0_10sec_text_53unique.gif

From left to right on the userbar, the flags represent the following countries: Philippines, Malaysia, Indonesia, Kazakhstan, Pakistan, India, Bangladesh, Mongolia, Japan, and China.

--------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------

South America

http://postimage.org/image/ktv64y66z/

07_Ani_South_America_0_07sec_flags_0_10sec_text.gif

From left to right on the userbar, the flags represent the following countries: Colombia, Peru, Bolivia, Chile, Ecuador, Brazil, Venezuela, and Argentina.

--------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------

“Hats off! Along the street there comes A blare of bugles, a ruffle of drums, A flash of color beneath the sky: Hats off! The flag is passing by.”

Henry Holcomb Bennett

“The most important thing in the Olympic Games is not winning but taking part; the essential thing in life is not conquering but fighting well.”

Pierre de Coubertin

--------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------

Edited by larryb123456
Link to comment
Share on other sites

@ Tripredacus:

I made a new version of your Ravage animated GIF avatar, using the "spiral effect" in my animator.

Flacko, in his animation shown in your Post # 324, also used a "canned" animator effect to achieve his result.

My new animated GIF is 100x100px, the size you prefer, and it has *perfect* lettering.

It has 250 frames and a whopping file size of 1.26 MB.

(But Flacko's animation also has a large file size of 886KB=0.886MB.)

Here it is, in all its glory, http://i1196.photobucket.com/albums/aa403/larryb123456/VERSION1wspiralfx_Tripredacusanimatedavatar_simpleversion250frames126MB.gif

VERSION1wspiralfx_Tripredacusanimatedavatar_simpleversion250frames126MB.gif

If you would like to use something like this, but need a smaller file size, I can fiddle -- (and I play a mean fiddle......lol) -- with it to eliminate a few frames. Or maybe just using fewer colors might do the trick.

Just let me know.

Link to comment
Share on other sites

@ Tripredacus:

I made another version of your animated avatar, eliminating Ravage all together and just focusing the attention on the Tripredacus title page, to which I applied the animator spiral effect. I really like the way the spiral works with the title page.

Again, this is the 100x100px version with perfect lettering.

255 colors, 348 frames, 551 KB,

http://i1196.photobucket.com/albums/aa403/larryb123456/VERSION1wTripspiralfx_Tripredacusanimatedavatar_simpleversion348frames551KB.gif

VERSION1wTripspiralfx_Tripredacusanimatedavatar_simpleversion348frames551KB.gif

If you want me to fiddle with it a bit to suit you, I have my fiddle all tuned up.

Link to comment
Share on other sites

Winston Churchill (1874-1965) is one of my favorite historical figures, having led the United Kingdom during the Second World War. He has many famous quotes, and the one on the animated GIF userbar shown below is the one I like best, http://postimage.org/image/aagalialz/

Ani_MS_0_10sec_90unique_frames_255colors_350x19p.gif

This is a frame-by-frame animation: 90 unique frames, 0.10 sec display time per frame, 255 colors, 350x19px, 207 KB. A 6-frame animated GIF British flag and a JPEG of Churchill are scrolled vertically at a rate of 1px per frame.

This animation is similar to that presented in my Post # 338 (i.e., Usain Bolt) where an animated GIF and a JPEG are scrolled together. So, where I say "There were 2 main requirements in making this userbar" in that Post, that also applies to the animation in this Post.

In the Churchill animation, "Winston Churchill" (linked and merged on the background) disappears via opacity changes in the frame sequence 100%, 80%, 60%, 40%, 30%, 20%, and blue background (i.e., 0% opacity). The reappearance is simply the reverse of this frame sequence: 0%, 20%, 30%, 40%, 60%, 80%. and 100%.

I didn't use opacity changes to make the 3 lines of text on the blue background appear and disappear, since there weren't enough total frames in the animation.

The whole appear/disappear sequence is given by: 6 frames of the blue background, 13 frames of the first line of text, 6 frames of the blue background, 13 frames of the second line of text, 6 frames of the blue background, 13 frames of the third line of text, and 6 frames of the blue background.

I put a 1px medium-blue-gray stroke (i.e., outline) around the Churchill JPEG -- (of course, I had removed the background first) -- and around each of the 6 frames of the British flag GIF so that these images would show up well when on the dark blue background.

Andthatsalltherewastoit.gif

--------------------------------------------------------------------------------------------------------

A few more Winston Churchill quotes:

"Never, never, never, never give up."

“Courage is what it takes to stand up and speak; courage is also what it takes to sit down and listen.”

“A pessimist sees the difficulty in every opportunity; an optimist sees the opportunity in every difficulty.”

“I may be drunk, Miss, but in the morning I will be sober and you will still be ugly.”

--------------------------------------------------------------------------------------------------------

Edited by larryb123456
Link to comment
Share on other sites

In dencorso's Post # 816 in the "What Are You Listening To?" thread, he presented an 8-frame transparent GIF emoticon of a musical group having a drummer, a singer, and 2 guitarists.

I wanted to make an animation using this emoticon relevant to Brazil, since that is where dencorso is from.

The musical emoticon had a great deal of yellow in it, and I balanced it out by using a lot of green, since green and yellow are the main colors on the pretty Brazilian flag.

FYI, on the flag the green represents the forests of the country and the yellow rhombus its mineral wealth.

So I wanted to make the green background interesting, and perhaps evoke "forest" or "vegetation".

In the background: 1) I used a green, linear gradient fade, darker at the top; 2) I gave it a grainy texture; 3) I used a scanline pattern; and 4) on top of all this I used an ellipse layer at the upper part of the image.

I'm pleased at how this background turned out.

I imprinted the part of the flag with the yellow rhombus on a heart shape via Photoshop Clipping Paths, and gave it a 1px yellow stroke (i.e., outline) so that the green part of the heart would show up well on the green background.

The results are shown below.

In the order of increasing complexity, I present a static JPEG, an 8-frame animation with no letter pulsations, and a 64-frame animation with letter pulsations.

All the images are 190x60px.

The animated GIFs are frame-by-frame, the display time per frame is 0.10 sec, and 255 colors are used.

--------------------------------------------------------------------------------------------------------

JPEG, 36 KB, http://i1196.photobucket.com/albums/aa403/larryb123456/RockininBrazilstaticJPEGimage.jpg

RockininBrazilstaticJPEGimage.jpg

--------------------------------------------------------------------------------------------------------

8-frame animation with no letter pulsations, 17 KB, http://i1196.photobucket.com/albums/aa403/larryb123456/AniRockininBrazil010sec8frames255colors190x60pxOOED17KB.gif

AniRockininBrazil010sec8frames255colors190x60pxOOED17KB.gif

--------------------------------------------------------------------------------------------------------

64-frame animation with letter pulsations, 87 KB, http://i1196.photobucket.com/albums/aa403/larryb123456/AniRockininBrazil010sec64frames255colors190x60pxOOED87KB.gif

AniRockininBrazil010sec64frames255colors190x60pxOOED87KB.gif

--------------------------------------------------------------------------------------------------------

Andthatsalltherewastoit.gif

--------------------------------------------------------------------------------------------------------

Edited by larryb123456
Link to comment
Share on other sites

--------------------------------------------------------------------------------------------------------

Preface:

The following really doesn't have a direct connection to the main aspects of this Post, but I thought I'd include it for possible interest and amusement. It ties in with Andy Warhol's famous quote, "Art is what you can get away with." The world-renowned artist Robert Rauschenberg (1925-2008) was famous for making what he called Combines, which were simply mixed media and/or assemblages. He picked up trash and found objects that interested him on the streets of New York City and brought these back to his studio where they could become integrated into his work. Oftentimes he put restrictions on himself, such as saying that he would only use what he found in a 1-square-block area. Perhaps his most famous Combine was Monogram, whose main feature was a taxidermied angora goat, dabbed with oil paint, and stuffed through a tire.

In my last Post, I used an emoticon provided by dencorso. I wanted to make an animated GIF userbar involving emoticons, which can be downloaded from many internet sources. But, like Rauschenberg, I chose to put the restriction on myself that I would only use what is available from the MSFN text editor. (This explains, I hope, the inclusion of the above paragraph.) So, the rest of this Post shows my result.

--------------------------------------------------------------------------------------------------------

http://postimage.org/image/6dakhroqn/

Ani_MS_UB_0_20sec_28unique_frames_255colors_350x.gif

This is a frame-by-frame animation: 28 unique frames, 0.20 sec display time per frame, 255 colors, 350x20px, 64 KB. The emoticons are in a 4-frame animated GIF. "Emot", "Icon", and "Fan" move up and down at the rate of 2px per frame.

I'll go into some detail as to the construction of this animation just in case someone is interested.

Constructing the 4-frame animated GIF for the 9 emoticons:

Most of the emoticons were 4-frame GIFs, as downloaded from MSFN. If I wanted to use a GIF that had more than 4 frames, I simply deleted some of the similar frames so that I wound up with 4 frames. For each GIF, I saved each of the 4 frames as a .psd file, and drew a red horizontal line on the top and bottom of each frame -- (extending the width of the frame) -- for registration purposes. The height of each GIF, excluding the red lines was 18px, so I wound up with an animation 20px tall. I used the "Welcome" emoticon on each side of the animation, so I simply made the right side "Welcome" from the left side by flipping it horizontally and "staggering" the frame sequence.

So, I made Frame 1 showing the 9 emoticons by first positioning frame 1 of each of the component emoticon GIFs as they are seen in the above animation. Then I made Frame 2 by aligning frame 2 of each of the 9 component emoticon GIFs relative to each respective frame 1 of Frame 1. (This is where the red registration markers were invaluable.) I did this for Frame 3 and Frame 4. Once I had everything positioned for each of the Frames, I linked and merged the 9 component emoticon GIF frames for each individual Frame to wind up with a 4-frame GIF for the main animation showing the 9 emoticons.

Construction of the frames for the "bouncy text":

Refer to the JPEG diagram below, http://postimage.org/image/k1u4p8lyx/

making_bouncy_text.jpg

Consider the top part, outlined in red. It should be clear that *all* the information necessary to construct bouncy "Emot", "Icon", and "Fan" is contained in the 5 rectangles shown. "0" refers to the "baseline position", where no movement up or down is happening. I moved the 3 phrases up and down in increments of 2px per frame. Each rectangle is labeled with the amount of pixels moved relative to the baseline position.

Now consider the bottom part, outlined in red. This shows the 4 rectangles (i.e., frames) having the bounce for "Icon" from the baseline position -- (i.e., labeled 2px, 4px, -2px, and -4px). I'll discuss how the top frame for a 4px movement up from the baseline is made. (The procedure is exactly the same for the other movements.) "0" in the bottom red-outlined rectangle is made from "0" in the top red-outlined rectangle by erasing "Icon". If we erase "Emot" and "Fan" from the 4px rectangle in the top red-outlined rectangle, we are left, of course, with "Icon" moved up 4px from the baseline. If we then take this frame and link and merge it with "0" in the bottom red-outlined rectangle, we arrive at the desired result, that being the frame labled 4px in the bottom red-outlined rectangle. This frame, of course, shows a 4px bounce of "Icon" up from the baseline. Examination of the bottom red-outlined rectangle shows that there are just 4 unique positions for the "Icon" bounce, again, these are labeled 2px, 4px, -2px, and -4px. This is the same for "Emot" and "Fan". So, we have 3 phrases and 4 positions in the bounce for each phrase for a total of 12 frames describing bounces. When we add the baseline position, this gives a total of 13 frames to describe the whole scenario.The frame sequence describing the complete motion in the bounce of a phrase is 2px, 4px, 2px, "0", -2px, -4px, -2px, and "0". Thus, it takes 8 frames to make each phrase bounce.

The rest of the details are comparatively simple and relatively straight-forward, and they have more-or-less been discussed in earlier Posts.

Andthatsalltherewastoit.gif

Edited by larryb123456
Link to comment
Share on other sites

There are numerous websites that offer free animated GIFs of letters in different styles. I saw a "wavy-letter" version that I liked, in which each letter was a 10-frame animated GIF with a transparent background. Here is what the "B" looks like (I put it on a white background for illustrative purposes), http://postimage.org/image/6uwawejcb/

z_B_for_bphlpt_0_10sec_10frames_255colors_45x30px.gif

The display time is 0.10 sec per frame, 255 colors, 45x30px, 6.0 KB.

I thought I'd make an animation for bphlpt using these letters. I knew that he *always* wanted the .psd files and complete documentation of the work that I do for him. So, as I made this animation, I wrote down all the steps. Normally I don't work as I've outlined below, since I often combine lots of steps in a file and it's somewhat hard for another person (and even me...lol) to follow. But here, I layed out the steps in such a way that even Forrest Gump, in a coma, could understand them.

Step 1: Open the GIF for each letter and save the 10 frames as .psd files. Draw 1px wide red horizontal red lines at the top and bottom of each frame for the purpose of registration (i.e., proper alignment of the letters later).

Step 2: Make a new .psd file, at a convenient size, say 300x100px, on a white background. Name the file "Frame 1 of the 10-Frame bphlpt animated GIF".

Step 3: Open frame 1 of each of the letters b, 1st.p, h, l, 2nd.p, and t and drag each of these frames into the new file of Step 2, "Frame 1 of the 10-Frame bphlpt animated GIF". Align each of the frames so that the horizontal red registration lines are at the same vertical position. Adjust the spacing between the letters to get a pleasing look. Save "Frame 1 ... GIF". Do successive "Save as" and create "Frame 2 ... GIF", "Frame 3 ... GIF", "Frame 4 ... GIF", "Frame 5 ... GIF", "Frame 6 ... GIF", "Frame 7 ... GIF", "Frame 8 ... GIF", "Frame 9 ... GIF", and "Frame 10 ... GIF".

Step 4: Link and merge the letters b, 1st.p, h, l, 2nd.p, and t in "Frame 1 ... GIF" to get "FRAME 1 of the 10-Frame bphlpt animated GIF".

Step 5: Open frame 2 of each of the letters b, 1st.p, h, l, 2nd.p, and t and drag these frames into "Frame 2 ... GIF". Align b from frame 2 with b from frame 1 (horizontal center and vertical center). Repeat this alignment sequence for the remaining frame 2 letters 1st.p, h, l, 2nd.p, and t. Once all the frame 2 letters have been aligned, link and merge them to create "FRAME 2 of the 10-Frame bphlpt animated GIF".

Step 6: Open frame 3 of each of the letters b, 1st.p, h, l, 2nd.p, and t and drag these frames into "Frame 3 ... GIF". Align b from frame 3 with b from frame 1 (horizontal center and vertical center). Repeat this alignment sequence for the remaining frame 3 letters 1st.p, h, l, 2nd.p, and t. Once all the frame 3 letters have been aligned, link and merge them to create "FRAME 3 of the 10-Frame bphlpt animated GIF".

Step 7: Open frame 4 of each of the letters b, 1st.p, h, l, 2nd.p, and t and drag these frames into "Frame 4 ... GIF". Align b from frame 4 with b from frame 1 (horizontal center and vertical center). Repeat this alignment sequence for the remaining frame 4 letters 1st.p, h, l, 2nd.p, and t. Once all the frame 4 letters have been aligned, link and merge them to create "FRAME 4 of the 10-Frame bphlpt animated GIF".

Step 8: Open frame 5 of each of the letters b, 1st.p, h, l, 2nd.p, and t and drag these frames into "Frame 5 ... GIF". Align b from frame 5 with b from frame 1 (horizontal center and vertical center). Repeat this alignment sequence for the remaining frame 5 letters 1st.p, h, l, 2nd.p, and t. Once all the frame 5 letters have been aligned, link and merge them to create "FRAME 5 of the 10-Frame bphlpt animated GIF".

Step 9: Open frame 6 of each of the letters b, 1st.p, h, l, 2nd.p, and t and drag these frames into "Frame 6 ... GIF". Align b from frame 6 with b from frame 1 (horizontal center and vertical center). Repeat this alignment sequence for the remaining frame 6 letters 1st.p, h, l, 2nd.p, and t. Once all the frame 6 letters have been aligned, link and merge them to create "FRAME 6 of the 10-Frame bphlpt animated GIF".

Step 10: Open frame 7 of each of the letters b, 1st.p, h, l, 2nd.p, and t and drag these frames into "Frame 7 ... GIF". Align b from frame 7 with b from frame 1 (horizontal center and vertical center). Repeat this alignment sequence for the remaining frame 7 letters 1st.p, h, l, 2nd.p, and t. Once all the frame 7 letters have been aligned, link and merge them to create "FRAME 7 of the 10-Frame bphlpt animated GIF".

Step 11: Open frame 8 of each of the letters b, 1st.p, h, l, 2nd.p, and t and drag these frames into "Frame 8 ... GIF". Align b from frame 8 with b from frame 1 (horizontal center and vertical center). Repeat this alignment sequence for the remaining frame 8 letters 1st.p, h, l, 2nd.p, and t. Once all the frame 8 letters have been aligned, link and merge them to create "FRAME 8 of the 10-Frame bphlpt animated GIF".

Step 12: Open frame 9 of each of the letters b, 1st.p, h, l, 2nd.p, and t and drag these frames into "Frame 9 ... GIF". Align b from frame 9 with b from frame 1 (horizontal center and vertical center). Repeat this alignment sequence for the remaining frame 9 letters 1st.p, h, l, 2nd.p, and t. Once all the frame 9 letters have been aligned, link and merge them to create "FRAME 9 of the 10-Frame bphlpt animated GIF".

Step 13: Open frame 10 of each of the letters b, 1st.p, h, l, 2nd.p, and t and drag these frames into "Frame 10 ... GIF". Align b from frame 10 with b from frame 1 (horizontal center and vertical center). Repeat this alignment sequence for the remaining frame 10 letters 1st.p, h, l, 2nd.p, and t. Once all the frame 10 letters have been aligned, link and merge them to create "FRAME 10 of the 10-Frame bphlpt animated GIF".

Step 14: We now have all 10 FRAMES of the bphlpt wavy-letter animation. It is a good idea to test the animation, just to make sure everything is copacetic. The FRAMES are on a transparent background, but for the test I put them on a white background as 10 JPEGs. Here is the result, which looks good, http://i1196.photobucket.com/albums/aa403/larryb123456/zbphlpttestanimation010sec10frames255colors193x30px27KB.gif

zbphlpttestanimation010sec10frames255colors193x30px27KB.gif

Step 15: In looking ahead to putting the animation on a colored background, I made a JPEG of FRAME 1 on a black background, http://i1196.photobucket.com/albums/aa403/larryb123456/zzFRAME1onablackbackground.jpg

zzFRAME1onablackbackground.jpg

As you can see, the letters have a rough outline of light-colored pixels, which means that the final animation can't be put on a dark background. It needs to be a color light enough so that these problematic outline pixels don't show up.

Step 16: Make a new .psd file, 300x100px, on a white background. Name the file "Animation Frames". Drag FRAMES 1 through 10 into this file and align them relative to the background (horizontal and vertical centers), for convenience. Make only FRAME 1 visible, to remove the "visual congestion" from the overlapping layers below. In this file the red registration lines are removed and the background for the animation is made. I thought the animation in Step 14 above made the letters look somewhat like they were "swimming", so I keyed the background to blue. First, I made a vertical linear linear gradient fade, with the blue being lighter in the middle. Then I textured this layer, added white 3px spacing forward facing scanlines, and an ellipse layer at the top. I made the background to be a 2-frame animated GIF with moving scanlines to further disguise the fact that the bphlpt letters have those irregular light-colored pixels around the letter border. I made this background GIF as follows: background "B" was made from background "A" by moving background A's scanlines to the left by 2px. Background A is used for the odd-numbered FRAMES, and background B is used for the even-numbered FRAMES. As these backgrounds alternate from frame to frame, the illusion of motion is created.

Here is the final result, http://i1196.photobucket.com/albums/aa403/larryb123456/final_bphlptwavyletters010sec10frames255colors194x50pxOOED72KB.gif

final_bphlptwavyletters010sec10frames255colors194x50pxOOED72KB.gif

Andthatsalltherewastoit.gif

Edited by larryb123456
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...