Making a GIF Image Transparent & Selecting Background Color

Tux - Linux Mascot

The GIF image below was originally anti-aliased to blend with a white background. When the image is made transparent, the "halo effect" does not show against the light blue background, but does show against the red background.

Unless you have software that will re-anti-alias an image, it is best to select a background that is similar enough to the original background that the "halo effect" does not occur.

Simple Way To Make GIF Image Transparent

Simple way to make a GIF image transparent - Choose the color you want to make transparent.

Problem - Unwanted areas will also become transparent, and require some tedious touch-up.

Note - See the difference in placing the image on a bright red and a light blue background.






KeyboardTux-01.gif

1. Original image
KeyboardTux-02.gif

2. Save the image as a transparent gif
KeyboardTux-03.gif

3. Fill the center with white.
KeyboardTux-04.gif

4. Fill transparent areas of left eye, and next to the right wing, pixel by pixel with white
These are the same images shown against different backgrounds.  The red background shows the remaining transparent areas and the" halo effect" more clearly.

The "halo effect" is caused by placing the anti-aliased image against a background that is very different from the original background.  The edges of the original image are several shades of gray, in order to blend the transition from black to white. One would need to redo the blend colors for a smooth transition from black to red.


The simpler solution is to select a background color for which the existing blend still works well.



Better Approach To Make GIF Image Transparent

The following method is better to use when the color you want to make transparent is used in other areas within the image - in this case the multiple white areas. You will not end up with unwanted transparent areas within the image. You will still have the "halo effect," however.

Placing the final image on a lighter background would make the "halo effect" will disappear.

KeyboardTux-01.gif

1. Original Image
KeyboardTux-05.gif

2. Fill the sections to be made transparent (in this example there are 5) with a color that is not already contained in the image.
KeyboardTux-06.gif

3. Select the blue as the color to make transparent.

With this approach there are no miscellaneous transparent areas for background bleed through.

"Halo effect" is still present, so you should select a lighter background.