BytesizeCSS

Alpha PNG8 in Fireworks 10.08.2008 @ 01:12pm 20 comments

Using Fireworks you can save an image as an aplha PNG8 which preserves it's transparency in all modern browsers and just looks like a choppy GIF in IE6. Obviously this isn't ideal for all transparency situations but I have been able to use it for most of my transparent needs without sacrificing too much in as far as aesthetics go!

So, how do you do it? Let's get to the point here...

In Fireworks create a new white canvas (I've set my dimensions to 500x300) and draw a circle shape in blue. Click the preview button and ensure the 'Opimize and Align' panel is expanded (press F6). You should see something like the following:

Within the 'Optimize and Align' panel, make sure that PNG8 is the selected format and change the "No transparency" drop down to "Alpha transparency". You should now see the following (click image to enlarge):

Now all you need to do is export the file and that's it! Click File > Export and save to your desired location. If you preview the image in modern browsers, it will look as follows:

I have changed the background colour in my browser to show the transparency. Now in IE6, you see the following:

So as you can see, it's not perfect in IE6 but it's not bad either!