4

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?

  • "the other sites/software" -> can you provide the list? – Franck Dernoncourt Jul 14 '14 at 16:55
  • By components you do mean layers right? and you want to export each layer as a separate png file yes? Do you have any version of Photoshop (ie would a photoshop plugin work)? – Nick Wilde Jul 14 '14 at 17:48
  • @NickWilde yes. and i dont have photoshop...no other ways? – user6413 Jul 14 '14 at 17:55
  • @User6413: I'm sure there are other way's possible - whether there are other ways easy I'm not sure of hand; but probably someone knows an easy way. Just was asking to narrow it down whether that would work for you. – Nick Wilde Jul 14 '14 at 18:06
  • Which OS do you use? windows, osx or linux? – nidunc Jul 15 '14 at 8:19
7

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.

  • As far as I know this will flatten the image and save as png, but the OP wants to extract layers from a psd file and save them as individual png files. – nidunc Jul 15 '14 at 9:28
  • Aw! Then that's the wrong tutorial, thanks for mentioning it @nidunc. Am updating the answer now. (: – Neeku Jul 15 '14 at 9:39
3

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 and , but unfortunately not for
  • ... is (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)
    which file to download
  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:
    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:
    psdparse command line options
  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

1

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());
0

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.