Creating Animated GIFs: Making Frames


This portion of the workshop assumes that the user has a rudimentary knowlege of Adobe Photoshop.

First, find a graphic that you want to animate in some way. Some easy examples are making an object move against a static background, changing the size or color of an object, or making text change in some way.

Photoshop's layering feature makes moving an object easy; this is what we will use as our example. It is best to create all the frames needed for the animation before flattening the images and saving them in GIF format. Here is the step-by-step process:
  1. Start up Photoshop and open a New file. Make it the size you want your final animation to be. Put whatever objects you want in the background.
  2. Paste an object over the background. Notice that pasting creates a new layer (Layer 1). This is very useful, as the new layer can be moved around without disturbing the graphics underneath.
  3. Save the picture in Photoshop format. Name it frame1. Hint: make a separate folder to hold your frames.
  4. Move Layer 1 a little bit.
  5. Choose Save As... from the File menu and save the new picture as frame2.
  6. Repeat steps 4 and 5 until all the frames for your animation are made. Make sure to name the frames consecutively for easier use later.
  7. For each frame that you've created, you must do the following steps:
    1. Open the frame in Photoshop
    2. In the Image menu go down to Mode and choose Index from the sub-menu. Go along with Photoshop's suggestions as to the color palatte.
      (For those who wish to learn more about optimizing the graphic, see chapter 3 of Creating Killer Web Sites by David Seigel.)
    3. Choose Save As... from the File menu and change to Compuserve GIF format. You will have to click OK to replace the existing file.
    4. Close the frame.
    The easiest way to perform the above is to open all the frames at once by selecting them all in the finder and dropping them onto the Photoshop icon. You can then specify a new Action to automatically change the mode of a file, save it as GIF format and close it. Run this new action on each open file.

At the end you have a folder of frames in GIF format that are ready to be combined into an animated GIF!

Learner's Guide | Background Reading | Download Frames
Putting Frames Together | Creating GIF Frames