How to Make Animated Emoticons

by ContributorUpdated September 28, 2017

Items you will need

  • ImageReady

  • Photoshop software (optional)

Emoticons add so much to the impersonal nature of email and instant messaging. They help build our relationships with other people on forums. When you cannot find the right animated emoticons to add depth to your message, you can make your own using Photoshop and ImageReady.

Draw Custom Emoticons for Email or the Web

Select file and new in Photoshop. Make the canvas 30 by 20 pixels. Then enlarge the view to 900 or 1000 percent so you can see it clearly.

Choose the pencil tool and draw a circle. Make the inside of the circle white.

Select the magic wand tool to begin shading your emoticon if you would like to. Then select the inside of the circle. Pick a color from the color palette for the point where the light will fall on the image and one for the color of the shade. This is usually yellow for smiley faces but can be any color of your choice.

Open the gradient tool and leave the gradient at its default value. Put your cursor in the upper right of the circle you drew and drag it toward the bottom left. Let go of the mouse. Your circle is now shaded.

Create a new layer for each animated section of your emoticons and draw them in. For example, if you want the eyes to blink, make one layer for open eyes and another layer for closed eyes. Draw in whatever other facial features you would like your emoticons to have. When you are done, click the ImageReady button to open ImageReady.

Animate Your Smiley Face Image

Choose the "window" button from the bar, and then click on "animation" if the animation screen does not appear right away.

Add two new frames to your animation by clicking the button in the bottom right corner of the window. This will duplicate the current frame. Click it again to get the third frame.

Click on the second frame to highlight it.

Look at the layers window. Anything that has an eye next to it is visible in the current frame. To make it invisible, you simply click on the eye. In the blinking eyes example, you would make the open eyes invisible in this frame by clicking on the eye next to its layer. You would make the closed eyes visible the same way. This would help make the eyes blink in this example.

Choose "forever" in the bottom left of the animation window as the amount of time you want the image to animate. Then choose how much time you want to show between frames. It could be as quickly as .1 second or as long as you want it. Play with this until you like how it looks.

Click the "test play" button (it looks like a triangle or arrow) to test it.

Click "file" and "save optimized as" when you are finished with your animated emoticons. Save the animation as a gif file.


If you do not have Photoshop, you can use other software to make animated gifs. EmoteMaker is one example. You can find any number of them on Download.com, such as Animator 9 (see Resources below). Or, use any gif animator to make animated emoticons.

More Articles