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.