How to Convert PSD to PNG (Flatten Layers Properly)
Why PSD to PNG Is Trickier Than It Looks
A PSD file is not a single image — it's a stack of layers, adjustment layers, masks, smart objects, and blending modes that only fully render when a capable application processes them. When you convert PSD to PNG without accounting for this, you can end up with a flat white background where transparency should be, missing text because a font layer wasn't rasterized, or color shifts because an adjustment layer got dropped entirely. PNG is a raster format. It stores pixels, not instructions. So the conversion process is really a rendering step: you're collapsing all those PSD instructions into a final grid of pixels, then saving that grid as a lossless PNG. The quality of your output depends entirely on how well that rendering step handles everything Photoshop packed into the file. The most common failure modes are: (1) transparency not preserved — you get a white or black fill instead of an alpha channel; (2) layer effects like drop shadows or glows disappearing; (3) smart objects rendering at the wrong resolution because they weren't rasterized first; and (4) color profiles being stripped, which shifts colors noticeably on calibrated displays. Understanding these failure modes before you convert saves a lot of back-and-forth.
Flattening Layers in Photoshop Before Exporting
If you have access to Adobe Photoshop, flattening and exporting manually gives you the most control. The key distinction is between 'Flatten Image' and 'Merge Visible' — they behave differently and you should choose deliberately. 'Flatten Image' (Layer > Flatten Image) merges every layer, including hidden ones, and fills any transparent areas with white. This is almost never what you want for a PNG that needs transparency. Instead, use 'Merge Visible' (Layer > Merge Visible, or Shift+Ctrl+Alt+E on Windows / Shift+Cmd+Option+E on Mac). This stamps all visible layers onto a new merged layer while keeping the original layer stack intact below it. You can then export just that merged layer with transparency preserved. For the actual export, skip 'Save As' and use File > Export > Export As (not 'Save for Web', which is the legacy path). In the Export As dialog, set Format to PNG, check the 'Transparency' checkbox, and set the resolution. For screen use, 72 PPI is standard. For print or high-DPI displays, use 144 or 300 PPI depending on the final context. If your canvas is 2000×2000 pixels at 72 PPI, the exported PNG will be exactly 2000×2000 pixels — the PPI metadata is embedded but doesn't change pixel dimensions. One more thing: if your PSD uses a color profile other than sRGB (common in print workflows — CMYK or Adobe RGB 1998), convert to sRGB before exporting. Go to Edit > Convert to Profile, choose sRGB IEC61966-2.1, and use Relative Colorimetric rendering intent with Black Point Compensation checked. Skipping this step is why PNG files sometimes look washed out in browsers.
Converting PSD to PNG Online with CocoConvert
Not everyone has Photoshop installed, and even if you do, batch-converting dozens of PSD files manually is tedious. CocoConvert's [PSD to PNG converter](/convert/psd-to-png) handles the rendering server-side, which means you upload the PSD and receive a flattened PNG without needing any design software locally. The converter merges all visible layers and preserves the alpha channel, so transparent areas in your PSD come through as transparent pixels in the PNG output — not a white fill. It handles common layer types well: rasterized layers, text layers (rendered at the document's native resolution), and basic adjustment layers like Levels, Curves, and Hue/Saturation. To use it: go to /convert/psd-to-png, click 'Choose File' or drag your PSD onto the upload area, and click Convert. Files up to 50 MB are supported. Once processing completes — typically 5–15 seconds for a standard web-resolution PSD — you'll get a download link for the PNG. The output is lossless, so pixel values are preserved exactly as rendered. For batch conversions, you can upload multiple PSD files at once. Each file is processed independently, and you can download them individually or as a ZIP archive. This is useful for icon sets or UI kits where you have 20–30 artboards exported as separate PSDs.
What CocoConvert Cannot Handle (Be Honest About This)
Automated PSD conversion has real limitations, and it's worth being clear about them rather than discovering problems after you've delivered assets to a client. Smart Objects are the biggest caveat. If your PSD contains embedded or linked Smart Objects — especially those with their own internal layer stacks or applied Smart Filters — CocoConvert renders them at the document's current pixel dimensions, not at the Smart Object's native resolution. A Smart Object that contains a 4000px vector graphic placed in a 1000px canvas will render at 1000px. You won't lose quality relative to the canvas, but you won't get the benefit of the Smart Object's higher internal resolution either. For that, rasterize your Smart Objects in Photoshop first (Layer > Smart Objects > Rasterize). 3D layers and video layers are not supported. If your PSD contains either, those layers will be omitted from the output. You'll see whatever is beneath them in the layer stack. Complex blending modes — specifically Dissolve, Hard Mix, and some luminosity-based modes applied to adjustment layers — may render slightly differently than Photoshop's native output. The difference is usually subtle (within 2–3 color values per channel), but if pixel-perfect accuracy matters, verify the output against a Photoshop reference export. Finally, CMYK PSDs are converted to sRGB during processing. The conversion uses a standard ICC profile transform, which is accurate for most cases but won't match a print-calibrated workflow. If you're producing assets for offset printing, do the color conversion manually in Photoshop as described in the previous section.
Choosing the Right PNG Settings: Bit Depth and Compression
PNG supports both 8-bit and 24-bit (sometimes called PNG-8 and PNG-24), and the difference matters depending on your use case. PNG-24 stores 16.7 million colors and a full 8-bit alpha channel. This is what you want for photographs, complex gradients, or any image with subtle color transitions. CocoConvert outputs PNG-24 by default, which is the right call for most PSD files. PNG-8 stores only 256 colors using a palette. It produces much smaller files — sometimes 60–70% smaller — but introduces visible banding on gradients and can't represent partial transparency accurately (only fully transparent or fully opaque pixels). PNG-8 is appropriate for simple icons with flat colors and hard edges. If you need PNG-8 output, you'll need to post-process the PNG-24 output in Photoshop (File > Export > Save for Web, set to PNG-8, adjust the palette to 256 colors) or use a tool like pngquant. PNG compression is lossless by default — compression level only affects file size and encoding speed, not image quality. A compression level of 6 (on a 0–9 scale) is a reasonable default that balances file size and encoding time. CocoConvert applies this automatically. If you need the absolute smallest PNG for a performance-critical web project, run the output through a dedicated optimizer like oxipng or pngcrush after conversion — these tools can typically reduce file size by another 10–20% without any quality loss. For web assets specifically, also consider whether PNG is actually the right format. If you don't need transparency, JPEG at quality 85 will be 3–5× smaller. If you need transparency and are targeting modern browsers, WebP or AVIF offer better compression than PNG. But for design handoff, asset libraries, and anything that needs to be re-edited later, PNG remains the correct choice.
Handling Transparency Correctly: A Closer Look
Transparency in PNG is stored as an alpha channel — a separate 8-bit grayscale channel where 0 is fully transparent and 255 is fully opaque. Every pixel has both a color value and an alpha value. This is what allows soft edges, drop shadows, and anti-aliased text to look correct when placed over different backgrounds. The most common transparency mistake when converting PSD to PNG is pre-multiplied alpha. In a pre-multiplied alpha image, the RGB values are already multiplied by the alpha value during compositing. If your conversion tool outputs pre-multiplied alpha and the receiving application expects straight alpha (or vice versa), you'll see dark halos around transparent edges — a classic sign that something went wrong in the alpha handling. CocoConvert outputs straight alpha, which is what web browsers, most design tools, and image editing applications expect. To verify transparency is preserved correctly after conversion, open the PNG in a browser and place it over a colored background. The quickest way: create a simple HTML file with a colored body background and an img tag pointing to your PNG. If transparent areas show the background color through and edges look clean, the alpha channel is intact. If you see white or black fills, or dark halos around edges, the conversion didn't preserve transparency correctly. Another thing to check: if your PSD has a Background layer (the one with the lock icon that can't be moved), that layer is always fully opaque by default. If you want the final PNG to have transparency, you need to either delete the Background layer or convert it to a regular layer (double-click it in Photoshop and click OK). CocoConvert will detect whether a Background layer is present and handle it accordingly — if the document has only a Background layer and no transparent areas, the output PNG will have no alpha channel, which is correct behavior.
A Practical Workflow for Repeatable Results
If you're converting PSDs regularly — for a UI kit, a brand asset library, or client deliverables — setting up a consistent workflow saves time and prevents errors. For single files or small batches where Photoshop is available: use the Merge Visible stamp method (Shift+Cmd+Option+E), verify the color profile is sRGB, then use Export As with transparency enabled. This takes about 45 seconds per file and gives you full control. For larger batches or when Photoshop isn't available: use CocoConvert's [PSD to PNG converter](/convert/psd-to-png) for the bulk of the work. Before uploading, check your PSDs for Smart Objects and 3D layers — rasterize or remove them if pixel accuracy is critical. After downloading, spot-check 2–3 files from the batch by opening them in a browser over a colored background to confirm transparency. For production web assets where file size matters: run the PNG output through oxipng (command line: `oxipng -o 4 --strip safe *.png`) after conversion. The `-o 4` flag uses a good compression level without being excessively slow, and `--strip safe` removes unnecessary metadata while keeping color profile information. Document your settings. If you're handing off assets to a developer or another designer, note the color profile (sRGB), bit depth (PNG-24), and any pre-processing steps you applied. This prevents the 'why do these look different on my screen' conversation that wastes everyone's time. A one-line note in a README or Slack message — 'All PNGs are sRGB, PNG-24, transparency preserved, optimized with oxipng -o4' — is enough.