MLI Home → Creations → Art → Photoshop → Tip: Transparent PNGs

Photoshop Tip #3: Transparent PNGs

PNG is an image format that, like GIF, allows parts of an image to be transparent. Unlike GIF, transparency in PNGs isn't an all-or-nothing affair. Image transparency has 256 levels, allowing an image to blend smoothly with its background. However, creating a good transparent PNG is more complex than it appears. This tip will illuminate some of the subtleties.

Our Test Image

Say hello to our test image, the character Heyoka from Larry Marder's unusual comic book Tales of the Beanworld.

Our goal is to turn this image, currently an opaque GIF with a white background, into a transparent PNG that blends smoothly with any background. Before we begin, however, consider this question: what should a transparent PNG of this image look like on a black background? That question will be very important later on, so give it some thought before you proceed.

Using a Grayscale Copy as a Transparency Mask

What shall we use as the transparency mask? Some transparent PNGs tutorials suggest using an inverted copy of either a single channel or a grayscale copy of the image. We'll use the latter, which looks like this. (Black is transparent, white opaque.)

Adding this to the image as a new channel and saving the result as a PNG yields the image below.

The green of Heyoka's body is washed out. What happened?

The problem is the grayscale image that we're using as the transparency mask. The green areas of the image have an intermediate grayscale value. When we use that value to control the transparency as well, the green regions become partially transparent. The same thing has happened to the white eyes; they're now fully transparent, although they should be opaque.

If you've got good eyes, you've also noticed that Heyoka's limbs are a hair thinner than in the original image. While that's not a problem here, it's a manifestation of a problem that can make a big difference in image quality. We'll return to that, but first we must fix the transparency mask.

Correcting the Grayscale Transparency Mask

All of the image inside the black border, including Heyoka's white eyes and green body, should be opaque. In our transparency mask, that means all the grey & black areas inside Heyoka's body should be white. A little work with the pen soon fixes that.

How does the corrected PNG look?

It's much better. The green body and white eyes are opaque. However, we're not done yet. Remember the question from the beginning, which asked what the transparent PNG should look like on black? Now we can test whether the PNG looks as it should.

Did'ja notice? Examine the image closely and you'll see a problem. You might have to put your eyeball to your monitor and squint to see it, but it's there.

The Halo Effect

The problem is the faint halo around Heyoka's body. It's hard to see, so here's an enlarged detail that illustrates the problem.

Where did the halo come from?

The answer is that it's similar to the washing-out of green parts of the body in our first attempt at making a PNG. Consider Heyoka's border. It looks like it's just black and white, but it's actually antialiased with gray values that produce a smoother transition between black and white.

The antialiased pixels are shades of gray. In the transparency mask they remain gray, which means that when the image is displayed on a background, they mix the background color and the color of the image at that pixel -- but the latter color is already a mix of white and black! Instead of mixing black with the background according to the transparency level, we're mixing gray with the background. On black backgrounds the result is a light halo where the antialiased pixels are. On a white background, the gray pixels are lightened. That's why Heyoka's limbs narrowed in our first attempt at a transparent PNG.

Fixing the Halo Effect by Overpainting

The halo effect occurs because we're mixing gray with the background, when what we want to mix with the background is black. The amount of mixing should still be controlled by the transparency mask, so we don't want to change that. If we can't change the transparency mask, the only other thing we can change is the original image.

Ideally, what we want is for those antialiased gray pixels to be black. It's not hard to make them so, though it would be tedious to correct each gray pixel by hand. However, we don't have to be that precise. Since the white region outside Heyoka in the original image won't be displayed in the transparent PNG, it doesn't matter what color it is. It could even be... black! And if it could be black, then we can just use a fair-sized pencil tool to change all those gray pixels to black. Since it doesn't matter if we paint outside the border, I call this technique overpainting. Let's do it to Heyoka.

We don't have to be precise. All that matters is that we convert all the gray border pixels to black while preserving the white or green inside Heyoka. The result:

Voilá! A perfect transparent Heyoka, with limbs of the correct thickness.

To test it, let's put it on a black background.

The halo is gone. This is the answer to the question asked at the top of the page: a transparent PNG of Heyoka on a black background will show nothing beside the white eyes and green body.

Another Example of the Halo Effect

In the Heyoka image, the halo was hard to detect. Here's an example which highlights the problem. It's a blurred digit 2.

Compare the two methods for converting this to a transparent PNG. The first of the following images uses just the grayscale values to determine transparency. The second combines this with overpainting.

The halo is clearly visible around the first image, where grayscale source pixels have lightened the background pixels. If you don't want halos in your transparent PNGs, you now know how to avoid them.

No thanks at all to Heyoka for appearing in this tutorial!

---

Previous: Tip: Creative Dithering

MLI Home → Creations → Art → Photoshop → Tip: Transparent PNGs