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. 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.
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 capture 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.
Posted by dave | September 20, 2007 2:45 PM
Posted on September 20, 2007 14:45
great tips, i'm currently using a special javascript function to apply a Micro$oft css transparency filter for ie6 browsers to render png24.
Posted by James | October 13, 2007 4:01 PM
Posted on October 13, 2007 16:01
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!
best,
d.
Posted by david stong | October 14, 2007 1:19 PM
Posted on October 14, 2007 13:19
Hi,
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?
J
Posted by j | October 29, 2007 7:42 AM
Posted on October 29, 2007 07:42
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.
Posted by david stong | October 29, 2007 12:45 PM
Posted on October 29, 2007 12:45