Envira Gallery Blog
Digital Photography Tips, Tutorials and Resources
How to Create a Photoshop PNG File with Transparency
Last updated on Mar 20, 2025 by Southie Williamson Reader Disclosure
As a website owner and creative marketer, I’ve spent countless hours working with image files across different platforms. When I first started creating graphics for clients, I quickly learned that PNG files were essential for maintaining quality and transparency in my website designs.
I’ll explain what PNG files are, their benefits, and show you exactly how to create them in Adobe Photoshop with step-by-step instructions. Whether you’re designing logos, creating website graphics, or preparing images for your online store, you’ll learn exactly how to create Photoshop PNG files.
What is a PNG File?
PNG (file extension .png) stands for Portable Network Graphics. It’s a popular image format used by web designers because it’s the only format that fully supports transparent backgrounds and semi-transparent images.
This capability makes PNG perfect for logos, graphics, and other website elements where you want to maintain transparency. If you’ve ever seen a transparent watermark logo overlaid on a photograph (allowing you to see the photo through parts of the logo), that was likely a PNG file in action. In this case, the purpose of transparency is to subtly promote the photographer or brand while preventing someone else from using the photo.
PNG files are created using lossless compression, meaning when an image is compressed, none of the data within it is lost. The PNG file remains identical to the original image file, unlike lossy compression formats like JPEG that discard data during compression.
Another advantage of PNG is that it supports multiple color spaces:
- PNG-8 (256 colors)
- PNG-24 (over 16 million colors)
- PNG-32 (PNG-24 plus 8-bit transparency channel)
PNG files are also patent-free, meaning anyone can use them without a license.
Which Programs Open PNG Files?
Many programs can open PNG files, including:
- Default photo viewer programs on your computer
- Photo editing software like Adobe Photoshop and Lightroom
- Web browsers (Chrome, Firefox, Safari, etc.)
To view a PNG file in any of these programs, simply select ‘open’ from the menu or drag and drop the file into the program or browser window.
If you don’t already have Photoshop and Lightroom, you can get them through Adobe’s Creative Cloud Photography Plan for $19.99/month.
How to Make a PNG File in Photoshop
Creating a PNG file in Photoshop is straightforward. Depending on what you want to accomplish, there are several methods available.
1. Save As a PNG in Photoshop
The easiest way to create a PNG file is to simply save an existing image as a PNG:
To start, import your image into Photoshop (File » Open in the top menu) or open an existing project. Click File from the top menu, then select Save As.
NOTE: If you image contains multiple layers or other complexities, use the Save a Copy option instead. This will let you save a flattened version of your image as a PNG without overwriting the original files.
In the window that opens, click On your computer in the bottom left.
In the dialog box that opens, select PNG from the Format menu. Then, click Save.
While this method quickly creates a PNG file, it doesn’t alter the image in any way, such as making it transparent or removing the background. For these more advanced techniques, continue reading.
2. Create a Transparent PNG Image in Photoshop
To make a partially transparent PNG in Photoshop:
Import your image into Photoshop (File » Open in the top menu). If it’s not already visible, open the Layers panel by clicking Window » Layers.
Double click the image or background layer (titled Layer 0 by default) in the Layers panel to open the Layer Style settings.
Then, in the dialogue box, use the Opacity slider to adjust the transparency (the lower you go, the more transparent the image will be). Click OK when you’re done.
After that, you can click File » Save As and follow the instructions from above to save it as a PNG.
You’ve now created a transparent PNG image in Photoshop!
3. Remove the Background to Isolate a Subject in Photoshop
To create a PNG with a transparent background around your subject:
Open your file in Photoshop (File » Open in the top menu). With the image layer selected, click the Remove Background button located beneath the image. The grey and white checkerboard pattern of the transparent background will now be visible.
TIP: Use the Add to Mask and Subtract from Mask options (outlined in red below) to fine-tune the result. These tools allow you to paint over areas to either restore or erase specific parts as needed.
After you’ve erased the background and refined your subject, click File » Save As and follow the instructions from the first method above to save it as a PNG.
You can see our Quick Guide: How to Make an Image Transparent in Photoshop to learn more about making backgrounds and subjects transparent.
Benefits and Drawbacks of PNG Files
At the beginning of this article, you learned what a PNG file is and what it’s used for. Now, let’s take a look at some more benefits of using PNG format as well as a few disadvantages.
Benefits:
- Lossless compression maintains image quality
- Supports varying levels of transparency (0-100%)
- Compatible with PNG-8, PNG-24, and PNG-32 color spaces
- Allows for metadata inclusion
- Supports multiple layers
- Can be compressed 10-30% more efficiently than GIF files
- Patent-free format
Drawbacks:
- Doesn’t support animation (unlike GIF)
- File sizes are typically larger than JPEG files
- Not ideal for photographs where transparency isn’t needed
These drawbacks are generally not a problem for most users since PNG files are primarily designed for web graphics rather than photo storage.
Displaying PNG Files on Your Website
Once you’ve created beautiful PNG files with transparent backgrounds in Photoshop, you’ll want to showcase them properly on your website. This is where Envira Gallery comes in handy.
Envira Gallery is the best WordPress gallery plugin for photographers and designers who want to display their work professionally. With Envira Gallery, you can easily create responsive, beautiful galleries to showcase your PNG images with features like:
- Automatic image optimization that preserves your PNG transparency
- Lightbox displays with social sharing options
- Dynamic galleries that load quickly without sacrificing image quality
- Password protection and watermarking to protect your work
- SEO-friendly features like lazy loading and deep linking
Get started with Envira Gallery today!
Whether you’re creating PNG logos, graphics, or product images with transparent backgrounds, Envira Gallery ensures they display perfectly on your WordPress site.
Frequently Asked Questions
What’s the difference between PNG and JPEG?
PNG uses lossless compression, meaning it preserves all image data and quality, while JPEG uses lossy compression that discards some data to reduce file size. PNG supports transparency, whereas JPEG does not. PNG is best for graphics, logos, and images with text, while JPEG is better for photographs and images with many colors.
When should I use PNG instead of JPEG?
Use PNG when you need transparency, for images with text, logos, graphics with sharp edges, or screenshots. If you need smaller file sizes for photographs without transparency, JPEG is often a better choice.
Why are my PNG files so large?
PNG files are larger than JPEGs because they use lossless compression, preserving all image data. The file size also increases with the number of colors and the complexity of the image. For web use, you can reduce PNG file sizes using compression tools, like TinyPNG, or by adjusting color depth settings in Photoshop.
Can I convert a JPEG to a PNG with a transparent background?
Yes, you can open a JPEG in Photoshop, remove the background using the techniques described above, and save it as a PNG. However, since JPEGs don’t store transparency information, you’ll need to manually create the transparency by selecting and removing the background.
Which PNG format should I use – PNG-8, PNG-24, or PNG-32?
Use PNG-8 for simple graphics with few colors (up to 256 colors) to keep file sizes smaller. Use PNG-24 for complex images with many colors but no transparency needs. Use PNG-32 when you need both millions of colors and transparency (like logos or product images that need to be placed on various backgrounds).
I hope this tutorial helps you create PNG files in Photoshop! With these techniques, you’ll be able to make logos for your images or create graphics for an attractive website. If you found this guide helpful, you may want to check out:
- Quick Guide to Layers in Photoshop
- How to Add A Watermark with Photoshop and Lightroom
- How to Create a Watermark in Luminar
- Top 5 Free Alternatives to Photoshop
Not using Envira Gallery? Get started today!
Don’t forget to check out our blog and follow us on X (Twitter) for the best photography tips, resources, and WordPress tutorials.
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.
