Tuesday, November 15th 2005

Quick 8-bit PNG Transparency Tutorial

As any returning reader may have noticed, I like making PNGs with transparent backgrounds.

I have been thinking for some time that I should write a short guide to making these images. I will do this using the GIMP, but I’m sure this basic method works in Photoshop too.

Sadly, though, there is no one perfect way of removing a background from a photo, not even if it is single-coloured as in this case. The following method is what I have concluded to be the best after testing numerous different variations. The resulting images work fine on both light and dark backgrounds, but the edges become a little jagged on darker backgrounds. Maybe I’ll work out an even better method in the future…

As an example I thought I’d use a product photo of the Slim Devices Squeezebox 2, which I think is a beatiful piece of HiFi/WiFi equipment. Check it out if you haven’t already. Anyway, here’s the original photo that I’ll be working on:

Squeezbox 2

The first thing to do is to select the area which is to become transparent. This is easily done using the wand tool. You may have to adjust the threshold value a bit to make it include any gray (shadow) areas too. For this photo I had it set to 50. (You’ll find the threshold in the tool options window – Ctrl+Shift+T.) Here’s what we’re aiming to get:

Making a transparent PNG, step 1

The next step is to increase the size of the selection very slightly to include the whole border area around the object. In my experience, increasing the selection by 1 pixel is usually best. (If you have a very large photo you could always try 2 or maybe 3 pixels.) Click [Select] > [Grow…] and choose the amount you want. (I’m not sure of the English wording of the commands, I’m just guessing based on my Swedish version.)

Making a transparent PNG, step 2

Then we create a layer mask by clicking [Layer] > [Mask] > [Add new mask…]. In the dialogue that pops up, select [Grayscale copy of layer], and tick the [Invert mask] option. That should give us something like this:

Making a transparent PNG, step 3

As you can see, this makes all light parts of the image transparent, including any highlights on the object we want to be fully opaque. To fix this, invert the selection (Ctrl+I) and bring up the layers window (Ctrl+L). Here, select the inverted miniature on the right, representing the layer mask:

Making a transparent PNG, step 4

Then choose the fill tool (Shift+B) and set the foreground colour to white. Bring up the tool options (Ctrl+Shift+T) and check the option to [Fill whole selection]. Then simply click inside the selected area, and your object should magically become opaque:

Making a transparent PNG, step 5

After that, invert the selection again (Ctrl+I) and select the miniature on the left in the layer window, i.e. the layer itself. Now change the foreground colour to black and use the fill tool in the current selection, to make the shadows visible:

Making a transparent PNG, step 6

That’s pretty much it. Now just remove the selection (Ctrl+Shift+A) and apply the layer mask by clicking [Layer] > [Mask] > [Apply layer mask]. Save the photo as something.png, put it on your favourite background colour and enjoy looking at it:

Making a transparent PNG, the final result

Oh. And you’ll need to tell your website visitors to get Firefox. 🙂

No Responses to this post:

  1. Anonymous says:

    You should never tell your website viewers to view a website in a different browser. It is not web standards to do so – offer a different image for IE6.

  2. David Naylor says:

    Well, I’m sorry, but IE6 users are the scum of the earth. That’s all there is to it.