Transparent PNGs in Photoshop

This is a nice little tutorial to show you how to create images that have transparent backgrounds. This is occasionally very useful in web-design, particularly if you want an image over a div or table that holds content that changes often.

All you have to do is create your image like normal, and then when you go to save it select 'Save for Web & Devices'. Then select 'PNG-8' from the drop-down menu. And then select the color(s) you want to make transparent and click the transparency icon under the color table (the one on the far left). And then just click 'save'.

There are two things you need to look out for. Firstly, make sure you don't have any of your background color in your actual image, or else it will become transparent as well. Secondly, be sure to make your background color close to the color of whatever you plan on putting behind the image.

The following images are both PNG-8s. The first has a white background set to be transparent, the second, a dark blue. You'll notice that you can still see a little white around the first image.