GIF animations :
Animated GIFs are graphic files composed of a series of frames in the GIF89a format. They have the following characteristics:
- They can have a transparent background. This is accomplished by designating one color to be the transparent color.
- They can play once, play a specified number of times, or play forever
- They have a frame rate specified when they are made. Some applications allow a different frame rate to be set for each individual frame.
- They can be optimized so that only the moving objects are changed from frame to frame, rather than repeating the entire scene.
A number of applications are available to create and edit animated GIFs
- Macromedia Fireworks http://www.macromedia.com/software/fireworks/
- Adobe ImageReady (included with Photoshop) http://www.adobe.com/products/Photoshop/main.html
- Macromedia Flash http://www.macromedia.com/software/flash/. Commercial program for creating vector animations, can export to animated GIFs.
-
GifBuilder A free program for creating animated GIFs on the Macintosh
-
CoffeeCup GIF Animator A shareware program for creating animated GIFs on the PC
Download this file and use it to follow along with the demonstration: animated_gif_example.zip
To make animations in ImageReady, you create the different frames of the animation in separate layers, overlaid in the same location of the Photoshop file. Once you've done this, follow these instructions to create the animation:
- Select the slice where there will be an animation (or the whole image if that's what you are animating)
- Click on the Animation tab in the slice palette
- Initially, there will only be one frame
- To create additional frames, click on the "new" icon at the bottom of the palette (use the trash can to delete frames)
- Select each frame and turn on and off the appropriate layers for that frame
- Select the timing for each frame by pulling down the timing menu directly under the thumbnail
- Select the loop setting by pulling down the menu in the lower left of the palette (Forever, Once, Other)
- To copy and paste frames, DO NOT use command/control-c or command/control-v (they don't function for animation frames). Select the desired frame(s), and select copy or paste frames from the options pullout in the upper right-hand corner of the palette.
- To optimize the size of the GIF animation, select Optimize Animation from the options pullout.
- Preview your animation by using the play controls at the bottom of the palette.
- To automatically create in between frames in an animation, use the
Tween feature in ImageReady. The tweening only works with changes in
the position of a layer between two frames. For example, you might
have the "GIF" text on the left in one frame, and use the
move tool to change the position of the "GIF" in the other
frame.
- To Tween, select the two adjacent frames you want tweened. Then click on the options pullout menu in the upper right hand corner of the palette. Select "Tween...", and then set the number of frames to be added. That number of intermediate frames will be created, tweening between any graphics that are in different locations in a layer.
- Don't forget to set the image compression in the optimize palette. You must use the GIF format, since JPEGs cannot be animated. Since ImageReady uses the same palette for all frames, be sure to check every frame for quality.
- To save out the GIF animation, select FILE>SAVE OPTIMIZED and set the location to save your animation.
Note: The animated_gif_example.psd file is organized in layers so that the GIF1, 2, 3... layers match the bars1, 2, 3... layers. So for frame 1, turn on the following layers:
- Animated (a text layer)
- GIF1
- bars1
Only one animation can be defined per photoshop document
Contrary to what it might appear, you can only define one animation per document. This is because ImageReady is not a slice based tool. So unlike the optimize palette, the animation palette affects the entire document rather than a specific slice. For ways to work around this, see the page in this site on image slicing.