Make your own free website on

Creating An Animated GIF

Preparing The Image
Your actual animation will be made in ImageReady, but before you start, you need to have each indidual frame of the animation on it's own layer in PhotoShop.

For example, I want to create an animation that consist of these frames:

First, I put all my frames on a different layer.

When the layers are set up, I pressed the "Jump To Image Ready" button on the toolbar. This will bring open the ImageReady 3.0 program that comes packaged with PhotoShop 6.0. It may take a moment to open.

With ImageReady open you are ready to animate. If the animation tab is not displayed, go to window > show animation.

This animation will have 3 frames, so I need to make 2 more frames in the animation window.

To do this you press the button that looks like the "new layer" button, located in the bottom-middle of the animation window. This actually duplicates the current frame. Since I want 2 frames, I'll press it twice.

First you highlight the first frame by pressing it, and turn off the visibilty (by pressing the "eyeball") in the layers palette for each layer, except the layer that contains the first frame.

Then, the second frame in the animation window needs to be highlighted. Now the visiblity needs to be turned off in the layers palette for each layer except the layer that contains the second frame.

The next step follows the same patteren. Highlight the third frame, and shut the visibility off all layers except the layer that contains frame 3.

There are more things that you can do with the animation, like controlling how many seconds between each frame, but I'm only covering basic animation here.

Before you save, you'll notice that there is an optimized patte in the upper-right corner (if not, go to window > show optimize). There you can specify the output settings for the GIF file, like you would when saving a regular gif. (See the Optimizing A Graphic As A GIF Tutorial).

When the animation is completed you go to file > save optimized as and select where you want the animation to be saved.

The output was this:

(...Pretty ridiculous looking, but it's for educational purposes dammit.)