Maintaining Transparency in Images when Exporting

In PhotoShop, we have the ability to create transparent GIF and PNG images. In this tutorial, we will look how we can export images to maintain the transparency we create in PhotoShop, so that we can have a background image or color show through.

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.

We will start with the following image:

At present, we have a White background on the Padlock Layer and also a White background Layer:

We can choose the Magic Wand tool and using a Tolerance of around 20, we can select the White in the Padlock Layer and hit Delete:

We can also hide the Background White layer and should be presented with the following:

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

The white & gray checkerboard texture represents transparency in PhotoShop, but if we goto File > Save For Web & Devices, and choose a file format that does not support transparency (for example, JPEG), the background will be White:

[Click to enlarge]

However, if we choose a GIF or PNG file format, transparency should be maintained. Note there is an option to turn Transparency on and off:

If we cancel this screen and go back and add a Drop Shadow to our padlock, then go back to File > Save For Web & Devices, we will see the difference the shadow's fade makes. The matte option for a GIF will attempt to smooth the transparent areas with a solid color, so you'd choose the matte to match the background color of where the image will be placed. For example, if our image was going on a red background website, we'd choose a red matte:

[Click to enlarge]

This may look untidy here, but when it is placed on a red background, it will be a smooth drop shadow. However, if the image was placed on another colored background, or a textured background, it would look very messy. This is where the PNG file format comes in. If we choose the PNG file format, you'll see that the drop-shadow is perfect, but the file size increases quite significantly.

GIF with No Matte:

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

GIF with White Matte:

PNG:

Guys, please take a look at Server Intellect for Windows Web Hosting. I'm very pleased. You will be too. Take a look and see for yourself!