How to Export Photoshop Layers as Individual PNG Files
Exporting individual layers from a Photoshop file as separate PNG images is one of the most common tasks in design workflows. Whether you are preparing assets for web development, creating sprite sheets for games, or delivering design components to a client, you need each layer as its own file.
This guide covers multiple methods for exporting Photoshop layers as PNG files, from built-in Photoshop features to batch processing workflows. We also cover how to convert the exported PNGs to other formats when your project requires it.
Step-by-Step Instructions
- Use Quick Export as PNG
The fastest method for individual layers: Right-click the layer in the Layers panel and select Quick Export as PNG. Photoshop saves a PNG file with the layer contents and transparency preserved. This is ideal for one or two layers but tedious for many layers.
- Use Export As for more control
For more control over export settings: Select the layer, go to File > Export > Export As. Choose PNG format, set the scale (1x, 2x, 3x for different resolutions), adjust the canvas size, and click Export. This method gives you control over resolution and output size.
- Batch export all layers at once
For exporting many layers simultaneously: Go to File > Export > Layers to Files. Choose PNG-24 as the format, select a destination folder, and optionally add a file name prefix. Click Run. Photoshop exports every visible layer as a separate PNG file. This is the most efficient method for files with many layers.
- Convert PNGs to other formats if needed
If your project requires JPG, WebP, or another format instead of PNG, batch convert the exported files using imageconvert.co. Drag all the PNG exports onto the converter, select your target format, and download as a ZIP. This two-step workflow (Photoshop PNG export then format conversion) gives you the most flexibility.
Using Generator for Automatic Export
Photoshop's Generator feature automatically exports layers when you rename them with a file extension. Rename a layer to button.png and Photoshop creates the file automatically in a subfolder next to your PSD. This works in real-time as you edit. Enable Generator via File > Generate > Image Assets.
Generator supports naming conventions for multiple formats and sizes. For example, naming a layer 200% button@2x.png, button.png creates both a 2x retina version and a 1x version. This is especially useful for web and mobile UI design workflows.
Preserving Transparency in Exports
PNG supports full alpha transparency, which means your exported layers will have transparent backgrounds by default. This is essential for web assets, UI components, and any design element that needs to be placed on different backgrounds.
If you need opaque exports (no transparency), add a white background layer behind your target layer before exporting. Alternatively, convert the PNG exports to JPG, which automatically fills transparent areas with white.
Organizing Exports for Development
When exporting assets for developers, organization matters. Use consistent naming conventions: lowercase, hyphens for spaces, descriptive names like header-logo.png and nav-icon-menu.png. Group related layers before export so the output files naturally organize by component. Many developers prefer WebP over PNG for web assets due to smaller file sizes, so a batch conversion step after export is common.
Frequently Asked Questions
How do I export all layers at once in Photoshop?
Go to File > Export > Layers to Files. Select PNG-24 as the format, choose a destination folder, and click Run. Photoshop exports every visible layer as a separate PNG file.
Can I export Photoshop layers as JPG instead of PNG?
Yes, the Layers to Files script supports both PNG and JPG output. However, JPG does not preserve transparency. For maximum flexibility, export as PNG and convert to JPG afterward if needed.
How do I export layers at 2x resolution?
Use File > Export > Export As, select the layer, and set Scale to 2x. For batch export at multiple resolutions, use the Generator feature with naming conventions like 200% layer@2x.png.
Why are my exported PNGs so large?
PNG files from high-resolution Photoshop documents can be very large because PNG uses lossless compression. If file size is a concern, convert the PNGs to WebP at 90% quality using imageconvert.co for 50-70% smaller files with minimal quality loss.
Convert PNG to WebP for smaller files