last updated: Feb. 25, 2001

This tutorial is written to assist the Png impaired. It is by no means an all-inclusive guide to creating alpha transparent Pngs. I wish to simply share the knowledge I have gained about the format.

For this Tutorial you’ll need a copy of Adobe Photo Shop 5.5 or better and a basic understanding of the program.

Here’s the graphic I’ll be using. It started as a antialiased vector object with a drop shadow. In the transparent gif format the shadow is pretty much imposible on a textured back ground so I had to leave it out. As you will see the png’s per pixel alpha blending will fix all that.

Here’s how to do it.

Build your image on a transparent background.

Here’s a shot of my image sitting on the transparent background.

Now here’s the easy part. We're going to save the image as a PNG and preserve the transparency.

From the file menu choose “Save for web…”. A new window will pop up that looks like this:

In this window choose the following settings:

Settings: PNG-24 with transparency
Matte: None
Transparency: checked

Click OK and save your image.

Now that was really simple wan’t it. Just kinda hidden in depths PhotoShop.

Here’s the final result as rendered in Mozilla 0.7s

The PNG transparency is excellent and very easy to use!