Software, Technology

How-to: Animated GIFs using GIMP

How-to: Animated GIFs using GIMPI was asked to produce a couple of banner ads for cross-site promotion recently. What does that mean? Good old animated GIFs.

Since the Open Source GIMP (GNU Image Manipulation Program) is my graphics program of choice, I went straight to its facility for producing animated GIFs; simple layered graphics that can cycle through a number of frames, like an old-fashioned flick-book – the cornerstone of stop-motion animation.

While animated GIFs may be past their prime, there are still many sites using them for banner ads. Social media has also ‘rediscovered’ them for little animated gags and funnies.

So, to produce a simple web banner-sized animation using some text and a logo, I’m going to produce a four-frame, four-layer animation, including the background. The play will consist of the layer, then the title superimposed, then the first tag line, replaced by the second tag line.

Open a New Image in GIMP
For this example, I’ve selected one of the pre-set templates for web banners at 728×90. You can create GIF animations in almost any size, but think about the file size, loading time and resolution; also where and how it will be used on the web. Fast, violent and clunky animated GIFs drive visitors to distraction and, at worst, away from the page they’re on.

Frame One
I’ve imported my Everything Express background graphic to replace the plain white. I set a 50% opacity to ‘fade’ it behind my text.

Frame Two
I add a text layer for the Everything Express title, then rename the layer to assign the display time for the frame, 600ms.

Frames Three and Four
The remaining frames are my tag lines, in plain text layers. I set the duration for 600ms.

Create Actual Layers for Frames
In order to get my frames to display, I need to do some layer trickery.

I merge down the Everything Express background graphic with the default plain white canvas background to get my faded-onto-white frame one.

I duplicate this background frame and merge down my title text onto the duplicate for frame two. This will be my persistent background for frames three and four.

I then duplicate frame two, my title plus background layer, twice.

I merge down the first tag line “Culture, style, technology” onto duplicate #1. This becomes frame three.

I merge down the second tag line “… express everything…” onto duplicate #2. This becomes frame four.

I am left with only four layers for the four frames.

The animation sequence is the order of the layers as stacked in the Layers palette, starting from the lowest layer, working upwards. Drag your layers up and down the stack to change the frame order.

Set Frame Names and Duration
If I change the name of the layer in the Layers palette – right-click on the layer in the palette and select Edit Layer Attributes – I can change the name and add a space then (600ms) to the end of the layer name. GIMP understands this as the duration that this frame will be displayed in the animation, measured in milliseconds. It has to be the last thing at the end of the title or GIMP won’t recognise it as a timing.

Preview Animation
Preview GIF animation  in GIMPI can now simulate my animation by toggling the layer visibility from bottom to top in the layers palette.

Better than that, I can go to ‘Filters’, ‘Animation’, ‘Playback’ and get a playback window for my GIF animation which shows me what it will look like in the finished form. You can adjust the playback speed using the player controls.

If anything doesn’t look right, I can amend it. Otherwise it can be saved as an animated GIF.

Save the Animated GIF
Export graphic as Animated GIF from GIMPSelect ‘File’, ‘Export To’, then select ‘File Type (By Extension)’ in the bottom left and, from that list, select ‘GIF image’.

In the ‘Export File’ dialog that opens, click the ‘Save as Animation’ radio button and click the ‘Export’ button. Without this you will get an ordinary flattened GIF image. You may get a warning about layers extending beyond the borders of the image, in which case select ‘Crop’.

This advances to the ‘Save as GIF’ dialog containing the ‘Animated GIF’ options. If you didn’t set individual frame durations, or want to override the frame duration and other settings, you can from here. Otherwise leave these at their defaults.

I often find my frame duration is far too short for the steady frame rate I want, so I can set an override duration for all frames, rather than go back and edit them individually.

If you only want the animation to play once, you should uncheck the ‘Loop Forever’ option, in which case it will stop on the final frame.Finished animated GIF

There you have it – crude, but effective. With a little imagination, you can produce quite attractive and eye-catching animations (as well as some horrors). My favourite thing about animated GIFs? They don’t use Flash. RC

Related: How-to: Convert JPG to PDF using ImageMagick

About Robin Catling

Robin Catling gained degrees in both arts and technology which led to a diverse portfolio of employment. A freelance systems analyst, project manager and business change manager for the likes of American Express, British Airways and IBM, he moved on to web design, journalism and technical authoring. He has also worked in film and television, both behind and in front of the camera, including productions by Steven Spielberg, Martin Scorcese, Ron Howard and Ridley Scott. A qualified three-weapon coach, he runs West Devon Swords teaching sports fencing to all age groups, and in recent years qualified with the British Federation of Historical Swordplay to teach medieval and renaissance combat in the Historical Western Martial Arts.



  1. Pingback: How-to: Optimising animated GIFs using GIMP | Everything Express - Mar 22, 2014

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Twitter Updates

Follow us on Twitter @EverythingExpre

Find Us on Facebook

Enter your email address to follow this blog and receive notifications of new posts by email.



BBC World News

BBC World News
Opens the BBC World News page.
%d bloggers like this: