GIMP Animated GIF Tutorial

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.

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.

I want to use a footprint 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.

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.

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.

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.

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.

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.

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.