Due to popular demand (okay, a few “How’d you do that?” and “Cool animated avatar!” comments) I’ve decided to show you the steps I took to animate my PixelPainter avatar in Photoshop CS4; as well as the last few steps in putting your own animated avatar (GIF) up on your Twitter account. *Tip: It’s really just a matter of persistence – and don’t believe everything you’re told! 
I knew that my finished avatar needed to be square so I created a new Photoshop file and imported all the components I needed for my animation. In my case, it’s my company logo, as shown here, but with the designed Text, Arrow and Brush on separate layers in a Photoshop file. Then I scaled them to best fit the new file for the animation.
I opened the Animation palette and selected the Text layer as it was going to scroll across the panel horizontally. I decide that I want the animation to be 3 seconds in length so it’s not too big, so I condense the Work Area bar down to the 3-second mark. I then move the Time Indicator (TI) down to just short of the 1-second mark and set a keyframe for the first position by click on the Stopwatch next to the Text layer in the Animation palette. I then move the TI to the 2-second mark and click-drag on the text layer in the view panel until it goes off the left side and out of view. I can then scrub back and forth with the TI and watch my Text layer move.
I then moved on to the Arrow layer and animated it’s movement onto the “screen” in a similar way, adding keyframes on the Timeline of the Animation palette. I also animated the Opacity of the Arrow layer so it would appear to flash on/off rapidly to indicate a “click” event that starts the animation loop.
Next, I brought int he Arrow layer at the point of the animation where the blue “Painter” text starts to appear and “mocked” some brush stroke movement over time on the Timeline. *Note: I used the term “mocked” here, because to literally have the brush follow the strokes exactly over a 1/2 second period of time would merely generate a nasty blur. I know this because I tried it first!
I then add a fade at the end of my animation so it will appear to loop seamlessly going to white and then starting again in white. I select the Play button on the bottom of the Animation palette to preview the complete animation and make adjustments accordingly. This is a purely subjective process that you will have to spend some time with your own animation.
Once I was satisfied with my animation loop, I selected “Save for Web & Devices” from the File drop down menu. This opens up a new window with it’s own interface and all the tools/settings you’ll need to create an animated GIF from your Photoshop animation.
Obviously, the screen is a lot larger than the image above, so let me point out the important parts to consider…
First, be sure to select the GIF file format and choose “Selective” color. This will force the colors used to a specified amount, based on the most predominant colors in your avatar. Set the number of colors down to 64 to start. You may be able to reduce the number of colors depending on your animation design, and this will make your finished animation smaller in size and load quicker on a web page. Less is more with animated GIF files! Note that this may make your avatar look funny or posterized. Just increase the number of colors until it looks acceptable. But also be cautious of the next step that follows…
Next keep an eye on the lower-left corner of the window as you’re making the adjustments to Color, Dither and Lossy settings. These will greatly affect final file size!
If you know that your animation has to be a specific size for your forum or social community portal, then the bottom right corner is where you can make these adjustments by pixel size or percentage. You can also chose whether or not you want your animation to loop forever or a specified number of times before stopping. These choices too, will affect the final size of your animated GIF.
I’ve used my animated avatars in several Web communities, so I needed several different sizes. This was the easiest way to get all the different sizes from the one larger master Photoshop file.
Twitter Users:
Here’s a tip about getting your animated avatar into Twitter! (remember, persistence is the key – and a bit of patience)
First go to your Settings page in your Twitter account (you must be logged-in of course) and select the “Picture” tab. Click on the Browse button to locate your animated GIF on your hard drive and select “Save”.
More than likely it won’t work on the first try. You will get one of a few different error messages, such as the one shown below stating that “Twitter is over capacity.” It’s probably just their way of discouraging people from using animated GIFs for avatars – or maybe just a bugging infrastructure, but nonetheless – don’t be fooled by the error messages! This is where both persistence and patience come in. Like trying to get a “human” to talk to from the cable company, you have to keep trying… Over and over and over until eventually – Viola! It sticks!! 
To see my Twitter profile with the avatar in action, CLICK HERE!
. . .
