Developer

Make your GIFs dance: How to create an animated GIF

Follow these six steps to create a GIF animation.

By Cecilia Farell
(Updated 9/21/99)

Unless you're a painstaking purist who likes to edit image headers by hand, you'll want to create your animated GIFs using a GIF animation tool. To show you how the process works, we'll walk you through six easy steps to create the simple animated GIF shown here. We used Ulead GIF Animator, a popular GIF builder for Windows.

For our example, we created five images with the same dimensions: 160 pixels wide by 160 pixels high. Each image will entirely cover the previous one like a slide show, and we'll use these same dimensions for the animation screen itself. Although GIF animation tools accept most bitmap formats (TIFF and TARGA, for example), we saved the images as GIF files to make them accessible to all Web browsers. Saving them as GIFs also lets us use a local palette for each image.

Step 1:
To download the images with which to build our animation, right-click—or just click and hold if you have a Mac—each of the five images below, and save them to a folder you can access easily.

1. first image 2. second image
3. fourth image
4. fourth image 5. fourth image
Step 2:
Open Ulead GIF Animator and select the Animation Wizard from the Startup Wizard dialog box. You may also create a blank animation or open an existing GIF, animation, or video file. If you want to use the Animation Wizard again later, it can be found in the File menu.

Step 3:
You are now prompted by the Animation Wizard to decide which image or video files you want to use for your animation.

Once you press the Add Image or Add Video button, you'll be presented with a familiar dialog box used to browse your system and select the files to be included.

Locate the image files you are going to use to create the animation, and select them so they are added to the Animation Wizard dialog box. If you are going to follow along with our example, use the five example GIF files you downloaded in Step 1. You can drag files around within this window to change the order they will be displayed. Now click the Next button.

Step 4:
You should now see a Source Type dialog box. If you are using images that contain text or line drawings, you should select the Text-oriented button; otherwise use Photo-oriented.

After selecting your source type, you now need to specify the speed of your animation—the Frame Duration. You may either specify a default delay time in hundredths of a second, or a frame rate in frames per second. You can adjust specific frame durations after the wizard has finished by going to the Attribute toolbar.

Step 5:
Now you've finished specifying the essential ingredients to create an animated GIF in GIF Animator. Click the Finish button to exit the wizard and preview your animation.

If you used our sample images, you should see the first frame of the animation in the window. Press the Start Preview button to see the animation in action.

There's one more step you should go through to prepare your animation for the Web—optimization. Luckily, GIF Animator has the helpful Optimization Wizard that simplifies this task.

Step 6:
To optimize your animation, select Optimization Wizard from the File menu, or press F11.

First, you'll be asked if you want to control the number of colors used by the Global Optimized Palette, which is a dynamic global palette that contains the colors from the different images' local palettes. We recommend that you use this feature, as it will often reduce file sizes.

Next, you'll be asked how many colors you want in this palette and whether GIF Animator should dither the results. Both settings can have a significant impact on your images and should be tested for best results.

Finally, you'll be prompted to allow GIF Animator to remove redundant pixels between image layers, as well as comment blocks, both usually resulting in further file-size saving.

After pressing the Finish button, GIF Animator will present you with a Results window for the optimization process. This shows the before and after file sizes, as well as estimated download times. You may easily save the optimized version without changing the original animation.

Now, you can test the animation by pressing the Preview button on the Results window.

If you like what you see, save it (select Save As from the Results window, give it a name, and click Save). Then test it in your browser. That's it!

Cecilia Farell is a Web designer and freelance writer based in Toronto.

Editor's Picks

Free Newsletters, In your Inbox