How to create a PNG file in Adobe Photoshop

by [email protected] on Sep 10, 2023

What is a PNG file?

Are you confused by what a PNG file in Adobe Photoshop is? If so, that is perfectly understandable because there are many image file formats available to photographers. The most common ones include Jpeg, GIF, TIFF, and of course, PNG.

What makes things even more tricky is that each has a specific purpose. In this article, we will look at the PNG format. You will learn about what a PNG file is, what it’s for, and how to make one.

PNG, which is pronounced like “ping” and its file name is .png, stands for Portable Network Graphics. It is a type of image format that web designers use to create websites because it supports transparent backgrounds and/or semi-transparent images (it is, in fact, the only type of image format that supports transparency).

This capability makes PNG great for logos and dynamic website graphics. So if you want a fantastic-looking website that your visitors will love, you should definitely use PNG-formatted images.

Odds are you have seen PNG images before, such as when a transparent logo is located on a photographer’s picture, allowing you to see the photo through the logo. In this case, the purpose of transparency is to subtly promote the photographer who took the picture (and to prevent someone else from using it).

A data reduction technique called lossless compression creates PNG files. This means that when someone chooses to compress an image, none of the data within it is lost. In other words, the PNG file remains identical to the original image file. This is different from lossy compression, which loses information when it compresses a file image.

Another advantage of PNG is that it supports grayscale and PNG-8, PNG-24, and PNG 32 color spaces, giving it the ability to display a wide range of colors.

However, this does mean that PNG files can be big, which is why pictures are usually in the Jpeg format (Jpeg files are lossy, meaning that each time they are decompressed, data is deleted).

Another plus of the PNG format is that it’s patent-free, which means anyone can use it without a license. 

Which programs open PNG files?

Plenty of programs open PNG files. These include default photo viewer programs, photo editing programs such as Lightroom and Adobe Photoshop, and web browsers. In any of these programs, you can view a PNG file by selecting ‘open’ from the drop-down menu or simply drag and drop it into the program or a web browser.

If you don’t already have Photoshop and Lightroom, you can get them through Adobe’s Creative Cloud Plan for only $9.99/month.

Adobe Photoshop and Lightroom and some of the most popular tools used by photographers, graphic designers and web developers because of their capabilities.

Easiest Ways for How To Create a PNG file in Adobe Photoshop

How to Create a PNG file in Adobe Photoshop is a simple process. Depending on what you want to accomplish with an image or graphic, there can be just a few steps or several.

Steps to creating a PNG file in Photoshop:

1. The easiest way is to simply ‘Save As’

• Click File on the top menu, then select Open
• Choose the image file and click Open
• Click File from the top menu, then select Save As

• In the dialog box, select PNG from the Format menu

• Click Save

While this is a quick way to create a PNG file, it does not alter the image in any way, such as making it transparent or removing the background to isolate the subject(s). These are the most common actions for PNG files. Follow the steps below to learn how to do both.

2. Make a transparent Photoshop image

• Open the file by repeating the steps outlined in number 1.
• Open the layers panel if it’s not already visible on the right. To do that, click Window, then select Layers.

• Click the Background layer in the Layers panel and then click OK in the dialog box that appears. This unlocks the layer, allowing you to change it.

• Click the Opacity drop-down menu in the Layers panel and choose a percentage lower than 100%. The lower you go, the more transparent the image will be.
• Click File on the top menu and choose Save As and select PNG from the drop-down menu. You now have a transparent Photoshop image.

3. Remove the background to isolate the subject

• Open the file by repeating the steps outlined in number 1.
• Add a transparency layer: On the top menu, click Layer, then select New. You will now see a new blank layer in the Layers panel that looks like a grey and white checkerboard. Photoshop automatically sets it to transparent.

• Drag the new layer under the Background image layer in the layers panel.
• Click the new layer to select it.

Tip: Instead of making a new layer, you can also click the little lock icon to unlock the Background layer. Whatever you delete from the image will become transparent.

• Select the subject: On the toolbar on the left side, select the Magic Wand Tool.

• Click Select Subject at the top of the window. Photoshop automatically selects what it thinks the subject(s) is. You will see ‘marching ants’ surrounding selection indicating.

• Delete the background: Click Select from the top menu, then choose Inverse. This selects the area of the image you want to remove around the subject.

• Press Delete on your keyboard. The grey and white checkerboard pattern of the transparent background is now visible.
• Press Command (Control on PCs) + D to remove the marching ants.

Tip: You may find that the selection misses some areas. For example, it may think shadows are the edges of the subject. To fix this, click on the
“Subtract from selection” icon at the top of the window, then use the magic wand tool to remove more of the unwanted areas.

The Benefits and Drawbacks of PNG Files

You read at the beginning of this article what a PNG file is and what it’s used for. You also learned about some of its benefits, including lossless compression (no data is lost and image quality remains the same) and that it supports PNG-8 (256 colors), PNG-24 (over 16 million colors), and PNG-32 (PNG 24 + 8 for transparent backgrounds) color spaces.

Other advantages include the wide range of transparency from invisible (0%) to fully visible (100%), you can add metadata, and you can make PNG files with multiple layers. Also, PNG files are capable of being compressed 10-30% more than GIF files.

The PNG format does have a few disadvantages. Unlike GIF, which stands for Graphics Interchange Format, PNG does not support animation. Also, as indicated above, PNG file sizes are typically larger than Jpeg files. This could be a problem if you don’t have a lot of storage space.

Thankfully, these issues are generally not a problem for most people since PNG files are mostly designed for websites.

So that’s it! You should be well on your way to creating PNG files in Photoshop using the information you learned in this tutorial. Pretty soon you will be able to make a logo that you can put on your pictures or make an attractive website.

If you found this tutorial helpful, you also may be interested in checking out these articles:

• How to Optimize Your Images for the Web (Step by Step)
• How to Add a Watermark with Photoshop and Lightroom
• Your Quick Guide to Layers in Photoshop

If you found this article helpful, please follow us on Twitter and Facebook to read more of our free WordPress tutorials and other resources.