Saturday, July 16, 2005

Making Transparent PNG Images

August 14, 2011: Many years after moving from Comcast to Verizon, and thus losing a big chunk of free webspace, I've finally moved the pictures in this article to Picasa, so that you can see them again.

Also note that if you know the exact color of the background, you can do the conversion from the command line.

One of the nice things about old-style GIF images is that it was easy to set the background to be transparent, so that it would show up on a web page without a funky border. New-style PNG images can also do this, but there doesn't seem to be a reliable stand-alone way to do this. Fortunately, I found directions for making a transparent background using the GIMP. The directions seem to be for an older version of the GIMP (I'm using 2.2.7), so let me write down the current directions here. They should work on a Windows machine as well as under Linux.

  1. Bring up the GIMP, and load in your picture. For our purposes we'll use this bit of modern art:
    Art?
  2. Now right-click on the image and select Layer > Transparency > Add Alpha Channel. (Alpha Channel is what gets made transparent.)
  3. Right-click again, Select > By Color.
  4. Left-click the image on the color you want to make transparent.
  5. Right-click once more, Edit > Clear. The color you selected should now be replaced with a checkerboard pattern.
  6. Save the picture, which should now appear like this:
    Transparent Art?
  7. I'm told that Internet Explorer doesn't do transparent PNGs well, so for youse guys, try a GIF version:
    Transparent Art?

And that's all I know about it.

7 comments:

lmkrenek said...

These instructions saved my life. I've been trying to put my logo on my new site for 3 days and was pulling my hair about, just seconds from quitting...and found your site with the only helpful piece of advice on the entire internet. Thanks so much!

--Laura

Anonymous said...

I am still trying to figure out how to do the following:

I have a grayscale PNG that is a sample of handwriting.

I would like to make all the white areas transparent, the black areas non-transparent, and the in-between grays translucent according to their color value (i.e. a pixel that is 75% white becomes 75% background color and 25% black.)

There must be a straightforward way to do this!
-brandon

Sla said...

Thanks.

King Bayern Munich said...

We supply many styles of sofas,such as living-room-sofa, Modern leather sofa . soft sofa. Lounge-sofa .
e supply all kinds of stone product,such as china tombstones, Modern-stone-sculpture, paving-stone Glazed-Vitrified-Tiles

rcjhawk said...

Dear King Bayern,

Ordinarily I delete comments from people selling stuff. But your comment is so insightful, thought-provoking, and relevant that I thought I'd leave it up to show everyone what an interesting person you are.

Love, rcj

Anonymous said...

Some images have a shadow effect. You can merge this with the transparent colour by

right click -> Layer -> Transparency -> Colour to Alpha

In the Colour to Alpha dialogue, click the box between From: [ ] to alpha then use the eye dropper to select your colour.

Doing it this way the transparency wont have a sudden cut off.

Anonymous said...

Worked like a charm in The Gimp 2.6.9 on Linux.