1998 on the Web - Tips and Tools

Simple GIF Animation

A 1998 on the Web reader from the United Kingdom named Ian requested I transform his Radiology Group logo into an animated GIF by rotating the title text around the baby x-ray graphic. In this tip I'll describe the steps necessary to create a simple animated GIF from a static drawing.

Animated GIFs are one of the easiest ways to add pizzazz to your site. They require no special programming knowledge, they don't require plug-ins or special software, and they put far less strain on users' machines than do Java applets, JavaScript commands, and Shockwave or Flash animations.

Figure 1 below is the logo for the British Paediatric Radiology and Imaging Group sent to me by Ian. I reduced the size for this demonstration from 200x200 to 100x100 to conserve page space. To create the rotating effect, I used my favorite graphic editing software to rotate the text by 90, 180, and 270 degrees as shown in Figures 2, 3, and 4.

BPRIG Logo
Figure 1

Rotate 90 Left
Figure 2

Rotate 180
Figure 3

Rotate 270 Left
Figure 4

You'll notice I erased the baby x-ray image from Figures 2,3,4. This was done to reduce the size in bytes of the final animated product. When designing animated GIFs it is a good idea for each frame to only reflect what has changed from the previous frame. This will save download time from your Web site. You design animated GIFs frame by frame. If you change a large area or a large part of the overall image from frame to frame, the browser will have to reload more of the GIF for each frame, increasing the file size. Try to make sure that only the necessary parts of the image change from frame to frame.

Switching to GIF animation software(there are many shareware products available for download from the Web), I inserted each of the four images as frames in the animation. I set the timer to display each frame for 15 hundredths of a second, and for this demonstration, set the animation to loop forever. In the final product I created for Ian I set the loop counter to 5 so the text will rotate around the baby 5 times, then settle into static position as in Figure 1 above. You can click the animated logo to see the result on Ian's page if you promise to come back here when you're done ;-)