PNG transparent images

About Celoxdesign

Celoxdesign is a webdesign community offering free high quality tutorials in several categories such as Adobe Photoshop, Maxon Cinema 4D, Cascading stylesheets and xHTML.
I drive myself to give all my knowledge back to the design community for free and will continue doing this for a long time.

Guest tutorials

A new added feature on Celoxdesign is the guest tutorials section, this section will house tutorials written by my guests/members, some of them are even better tutorials that I've written over the past years. Register yourself and submit your own guest tutorials to give something back to the design community.

Intro:

This photoshop tutorial will teach you how to create transparent images using PNG, these images can be used on every background color.

Step 1:

Open up this image of the earth. When you use another image make sure you delete the background around the image which we're going to do next with the earth image.

Since the background is black it's very easy to delete the background from the earth, the earth doesn't have any black edges, when there were black edges in the earth we couldn't have deleted the background with the Magic wand tool. So with this image we're going to use the magic wand tool, take out the magic wand tool and click once on the black background. Make sure the image is unlocked in the layers palette, unlock it by double clicking the layer. Then it's time to hit delete on your keyboard to delete the background. If we didn't unlock the layer it wouldn't delete the background but left us with a white background, try it out for yourself if you want.

You should now have an image like this.

Step 2:
Now it's time to save this image as a PNG and make it's background transparent. Go to File > Save for web. And take the preset "PNG-24", make sure transparency is checked! This is the preset I use mostly for my transparent images which I think gives the best result. You could use the PNG-8 preset and change it's values a bit to your likings but the PNG-24 prest does the job better, but the image size will be higher then with the PNG-8 setting. Below are both presets.

PNG-24 preset:


PNG-8 preset (with default settings):


Hope you enjoyed this short free photoshop tutorial on making transparent images in photoshop! For example this image setting is very handy if you have an image with round edges needed on different background colors. I use a PNG image on my free downloads pages, I use a gradient rollover on my divs so using a flat color JPEG won't work there since it would look jagged when you rollover the div. Go to the Download free templates page to see the example.