I guess many webmasters create layouts in Photoshop before coding, my layouts are full of different elements, buttons, icons, headers etc.

When I need to save a icon, I'm selecting it on layers list, right clicking, Duplicate, New, and here we are... The newly created tab with my icon has dimensions of the whole layout, not the icon, so when I'm having 1680x1050px layout and 20x20px icon then I'm getting 1680x1050 file with small icon in the middle, or somewhere else, and I have to drag the item to upper left corner of new image and cut the rest (I use crop tool usually).

Is there another way to save each layer (mostly rasterized) as a .jpg/.png transparent file without all this cropping? Or just open duplicated elements in new "tabs" with proper width/height?

2 Answers 2


There are several ways to do this. See this question for a good description of using the slice tool.

For your workflow, record an action by doing this:

  • Select the layer.

  • Start recording.

  • Ctl/Cmd-click on the layer thumbnail in the Layers panel. This will select just the actual pixels in the layer, ignoring the transparency.

  • Copy Merged (Ctl/Cmd-Shift-C).

  • File > New

  • Click OK (defaults to "from clipboard" with the dimensions of what was copied).

  • Paste.


  • Save for Web

  • In your original window, deselect.


  • Stop recording.

If you included the Save for Web step, be sure to click the empty box in the Actions panel to turn on the SfW dialog when the action is run.

At this point, you can target any layer and run the action, creating a new document with the exact dimensions (and transparency) of the contents of that layer.

For extra credit, you can include a "Drop down one layer" step using the keyboard shortcut at the end of the action, so you can work your way down a PSD by targeting the top layer then just repeatedly hitting the F key you assigned to that action until you get to the bottom.

  • Yup, Slicing does work rather well, but when you need your element with transparent background this is very good way of doing it. I would personally skip the merging and do this instead: Right click the layer and duplicate it to a new document, trim out transparent pixels. This really doesn't matter for much except that the layer is still in the original editable form incase it was like Text layer or something and it's a bit faster.
    – Joonas
    Commented Nov 2, 2011 at 9:43
  • And of course you can select multiple layers to duplicate to the new document. Also forgot to mention... What I personally have is 4 different actions that all do the same thing except Action #1 - Saves into .jpg, Action #2 - Saves into .png, Action #3 - Saves into .psd and almost forgot Action #4 - Otherwise the same but doesn't save or close the document afterwards. Not all that necessary, but can come very very handy. ( I use it for website graphics.. )
    – Joonas
    Commented Nov 2, 2011 at 12:07
  • I love the fact that there are always at least five ways to do almost anything in Photoshop. India-rubber software, anyone? Commented Nov 2, 2011 at 20:35

You can use the slice tool for the editing required.

  • 1
    Could you elaborate?
    – JohnB
    Commented Dec 31, 2013 at 16:01

Your Answer

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