How to Convert PSD to PNG (Flatten Layers Properly)
Why PSD to PNG Is Trickier Than It Looks
A PSD file isn't a single image. It's a complex recipe: a stack of layers, adjustment layers, masks, smart objects, and blending modes that only come together when a capable app like Photoshop processes them. If you try to convert a PSD to a PNG without understanding this, things go wrong. You might get a flat white background where transparency should be, see missing text because a font layer wasn't rendered, or notice weird color shifts because an adjustment layer was ignored. PNG is a simple raster format. It stores a grid of pixels, not a list of instructions. The conversion is really a rendering job. You're collapsing all those Photoshop instructions into a final pixel grid, then saving that grid as a lossless PNG. The quality of your final image hinges entirely on how well that rendering handles everything packed into the source file. The most common failures are easy to spot once you know what to look for. Transparency often gets replaced with a solid white or black fill. Layer effects like drop shadows and glows can vanish completely. Smart objects might render at a low resolution because they weren't rasterized first. And stripped color profiles can make your images look washed out on calibrated screens. Knowing these pitfalls ahead of time saves a ton of frustration and rework.
Flattening Layers in Photoshop Before Exporting
If you have Adobe Photoshop, manually flattening and exporting gives you total control. The crucial choice is between 'Flatten Image' and 'Merge Visible'. They sound similar, but they do very different things. 'Flatten Image' (Layer > Flatten Image) merges every single layer—even the hidden ones—and fills all transparent areas with white. For a PNG that needs a transparent background, this is almost always the wrong move. Instead, use 'Merge Visible' (Shift+Ctrl+Alt+E on Windows / Shift+Cmd+Option+E on Mac). This brilliant shortcut stamps a merged copy of all visible layers into a new layer at the top of your stack, leaving your original layers untouched below. You can then export just that new merged layer, transparency and all. For the export itself, don't use the old 'Save As' command. Go straight to File > Export > Export As. In that dialog, set the Format to PNG and make sure the 'Transparency' box is checked. For screen use, 72 PPI is the standard. For anything high-resolution, like for print or Retina displays, use 144 or 300 PPI. Remember, the PPI value is just metadata; a 2000×2000 pixel canvas at 72 PPI exports a 2000×2000 pixel PNG. The physical dimensions don't change. One last pro tip: if your PSD uses a color profile built for print, like CMYK or Adobe RGB 1998, you must convert it to sRGB before exporting for the web. Go to Edit > Convert to Profile, select sRGB IEC61966-2.1, and use Relative Colorimetric rendering with Black Point Compensation checked. Skipping this step is the number one reason why carefully crafted designs look dull and washed-out in a web browser.
Converting PSD to PNG Online with CocoConvert
Not everyone has a Photoshop subscription, and even if you do, converting a folder full of PSDs one by one is a mind-numbing task. CocoConvert's [PSD to PNG converter](/convert/psd-to-png) solves this by handling the rendering on a server. You just upload the PSD and get back a properly flattened PNG, no design software required on your end. The converter intelligently merges all visible layers while preserving the alpha channel. That means transparent areas in your Photoshop file remain transparent in the final PNG, without that dreaded white background. It reliably handles common layer types, including raster images, text layers (which are rendered at the document's native resolution), and basic adjustment layers like Levels, Curves, and Hue/Saturation. Using it is straightforward. Go to /convert/psd-to-png, drag your PSD onto the page or click 'Choose File', and hit Convert. The tool supports files up to 50 MB. Processing usually takes just 5–15 seconds for a typical file, after which you get a download link for the lossless PNG output. If you're dealing with a batch of files, like an icon set or UI kit, you can upload multiple PSDs at once. Each one is processed on its own, and you can download the resulting PNGs individually or grab them all in a single ZIP archive. It's a huge time-saver.
What CocoConvert Cannot Handle (Be Honest About This)
Automated tools have limits, and it’s better to know them upfront than to discover them after delivering assets to a client. Smart Objects are the main thing to watch out for. If your PSD contains embedded or linked Smart Objects, CocoConvert renders them at their size within the document, not at their own native resolution. For example, a 4000px vector graphic placed as a Smart Object in a 1000px canvas will render at 1000px. You don't lose quality relative to the canvas, but you also don't gain the benefit of the Smart Object's higher internal resolution. For that, you need to rasterize the Smart Object in Photoshop first (Layer > Smart Objects > Rasterize). 3D layers and video layers are not supported. Any PSD containing these will have those specific layers omitted from the final PNG, showing whatever was layered underneath them. Some complex blending modes can be tricky. Specifically, Dissolve, Hard Mix, and certain luminosity-based modes might render slightly differently than they do in Photoshop. The difference is usually minor (a few color values per channel), but for pixel-perfect work, you should always verify the output against a reference export from Photoshop. CMYK PSDs are automatically converted to sRGB during processing. This conversion uses a standard ICC profile, which is accurate for most web and screen uses. However, it won't perfectly match a custom, print-calibrated workflow. If you're prepping assets for offset printing, perform the color conversion yourself in Photoshop for maximum control.
Choosing the Right PNG Settings: Bit Depth and Compression
PNG comes in two main flavors, 8-bit and 24-bit (often called PNG-8 and PNG-24), and picking the right one is important. PNG-24 is the high-quality option. It stores 16.7 million colors plus a full 8-bit alpha channel for smooth transparency. This is what you need for photographs, complex gradients, and any image with subtle color variations. CocoConvert defaults to PNG-24, which is the correct choice for converting rich PSD files. PNG-8 is the lightweight alternative. It's limited to a 256-color palette and produces much smaller files—often 60–70% smaller. The trade-off is visible color banding on gradients and all-or-nothing transparency (a pixel is either fully transparent or fully opaque, nothing in between). PNG-8 is only suitable for simple graphics like flat-color icons with hard edges. To get a PNG-8, you’d need to process the PNG-24 output in a tool like Photoshop or use a command-line utility like pngquant. PNG compression is always lossless, meaning it never reduces image quality. The compression level setting is purely a trade-off between file size and how long it takes to save the file. CocoConvert uses a balanced compression level automatically. If you're obsessed with performance and need the absolute smallest file size for a web project, you can squeeze out another 10–20% by running the output through a dedicated optimizer like oxipng or pngcrush. These tools re-compress the data more aggressively without touching a single pixel. Finally, always ask if PNG is even the right format. If you don't need transparency, a high-quality JPEG will be dramatically smaller. For modern web use with transparency, WebP and AVIF offer superior compression. But for master files, design handoffs, and anything that might need to be edited again, PNG-24 remains the king.
Handling Transparency Correctly: A Closer Look
PNG transparency works via an alpha channel—an extra 8-bit grayscale map where each pixel is assigned a transparency value from 0 (completely see-through) to 255 (completely solid). This is what allows for soft-edged drop shadows and smooth anti-aliased text that look good on any background. One of the most common conversion errors is related to pre-multiplied alpha. In a pre-multiplied image, the color values have already been blended with a background color, which can lead to dark or light halos around the edges if the viewing application expects straight alpha. Anyone who's fought with ugly black fringes on their icons knows this pain. CocoConvert outputs straight alpha PNGs, which is the standard expected by web browsers and nearly all modern software. To be sure your transparency survived the conversion, test the output. The quickest way is to open the PNG in a web browser with a colored background. Just create a dead-simple HTML file with a colored body and an `<img>` tag pointing to your PNG. If the transparent parts show the background color and the edges are clean, you're good. If you see a white box or dark halos, the alpha channel was mishandled. Also, check your PSD's Background layer—the default layer with a lock icon. This layer is always 100% opaque. If you need transparency in your final PNG, you must either delete that Background layer or convert it to a regular layer (just double-click it in Photoshop's Layers panel and hit OK). CocoConvert is smart enough to check for this; if a PSD only has an opaque Background layer, the output PNG won't have an alpha channel, which is the correct and more efficient behavior.
A Practical Workflow for Repeatable Results
If you convert PSDs regularly for a UI kit, brand library, or client work, a consistent workflow is your best friend. It saves time and eliminates stupid mistakes. For single files or small batches with Photoshop on hand, stick to the manual method. Use the Merge Visible stamp (Shift+Cmd+Option+E), double-check the color profile is sRGB, and then use Export As with transparency enabled. It takes less than a minute per file and gives you maximum control. For big batches or when you don't have Photoshop, use CocoConvert's [PSD to PNG converter](/convert/psd-to-png). It does the heavy lifting. Before you upload, it's a good idea to quickly scan your PSDs for complex Smart Objects or 3D layers. If pixel-perfect precision is non-negotiable, rasterize those layers first. After downloading the batch, spot-check a few of the resulting PNGs in a browser to confirm transparency looks right. For production web assets, file size is everything. After converting, run your PNGs through an optimizer like oxipng. A simple command like `oxipng -o 4 --strip safe *.png` gives a great balance of compression and speed, and safely strips out unnecessary metadata. Finally, do your team (and your future self) a favor: document your settings. When you hand off assets, include a one-line note about the format. Something like, 'All PNGs are sRGB, PNG-24, with transparency, optimized with oxipng -o4'. This simple step prevents the dreaded 'why do these colors look weird on my screen?' conversation that wastes everyone's time.