GIMP Animated GIF Tutorial

The GIMP Logo


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 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. In this example, we're going to use GIMP to produce a very basic animated GIF web banner. We'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.
    Our animation will consist of seven frames and each frame will be represented by an individual layer, meaning that our final GIMP file will have seven layers, including the background.

  2. Set Frame One. We want our animation to start with a blank space so we don't make any changes to the actual Background layer that is already plain white.
    However, we do need to make a change to the name of the layer in the Layers palette. We ​right-click on the Background layer in the palette and select Edit Layer Attributes.

    In the Edit Layer Attributes dialog that opens, we 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. We want to use a footprint graphic for this frame so we go to File > Open as Layers and select our graphics file. This places the footprint on a new layer which we can position as required using the Move Tool.

    As with the background layer, we need to rename the layer to assign the display time for the frame. In this case, we've chosen 750ms.

    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. 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 graphics 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. We 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. 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. We'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. This is the final frame and displays some text along with the logo. The first step here is to add another layer with a white background.

    Next, we use the Text Tool to add the text. This is applied to a new layer​ but we'll deal with that once we've added the logo, which we can do in the same way that we added the footprint graphics earlier.

    When we've got these arranged as desired, we 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 we chose to display this for 4000ms.

  7. Preview the Animation. 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.

    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. Saving an animated GIF is a pretty straightforward 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, select 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, select 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, select 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. Now you you can share your animated GIF.


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.