On 8/22/07, Amit Ramon wrote:

Hello,

I'm trying to create a logo that consists of some text over transparent background. I want it to be in GIF format. I create the text with the text tool. Now in gimp, it looks great. However, when I go and export it to a GIF, the fonts loose quality.

Here is my understanding of what happen: The fonts are anti-aliased using transparency (alpha). Then, before I can save it as GIF, I need to change the mode to indexed, which creates a color map.
The color map created actually contains a single color (where in gif it could contain as much as 256 different colors). Since there is only one color, fonts cannot be anti-aliased and that's why they look so bad.
I think that since the initial anti-aliasing is done using alpha, all pixels actually have the same color (but different alpha), and that's why the color map contains only a single color.

Technically, as far as I understand, there should be no problem to have a good anti-aliased fonts in a gif file. The problem is with the very specific method I (or gimp?) creates the gif.

...
GIF doesn't support 8bit alpha, only binary (fully solid or fully transparent) alpha.
If you want a font that is rendered for a specific background color, set the background color to the one you want, and use Layers->Transparency->Semi-flatten.

PNG supports 8bit alpha, so if you do not require animation, consider using PNG instead.

Quoting Amit Ramon :

Technically, as far as I understand, there should be no problem to have a good
anti-aliased fonts in a gif file. The problem is with the very specific method I (or gimp?) creates the gif.

Does anyone here knows how can one create a decent anti-aliased text in gif file?

The unfortunate answer is that it cannot be done; there is, technically, a problem with anti-aliasing text over a transparent background. GIF implements transparency by specifying a single color in the colormap to be transparent. They (CompuServe?) could have defined the GIF file format to treat a range of indexes in the palette to represent varying levels of transparency, but they did not. There is nothing the GIMP can do to overcome this limitation of the GIF format.

The PNG format DOES support an alpha channel, even in Index Mode; so you might see if that meets your needs.

One thing to note is that converting to Indexed Mode in the GIMP will alias your layers even if the background of the image is not transparent. However, if you remain in RGB Mode and let the GIF save plug-in perform the Indexed conversion, the fonts will be anti-aliased properly (alternately, you could Merge the layers or flatten the image in RGB Mode and then convert the result to Indexed Mode).

It is not ideal that the GIMP assumes the transparency limitation of the GIF format in its Indexed Mode editing but it is an understandably low priority problem. Discussions continue on how best (or even whether) to handle indexed images but it is unlikely that any changes will occur in the near future.

A good an easy solution is to add a mate layer (as Fireworks internally does), then what you need to do is to first, create a selection mask selecting the transparent area, then you should add the "mate" layer, that layer only has one color, the color used there should be the same you are going to use on your background.

After that simply merge the layer that has the antialiased element (could be text or an image) with the mate layer and use the mask to clear the extra color. There you go, you will be able to keep the antialias effect using a 8-bit gif.

I created a small plugin for the gimp to automate the task, but only works with one layer, so if you want to use it you should merge all the layers first and then apply the effect.

Here is the plugin: http://www.nabble.com/file/p12330565/gif-mate-alpha.py gif-mate-alpha.py
Just copy it to your gimp plugins folder. If anyone feels like improving it, you are very welcome, just share the changes with the rest of us, I already have some ideas on how to improve it (especially when it comes to working with a multi layered image), just need some time to do so.

Obviously it is better to use a 24 bits PNG when you need a real alpha transparency, but since IE is a piece of crap and a lot of people still uses IE6, and I haven't have the time to test it on IE7 there is no other option than to use GIFs for your web projects

A sample of the result. If you can't see the background color, it is black, just put these images over a black background to see the difference.

Original PNG:

http://www.nabble.com/file/p12330565/sample.png Regular GIF:

http://www.nabble.com/file/p12330565/sample.gif Modified GIF:

http://www.nabble.com/file/p12330565/sample_with_effect.gif