How to Create GIF Animations in Photoshop CS3

Difficulty: Moderately Challenging

Instructions

Things You'll Need:

Adobe Photoshop v.5.5 ~ CS4 with ImageReady or Fireworks extension
PC platform machine with MS Windows Vista or XP, any version
Mouse
Digital image editing and film animation experience helpful

Step 1

Photoshop animation window

Launch Photoshop. If you don't see the animation window, go to the main menu on the program window, choose Window > Animation on the drop-down list. The animation window will appear at the bottom of your screen. Drag any edges of the animation window to a size that is comfortable for you to work in.

You should see a similar window like the one above.
Step 2

Preference setting for the new animation

As for the file dimensions, you can start with a particular photo or with a new file (blank canvas). For beginners, let's do this one with a blank canvas. In the File menu from the main options, choose New. Enter values in the required fields along with other settings. Click OK.
Step 3

With practice, you can later start with an image file to make your GIF animation, just like mine. I started with a cropped image of an aircraft and pasted on a blue sky background in the animation window. Then I duplicated multiple times the sky background for each frame with the aircraft, and extended the playing time for each frame. When the "Play" button is pressed, the plane appears like in a continues path of flight. There are 24 frames total in the example.
Step 4

Photoshop creates a new layer for you, and names it "0" by default. With that in mind, each subsequent layer will become a new object to manipulate within your animation window. Furthermore, subsequent layers can be placed (with your choice) on any level in the Layers palette, not necessarily in the order they were created.
Step 5

We now take a look at the most important feature of the animation window: along the top of the animation box is the project timeline and time for each frame. You can click and drag the timeline to decrease or increase the length of the project. The same is true of each frame (layer). You can set when each frame (layer) appears and for how long. And again, the frames do not necessarily be in sequence in which they were placed in the Layers palette. You also have the ability to repeat any frame (layer) multiple times in any point of your animation.

You can create time-lapse for each frame in the Layers palette. On the layers they appear as blank (white spaces), while the animation palette shows those empty layers in "time".

Each layer will appear on the animation window as its own frame (or line) in the montage.
Step 6

To get familiar of the function buttons, land your mouse cursor without clicking the icons on the bottom of the animation window; description of each icon will show near the cursor.
Step 7

Select the "Convert to Frame Animation" button at the bottom right of the animation window.
Step 8

Frame 4

Now the animation window has changed. Each frame in this window represents a single frame in the total animation montage. What you see in the frame is what you will see for that moment in the final animated film. Remember "WYSIWYG"; what you see is what you get. Each frame in the montage can be individually manipulated.
Step 9

Frame 7

You can set the time for each frame by clicking the "fly-out" menu on each frame plus other options, instead of dragging the timeline as a whole.
Step 10

Frame 10

Say you want to create a 10 frame sequence, click the Duplicate Frame button located at the bottom of the animation window near the center.

The run time you set on the first frame is copied, too. You can change the timing on the second frame and the following frames as well. For the next 8 frames, repeat process in this Step from the beginning.
Step 11

Frame 14

So you created all the needed frames and have added all the necessary layers. Next, you just need to designate each frame on which layers to show.

First select a frame. In the Layers palette, click the "eye" icon to the left of each layer you do not want the frame to appear in the animation (like when you work with regular image editing in Photoshop). If you see the eye icon, you see the layer, hence the frame. Do this for any frame in the montage.
Step 12

Frame 18

To preview your animation/film, just select to highlight the first frame, press Play. If you want to see it repeated like that in an endless loop, click the Forever button on the drop-down list below the first frame.

Project done. Save the animation, and then load it up onto your blog or website using HTML script. As you can see, this is very useful for making those scrolling articles, rotating ads and photos, or widget messages for your site.