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 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?

share|improve this question

migrated from webmasters.stackexchange.com Nov 2 '11 at 1:11

This question came from our site for pro webmasters.

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.

[OPTIONAL]

  • Save for Web

  • In your original window, deselect.

[/OPTIONAL]

  • 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.

share|improve this answer

You can use the slice tool for the editing required.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.
{"cc_re__cc_re__cc_by_sa_3_0": ["        <li><a href=\"http://area51.stackexchange.com\" title=\"proposing new sites in the Stack Exchange network\">Area 51</a></li>\r\n                        <li><a href=\"http://careers.stackoverflow.com\">Stack Overflow Careers</a></li>\r\n                    \r\n                </ol>\r\n            </td>\r\n    </tr>\r\n</table>\r\n                </div>\r\n            </div>\r\n\r\n            <div id=\"copyright\">\r\n                site design / logo &#169; 2014 stack exchange inc; user contributions licensed under <a href=\"http://creativecommons.org/licenses/by-sa/3.0/\" rel=\"license\">cc by-sa 3.0</a> \r\n                with <a href=\"http://blog.stackoverflow.com/2009/06/attribution-required/\" rel=\"license\">attribution required</a>\r\n            </div>\r\n            <div id=\"svnrev\">\r\n                rev 2014.8.29.1807\r\n            </div>\r\n            \r\n        </div>\r\n    </div>\r\n    <noscript>\r\n        <div id=\"noscript-warning\">Graphic Design Stack Exchange works best with JavaScript enabled<img src=\"http://pixel.quantserve.com/pixel/p-c1rF4kxgLUzNc.gif\" alt=\"\" class=\"dno\"></"], "copyright__copyright__copyright": [" that layer.\n\nFor 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.\n\nshare|improve this answer\n\nYou can use the slice tool for the editing required.\n\nshare|improve this answer\n\nYour Answer\n\n\u00a0\ndiscard\n\nBy posting your answer, you agree to the privacy policy and terms of service."]}