Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I am developing a site and got given the design as a PSD, my question is, can I select an individual element, say the social media icons, and save them as an image?

What I have been doing so far is hiding all the layers except the one that contains my element, then resizing the canvas to fit around that element and saving as an image, while that is required for items where several layers are used to obtain a specific effect it seems kinda longwinded for elements which are in essence just images (the other method is to export needed layers to a new photoshop file etc, but is also kinda longwinded).

I did try to search for an answer but couldn't find one, so I apologise if this has already been asked.

If it makes any difference I'm using (or trying to use :D ) Photoshop CS6 Edit: On Windows 7

share|improve this question
1  
graphicdesign.stackexchange.com/questions/8892/… ( I'm not posting this link just because my answer was chosen, the other answers are good as well. ) –  Joonas Mar 5 '13 at 20:49
    
@joonas thanks for the tip, but I don't have a Mac –  JustSomeDude Mar 5 '13 at 22:10
    
My answer is not the only answer in there. –  Joonas Mar 5 '13 at 22:27
1  
I looked at the others, none was useful for me, even though slices are mentioned but they're not explained as well as Const explained for example so I didn't really get it. –  JustSomeDude Mar 5 '13 at 22:47

3 Answers 3

Slice Tool and Slice Select Tool will allow you to skip the multiple cropping of your image.

With Slice Tool you set the initial cropping rectangles and Slice Select Tool allows resizing them afterwards. Double-clicking on a slice with Slice Select Tool will bring the window where you can set the name of your image file.

Now when you use File > Save for Web you will be able to set the format (JPG/GIF/PNG) and compression parameters for each slice individually, and when you finally click Save all slices will be saved at once in a batch.

share|improve this answer
    
Thanks for the useful answer, sounds like what I want, I'll give it ago when I get into the office tomorrow. I'd upvote, but I don't have enough reputation. –  JustSomeDude Mar 5 '13 at 22:06

Adding to Const's Slice Tool, you could also group your elements into Smart Objects to keep them separated.

This could be specially useful for objects with transparent backgrounds, as you wouldn't need to hide any layers in order to save them.

You can find some information on Smart Objects and how to use them here.

share|improve this answer
    
OMG that sounds so useful!! I really should read a manual or something before using a program I've never used before, woulda saved a whole lotta time for some stuff (also gonna have a moan at the illustrator for not putting stuff in smart objects, but given that he thinks naming layers is too much effort I doubt it'll make life easier for me in the future.) –  JustSomeDude Mar 5 '13 at 22:14
    
Sounds like a pain. He shouldn't be making you lose time just because he's too lazy to name and group layers. Send him over here and we will give him a lesson about proper PSD handling! –  Yisela Mar 5 '13 at 22:24
    
Things is both of us are doing this in our spare time, our company wanted to update the website and we happened to have more skill than others in the area :D –  JustSomeDude Mar 5 '13 at 22:45

My solution is a tad complicated since it involves Photoshop Action scripts, but once you've set it up the process will be done in under five seconds per asset that you have to export, and you only have to set it up once.

  1. Select the element that you're exporting in the design (choose an element that consists of a number of layers that are grouped).
  2. Duplicate the layer (I have set Ctrl + Alt + D as a shortcut to do this), and choose to duplicate it to a new document, name it if you want to.
  3. Setting up the action script:
  4. Open up your Actions panel (Window -> Actions).
  5. Create a new Action, name it something like Save export
  6. Right click the group of layers and choose Merge group
  7. Make a selection by holding Ctrl and clicking the layer thumbnail
  8. Go Image -> Crop
  9. Go File -> Save for web
  10. Close the document
  11. Press Stop in the Actions panel

Now you have created a procedure that will be able to run automatically. What you basically only have to do now is to select the element from the design you're exporting, duplicate it (Ctrl + Alt + D), choose a name, and click the Play button in the Actions panel. Now the Element will be merged, trimmed, saved as PNG and having the document closed in under a second.

The only downside with this is that if you run the script with only one layer and not a group an alert will show saying that the merge of a group isn't available, since there isn't any group, however you have a Proceed option in that alert so it's only a small nuisance.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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