Alpha-channel transparency in PNGs

Can anyone show me how to create transparent PNGs in Photoshop or ImageReady? Even single-color is fine for now, I don’t need alpha channel transparency at the moment, although it would be useful to know. If I can’t do it easily in one of these two apps, what should I be using? Is there something for OS X comparable to Paint Shop Pro for Windows?

I can’t imagine why, but unlike every other current browser available, Internet Explorer doesn’t support alpha transparency out-of-the-box. The support is actually there, but web developers have to resort to ugly hacks to get it.

Dean Edwards’ IE7 hack looks like the best solution at the moment. I’ve used it to force standards-compliant CSS rendering in IE, and it includes code to enable PNG transparency too, although I haven’t tested that part yet. All you have to do to use it is sniff for IE and include some extra JavaScript for those users. I’m pretty impressed with the CSS support it gives you. Hopefully the PNG support is just as good.

Just last month, Dave Massy, a senior IE program manager at Microsoft, said this about the problem:

We have certainly heard the need for alpha channel transparency support in PNG rendering. Unfortunately this work is not as easy as it might appear due to the architecture optimized around image rendering. We definitely hope to address this though in a future release.

Now it can’t possibly be that difficult if I can use a bit of JavaScript on my web site to enable it. So what’s the real reason?


goffchick says:

A newish Photoshop on OSX, I assume? Photoshop keeps changing its mind on how to do pngs, so try:

1) One layer, everything you want to be clear, left clear, not a Background layer since it needs to have clear bits. Save as png/convert to lesser colours and save as png (as I recall, lowering colours doesn’t work with the gradient transparency, only on/off like gif, but its been a bit since I’ve tried it).

2) Put in the background of the Background layer the colour of the bits that go transparent, and make a new channel with your actual transparency.

If neither of those work, look for a plug-in. Mac Photoshop used to need one at one point, then didn’t, then did again.

Also, colour me very amused by Mac IE having had png transparency proper for ages, and Netscape has also outstripped IE at it. I’d say they seriously dropped the ball on this one, but sadly people don’t care enough except for the designers who have to do all the work to come up with alternate workarounds. I’ve been using a list apart solution for it for a while that has treated me pretty well.

kchrist says:

Thank you, Tasha. I’m using Photoshop 7 on OS X. I’ll give your suggestions a try and let you know if I figure it out.

Part of the problem is just that I’m pretty graphically-challenged. I suck at teh photoshop.