Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Transparency in flattened images

Sunday, December 29th, 2013 by Servage



It is possible to add transparent areas to images that have already been flattened and saved as a GIF or PNG. The GIF containing a yellow circle on a purple background that blends in fine against a solid purple background, but would be an obvious square if the background were changed to a pattern. The solution is to make the purple areas transparent to let the background show through.

Fortunately, most graphics tools make it easy to do so by selecting a pixel color in the image, usually an eyedropper tool, that you’d like to be transparent.

In Photoshop, the transparency eyedropper is found on the Color Table dialog box (Image ➝ Mode ➝ Color Table). Click on the eyedropper, then on a pixel color in the image, and it magically turns transparent. To save the new transparent graphic, use the Save for Web feature as demonstrated earlier.



If you look closely, you can see that there is a fringe of pixels still anti-aliased to purple, which means that this graphic will work well only against purple backgrounds. On other background colors, there will be a pesky halo. Unfortunately, the only way to fix a halo in an image that has already been flattened is to get in there and erase the anti-aliased edges, pixel by pixel. Even if you get rid of the fringe, you may be left with unattractive stair-stepped edges. You could also use a layer mask to erase the areas that you want to be transparent, making sure to erase the blended edges in the original image.

If you are concerned with the professional appearance of your site, I’d say it’s better to re-create the graphic from scratch, taking care to prevent halos, than to waste time trying to fix them. This is another reason to always save your layered files.

Avoiding “halos”

Now that I have some transparent graphics, I’m going to try them out on a minimal web page with a white background. If you want to work along, open a text editor and create an HTML document like the one shown here:

<!DOCTYPE html>
<title>Transparency test</title>
body {background-color: white;}
<p><img src="jennifer.png" alt=""></p>
<p><img src="jennifer.gif" alt=""></p>

asd asd2



When I open the file in a browser, the graphics look more or less the same against the white background (Figure 21-27, left). But if I change the background color of the web page to teal (background-color: teal;), the difference between the alpha and binary transparency becomes very clear (right).

When the background color changes, the GIF no longer matches the background, resulting in an ugly fringe commonly called a halo. Halos are the result of anti-aliased edges that have been blended with a color other than the background color of a page. They are a potential hazard of binary transparency, whether GIF or PNG-8.

Prevention is the name of the game when it comes to dealing with binary transparency and halos. As you’ve just seen, the Matte color feature in Photoshop and Fireworks makes it easy to blend the edges of the graphic to a target background color. If the background color changes, you can reexport the GIF or PNG-8 with the new Matte color.

Transparency in flattened images, 4.0 out of 5 based on 3 ratings
Categories: Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.