Jump to content
Strawberry Orange Banana Lime Leaf Slate Sky Blueberry Grape Watermelon Chocolate Marble
Strawberry Orange Banana Lime Leaf Slate Sky Blueberry Grape Watermelon Chocolate Marble

MSFN is made available via donations, subscriptions and advertising revenue. The use of ad-blocking software hurts the site. Please disable ad-blocking software or set an exception for MSFN. Alternatively, register and become a site sponsor/subscriber and ads will be disabled automatically. 


custom avatars and signatures

Recommended Posts

Very Cool, Larry! And thanks for anticipating my request for full documentation. LOL Seriously, I only use it for backup, as you have had to take advantage of before, but this way if I ever need to try and do anything like this myself I'll have guidance from an expert in place to learn from. Many thanks.

Cheers and Regards my friend

Share this post

Link to post
Share on other sites

In my Post # 345, I made bphlpt a "wavy-letter" animated GIF.

I'm going to continue my "vacation" from making userbars by making another animation for bphlpt, using an 8-frame "rotating-letter" animated GIF (which was on a transparent background) that I like. Here is what the "B" looks like (I put it on a white background for illustrative purposes), http://postimage.org/image/s3goudtnp/


The display time is 0.10 sec per frame, 255 colors, 60x60px, 6.3 KB.

As you can see from this animation, the width of the letter varies from frame to frame as the letter rotates -- (unlike the wavy letters) -- so I'll have to use a different approach than in my last Post.

Again, I'll detail the steps, thoroughly -- (even to the point of naming all the .psd files) -- for bphlpt's benefit, in case he ever needs to "revisit" this project.

Step 1: Open the GIF for each letter and save the 8 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 with a white background, 400x150px, named A_adjusting.bphlpt.letter.spacing.psd. Drag all 8 frames of b into this file, align them (horizontal and vertical centers), and link them so that they can move as a unit. Repeat this procedure for 1st.p, h, l, 2nd.p, and t. Now, since all 8 frames of each letter are stacked, aligned, linked, and visible, we can see the extreme left and right side positions for each letter as they rotate. Position the 6 letter units to get a pleasing spacing for spelling out "bphlpt". Save A_adjusting.bphlpt.letter.spacing.psd. This is what it looks like on a white background (the red registrations lines are still included at this point), http://postimage.org/image/ij1isg6u5/


Step 3: Save A_adjusting.bphlpt.letter.spacing.psd as B_animation.frames.for.rotating.bphlpt.letters.psd. Link and merge all the frame 1s of b, 1st p, h, l, 2nd p,and t to get FRAME 1 of the bphlpt rotating-letter animated GIF. Link and merge all the frame 2s of b, 1st p, h, l, 2nd p,and t to get FRAME 2 of the GIF. Proceed similarly to get FRAMES 3 through 8 of the GIF.

Step4: Now we can consider the background and border for the animation. Save "B_...letters".psd file and do a "Save as" to get C_FINAL.ANIMATION.FRAMES.psd. Delete all the "extraneous" layers to isolate FRAMES 1 through 8. Crop out the red registration lines and then increase the canvas size to 400x150px with the cropped portion centered on the canvas. Make only FRAME 3 visible in the layers stack to eliminate "visual congestion". (FRAME 3 shows a rotated view of the bphlpt letters which has a complete "inventory" of the pixels in the letters. If we make an acceptable background for FRAME 3, it will be acceptable for all the other FRAMES.) I used a light cream-colored background -- (a light-gray background competed with the letters) -- gave it a little texture, and added a hint of some scanlines and an ellipse layer to get the following 278x73px 8-frame animated GIF, which has a display time of 0.10 sec per frame, 255 colors, and 98 KB, http://i1196.photobucket.com/albums/aa403/larryb123456/rotating-letteranimation010sec8frames255colors278x73pxOOED98KB.gif


Step 5: I really don't like the way all the letters are in sync as they rotate back and forth. The image is just too predictable. I wondered how a little "staggering" in the frame sequences would make the animation look. The starting point is to go back to Step 2, open "A_adjusting.bphlpt.letter.spacing.psd." and save as "D_staggered.rotating.bphlpt.letters.psd".

I applied the following staggering scenario:

In the notation, the number to the left of the arrow for each letter represents the present frame number (i.e., that used to get the results shown in the above animation) while the number to the right of the arrow represents the newly assigned frame number. That is, X-->Y is read "frame X becomes frame Y".

for the b frames: they stay as they are

for the 1st.p frames: 3-->1, 4-->2, 5-->3, 6-->4, 7-->5, 8-->6, 1-->7, 2-->8

for the h frames: 6-->1, 7-->2, 8-->3, 1-->4, 2-->5, 3-->6, 4-->7, 5-->8

for the l frames: 8-->1, 7-->2, 6-->3, 5-->4, 4-->5, 3-->6, 2-->7, 1-->8

for the 2nd.p frames, 5-->1, 4-->2, 3-->3, 2-->4, 1-->5, 8-->6, 7-->7, 6-->8

for the t frames: 2-->1, 1-->2, 8-->3, 7-->4, 6-->5, 5-->6, 4-->7, 3-->8

After the staggering, save "D_staggered.rotating.bphlpt.letters.psd" and save as "DA_staggered.rotating.bphlpt.FRAMES.psd".

Step 6: Repeat Step 3 above for the staggered frames b, 1st.p, h, l, 2nd.p, and t. Save "DA_staggered.rotating.bphlpt.FRAMES.psd" and save as "DB_staggered.rotating.bphlpt.final.FRAMES.psd". In this .psd file, use the background made in Step 4. The result of the frame staggering is shown below, http://i1196.photobucket.com/albums/aa403/larryb123456/rotating-letterstaggeredframesanimation010sec8frames255colors278x73pxOOED98KB.gif


The specs for this animation are identical to those for the above animation. The frame staggering gives a much better animation, in my opinion. I didn't anticipate the "H" and the "L" to be in sync, but I like it, since it provides a little "stability" to the animation. I felt that the pixel size of the image was a little large, so I made 2 additional versions by reducing it in my animator to 75% of the original size and then to 60% of the original size. (A smaller reduction than 60% lost too much detail in the letters.)

75%, 208x55px, 64 KB, http://i1196.photobucket.com/albums/aa403/larryb123456/rotating-letterstaggeredframesanimation75010sec8frames255colors208x55pxOOED64KB.gif


60%, 167x44px, 43 KB, http://i1196.photobucket.com/albums/aa403/larryb123456/rotating-letterstaggeredframesanimation60010sec8frames255colors167x44pxOOED43KB.gif


I really like the delicacy of the smaller images.




Edited by larryb123456

Share this post

Link to post
Share on other sites

In Post # 345 I presented an animation -- (194x50px, 255 colors, 72 KB) -- for a wavy-letter bphlpt, http://i1196.photobucket.com/albums/aa403/larryb123456/final_bphlptwavyletters010sec10frames255colors194x50pxOOED72KB.gif


In Post # 347, I made some smaller versions of a rotating-letter bphlpt, which I liked much better than the larger version.

So, I wondered how the wavy-letter bphlpt would look at smaller sizes. Here are the results:

at 75% of the size above, 144x37px, 51 KB,



at 50% of the size above, 97x25px, 18 KB



I definitely prefer the smaller sizes. They are like little jewels compared to the larger sizes.

Share this post

Link to post
Share on other sites

Dedication Larry. You're always striving for perfection!

Cheers and Regards

Share this post

Link to post
Share on other sites

The smallest animation at the bottom of my Post # 349 is the one I like best for the bphlpt wavy letters. Unfortunately, when my animator reduced the size down to 50% of the original size, it also removed the top and right-side parts of the border, as you can see. So, in this Post I'm presenting a corrected version, which was easy to make. I simply saved all 10 frames of the incorrect version as .psd files and corrected the borders in these files to make the correct version shown below, http://i1196.photobucket.com/albums/aa403/larryb123456/bphlptwavyletterscorrectborder010sec10frames255colors97x26pxOOED17KB.gif


Specs: 10 frames, 0.10 sec display time per frame, 97x26px, 255 colors, 17 KB.

Share this post

Link to post
Share on other sites

In my Post # 344, concerning emoticons, I made an animated GIF which uses "bouncy text".

I made another animation, concerning horse racing, which also uses bouncy text, http://i1196.photobucket.com/albums/aa403/larryb123456/AniMS010sec66uniqueframes255colors350x19pxOOED127KB.gif


This is a frame-by-frame animation: 66 unique frames, 0.10 sec display time per frame, 255 colors, 350x19px, 127 KB. 11-frame animated galloping-horse GIFs are scrolled vertically -- at a rate of 1 pixel per frame -- on each end of the userbar. "Horse", "racing", "fan", "atic", and "!!" move up and down at a rate of 2 pixels per frame.

I really like the galloping-horse GIF.

It is so smooth, it looks like a little movie.

All the aspects of vertically scrolling animated GIFs have been thoroughly covered in numerous earlier Posts.

I made all the bouncy text precisely as explained in Post # 344.



"A horse never runs so fast as when he has other horses to catch up and outpace."


"A horse gallops with his lungs, perseveres with his heart, and wins with his character."


"The horse I bet on was so slow, the jockey kept a diary of the trip."

Henny Youngman


Share this post

Link to post
Share on other sites

I saw an 8-frame animated GIF of a rotating Canadian flag that I liked, so I made an animated userbar with letter pulsations, http://i1196.photobucket.com/albums/aa403/larryb123456/AniMSUB007sec96uniqueframes255colors350x19pxOOED133KB.gif


This is a frame-by-frame animation: 96 unique frames, 0.07 sec display time per frame, 255 colors, 350x19px, 133 KB. 8-frame Canadian flag animated GIFs are scrolled vertically -- at the rate of 1px per frame -- on each end of the userbar.

All aspects of scrolling animated GIFs have been covered in numerous earlier Posts.



Share this post

Link to post
Share on other sites

In this Post, I'm presenting a little animated GIF mini-mini-mini "film" I made based on bphlpt's avatar, http://i1196.photobucket.com/albums/aa403/larryb123456/FinalOldMananimatedGIFavatar_100frames010sec255colorsOOED401KB-1.gif


This is a frame-by-frame animation: 100 unique frames, 0.10 sec display time per frame, 255 colors, 200x200px, 401 KB.

I tried different settings in my animator to see if I could reduce the KB file size without sacrificing image quality, and there were only 2 "acceptable contenders" which I'll present in my next Post, so that they don't compete visually with the animation presented in this Post.

I am the one who made bphlpt's present MSFN avatar, so I had all the Photoshop goodies I needed to get started.

In this Post, I'm going to present just a relatively brief -- (by my standards, lol) -- description of the steps I used to make the animation. I prepared a *totally complete* documentation for bphlpt, 53 MB (uncompressed), 27 MB (as a .zip file), with all the folders and files.

The most important aspect, the circling of the binary sphere, was done first and all other aspects were "piggy-backed" on top of this circling.

I made an aliased oval, 59x61px, and aligned the exact bottom-center of this oval relative to the center of the binary sphere as it is shown in bphlpt's avatar. Then I placed "position pixels" around the outside perimeter of this aliased oval with a spacing of 1px between pixels. It took 87 position pixels to complete the circling and return back to the starting point.

Then I made copies of the binary sphere and aligned a copy -- (horizontal and vertical centers) -- on top of each position pixel.

After the alignments, I deleted the position pixels, leaving all 87 binary spheres in place, characterizing the circular motion.

A test GIF for this circular motion showed that a 0.10 sec display time per frame worked great, which was good, since text effects, such as letter pulsations and "typing text", look good at this display time.

As will be discussed later, I wanted to use a 25-frame animated GIF "halo" around the binary sphere as it moves, so I knew from the outset that there would be 100 frames in the animation, with the binary sphere being motionless from frames 87-100.

But first, I put an animated highlight on the binary sphere that gets brighter, then dimmer, then brighter, etc. I wanted it to be subtle, so I thought a 10-frame animation would work well. (The 10 frames in the highlight animation would be compatible with the 100-frame main animation total with regard to looping.)

A little experimentation showed that a highlight 10-frame sequence of Photoshop brightness=0,5,10,15,20,25,20,15,10,5 worked well, giving a result that was rather subtle.

In fact, if one weren't informed that the highlight was getting brighter, then dimmer, then brighter, etc., one wouldn't even notice it in the above animation.

That's OK, IMO, because a brighter highlight would be out of place.

In incorporating the highlights into the circular motion of the binary sphere, brightness versions 5,10,15,20,25 were made and copies of these versions were aligned relative to the appropriate binary sphere positions.

After the alignments, the binary spheres were deleted, leaving the binary-sphere positions with highlights.

The 25-frame animated GIF that I wanted to make a binary-sphere "halo" from is shown here -- as "yellow flames halo" -- after resizing (so that it wouldn't overshadow the sphere), http://i1196.photobucket.com/albums/aa403/larryb123456/01_yellowflameshalo_25frames010sec255colorsOOED170KB.gif


The display time per frame is 0.10 sec, and the GIF looks good, so I knew it would fit in well with the 0.10 sec per frame display time of the main animation.

But it is clear that the yellow and orange are out of place in the color scheme of bphlpt's avatar.

This was corrected after a yellow flames halo was first made around the binary sphere, by using the following steps: the appropriate halo squares shown above were aligned -- (vertical and horizontal centers) -- under the appropriate positioned binary spheres and then the black backgrounds of the halo squares were removed using the Magic Wand Tool (Tolerance:32, Anti-aliased setting).

The colors of the yellow flames halos were changed in 2 steps: 1) the layers were desaturated; 2) a Color Balance was applied according to [blue(+100)] for the Midtones and [blue(+100), Green(+50)] for the Highlights.

I really like the blue halo around the moving binary sphere. It looks like "vapor" to me.

I moved the mushroom back and forth on The Old Man's beard during frames 87-100, when the binary sphere was stationary at its bottom-most position. That is a total of 14 frames.

After a little experimentation, I found a scenario that works out well: the mushroom moves in increments of 3px up and 3px over to the left per frame on the way to the Old Man's nose, and then those exact movements are reversed on the way back to the starting point, which is the position shown in bphlpt's MSFN avatar.

Denote this starting point by position0.

Only 3 other unique positions of the mushroom are required to completely characterize the mushroom's motion on The Old Man's beard. Denote these positions by position1, position2, and position3.

So, the following "associations" are made: frame87, position0; frame88, position1; frame89, position2; frame90,position3; frame91, position2; frame92, position1; frame93, position0; frame94, position1; frame95, position 2; frame96, position3; frame97, position2; frame98, position1; frame99, position0; and frame100, position0.

This position sequence allows for the mushroom to move forward and back 2 different times.

The reason the mushroom moves quickly, of course, is that it is moving in large pixel increments per frame. With the 3px up (or down) and 3px over to the left (or right) motion described above, the Pythagorean Theorem gives the diagonal distance in pixels that the mushroom moves per frame as (32 + 32)1/2 = 4.24.

I think that this rapid mushroom motion is in good contrast to the slower motion of the binary sphere.

It was just luck -- (i.e., God's reward to me for working so hard on this animation......lol) -- that the 14 frames (i.e., frames 87 through 100) allow the mushroom to move forward and back on the beard twice, before the binary sphere starts moving again.

The simplest way to finish this discussion is to list what occurs in each frame and the rationale behind it.

I knew that I wanted <coding/>since time<began/> to "disappear" via opacity changes -- (as I've done in earlier Posts) -- in the 9-frame opacity sequence of 90%, 80%, 70%, 60%, 50%, 40%, 30%, 20%, and 10%. After that 10% frame, only the background would be seen where that lettering had been.

I knew that I wanted <coding/>since time<began/> to then appear as if it were "typed in", one character at a time, after "X" frames showing only the background.

This "typing" would require 26 frames since this text has 26 characters.

I tried "X"=20 frames -- (and the "math" dictated that <The Old Man/><coding/>since time<began/> would remain at 100% opacity for 45 frames) -- and a test GIF showed that this worked well.

I centered these 45 frames around frame 93 so that the disappearance and typing of <coding/>since time<began/> would not compete for attention with the mushroom moving back and forth on The Old Man's beard. (Recall that the mushroom moves in frames 88-99.)

So, the frame scenario is as follows:

frames 71-15 (i.e., frames 71-100 and frames 1-15): 45 frames of 100% opacity <The Old Man/><coding/>since time<began/> centered around frame 93. (For these frames, I made the letter color the same as that of the outline around "bphlpt".)

frames 16-24: 9 frames for <coding/>since time<began/> to disappear in an opacity sequence of 90%,...,10%.

frames 25-44: 20 frames with just <The Old Man/>.

frames 45-70: 26 frames in which <coding/>since time<began/> appears (i.e., is "typed in") one character at a time.

As a final touch, I "pulsed" the letters in <The Old Man/> during frames 29-40. This centers the pulsing in the 20 frames during which <coding/>since time<began/> is not present.



The secret to film (or an animated GIF) is that it's an illusion.

George Lucas

The italicized parenthetical was added by me.


Edited by larryb123456

Share this post

Link to post
Share on other sites

I tried other settings in the animator to see if the file size could be reduced without sacrificing image quality.

There were only 2 other setting combinations that gave acceptable results:

100 unique frames, 0.10 sec display time per frame, 127 colors, OO, ED, 337 KB, http://i1196.photobucket.com/albums/aa403/larryb123456/FinalOldMananimatedGIFavatar_100frames010sec127colorsOOED337KB-1.gif



100 unique frames, 0.10 sec display time per frame, 255 colors, OO, NC, 330 KB, http://i1196.photobucket.com/albums/aa403/larryb123456/FinalOldMananimatedGIFavatar_100frames010sec255colorsOONC330KB-1.gif


In my opinion, I don't see any sense in using either of these animations since their file sizes (337 KB and 330 KB) are about the same as that of the top-quality animation shown in my last Post (401 KB).

Edited by larryb123456

Share this post

Link to post
Share on other sites

Very, Very Cool, Larry!

It really showcases a lot of the different treatments you have learned how to apply to an image since you've been playing with animated gifs. I really like the blue flame "halo". And you are right - the animated brightness highlight is nice and subtle. I'm honored that you chose my avatar to demo your continually growing skills. Keep up the great work!

Cheers and Regards my friend

Share this post

Link to post
Share on other sites

In this Post I present a different version for bphlpt's animated GF avatar, first shown in Post # 354, http://i1196.photobucket.com/albums/aa403/larryb123456/VerticallyMovingMushroom100frames010sec255colors200x200pxOOED405KB.gif


In this version, the mushroom moves down and then up, at the rate of 1px per frame, covering a distance of 7px in each direction of travel.

I guess it's a matter of the viewer's taste as to which version is "better".

I like the original, more-energetic version, in which the diagonally-moving mushroom "functions" as a slot-machine-handle-crank to get the stationary mushroom moving again.

Share this post

Link to post
Share on other sites

If you use the analogy that in the original version the mushroom acts like a slot-machine-handle-crank, then you could say that in this version the mushroom acts like a push-button or plunger, a more subtle approach which I like better.

Cheers and Regards

Edited by bphlpt

Share this post

Link to post
Share on other sites

Just wait until my next version, in which The Old Man eats both the mushroom and the binary sphere !!!

Just kidding. I'm finished with this one.

Share this post

Link to post
Share on other sites
Just wait until my next version, in which The Old Man eats both the mushroom and the binary sphere !!!

Well, that would require an effect similar to that Roger Rabbit gets from drinking, as a grand finale, IMO...

Share this post

Link to post
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.