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.
An animated GIF file comprises a number of images or frames to be displayed successively, each described by its own GCE (Graphic Control Extension), preceded by a header whose content by default applies to all the frames. The GCEs allow the duration for which each frame is displayed to be specified in hundredths of a second. Some economy of data is possible where a frame need only rewrite a portion of the pixels of the display, because the Image Descriptor can define a smaller rectangle to be rescanned instead of the whole image.
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.