Saturday, 15 March 2014

How-to: Animated GIFs using GIMP


I was asked to produce a couple of banner ads for cross-site promotion recently. What does that mean? Good old animated GIF's.

Since the open source GIMP (GNU Image Manipulation Program) is my graphics programme 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 corner-stone 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 728x90. 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 of GIMP won't recognise it as a timing.

Preview animation
I 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 GIFSelect 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 wanted, 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.

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 GIF's? They don't use Flash. RC

No comments:

Post a Comment

At least try to be nice, it won't kill you...