There are hundreds or maybe even thousands of different ways to create a digital image, but the Portable Network Graphics (PNG) format is one of the few popular formats that can store and display transparency data.
PNG is a lossless format, which makes it great for saving high-quality transparent images for use on the web, for creating digital watermarks, and many other useful applications in the world of graphic design and digital imaging.
Creating a transparent PNG in Photoshop is actually very simple, as long as you’ve got your document prepared correctly. You’ll need to have some section of your document that contains no visible pixels, obviously!
In my example below, I’ve created some text for PhotoshopBuzz to use as a watermark (or, more accurately, to use as a handy tutorial aid!). Right now, the text is on two separate layers above the blue background layer. If I saved it as a PNG right now, it would look just like a normal image.
But if I hide the blue background layer (see below), the text now floats above a transparent background because there’s no image content visible anywhere except the text. I could just delete the background layer, but it’s not necessary, so it makes more sense to keep it in case I need it later.
Photoshop uses a checkerboard pattern to indicate transparent sections of your image, but the pattern will not be visible in the final transparent PNG file.
The same concept applies to any kind of image you want to create. As long as there is a section of your image with no image content – or even with partially transparent pixels – you’ll be able to make a transparent PNG.
With your image ready to go, open the File menu, select the Export submenu, and click Export As. Photoshop will open the Export As dialog box, allowing you to select the file format and customize your options.
In the File Format section, select PNG from the Format dropdown menu (it may already be selected since Photoshop remembers your previous Export As settings).
The Transparency setting should be enabled by default, but make sure that it’s still checked. Configure the rest of your image options any way that you need, and click the Export button. Set your file name, click the Save button.
That’s all there is to it! You’ve just made your first transparent PNG in Photoshop. Transparent PNGs are one of the most versatile tools in graphic design, whether you’re creating for print or for the online world, and you’ll probably find yourself making quite a few of them.
Now you can place your transparent PNG in other images as a watermark, or you can upload the PNG file to your website or any other graphic design project. Because PNG is so widely supported, you should be able to use it almost anywhere!
About Thomas Boldt