PNG and Alpha Transparency

Transparent GIFs have been a great success for use on the internet (spacer.gif anyone?). The support for transparent pixels in addition to other advantages, makes GIF a great image format. There are, however, a few disadvantages compared to other formats (such as PNG); it only supports up to 256 colors, pixels are either transparent or not - nothing in between is possible, and the level of compression on multi-colored areas (such as real-world photos) are very low. PNG on the other side, supports plenty of colors (24bit) and partially transparent pixels. The level of compression are, however, not the best.

In this tutorial, I'll demonstrate how you can use transparent PNGs to create great looking effects for use on the web. But be aware that there are one browser today that lacks the support for alpha transparency, can you guess which one? Yep, Internet Explorer. Thankfully, the developers of IE7 have implemented full support for it.

To demonstrate the effect, I'm going to use a picture of an object, in this case a closeup of a USB plug, give it a bit of shadow, and then place it on top of a block of text.

The image I used looks like this:

As you can see it's a 400x240 px canvas with a transparent background. The USB plug itself is on a separate layer which I then gave a shadow by double-clicking the layer to open the Layer Style box and using the setting as shown below:

When you're satisfied with the way it looks, go to File > Save for web. The only thing you need to do here is to select PNG-24 from the list of presets and make sure Transparency is checked.

A demonstration

As mentioned before, I've made a demonstration of this effect. With a single paragraph of lipsum and the image of the USB plug positioned on top of the text.