GIMP Animated GIF Tutorial

A tutorial on animated GIF creation in GIMP

The GIMP Logo

Pixabay

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.

Instructions in this article applies to GIMP version 2.10.12.

  1. Open a New Document. In this example, we've selected the preset template of Web banner large mobile 320x100.

    For your animation, you can select a preset size or set custom dimensions depending on how you will be using your final animation.
    For this tutorial, animation will consist of seven frames and each frame will be represented by an individual layer, meaning that the final GIMP file will have seven layers, including the background.

    Creating a web banner in GIMP.
  2. Set Frame One. The animation will start with a blank space so no changes to the actual Background layer is needed as it is already plain white.
    However, a change to the name of the layer in the Layers palette is needed. Right-click on the Background layer in the palette and select Edit Layer Attributes.

    Selecting edit layer attributes in GIMP.
  3. In the Edit Layer Attributes dialog that opens, 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.

    Setting the layer attributes in GIMP.
  4. Set Frame Two. For the tutorial, a footprint graphic is used for this frame. Go to File > Open as Layers and select the graphics file. This places the footprint on a new layer which can be positioned as required using the Move Tool.

    Opening a new layer in GIMP.
  5. As with the background layer, this new layer needs to be renamed to assign the display time for the frame. In this case, 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.

    Renaming a new layer in GIMP.
  6. 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.

    Adding a time to the layer name in GIMP.
  7. 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.

    Edit layer attributes in GIMP.
  8. Set Frame Seven. This is the final frame and displays some text along with the Lifewire.com logo. The first step here is to add another layer with a white background.

    Adding the Lifewire logo to the animation in GIMP.
  9. Next, use the Text Tool to add the text. This is applied to a new layer​ but we'll deal with that once you added the logo or new image, which can be done in the same way that the footprint graphics was added earlier.

    Adding text to the animation in GIMP.
  10. 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.

    Merging several layers together in GIMP.
  11. 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.

    Going to playback to preview animation in GIMP.
  12. 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.

    Saving a copy o the file in GIMP.
  13. Next, go to File > Export As to save it as an animated GIF. In the Export Image dialog that opens, select Select File Type and scroll to GIF image and select it, then select Export. If you get a warning about layers extending beyond the actual borders of the image, select the Crop button.

    Naming the exported GIF in GIMP.
  14. 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.

    Export GIF options in GIMP.
  15. Now you you can share your animated GIF.

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.