By: Jim Babbage
Page 1 of 1
Alpha Transparency is not limited to 32-bit PNG files.
If you're using Fireworks, that is. And if you export an 8-bit PNG file.
An 8-bit PNG file supports up to 256 colours and can support index (1 colour) transparency, just like a standard GIF file. However, the differences are more notable. While the format does not support animation, it tends to compress better than GIF and allows for alpha (variable) transparency.
A PNG file stores not only image information in the form of data chunks. One of these chunks represents transparency:
"(The) tRNS (Ancillary chunk) contains transparency information. For indexed images, it stores alpha channel values for one or more palette entries. For truecolor and grayscale images, it stores a single pixel value that is to be regarded as fully transparent."
While the capability is there, Photoshop, Gimp and Paintshop Pro do not support this 8-bit alpha transparency. Fireworks does.
Here's an example:
Open or create an image and apply a drop shadow, or glow, to the object, like you see in Figure 1 below. Set the canvas colour to transparent using the Property inspector.
Go to the Optimize panel and choose PNG-8 as your export format. Set your palette to web adaptive, colours to 256 and dithering to 0%. Under transparency, choose Alpha Transparency.
See all those colour swatches with a small box cut out of them? Those colours represent the drop shadow and glow in my sample image. The very first transparent colour block represents the standard transparent colour you would get if you chose index transparency. My sample file exports out at just over 8kb.
If I chose GIF, in this case I would get a smaller file, but I would lose my subtle glow and shadow in the process.
Fireworks can export this 8-bit alpha transparent image, which displays just as we would want in current browsers (great for glows or drop shadows).
Here's an example, placed within a div with a repeating background image:
Another example, on a solid colour:
Pretty cool, eh?
|I.E. 5.01||I.E 5.5||I.E. 6|
If you have a photo-quality image, this might not be an option due to the limited colour range in an 8-bit PNG file, but for solid colour images, or simple gradients, it can work nicely.
This also works for grayscale images. If I take the same file and convert it to grayscale in FW, look what happens to the palette:
Hopefully this opens up some new options for you in working with graphics for your designs.
Page 1 of 1 1