psd to png - software or website that converts all the components?

Question

I have a PSD file with a lot of components. The only site I found for converting it to components is Zamzar, but it doesn't allow me to download all of the components at once and the other sites/software I have found only give me a flattened image as a single PNG. Does someone know of a website or software for this?

Answer 1

1. ImageMagick

This one is a command-line tool, available for Windows, Linux, and Mac OS X. To export layers separately to individual PNG files, you can run the following command after installing it:

convert Boring.psd Cool.png

That will result in Cool-0.png, Cool-1.png, etc. for each layer.

For a flattened image you need to add the corresponding switch:

convert Boring.psd -flatten Cool.png

---

2. GIMP:

Some Photoshop fans call it an advanced MS Paint! But it is a decent image editing tool, released under LGPLv3 and GPLv3+ licenses and is available for Linux, OS X, and Windows, and it's free!

Here's a tutorial on how to convert each layer of a PSD to PNG files using GIMP.

Alternatively, you can install Export_Layers plugin to do it faster.

Answer 2

You could use GIMP in combination with the Export Layers as PNG plugin.
However, installing plugins in GIMP is not an easy task.
Luckily I found another way of doing what you want:

PSDParse _{by Telegraphics}

It...

• ... extracts all layers to png images
• ... doesn't flatten the psd file
• ... extracts all layers at the same time
• ... keeps the name of the layer
• ... is available for windows and osx, but unfortunately not for linux
• ... is gratis (aka "Free")

---

1. Go to the website, and download the Windows (32 bit) version: ^{(I assume you're using windows, as you failed to specify the OS in the question)}
   
2. Extract the contents of the downloaded psdparse-3.6f1-win32.zip (right-click --> "Extract All...") to a new folder
3. Go to the folder where you extracted the zip file. You should see 2 files:
   
4. Shift+rmb (Right Mouse Button) on an empty area, and click on "Open command window here"
5. In the command window, type psdparse and press Enter. You should see this:
   
6. Type "psdparse -w [location of psd file]", for example: psdparse -w C:\example.psd.
7. It should extract the layers and save them as png files in the folder "[name of psd file]_png" in the same location as the psd file, for example: C:\example_png\
8. That's it!

---

_{Source: Take a psd and export all the layers into separate image files without using Photoshop - Super User}

Answer 3

There is a PSD.rb which is the file parser for Photoshop written in Ruby.

To get the list of components, you can write a script like:

require 'psd'

PSD.open('path/to/file.psd') do |psd|
  # Get information about all the available layer comps
  puts psd.layer_comps
end

To save same component, you can write:

# Save a layer comp
psd.tree.filter_by_comp("Version A").save_as_png('./Version A.png')

# Generate PNG of individual layer group
psd.tree.children_at_path("Group 1").first.to_png

To save a specific slice into PNG, it's:

psd.slices_by_name('Logo').first.save_as_png('Logo.png') #=> writes Logo.png

---

Another tool to consider is ag-psd, it's JavaScript library for reading and writing PSD files. Example script:

import * as fs from 'fs';
import { readPsd } from 'ag-psd';

var buffer = fs.readFileSync('my-file.psd');
var psd = readPsd(buffer);

console.log(psd);

fs.writeFileSync('layer-1.png', psd.children[0].canvas.getBuffer());

Answer 4

Adobe has free web app called Creative Cloud Extract that gives you read-only access to PSDs. It lets you extract individual layers/images from the PSD. Click here to learn more about what you can do and how to use it. You just need to sign up for a free Adobe ID if you don't have one already.

Creative Cloud Extract is a free new feature in Creative Cloud Assets that helps you explore a PSD directly in your browser, including layers and layer compositions. It particularly benefits web designers and developers who can share PSDs, unlock design information, and download production-ready assets. Using Extract, you can perform the following actions with a PSD file in the browser:

• Copy text and CSS
• Get color, gradient, and font information
• Measure distances between elements
• Save optimized image assets for production

---

If you are going to be coding the images into HTML/CSS, an even better option is Brackets, a open source code editor. The latest version actually comes with a preview version of Extract that is built into the editor. One of the coolest features I discovered is that you can open a PSD and while typing CSS code, it will give you hints based on the currently selected layer. You can also select a layer with an image, or a group of layers, and it will give you the option to generate an image (from the selected layers) as soon as you are typing code where an image path is expected (for example the src attribute of an img element).