PSD Layer Extractor

A layered PSD is the source for many other jobs: a front-end developer needs the logo, icons and background as separate images, an animator needs a character’s limbs on their own layers, a video editor needs the title graphic without the backdrop. Clicking through Photoshop to export each layer is slow, and without Photoshop it is impossible. This tool lists every layer of a PSD and exports the ones you choose as transparent PNGs in one .zip.

Reading the layer tree

After you open a PSD, its layers appear in the same order as Photoshop’s Layers panel, top layer first, with groups indented. Each image layer shows a thumbnail, its pixel size and notes for reduced opacity, non-normal blend modes, masks and text layers. Hidden layers are shown faded with a closed eye. Groups, adjustment layers and empty layers are listed for orientation but have no pixels to export.

Choosing layers

“Visible only” selects every layer that is shown in the document, which is usually what you want. “Select all” includes hidden layers, useful for alternative states such as a button’s hover version. Tick or untick individual layers as needed. The counter under the list shows how many will be exported.

Trimmed or full-canvas PNGs

Trimmed export crops each PNG to the layer’s own pixels: a 120 × 40 button becomes a 120 × 40 image, ideal for web pages and sprite sheets. Full-canvas export puts each layer at its position on a transparent image the size of the whole document, perfect for video editing and animation tools, where you stack the PNGs and everything lines up automatically.

Masks and opacity

Layer masks hide parts of a layer without erasing them. With “Apply layer masks” on, the PNG shows the layer as it appears in the document; switch it off to get the full, unmasked pixels. Layer opacity is not applied by default, because most uses want the layer at full strength and set transparency in their own tool; switch it on to bake it into the PNG.

The positions file

The .zip includes layers.json, listing each exported file with its name, left and top position, width, height, opacity, blend mode and visibility. Developers can use it to place elements precisely in CSS or a game engine without measuring. The merged composite of the document is added as _composite.png when the PSD contains one.

What Photoshop-only features mean

Layer styles such as drop shadows, strokes and glows are stored as settings and drawn by Photoshop at display time, so they are not part of the layer’s pixels. Adjustment layers, smart-object filters and blend modes likewise only take effect in Photoshop. If an exported layer lacks its shadow, rasterize the style in Photoshop (Layer > Rasterize > Layer Style) and save again before extracting.

Supported PSDs

8-bit RGB and grayscale documents are supported. CMYK, 16-bit and PSB files get a message explaining the Photoshop menu command to convert them. For the flattened image only, PSD to PNG is quicker. To combine exported layers into a game texture, see the Sprite Sheet Generator.

Privacy

Design files often contain unreleased products and client work. Extraction runs locally in your browser; the PSD and its layers never leave your device.