Animated GIFs with Photoshop

GIF animations


The GIF image format allows animations. A GIF image can contain one or more frames, information about the time interval between frames, and whether the animation should loop forever, once, or several times.

Each frame of a GIF animation is a GIF image, so, in general, a ten-frame animated GIF might be about ten times as large a file size as a single image of one of the frames. So, GIF animations are not particularly well optimized, (compared to "DHTML"), but sure run on a lot more browsers.

Creating an animated GIF in Adobe Photoshop

Here are (most of) the steps:

  1. Create an initial image, with, for example, an object to be animated on a separate layer from the background.

  2. Open the Animation Window.

  3. Make a copy of the initial frame.

  4. Re-arrange the second frame to the desired state, for example, moving the object on the separate layer

  5. Select the Tween option to generate frames that transition from the first to the second. -- or -- Continue to generate new frames, and manually set up each frame in the desired state.

  6. Select "File Save for Web..." and save as a gif.