WebDevelopersNotes logo

home-icon Home / Graphics / How do I create animated GIFs?

How do I create animated GIFs?

How do I create 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 together to form an animated Gif. And this is how we will make our animated image.

Sponsored Links

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 for animated gifImage #1 (60 X 60 pixels)

Image 2 for animated gifImage #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 Animation Shop 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.

Animated gif

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.

Sponsored Links

Comments are closed.

Why should you delete web browser history?

Sponsored Links


How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]


The popular Times New Roman typeface is actually quite old having been designed in 1931. The Times newspaper commissioned typographer Stanley Morison after he publicly criticised the newspaper for the poor quality of its printing. The work was carried out by Victor Lardent under the direction of Morison. Times New Roman font became extremely popular when it was included on Microsoft Windows and became one of the core fonts for the Web. It is now one of the most used fonts in history. And at 14 point, it has become the U.S. State Department's standard typeface. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy