Making PNGs with alpha-channel transparency in Photoshop

This is a brief but detailed tutorial on using Adobe® Photoshop® to take advantage of the PNG format's alpha-transparency feature to, basically, make grayscale images that will look halfway decent on a variety of different background colors.

I wrote it down because once when I wanted to do it myself, all I could find were pages that assumed you were already a Photoshop expert, or pages that only described the very simple one-level kind of transparency that even GIFs can do. So I thought I might save you the trouble if you ever need to do the same thing. I wrote it down as a story, because I'm a weblogger and I like to talk too much.

So the other day I was playing around CSSifying my weblog, making alternate stylesheets and so on, and I noticed a problem. Up until the CSSification, my weblog had always been in a brown color scheme, and in keeping with that scheme I had generally recolored all my images to be nice and brown.

Once the stylesheets were working, I naturally designed an alternate stylesheet that wasn't brown. But the results were less than optimal (see figure 1) because of course the images were still brown, not being magically recolored by the stylesheet.

nice blue weblog fragment, with jarring brown images
Figure 1

(Actually the blue and brown don't really look bad together, but it's the principle of the thing; I wanted to make a stylesheet that would produce an all-blue page.)

I looked around for solutions, and found that there's a whole set of CSS filters (that only work in IE), one of which ("filter: gray") will make any image into a grayscale image. That's great for grayscale pages, but doesn't help with blue.

Friend Ian suggested that I could do some magic with the alpha channel transparency in PNG files, to make images that would adapt themselves automagically to their background colors.

This sounded good to me, so I poked around the Photoshop menus and the Photoshop help, and when those were unhelpful I poked around the web, but all I found were pages that either assumed I was already a Photoshop expert and casually said things like "put your image into an alpha channel" without saying how, or described only