1. Technology

GIMP Animated GIF Tutorial

How To Produce an Animated GIF with GIMP

By

GIMP is a remarkably powerful piece of software considering that it is free. Web designers in particular may be grateful for its ability to produce simple animated GIFs.

Animated GIFs are behind lots of simple animations that you'll see on many web pages and, while they are much less sophisticated than Flash animations, they are very simple to produce by anyone with a basic understanding of GIMP.

The following steps show a simple web banner sized animation using a couple of basic graphics, some text and a logo.

1. Open a New Document

Open a new file
© Ian Pullen

In this example, I'm going to use GIMP to produce a very basic animated GIF web banner. I've selected the preset template of Web banner common 468x60. For your animation, you can select a preset size or set custom dimensions depending on how you will be using your final animation.

My animation will consist of seven frames and each frame will be represented by an individual layer, meaning that my final GIMP file will have seven layers, including the background.

2. Set Frame One

Edit Layer Properties dialog
© Ian Pullen

I want my animation to start with a blank space so I don't make any changes to the actual Background layer that is already plain white.

However I do need to make a change to the name of the layer in the Layers palette. I right click on the Background layer in the palette and select Edit Layer Attributes. In the Edit Layer Attributes dialog that opens, I add (250ms) to the end of the layer's name. This sets the amount of time that this frame will be displayed in the animation. The ms stands for milliseconds and each millisecond is a thousandth of a second. This first frame will display for a quarter of a second.

3. Set Frame Two

New layer added
© Ian Pullen

I want to use a foot print graphic for this frame so I go to File > Open as Layers and select my graphic file. This places the footprint on a new layer which I can position as required using the Move Tool. As with the background layer, I need to rename the layer to assign the display time for the frame. In this case I've chosen 750ms.

Note: in the Layers palette, the new layer preview appears to show a black background around the graphic, but in reality this area is transparent.

4. Set Frames Three, Four and Five

More layers added
© Ian Pullen

The next three frames are more footprints that will walk across the banner. These are inserted in the same way as frame two, using that same graphic and another graphic for the other foot. As before the time is set as 750ms for each frame.

Each of the footprint layers need a white background so that only one frame is ever visible – currently each one has a transparent background. I can do this by creating a new layer immediately below a footprint layer, filling the new layer with white and then right clicking on the footprint layer and clicking Merge Down.

5. Set Frame Six

A blank layer added
© Ian Pullen

This frame is just a blank frame filled with white that will give the appearance of the final footprint disappearing before the final frame appears. I've named this layer Interval and have chosen to have this display for just 250ms. You don't need to name layers, but it can make layered files easier to work with.

6. Set Frame Seven

Three layers merged into one
© Ian Pullen

This is the final frame and displays some text along with the About.com logo. The first step here is to add another layer with a white background.

Next I use the Text Tool to add the text. This is applied to a new layer, but I'll deal with that once I've added the logo, which I can do in the same way that I added the footprint graphics earlier. When I've got these arranged as desired, I can use Merge Down to combine the logo and text layers and then merge that combined layer with the white layer that was added previously. This produces a single layer that will form the final frame and I chose to display this for 4000ms.

7. Preview the Animation

Animation is previewed in GIMP
© Ian Pullen

Before saving the animated GIF, GIMP has the option to preview it in action by going to Filters > Animation > Playback. This opens a preview dialog with self explanatory buttons to play the animation.

If something doesn't look right, it can be amended at this point. Otherwise it can be saved as an animated GIF.

Note: The animation sequence is set in the order that the layers are stacked in the Layers palette, starting from the background or lowest layer and working upwards. If your animation plays out of sequence, you will need to adjust the order of your layers, by clicking on a layer to select and using the up and down arrows in the bottom bar of the Layers palette to change its position.

8. Save the Animated GIF

Animated GIF exported from GIMP
© Ian Pullen

Saving an animated GIF is a pretty straight forward exercise. First go to File > Save a Copy and give your file a relevant name and select where you want to save your file. Before pressing Save, click on Select File Type (By Extension) towards the bottom left and, from the list that opens, select GIF image. In the Export File dialog that opens, click the Save as Animation radio button and click the Export button. If you get a warning about layers extending beyond the actual borders of the image, click the Crop button.

This will now lead to the Save as GIF dialog with a section of Animated GIF Options. You can leave these at their defaults, though if you only want the animation to play once, you should uncheck Loop forever.

9. Conclusion

The steps shown here will give you the basic tools to produce your own simple animations, using different graphics and document sizes. While the end result is quite basic in terms of animation, it is a very easy process that anyone with a basic knowledge of GIMP can achieve. Animated GIFs are probably past their prime now, however with a bit of thought and careful planning, they can still be used to produce effective animated elements very quickly.

©2014 About.com. All rights reserved.