Tuesday, January 23rd, 2018

Create an Animated Avatar in Photoshop CS4


PixelPainter Animated Avatar

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.
PixelPainter Logo

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!

. . .


9 Responses to “Create an Animated Avatar in Photoshop CS4”
  1. josh says:

    i am having trouble getting my .gif file to play when previewed, i saved it how you said but it wont play? it gives me three options after the screens above when i am choosing file location, it says save as type; HTML and images(html), images only(gif) and HTML only(html) i really need to get this done so any help would be appreciated….thanks

  2. Jeff says:

    Hi Josh – I’ll answer you directly via email… sounds like you might need a little help in saving the doc from Photoshop – not just animating it.

  3. Jeffrey says:

    So, Adobe stepped backwards from image ready and removed sizing as an option in animations, that has to be a monumental mistake in my books. I mean, size, angle, position and effect (like opacity) are the basics of any animation. What did I miss that the market leaders forgot the fundimentals of our work?

  4. Jeff says:

    I hear ya Jeffrey – though I’ve never been able to get Scale to work in ImageReady either. You WOUlD think that these basic features at least would be available! I did find a work-around though in CS4, and that is to convert the layer to a 3D Postcard layer which allows you 360ΒΊ rotation, scale and more – even if you’re working in a 2D environment! Just ignore all lights and shadows. Hope that helps – Jeff F.

  5. Geoff says:

    You make the assumption that we know how to open the animation palette. I am still looking for how to get to that. In the future, please start your how-to at a little lower level of ability. ;- ) thanks

  6. Jeff says:

    Wow – another “Geoff/Jeff” responds! πŸ™‚

    Sorry, but it really doesn’t get much simpler than this already… I don’t give full Photoshop basic training with my tips and tutorials, otherwise they would be over 100 pages long! You’ll find the Adobe Help covers a lot of basic information such as pallets and tools and where to find them/how to use them. My tips are always based on the readers having at least a basic command of an application, as you might see in my other posts.

    Good luck!


  7. Hanna says:

    I’m working on an animation in my photoshop CS4 (extended) and I’m having problems saving. And by problems, I mean I have about 6 seconds on animation and it won’t let me “Save for Web&Devices” I plan on this animation being about 2 minutes long, and was hoping to be able to share this first part for critique, but with it not allowing me to save it as a .gif is making that impossible. The option is there to save, its just gray and can’t click it.

    Help? Thanks!

  8. Jeff says:

    Hi Hanna –

    I’m sure there are size/length limitations to a frame animation in Photoshop, though I’ve not encountered them to date personally. Anything over a few seconds long and larger than about 100px in height I would refer to using Flash for animation instead. For something in the magnitude of what you’re creating, it sounds like an animated GIF probably isn’t your best option.


Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!