GIF animations

You've seen the little pulsing, blinking and never tiring buttons and spinning logos all over the web. They are the little sister of movies and they can spruce up a site and grab interest.

1
4 highlighted frames of a moviestrip If you've created a small movie using your desktop cam, you know the size of the movie file can be prohibitively large for the web. By selecting a few key frames that tell the story succinctly but just as well, you can create a GIF animation. They work like a flipbook, fooling the brain into seeing continuous motion from separate and distinct moments frozen in time.

Check out the GIF animation below made from the four frames selected from this movie.

2
Pose and grab a sequence of images Whether you pull specific frames from your movie or pose and grab, pose and grab etc. in front of your camera, you need to prepare the images in your favorite image editing program, like Photoshop. Reduce the image's file size in every way possible; the number of colors, the dimensions, and even the amount of movement to ensure the animation will load quickly and run smoothly. Take care to maintain consistency in image size to prevent artifacts and visual blips.

High-end animation programs exist, but you can find freeware that does the job simply. GifBuilder for the Mac or Gif Construction Kit for Windows were designed to build Gif89A files, specifically for the web.

3

GifBuilder's Interframe delay dialog box

animated gif from 4frames at right

Gif Builder allows you to drag your images into a list of the order you want them to appear. By adjusting the 'interframe delay', you can hold on one or more images longer to stagger or slow down the timing of the animation show. Each and every computer will read your animation differently due to CPU speed and bandwidth abilities, so design frugally and create a larger audience for your art by considering others' limitations.

This GIF animation weighs in at about 50k. It uses only 4 frames but repeats them in the sequence so it will loop smoothly.

4 frames used in gif animation at left