SitePoint » Making ‘IE6-friendly’ PNG8 Images

SitePoint » Making ‘IE6-friendly’ PNG8 Images

The problem is all the semi-transparent yellows and shadow grays that blended with the blues to create ‘inbetween colors’ have been rendered 100% transparent by IE6. Our pixels are either yellow or blue — not halfway between.

The Approach
While we’re never going to be able to reproduce the transparent shadow in IE6, we do need a way to generate a lot more of the yellow/blue blending colors along the edge. I’ve found the easiest way to do this is to bring a tiny slither of the background inside our yellow shape.

Matched corder colorsIn the diagram at the right, I:
1. First duplicated the main yellow shape on top of the original
2. Set its fill color to ‘clear’ so the original shape shows through
3. Set it’s border color to the background blue
4. Used the knife tool in Fireworks to break the new border into 4 separate lines. This allows me to color each border color separately.
5. Exported the graphic