Save individual element in PSD as an image

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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.