Gimp != Intuitive

So I'm working on a friend's web site. Nothing fancy, since I'm still mired in the 90s, but it's functional. At the time I write this, I've just put a Shameless Plug (TM) on my home page. Now that I've resolved the DNS issues. But that's another story.[1]

Problem is, I've got this irregular image I want to use as the header on each page. "Aha!" I say to myself. I'll use the Gimp to make a transparent GIF and then just erase the parts I don't want.

Yeah, right.

Have you ever tried to figure out how to do this in the Gimp? I spent a fair amount of time playing with converting it to indexed and RGB, and trying to erase parts of it, and searching the online help before giving up and doing the obvious thing: going to Google.

Of course, good luck searching for "Transparent GIFs in Gimp". You'll get a raft of answers telling you all sorts of stuff except for how to do it. Even that big new book on the Gimp doesn't have a peep about it. After a bit of rooting (and some wrong answers from people who clearly hit on the right answer by accident but didn't know what they were doing), I ran across a message in the USA Linux Users Group that told me exactly what I needed to know:

The Gimp: Making Colors in a GIF Transparent [2]

One other note. If you're looking to make an image with a 'faded border' like some of the web sites have, that's also pretty easy. I used that because the site has an image as a background, and the hard edges of the images looked pretty harsh - I wanted a gradual fade-out.

This also is pretty simple:

1. FIRST (I kept getting bitten by this), in the menu, go to Image->Mode and make sure that you are working in RGB mode. If you're not, it will look like The Gimp is doing what you want, but then when you save it'll screw you over.
2. Use the rectangle select tool to select the majority of the image, leaving a 10-15 pixel border unselected. Eyeball it - remember, Undo is your friend.
3. Then, in one of the menus (I'm too lazy to look now, I think it's the Select menu), use Invert (or Invert Selection) to reverse it. Now you've only got that border selected.
4. In the same menu, choose the Feather option. I typically use about a 10 pixel feather. Your mileage may vary.
5. Now, from the Edit menu, choose Cut. This will chop out the border, leaving a nice faded edge. Cool, eh?
6. And now the important part! Do not save it yet. If you save it now, your nice feathered edge will be blown away without warning. First go to the Image->Mode menu and change it to Indexed. On the popup is a box about transparency, make sure it is checked.
7. Now you can save it as a GIF, and it will feather the edges. It's not gorgeous, but it will do.

GBS

2004.02.19

[1]	In a nutshell, I entered the wrong IP in Register.com for the domain. No big deal, except that it appears I also confused the poor Register.com site at the same time, and it erased the latortueandthehare.com entry, leaving only the *.latortueandthehare.com record and the two CNAME records for www.latortueandthehare.com and ftp.latortueandthehare.com pointing to latortueandthehare.com, but no A record for latortueandthehare.com. Splendid. Needless to say, that did not suffice.
[2]	On the 'off' chance that the USA Linux Users Group page goes away (I never trust any site), making a GIF transparent is quite simple: Open the image in The Gimp. In the image menu (the pop-up one) go to Layers->Add Alpha Channel. Add one. Now if you erase or cut parts of the image you'll see that checkerboard The Gimp uses to signify transparency. When you save, it will tell you to flatten the image or some such. Just nod and smile and check yes and you'll be happy.
[3]	Of course, this means I'll just have to update the Gimp help and submit it or I should quick bitching :)