GIF animations are easy to make; you use commonly available tools, there is no programming necessary, no plug-ins are required, and you use the common <IMG> HTML tag to display them on your web page. A GIF animation is simply a single GIF89a file that is composed of a series of individual still images plus some timing information. Playing these images in sequence gives the effect of motion much like one of those flipbooks that you probably made as a kid.

The still images composing the animation are also known as frames or cels

• first, to select colors that will display well on a variety of computer monitors, browsers and platforms.
• second, to design animations that can compress well to small file sizes so they download quickly. With the Back-button and Stop-button only a click away, many surfers will bail out waiting for a large, slow animations to creep across your page.

These instructions follow my basic recommendation to make animations in two steps -- first create full frame images and assemble and visually fine tune the animation. Second, compress the file for faster download. For demonstration, I'll use the bouncing ball animation above, and this Home animation taken from my Fleeting Glimpse home page.

I've tried to write instructions for novices making their first few animations and for users looking for more in-depth information. So I've divided each step into two sections. The first includes the basic instructions necessary to make an animation. The second goes into more detail and background. I recommend novice animators Fast Forward through the basic instructions so they can get a few simple animations under their belt. Once you're ready to learn more, you can go back and read the In-Depth material. You'll see this horizonal rule dividing the sections;

Fast Forward >>

So, let's get started...

Next >