How to create a PNG file in Adobe Photoshop | Envira Gallery (2023)

by Benjamin Martorell on Aug 11, 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
How to create a PNG file in Adobe Photoshop | Envira Gallery (1)
  • In the dialog box, select PNG from the Format menu
How to create a PNG file in Adobe Photoshop | Envira Gallery (2)
  • 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.
How to create a PNG file in Adobe Photoshop | Envira Gallery (3)
  • 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.
How to create a PNG file in Adobe Photoshop | Envira Gallery (4)
  • 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.
How to create a PNG file in Adobe Photoshop | Envira Gallery (5)
  • 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.

How to create a PNG file in Adobe Photoshop | Envira Gallery (6)
  • Select the subject: On the toolbar on the left side, select the Magic Wand Tool.
How to create a PNG file in Adobe Photoshop | Envira Gallery (7)
  • 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.
How to create a PNG file in Adobe Photoshop | Envira Gallery (8)
  • 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.
How to create a PNG file in Adobe Photoshop | Envira Gallery (9)
  • 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

Top 11 Places to Sell Photos Online and Make Money

121 Best Free Lightroom Presets That You Will Fall in Love With

17 Best Photo Editing Software for Photographers (2023 Ultimate Guide)

How to Create a Photography Website in WordPress (Step by Step)

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

Using WordPress and want to get Envira Gallery free?

Envira Gallery helps photographers create beautiful photo and video galleries in just a few clicks so that they can showcase and sell their work.

Related Posts

  • How to Create a Distressed Retro Look in Photoshop

  • How to Create Light Leaks in Photoshop

  • How to Create a T-Shirt Mockup in Photoshop

  • How to Replace a Sky in Your Image Using Photoshop

  • How to Make an Image Transparent on Photoshop

  • How to Create a Striking Color Filter in Photoshop


How to create a PNG file in Adobe Photoshop | Envira Gallery? ›

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.

How to create PNG file in Photoshop? ›

How to convert to PNG format from a PSD image.
  1. Select File and choose Save As. From the options, select PNG.
  2. Choose an interlace option. The None option gives you the image only when the download finishes. ...
  3. Click OK.

How do I make my own PNG? ›

Upload your image to the online PNG maker and download it instantly. Choose an image, upload it to the remove background tool, and your new PNG file will be ready to download. Publish your new PNG image across all your social platforms or continue to edit it to perfection within Adobe Express.

What is PNG format in Photoshop? ›

What is a PNG file? PNG is short for Portable Network Graphic, a type of raster image file. It's particularly popular file type with web designers because it can handle graphics with transparent or semi-transparent backgrounds.

How do I make a high quality PNG image? ›

media to improve your PNG image:
  1. Step 1: Go to Upscale. media on your web browser.
  2. Step 2: Click the "Upload Image" button to upload your PNG file.
  3. Step 3: Adjust the output settings, such as the 2x and 4x.
  4. Step 4: Wait for the process to complete, and then download the improved PNG image.

How do I convert a JPEG to a PNG? ›

Using Windows
  1. Locate the JPG file you wish to convert on your system.
  2. Right-click it and select 'edit'
  3. In the Paint app, select 'file' then 'save as'
  4. Using the 'save as type' dropdown menu, choose 'PNG'
  5. Save the file to the location of your choice.
Oct 9, 2019

Why can't I save a Photoshop File as a PNG? ›

You are not able to save your file as a PNG in Photoshop because your document is in CMYK color mode or is set to 32-bit channel. You can confirm this by going to Image>Mode… PNG files can only be saved in RGB and only support 8-bit and 16-bit channels. To save it as a png, go to File>Export>Export As…

Why are my PNG files not transparent in Photoshop? ›

If the PNG is not showing transparent in Photoshop, go to the Properties panel (if it's not open, you can go to Window > Properties), and under the Artboard background color, change the dropdown menu to Transparent.

Why isn't my PNG background transparent? ›

If the layers have been flattened, transparency is lost. If the png you want to use isn't made for transparency, you can edit it in Photoshop.

Do all PNG images have transparent background? ›

A PNG is an image file type that allows you to have no background color. Most images cover a certain number of pixels and have color in all of those pixels, even if that color is white.

Does all PNG have transparent background? ›

That means that PNGs retain all their original file data when compressed, so they can contain a great deal of image detail. They also support opacity and transparency. Because PNGs can have transparent backgrounds, designers can layer them on different backgrounds and the backgrounds will show through.

Is PNG file editable in Photoshop? ›

Yes, you can edit a PNG file in Photoshop. Simply open the file in Photoshop, make your edits, and then save the file as a PNG.

Top Articles
Latest Posts
Article information

Author: Prof. Nancy Dach

Last Updated: 16/09/2023

Views: 6376

Rating: 4.7 / 5 (77 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Prof. Nancy Dach

Birthday: 1993-08-23

Address: 569 Waelchi Ports, South Blainebury, LA 11589

Phone: +9958996486049

Job: Sales Manager

Hobby: Web surfing, Scuba diving, Mountaineering, Writing, Sailing, Dance, Blacksmithing

Introduction: My name is Prof. Nancy Dach, I am a lively, joyous, courageous, lovely, tender, charming, open person who loves writing and wants to share my knowledge and understanding with you.