A visitor from the United Kingdom named Ian requested we transform his Radiology Group logo into an animated GIF by rotating the title text around the baby x-ray graphic. In this tip we'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 us by Ian. His original was larger than the sample we are using here for the demonstration, and more readable. To create the rotating effect, we used our favorite graphic editing software to rotate the text by 90, 180, and 270 degrees as shown in Figures 2, 3, and 4.

You'll notice we 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), we inserted each of the four images as frames in the animation. We 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 we created for Ian we 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.

Was this site useful to you?

To print a copy of an Internet Brothers tip or article, simply take a photograph of your computer screen, develop the film and have the photo enlarged to the font size of your choice.

The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said.

The hierarchical menus were created using Peter Belesis' © Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.

Site Map