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:

image 1

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

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:

image 3

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

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:

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:

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:

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:

image 8

GIF with White Matte:

image 9

PNG:

Maintaining Transparency in Images when Exporting



Author's URL: OnlyPhotoshop
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
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. More Photoshop Basics Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Maintaining Transparency in Images when Exporting"

Captcha