7

I have to daily work with PSDs of iPhone Apps. These PSDs contains App designs like buttons, texts, background images, etc.

I have to extract images of each elements from these PSDs and convert it to PNG images.

I would like to know if there is any efficient way to extract images from PSD files.

3
  • 1
    If you expand the question a bit, with more information about how these files are put together, you'll have more chance of getting the exact answer you need. Jan 21, 2012 at 5:03
  • 1
    Old question, but, macrabbit.com/slicy is awesome if you're on a mac. Totally worth $30 to me.
    – Dcritelli
    Oct 3, 2012 at 14:09
  • I tried Slicy. And it is simply great! Thanks for suggesting that.
    – meetpd
    Aug 22, 2014 at 8:06

7 Answers 7

4

It depends greatly on how the .psd is constructed and what you need out of it.

For example, if you've got a master layer which always remains visible. They other layers which need to be visible for some buttons, but not for others, you may find using Layer Comps to be a good solution. You can simply toggle visibility for layers, then create a new layer comp. Do this for each element. Then you can export Layer Comps as files.

If you've got a .psd with each layer being a single item you need, as mentioned the script to export layers as files may help. Or you could set up an action -- Duplicate Layer (new file), Trim, Save for Web. Then assign an F key to the action. You could then simply highlight a layer and hit the appropriate F key.

Additional information concerning an action....

  1. Option/Alt click the visibility icon next to the bottommost layer in the layers panel. It should make only that layer visible.

  2. Create new Action, assign it an F key in the new Action dialog window and start recording. action creation

  3. Save for Web (whatever settings you need).

  4. After the Save for Web hit Option/Alt ] (close bracket) on the keyboard. (this should highlight, and make visible, the next layer up)

  5. Stop recording.

  6. Click the dialog option next to the "export" step of the action. dialog option

Now, all you need do is hit the F1 key (or whatever key you assigned), hit the Enter Key, and type an image title. Then repeat - F1, Enter Type title, F1, Enter, type title, and so on until all layers are saved.

It's not perfect. But without scripting it's the best you can do. Perhaps someone can help with a script. Application scripts aren't my strong suit.

0
1

There is an automate command in Photoshop, not sure what version it started, I use it in CS5. File - Scripts - Layers to files & that is in Mac, once again not sure if Windows provides it . Hopefully your using what I'm using otherwise holla back and I'll see if I can get you something for Windows...

1

I had the very same problem. First, I used Photoshop itself. I carefully clicked every layer and used menu item from Layers menu to create a Slice basing on selected layer. Then I used Save to Web feature from File menu. Generated XHTML and CSS code was awful (I'm more webdeveloper than graphician), but I had most layers extracted as separate PNG files.

Even though, the result was not satysfing for me, so I searched the net and found psdparse tool. I used it (command-line with some input parameters) and the effect was far better than what Photoshop can offer.

They have an on-line version of this tool, but I haven't tested it as command-line was enough for me.

1

Adobe just launched a function that does this within Photoshop CC.

Go File -> Generate -> Image Assets. Now group lets say your button shape and the button text (cmd+g or ctrl+g) and name that group button.png - save file and now Photoshop automatically exported this into a folder besides your PSD.

Learn more here in Adobes video

0

In this situation, you can create an action to do the generic controls such as move up/down one layer, select all, copy, save as. Should save you quite a bit of time.

0

Try this

This is the Beta app that adobe provides which extracts not only image but also the CSS associated https://projectparfait.adobe.com/

Veeresh

0

You can create extract assets from layers using a service called "Extract" in Adobe's Creative Cloud. You just need a free login.

  • Go to: creative.adobe.com/files
  • Login or sign up
  • upload a PSD
  • Click on the Extract tab.

You can select pieces of the design to extract, or select layers via the Layers tab.

Try it out here (without having to login): www.adobe.com/go/extract_tweet1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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