Get the basic skills of working with Photoshop. This section contains descriptions of the Photoshop bars and tools as well as the basic techniques of using them.  Home Photoshop Photoshop Basics Maintaining Transparency in Images when Exporting

Maintaining Transparency in Images when Exporting


We will start with the following image:

Maintaining Transparency in Images when Exporting image 1

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

Maintaining Transparency in Images when Exporting image 2

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:

Maintaining Transparency in Images when Exporting image 3

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

Maintaining Transparency in Images when Exporting image 4

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:

Maintaining Transparency in Images when Exporting image 5

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:

Maintaining Transparency in Images when Exporting image 6

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:

Maintaining Transparency in Images when Exporting image 7

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:

Maintaining Transparency in Images when Exporting image 8

GIF with White Matte:

Maintaining Transparency in Images when Exporting image 9

PNG:

Maintaining Transparency in Images when Exporting image 10



Author's URL: OnlyPhotoshop
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Maintaining Transparency in Images when Exporting"

Only registered users can write comment

No comments yet...