The PNG format is nice because it’s supported by Firefox and it has real alpha-based transparency. This looks great no matter WHAT color your background is:
I have been working on improving the alpha on the category images here, specifically the MythTV and Linux-projects category images. Here’s how to get nice anti-aliased alpha-blended edges on PNG images in the Gimp.
- Make sure you are using a PNG format, and you set Image->Mode to RGB.
- If the PNG image doesn’t yet have an alpha layer, add one with Layer->Transparency->AddAlphaChannel.
- Typically, you have an image with white where you want transparency, or an edge that used to be white and was sloppily converted to transparent along a hard edge. You want to select the white and/or transparent areas, and let them cut into the rest of the image by a pixel or two. Use the magic wand selector, holding down Shift to gradually add to the selection, until you’ve got what you want. If it’s helpful, use Select->Grow and increase what you have selected by a pixel or two, once you get close.
- Convert the white in the selection into alpha-blended anti-aliased transparency via either Layer->Transparency->ColorToAlpha or Colors->ColorToAlpha (they appear to be the same command).
This does a really nice job in a lot of cases (especially if you’ve got a clean starting image). Don’t forget about my image scraper, to help you see what’s out there already – but I know you can do even better, whoop! I know this is bad of me… but I’m actually getting off on the fact that it looks awesome in Firefox and like a$$ in IE. Suck it M$. Oops did I say that out loud…
