« Emerson post from SquareSpace | Main | Washing the elephant post from SquareSpace »

PNG8 alpha transparency from Fireworks

This seems like it's important information if you ever do web graphics. I've been at it for a dozen years, and it caught me completely unaware. An article at Sitepoint yesterday claimed that Fireworks was the only graphics application to take advantage of a little known capability specified for PNG-8. Fireworks can save a PNG-8 with more than one level of transparency and will be displayed in Internet Explorer version 6.

The article goes on to say none of the web folks in his office would believe it at first and of course, I didn't either. It took me a while to get IE6 on a laptop and do a few test files, but damn. It's true.

First I created a simple image in Photoshop that displayed a fuzzy glow. I saved this first version as a "PNG24" with 8-bit transparency right out of Photoshop. PNG 24 saying PiNG glorious PiNG. Next, I matted the fuzzy semi-transparent glow to a test pages blue background color and saved a PNG-8 out of Photoshop. I closed the layered Photoshop file, then opened it in Fireworks. Fireworks has always been a bit tedious to me- I'm not a Macromedia fan, and always preferred Adobe's ImageReady. Doing anythng at all in Fireworks is very unfamiliar territory, but it was easy to just turn off the background layer and choose "Alpha Transparency" instead of "Index Transparency" then save the new version.

I was shocked. It made a big difference. Almost a dozen years working with this stuff and I'm just learning something this elementary NOW? Damn. PNG from Fireworks saying PiNG glorious PiNG. Keep in mind that a textured background makes the transparency in the image more noticeable. I've placed a test page on the personal server with examples of PNG-24 and PNG-8 from Photoshop, PNG-8 from Fireworks, and most importantly, a screen capture of the display as it appears in Internet Explorer version 6. Version 6 and earlier had no support for PNG-24 8-bit transparency, and displayed it as a default gray field.

Added Saturday, 09/22:

More, I made this captureTwo versions of the Penn State mark. that shows the same 8-bit PNG with alpha transparency opened in Photoshop on the left, and in Safari on the right.

...and I trusted you, Photoshop. Now, it can never be the same again.

Comments (5)


Novice at Fireworks that I am, I logged in to LYNDA.COM to check there videos. They have quite a few on the different versions of Fireworks- Macromedia's and Adobe's- but none mention this.

great tips, i'm currently using a special javascript function to apply a Micro$oft css transparency filter for ie6 browsers to render png24.

david stong:

Thanks, James. I'm not as secure in my javascript skills as I should be. I don't use the function, but some of our developers do- it allows for user selected color changes behind standard graphics. Man, where would we be without ie hacks!



I can't believe after 8 years in the industry that I'd never seen this technique, until now.

This will be very useful for a project I'm working on now but I can't get it to work, as I have a blueish background in IE6. I've followed the SP article to the letter (i think) and still can't it to work. Looks fine in IE 7 and FF 2.0

Any ideas?


david stong:

Unbelievable, isn't it? And with my complete trust in Photoshop/ImageReady, I'm far behind the curve on Fireworks.

It's tough to guess what your difficulty could be, J; are you able to send me a file? Maybe a second pair of eyes could help.

Post a comment


This page contains a single entry from the blog posted on September 20, 2007 10:36 AM.

The previous post in this blog was Emerson post from SquareSpace.

The next post in this blog is Washing the elephant post from SquareSpace.

Many more can be found on the main index page or by looking through the archives.

Powered by
Movable Type 3.33