Transparent PNG Files in Fireworks and Photoshop

Just a little post today concerning the creation and export of transparent png files from your favourite image editors.

Personally, my favourite image editing app is Photoshop, for lots of reasons, but when it comes to building mock-ups for websites, Fireworks has a few little tools I favour. However, exporting transparent png files is handled differently in these two apps.

First of all, I am dealing with png files rather than gifs due to the alpha transparency issues. With a gif, you can have an image on a transparent background, but the edge is pretty rough. You usually get round this by specifying a matte colour, which matches the background on which it is going to sit. However, sometimes, you want to put it on different background colours, or you have a drop shadow that just doesn’t work as a gif.

With Photoshop, simply alt+clicking on your chosen image section should hide all the other layers, and if you have converted your background to a layer, you will be viewing it against the transparent checkerboard. Now go to the Image menu and select Trim > Transparent pixels to crop the canvas to size. From here, go to the File menu and Save for Web and Devices. Select the PNG-24 Preset at the top corner and save your file.

PNG-24 from Photoshop

Fireworks is a little different. For a start there doesn’t seem to be an option to hide all but one layer with a single click. There is however, a handy right (ctrl) click on the object option to Insert a Rectangular Slice. This tucks neatly around your object. Next, right-click again and you’ll see the option to Export Selected Slice… (If you have the other layers turned off you can go for a transparent png.) In the Optimize panel, you need to set your option to PNG 32. There is an option for PNG 24 but this does NOT give you transparency.

Remember, Fireworks = PNG 32.

PNG 32 from Fireworks