Optimizing Animated GIFs / GIF Animation Tutorial | WebReference

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 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 ->backgroundcolor palettesframe optimization
resultstutorialreduce paletteframe differencing
set optionscroptweakconclusions

Comments are welcome


Created: Oct. 7, 1996
Revised: Oct. 18, 1999

URL: http://webreference.com/dev/gifanim/tutorial.html