Guide to Animating Your Emoticons with Photoshop

I've worked with Photoshop and its effects on a regular basis for over eight years, quickly becoming the "go-to" expert for friends and family with photo retouching, enhancement, or other graphics needs. Over the years I've used a great deal of different Photoshop effects for different purposes, and have found ways to make utilizing the effects easier and more enjoyable for both the average and the advanced Photoshop user. In my last article I discussed how to make your own emoticon. Wouldn't it be great if you could animate it? Well, this article will show you how to make your emoticon come alive in any message board or other online medium.

(Disclaimer: I've had people ask me complex questions about getting into the professional photography business. While I have friends in the profession and know that Photoshop is a necessary tool for the modern photographer, I'm not in the business, so I can't answer related questions; I just have a knack for retouching the photos of friends and family and am familiar with the workings of the program.)

First, I assume you already have an emoticon created to animate. If not, check out my article on creating one. Open the .psd (Photoshop Document) file you want to work on. Picture what exactly you want to animate on the smiley. Will its mouth move, will it wink/blink at you? Figuring this out is crucial before you move on.

Lay out the different layers of the emoticon you're going to edit. Click on the layer where your first animation will take place. You have the choice of copying the layer and editing, or just redoing it in a separate layer. Decide if you want to do a simple action in two or three frames (winking's a good example) or something more elaborate. The easiest way to do this is to, uh, "layer" your layers into folders-also called layer sets. (Get used to seeing that word a lot.) Click on "Create a new layer set" on your Layers Palette, then name your folder after whatever animation you plan to give your smiley. Put all of your layers involved in the animation into the folder you just named.

The next step is to create separate layers for every new frame of your animation. You'll work on a single frame at a time. On the Tools Palette, hit "Jump to ImageReady." (This, as the sentence states, will import your image to Adobe's "ImageReady" box.) In ImageReady mode, make enough frames to match your number of layers for each set. Do you have two actions (a wink and a grin) with four layers each? You need to make four frames. In the first frame, you should only have the first layer of your action with the rest hidden. Copy that frame, then hide the first layers and reveal the second layers of each action. You're going to end up doing this for all of the layers. Remember, the key is to have as many frames as you do layers for every animation! If you don't, your emoticon won't animate.

Now you need to concentrate on the animation's delay. How fast do you want your emoticon to wink/blink/smile? Most animations look better with a fairly fast frame rate, so you'll probably want the delay time to be zero. You can add delay if you like, but that may make your animation look choppy. Looping is a little trickier; it's what happens when you want the emoticon to perform the same animation over and over. Select all but the last frame and copy them. Select the last frame, and click on the arrow in the Frames Palette. Click on "paste frames", then "paste after selection". Mind that you have only your last frame highlighted. This will make sure your new frames are chosen, although in reverse order (so your smiley will be able to repeat its action without any choppiness.) ImageReady is prepared for this: just click on the arrow a second time and click on "reverse frames". Your emoticon should now repeat itself backwards and forwards seamlessly.

Some people like to make a short delay before the emoticon repeats itself. If you're one of these people, just insert a delay of one or two seconds for the last frame before it repeats.