Optimizing Animated GIFs / GIF Animation Tutorial
GIF Animation Tutorial
Optimizing Animated GIFs
Step by Step
Let's trace through the steps I took to create efficient animated GIFs with GIFBuilder. PC users can perform the equivalent steps in their favorite animation program.
- Create and alphabetize the frames
- Reduce to a common color palette
- Calculate their differences
- Load frames into GIFBuilder and set your options
- Crop with frame optimization
- Preview and tweak
Create the frames
First create a series of frames in your favorite graphics or animation program (GIFBuilder 0.5 accepts files in QuickTime, GIF, Photoshop [RGB, grayscale, or GIF], PICT, and TIFF). I used Photoshop layers to manually animate the penguin by copying it to new layers and moving them horizontally (the human eye is more sensitive to horizontal movement than vertical).
GIFBuilder 0.5+ can import layered Photoshop files but for more control over the color reduction process I saved each layer as a flattened Photoshop file. GIFBuilder arranges frames alphabetically so be sure to name the files in the order you want them to display.
|intro ->||background||color palettes||frame optimization|
|results||tutorial||reduce palette||frame differencing|
Comments are welcome
Created: Oct. 7, 1996
Revised: Oct. 18, 1999