: Save individual element in PSD as an image 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

@XinRu324

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.


Select the element that you're exporting in the design (choose an element that consists of a number of layers that are grouped).
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.
Setting up the action script:
Open up your Actions panel (Window -> Actions).
Create a new Action, name it something like Save export
Right click the group of layers and choose Merge group
Make a selection by holding Ctrl and clicking the layer thumbnail
Go Image -> Crop
Go File -> Save for web
Close the document
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.

Vote Up Vote Down

@Reiling762

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.

Vote Up Vote Down

@Sue6373160

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.

Vote Up Vote Down