How To Make Animeted Gif Picture in Adobe Photoshop 7.0

    Video Tutorial

Picture Tutorial

Animation in Adobe Photoshop / ImageReady

Note: ImageReady is an application that used to come bundled with Photoshop. ImageReady has now been discontinued. As of version CS3, animation is done with the Photoshop Animation window.

This 5-page tutorial shows you how to create an animation using Adobe ImageReady. Animations can be exported as an animated GIF or Macromedia Flash file.

Animations are created using layers. The process involves creating a series of layers which will become the frames of the animation.

At the end of this tutorial we will have created an animated GIF like the one pictured here. This animation uses moving text, but the same principles apply to any type of animation including changing shapes, etc.

Step 1: Create the Layers

The first step is to create multiple layers, each of which will become a separate frame in the animation. Let's start with a very simple image consisting of a plain white background and a layer of text which we want to animate. We will animate the text so it starts above the image frame and moves down to end up in the middle.

Note: Layers can also be shared between frames — in this case the white background layer will appear in all frames.

We will create five extra layers so the animation will be six frames long. We will work backwards, creating the frames from number five to number one.

Right-click the "My Text" layer in the layer palette and select Duplicate Layer. A new layer is created called "My Text copy". Double-click the layer name and rename it "My Text 5".

Choose the move tool  from the toolbox. Make sure the "My Text 5" layer is still selected, then hit your up arrow several times until the text moves slightly upwards. In this case we hit the up arrow 12 times — you can see the result with both layers visible:

Repeat this process, i.e. create a duplicate of "My Text 5" called "My Text 4" and move it upwards the same amount. Keep repeating the process until you have a total of six text layers plus the background. Eventually you will have an image file which looks like this:

You can view individual layers by clicking (deselecting) all the eye icons in the layer palette except the one you want to see. View one layer at a time to see how the animation will unfold.

Step 2: Create the Animation Frames

Now that you have created the layers needed for the animation, you need to create the frames. If the Animation window isn't showing, select Window > Animation from the main menu. Then deselect the eye icon in all layers except "My Text 1" and the background. You should see something like this:

You can see one frame in the Animation window which looks just like the image, i.e. with the "My Text 1" layer visible.

Click the small arrow icon near the top right of the Animation window. This opens the flyout menu as shown below. Click New Frame.

A new frame will be created and added to the window like so:

With the new frame selected, go to the layers palette. Deselect the eye icon for the "My Text 1" layer and select the eye icon for "My Text 2". You should see something like this:

As you can see, the first frame still shows only the first text layer while the second frame now only shows the second text layer.

Keep adding frames and making the corresponding text layers visible until you have six frames. It should look like this:

You now have all the layers and all the frames needed for your animation.

Step 3: Setting the Animation Timing

At this stage your animation is almost complete. You can view it by clicking the triangular Play button in the animation window.

You will see that the animation plays very quickly and keeps repeating (looping). If you don't want the animation to loop, click the drop-menu in the lower left (which says "Forever" by default) and select "Once". Now when you play the animation it will play once and stop on the last frame.

The final step is to fine-tune the timing. Below each frame you will see a delay time in seconds. Click each of these and set the desired delay. In this way you can specify the exact time taken to display each individual frame.

Note: If you want an animation to repeat but not continuously (i.e. have a break between repeats), set the loop drop-menu to "Forever" and set a long delay on the last frame.

How it Looks

Below is the resulting animation, with the looping set to "Forever" and different times set for each frame. This isn't actually a nicely timed animation but we have done it like this so you can see the effect of the delay settings.

Step 4: Exporting the Animation

Now that you've finished the animation you need to export it. Note: If you just save the file, it will be saved as a layered Photoshop file (.psd).

There are two options: Saving optimized and exporting.

Saving as an Optimised GIF

From the main menu select File > Save Optimised As. This will give you the option to save as an animated GIF and/or to save as an HTML page. For a simple animation, just save as a GIF.

Export an Animation

In ImageReady 8 you can select File > Export, which gives you some additional options such as exporting as a Macromedia Flash file. This is very cool!

That's the end of this tutorial. If you have any questions or comments please post a message in the Graphics Forum.