Animating GIFs for the Web

The following tutorial is excerpted from the article "Animating GIFs for the Web" by Lynda Weinman, which appeared in the "GRAPHICS HOW-TO" column in the November 1996 issue of MacUser.

The easy way to bring animation to your Web page--without monkeying around with programming--is to create animated GIFs. These clever files, known as GIF89s to the more technically inclined, work like old-style flip books. ...Animated GIFs hold multiple images within one file and make [images] move by displaying one frame while loading the next.

Netscape Navigator 2.0 and Microsoft Internet Explorer now support animated GIFs.... Unlike other types of animation, however, animated GIFs are not interactive.

All you need for making an animated GIF is GIFBuilder 0.4--a free, Mac-only program by Yves Piguet. Because GIFBuilder comes with little documentation, few users are aware of the program's advanced features--which let you dramatically decrease file size. On the Web, every kilobyte counts.

STEP BY STEP

1. CREATE YOUR FRAMES, AND COLLECT THEM IN GIFBUILDER.

We created our images in [Adobe] Photoshop and set up the animation sequence in Adobe After Effects, but you can create individual frames in most drawing or graphics programs. GIFBuilder 0.4 accepts files in QuickTime and GIF formats as well as TIFF and Photoshop documents in RGB, grayscale, or indexed color. Drag and drop your frames into GIFBuilder's Frames window (Window:Show Frames). Once opened in GIFBuilder, our QuickTime movie converted automatically into 46 individual frames.

2. SET YOUR BASIC OPTIONS.

GIFs by nature are, at most, 256 colors and must have an assigned palette. We used the System palette (Options:Colors:System Palette). GIFs can also be made transparent--transparent GIFs appear to sit directly on the page, because their background color matches the Browser's. We chose to keep the white background [of the original frames] (Options:Transparent:Background:No). We then set the animation to repeat itself for as long as the Web page stays open (Options:Loop:Forever).

3. SHRINK YOUR FILE SIZE BY CHOOSING FRAME OPTIMIZATION.

Here lies the biggest secret of lean animated GIFs. By turning on this feature (Options:Frame Optimization), you instruct GIFBuilder to isolate elements in your animation that actually change postion.... GIFBuilder crops away everything else in all frames but the first. The first frame serves as background, and the subsequent small frames lie on top of and add to it. File size shrinks dramatically, because you don't store the entire background in every frame.

4. PICK THE RIGHT FRAME DISPOSAL METHOD.

Disposal method determines what GIFBuilder does with each frame after the frame is displayed. Some general rules of thumb: Unspecified works best if you have not used Frame Optimization or transparency; Do Not Dispose works best with Frame Optimization and transparency; Restore to Previous works best when you've moved an object around manually with Frame Position (Options:Frame Position).

5. CREATE THE EFFECT YOU WANT BY TINKERING WITH INTERFRAME DELAY.

You can choose various delays between any frames for whatever effect you'd like (Options:Default Interframe Delay).

6. PUT YOUR FINISHED GIF TO THE TEST.

Preview your animation to see if it works (Animation:Start). Always make sure to test your animated GIFs in a browser before you post your animation to your Web server.