Have a bunch of cartoon illustrations? Want to animate them? Then, this tutorial is for you. This tutorial uses Illustrator, Photoshop and finally ImageReady to make a simple animated gif. Don’t worry. It’s not as complicated as it sounds (you can just use Photoshop if you don’t have Illustrator).

I start with a cartoon I did in Illustrator. Check out my other cartoon tutorial page for Illustrator tutorials.

As I said in the intro, you can do these steps in Photoshop if you prefer.

Since I’m going to animate the eyes, I want them on a separate layer. To create a new layer, use the Create New Layer button on the Layers palette. Once I have my new layer with the eyes on it, I want to duplicate it. To do this, drag the layer onto the New Layer button.

Now, move the eyes to a new spot on the duplicated layer.

Continue to duplicate the layers and move the eyes around until you have all the steps in your animation. I chose to do only four. Obviously, the more steps you do, the more fluid your animation will be.

Next, I export my Illustrator file to a PSD file.

Make sure you have the Write Layers box checked. This will export your layers to Photoshop.

Open your new PSD file in Photoshop or you can open it directly into ImageReady. Since I forgot to convert my file to RGB, I have to open mine in Photoshop first and convert it. Go to Image > Mode > RGB to convert it. You can also convert it in Illustrator first. Go to File > Document Color Mode > RGB Color.

Next, open your file in ImageReady. Click on the button at the bottom of the Toolbar.

Once in ImageReady, you’ll notice the Animation palette. If not, open it at Window > Animation.

Your first frame in the animation is open, but you’ll need to eliminate the extra eyes in the Layer palette. To do this, simply uncheck the Visibility of the top three layers. That’s the little icon that looks like an eye to the left of the layer name.

Next, make your second frame with the Duplicate Current Frame button. After that, go back to the Layer palette and turn the first set of eyes off and the second on. Repeat this step until you have all four frames.

You can play test your animation in the Animation Palette. Just hit Play.

Also you can modify the time between frames.

When you’re satisfied with the animation, go to File > Save Optimized As. It will save the file as an animated gif. Finally, I usually open the file in my internet browser to see if it works.

Here’s the end result. OK, so it’s not exactly world class animation, but it makes a nice sized animated icon.