How to make a transparency with GIF without halo

How to make a GIF image that has transparency and anti-aliasing, but no halos.

Halos are undesirable effects on images that have a transparent background, usually in GIF format. What happens with halos is that a colored line appears around the outline of the image. This line can be dark or light. If it is dark and we place it on a dark background, the halo will not be seen and everything will be fine. If it is dark and we place it on a light background we will have the aforementioned halo effect.

In GIF format, whenever the silhouette of the image has a softened edge, we will suffer from the halo effect. Now, if the halo has a similar tone to the background where we are placing the image, we will not see it and the result will be good. That’s why GIF images are sometimes prepared to be placed on light or dark backgrounds. If we place it on a background with a tonality that does not correspond to it, the silhouette will appear surrounding the image, that is, the happy halo will appear.

For example, here we have an image that has a halo.

The halo is that little dark border around the outline of the circle and the snail. This halo appears because this transparent GIF image is meant to be placed on a dark background. In fact, here we have proof of how good the image would look without the halo if we placed it on a black background.

Smoothing causes halos

As soon as the image has a smoothing there will be a halo. If the image smoothing is set up for a light background and the image is placed on a light background, the halo will not be visible. But if the image has light feathering and is placed on a dark background, the halo will appear. That is, we always have to place the image on a background that is even to the one we have prepared it for.

If we do not have smoothing, the halo will not appear, but the effect will be significantly worse, in many cases. In the following image we have made the same design, but without anti-aliasing.

I think that it will be obvious to anyone that the result is of poorer quality. The halo has disappeared but the pixelation around the image is noticeable.

Do a smoothing of the desired color to avoid the halo

Now we are going to show you how to achieve smoothing without the halo appearing. We are going to work with Photoshop, although everyone will do a similar process in their favorite graphic design program.

We start with an image with the canvas of the color we want as the background. That is, we place the background of the same color as the background of the web.

Then we make the design we want.

Next we do a “Save for Web”, in the Photoshop File menu, to save the image going through a dialog box that will allow us to carry out a series of actions to select the transparency.

In the Save for web window we have to do three steps. (Always keep in mind that we want to save the image in GIF format, which is indicated in the options on the right. Well, if we are saving with another format such as JPG, we will not be able to select transparency because it does not have transparency. We must also have marked the checkbox to allow transparency.)

1. First we select the eyedropper tool.
2. Next we click on the color that we want to be transparent, which will be the background of the image.
3. Finally we press the button to assign the selected colors to the transparent. With this we achieve that the selected color is shown as transparent.

We can repeat this process if we want several colors of the image to be shown as transparent.

The result is as follows:

We will observe that the image, on a white background, appears with a blue halo, but when we put the image on a background that has a blue hue, the halo will disappear from our sight.