Creating animated GIFs

In this article you will learn how to create a very basic animated gif consisting of two frames. I have used Paint Shop Pro but you can employ your favorite graphic program. I recommend that you first read the article on animated Gifs, if you haven't do so already. Animated Gifs are gif images that consist of two or more frames, which are played one after the other to give a semblance of animation - quite like standard animation techniques.

The individual frames in an animated gif can be created as separate images that are then brought togheter to form an animated Gif. And this is how we will make our animated image. We will first create two images that form the two frames of our animation and then bring them together to form the Gif image.
Image #1 (60 X 60 pixels)
Image #2 (60 X 60 pixels)

I've created the above two images in PaintShop Pro... you can use any image editing tool. Let us now see how we can combine these two images to create an animated gif.

Start the animated gif creation program. I've used Animation Shop, which comes free with Paint Shop Pro. This is a great tool and very simple to use. It also has lots of great features and built-in effects for creating animated Gifs. (To know more about Animation Shop, click here.)

Click on File - Animation Wizard. Make sure that the "Same size as the first image frame" radio button is selected. Click on Next.
Set the Image canvas color to Transparent (select the Transparent radio button) and click on Next.
In the next window, make sure the "Upper left corner of frame" and "With canvas color" radio buttons are selected and "Scale frames to fit" checkbox is not checked.
You can either have your animated gif repeat endlessly or specify the number of loops. As of now, select the "Yes, repeat the animation indefinitely" radio button. You can also set the time for which each frame will be displayed. Change this value to 50. Thus, each frame will play for 50/100 or 1/2 a second. Click on Next.
Now, click on the Add Image button and browse to the two images you made previously.
You can selecte multiple images using SHIFT-CLICK or CONTROL-CLICK combinations. Animation Shop also lets you adjust the sequence of images. You can change the sequence by first clicking on the image you have added and then clicking the Move Up or Move Down buttons.
Click Next and then click on the Finish button.

Animation Shop now displays your two images in the specified sequence.

Viewing the animation

Click on the View Animation button or select View - Animation. The program starts the animation in its window. Lo, behold! We have ourselves an animated Gif image.

Saving the animation

To save our creation, click on File - Save As. Type in a name for the animated gif and click on Save. Select the number of colors by dragging the scale. Remember, more number of colors, the larger the gif. It is always a good idea to duplicate (CONTROL-D) the animated image you have created before saving and then check the size of the file and the look of the image under different color depths.
We'll save this image with 16 colors (4 bit color depth).

Here is how our animated Gif image looks like.

In the next article, I will provide instructions on creating a more complex animated Gif image - Animated Gif banners. Animated Gifs have been exploited to their full potential as animated advertising banners on the web. They provide an easy and cross-platform compatible way of displaying animation on web pages. Though web banners created in Flash have given animated gif banners a run for their money, its always a good idea to have an animated gif version of the Flash banner, which can be displayed on the client browsers in which the Flash plugin is no installed.