Creating GIF Animations


J. L. Mohler 

Note: see the following link for various packages you can use to create GIF animations: http://members.aol.com/royalef/toolbox.htm

To create an animated GIF is really quite easy. There are several shareware and commercial applications that can be used to generate them. However, in the following examples you’ll be seeing how to do it in a commercial application, Ulead’s GIF Animator, which comes with Ulead’s imaging application called PhotoImpact. Microsoft also offers a GIF animation program called Microsoft GIF Animator. There are also several shareware ones on the web and most of them work the same way. 

Note that to create a GIF animation simply requires a series of frames that you want to make into a GIF animation and software that can be used to create a single GIF file from several continuous images. Here you will be seeing how to take the images shown in Figure 1, to create a banner advertisement for Mohler’s Aquarium shop, using a GIF animation shown in Figure 2. 

Figure 1. The individual images that will be combined to create the GIF animation. 
 
 
Figure 2. The GIF animation.
 
One of the things that you will find is that creating the individual images is the hardest part of creating a GIF animation. In addition, coming up with a unique idea is equally challenging. To create the animation you can use any number of tools to create the individual frames. Here, I simply used PhotoShop and a layered image to create the individual frames. You could also generate those frames from 2D animation, or 3D animation packages and then save the rendered frames as individual files for import into a GIF animation program. One of the things that can help you when you create a GIF animation is a storyboard of what it is you are going to create. Storyboards are simple planning sketches of each frame of the animation. They are helpful when creating any type of animation. 

Create and Use a GIF Animation 

To create a GIF animation: 
 

  1. Begin by creating a series of images that you would like to compile into a GIF animation. Note that the more in-between frames (more frames per movement in the animation) the smoother you animation will be. Unfortunately, the more frames the bigger the file will be too. Try to find the balance between enough frames and smooth animation. Don’t be afraid to test it with your GIF animator.

    2.  
  2. Once you have your frames, open the GIF animation program, and set the canvas size. Here, the banner is 460 by 68 pixels. Set the canvas size appropriately as shown in Figure 3.
Figure 3. Setting up the canvas size for the animation.
  1. After setting the canvas size, in Ulead’s GIF animator you choose Layer | Add Images to add your individual images to the file. GIF Animator is pretty slick because it allows you to choose all of the files at once (see Figure 4). Then you click OK.
Figure 4. Ulead’s GIF Animator allows you to import all you images at once.
  1. After clicking OK, you’ll be prompted how the colors should be reduced upon import. Make sure at this step you choose the Safe Palette shown in Figure 5.
Figure 5. When you import the images you'll be prompted for how the colors should be reduced to 8-bit.
  1. Once you have imported your images, you can choose to view your animation using the Preview button. In this example, there needs to be a pause at the beginning of the animation so the fish takes a break. If you select a1.tif in the left window, you can easily duplicate it so that the fish doesn’t constantly swim back and forth. Here, select the a1.tif, and then choose Edit | Duplicate (see Figure 6a). In the Duplicate dialog box set Copies to 2 and hit Okay (Figure 6a). In the left side of the Window you’ll see that 2 more copies have been added (Figure 6b). Note that in GIF animations, duplicate frames do not use differencing. Subsequently, the frame you just copied (a1.tif) is in the file twice, which increases the file size.
Figure 6. Duplicate the first frame so that the fish doesn’t constantly swim back and forth.
  1. Once you have the animation the way you want it, the last thing you have to do in GIF Animator is save a new GIF file. Note that you may have to check you file size and make sure its not too big for the web. Often you may have to reduce your frame count so that what is are delivering is reasonable. My little weenie 8 frame file is approximately 105 K or 30 seconds over a 28.8 modem.

    2.  
  2. Now that you have created a GIF animation, integrating it into your page is relatively easy. To integrate the animation you just created, the code would look like this:

    3. <IMG src="fish.gif" height="60" width="468" border="0" alt="Mohler’s Aquarium Banner"> 

    where fish.gif is the name of the file. Note that the HEIGHT and WIDTH attributes have been set so that space is allotted to the image as it is downloaded and that the BORDER attribute has been set to zero so no border will show. In addition, the ALT attribute has been designed for those with no appreciation for the power of graphics. Note that using animated GIFs doesn’t require any special tags, just the plain ole <IMG> tag. Cool huh?

Note that Ulead’s PhotoImpact and GIF Animator (Web Extensions) bundle has many more capabilities than is listed here. If you are interested in it, check out their site at http://www.ulead.com.