Create a Transparent Background Image in Photoshop *.png

As described in our earlier post, creating an image with a transparent background has many benefits, specifically for websites.

In this tutorial, we shall teach you how to create an image with a transparent background, and save it as a *.png file. We also discussed why using a *.png is better than a *.gif image.

To start, create your image (ctrl+n) or file->new

If you select Background Contents to be transparent here, you’re already ahead of the game.

If you have already created your image, your best bet is to rasterize your background layer, and drop the transparency to zero.

Shown above, I have already rasterized the layer, as well as converted it to a smart object (one above the other in the image above). When you convert your background to a raster it allows you to play with that layer more, and when it’s converted to a smart object layer, you can do even more stuff to it (you’ll notice a little lock goes away when you convert it to a smart object).

Once this is done, drop your opacity down to zero, and you should have a transparent background.

The key here is to make sure that the layer you want to make opac is selected, and also at the bottom of all the layers.

Once this is done, and you have your image, it should show up something like this:

The checker means it’s transparent, unless you’ve tweaked the settings, in which case, I doubt you’re reading this.

So, now we have our image in photoshop, all that’s left is to save our file as a *.png file.

The next prompt asks you if you would like to use some kind of interlacing. I haven’t found any reason to use interlacing, but maybe you have one?

You should now have a *.png file in your location you saved, ready for you to enjoy!