Allan Kelly : Transparent GIFs with GIMP

How to use the GIMP make those nifty text images you see around

I spent ages getting this right, for example over at West Barns Gala. so I though I'd write it down. I use styles to set the background colours for the sidebar, so I need the images to be transparent. However simplistic use of GIMP, putting text onto a transparent background, results in losing the anti-aliasing on the text, which looks nasty.

The reason is that GIMP uses variable transparency for the anti-aliased pixels, and when converting to a GIF colour palette these are simply deleted because GIF transparency is not variable - just on or off.

So, we have to create a coloured background, put the text on, add a transparent background layer, select the background colour, and delete it. This results in the anti-aliased pixels being faded shades of the background colour.

That means that the background colour use has to be the same as (or at least close to) the background colour of the web page you're putting the text image onto. That's a pity because now we have to have a set of text images for every background colour we want to use - but it does look good.

In practice, I've found that you only need to have the text image background colour reasonably close to the page background - so a light blue set of images does for most light blue backgrounds for example.

Instructions below. Update December 2008: I'm using Gimp 2.6.1 under Ubuntu 10.4. The annoying behaviour described below with background layers has gone away, I'm glad to say!

1. Set the background colour to be the same as the page background. Double-click the background colour chooser to get the dialog box up. Using the HTML Notation box is a good way to get it right. The colour picker tool (eye dropper icon) is another good way.
2. Open a New image. In Advanced options, select Colourspace RGB colour and Fill with background colour.
3. Select the text tool and click on the image. Don't worry about font or positioning - these can be changed later. Type your text and click Close.
4. Use the cursor keys to position the text in the image. Use the font selector to choose font type and size.
5. Obviously you want to create a load of these, all with different text but the same otherwise. So, save this off now as gimp format (xcf). Give it a name like sidebar_text_template.xcf.
6. Now save this one off as a gif (use 'Save a Copy' with a useful name like home.gif). GIMP will pop up an Export dialog, the defaults of Flatten Image and Convert to Indexed are fine. Click Export. On the next dialog choose a comment and set interlace as you prefer (it doesn't really matter for such small images).
7. Now open the saved gif.
8. The image will be opened as the Background layer. (NOTE: the next bit doesn't seem to apply to Gimp 2.6.1. Good!) Now, I'm no expert, but this seems to have especially annoying properties - specifically, you can't move anything behind it. We need a transparency layer behind our image. So, we have to create a copy, add a transparency layer, delete the annoying Background layer and get on with the job. (No doubt this is a "feature not a bug", but by hell I hate it!)
9. Add a copy of the Background layer.
10. Add a layer with 'Layer Fill Type' of Transparency - the name doesn't matter but 'transparent' might be good.
11. Move the transparent layer below the Background copy layer.
12. Delete the Background layer.
13. In the Layers palette make sure the currently selected layer is 'Background copy' - not the transparent layer. From the image Select menu, choose 'By colour' (Shift-O) and click on the background colour.
14. Now, right click on the background colour and from the Edit menu choose Clear (Ctrl-K).
15. Save this (Ctrl-S). That's it.
16. Repeat for all other menu GIFs.
17. Repeat for the onmouseover highlighted images etc. that you need.
18. Tedious isn't it? Likely it's scriptable in GIMP, but I ran out pf patience.