Exporting From Photoshop

Advertisement

Congratulations. You’ve just completed a pixel-perfect mock-up of an app, and you’ve gotten the nod from everyone on the team. All that’s left to do is save the tens, hundreds or maybe even thousands of production assets required to bring it to life.

It’s probably the least interesting part of designing software, usually entailing hours of grinding. Saving images to multiple scales — as required by iOS and other platforms — adds complication to the process. But there are ways to streamline or automate the exporting process.

Copy Merged

Screenshot1

Cutting up a design with the “Copy Merged” feature is fairly easy: ensure that the layers are shown or hidden as needed; draw a Marquee selection around the element; choose Edit → Copy Merged, and then File → New; hit Return; and then “Paste.” The result is a new document with your item isolated, trimmed to the absolute smallest size possible.
From here, all you need to do is save the image using “Save As” or “Save for Web & Devices.”

Rinse and repeat for every image needed for the app or website. The technique is simple and quick, but repetitive; and if you ever need to export the images again, you’ll have to start from scratch.

This seems to be the most common method and, for some designers, the only method, which is a shame, because better techniques exist.

You could create an action that triggers the “Copy Merged,” “New,” “Paste” process — a small time-saver, but ultimately not much of an improvement to the workflow.

Export Layers to Files

Screenshot2

If you’re lucky, and your goal is to export a lot of similar images (typically with identical dimensions), you might be able to use Photoshop’s “Export Layers to Files” script.

By choosing File → Scripts → Export Layers to Files, each layer of the document will be saved as a separate file, with a file name that matches the layer’s name. This means you’ll probably have to prepare the document by flattening all of the elements that you’d like to export down to bitmap layers — a time-consuming process, but often quicker than using “Copy Merged.” It could also trim the size of the resulting file, if you choose to remove completely transparent areas.

I can’t say that I’m a fan of the script’s Flash-based UI or of the way it works, but “Export Layers to Files” is handy if your desired result fits its limited range of use cases.

Slices

Photoshop’s Slice tool3 lets you define rectangular areas to export as individual images, with some limitations: only one set of slices can exist per document, and slices cannot overlap (if they do, then smaller rectangle slices will be formed). During the ’90s, the Slice tool was a good way to create table-based Web layouts, filled with images. These days, designers far more often need finer control over how images are sliced, especially when creating efficient, dynamic designs, typically with images that have transparency. But, with a twist on the original concept, the Slice tool can be put to great use.

Sprite Sheets With Slices

Screenshot4

Sprite sheets5 are commonly used in CSS and OpenGL games, where texture atlasing6 can have significant performance benefits. A similar method can be employed to build UI elements in Photoshop, even if the result is a set of images, rather than one large image.

By spreading out the elements that you need to export as a flat sprite sheet, you eliminate the need for slices to overlap. If there are too many elements to comfortably fit in one document, you can create multiple documents, eliminating the need for more than one set of slices per document.

The other benefit to working like this is that you’ll no longer need to build your main design documents with the same level of precision. Occasionally using a bitmap or forgetting to name a layer is fine, because you’ll have a chance to fix things when preparing the sprite sheet for exporting. But it does mean that the original mock-up document could get out of sync with the export documents if you make changes (for example, to adjust colors or layer effects).

Because we’re interested only in user-created slices, it might also be a good idea to click “Hide Auto Slices” (in the options toolbar when the Slice Select tool is enabled) and to turn off “Show Slice Numbers,” under “Guides, Grid & Slices” in Preferences. This way, you’ll remove unnecessary clutter from Photoshop’s slice UI.

Screenshot7

After you’ve created a sprite sheet with the slices all set up correctly, you’ll be able to export all of the images at once, using “Save for Web & Devices.” Assuming you’ve done things correctly8, you’ll be able to scale up by 200%, save all of your Retina images, and then batch rename them (adding @2x to the file names) — or scale them down, if you built everything at Retina size to begin with.

Layer-Based Slices

If your UI element is one layer and you’d like the exported image to be the smallest possible size, you might want to consider using a “Layer-Based Slice.” To create one for the currently selected layer, choose “New Layer-Based Slice” from the Layers menu. A Layer-Based Slices moves, grows and shrinks with the layer it’s associated with. It also takes into account layer effects: strokes and shadows increase the size of a Layer-Based Slice, so the effects are included. Less control, but more automated.

My Exporting Workflow

For years, I’ve used Copy Merged as my primary exporting method, and used Export Layers to Files when it made sense. That was a poor choice. Sprite sheets have so many advantages, especially in medium- to large-scale projects, that the set-up time is made up for very quickly. This is even truer when exporting Retina and non-Retina images: each set can be exported in a few clicks and is far less likely to have issues with file names or sizes due to its automated nature.

It also creates an environment in which modifying production assets is easy, allowing for faster iteration and more experimentation. It lowers the barrier to improving artwork during development and when revising the app or website.

And that’s a very good thing.

(al) (il)

↑ Back to topShare on Twitter

Marc Edwards (@marcedwards) is the Director & Lead Designer at Bjango (@bjango) and co-host of the Iterate podcast (@iteratetv).

  1. 1

    I select the layer i need -> right-mouse -> Convert to smart object -> open the smart object -> trim (based on transparency, top left corner) -> save for web and devices.

    I recorded this into an action and have a folder on my dekstop (dump) where all the images go. 1 Click Export.

    You could also make different actions (export layer to png, export layer to highq-jpg, export layer to lowq-jpeg).

    13
  2. 2

    Nice article, I do feel, however, that Fireworks is a far better tool for this kind of thing. Fireworks is designed to handle the creation/export of web graphics etc whereas (IMO) Photoshop is a photo manipulation program that has been shoehorned into being a web page creation tool (the clue is in the name :-)

    I would encourage anyone who does this kind of workflow on a regular basis to give Fireworks a try, you could save yourself a lot of time and effort.

    24
    • 3

      As much as I agree with you, I have always believed that a software, fireworks, photoshop or illustrator is according to a designer’s preference and what he/she is comfortable with. Their set of features and easier workflow is a secondary, I feel. Nevertheless, I relate to your ease with fireworks. Pity, the company has discontinued it.

      2
      • 4

        @Himanshu:

        What company discontinued what? Adobe Fireworks (current version: CS5.1) is being developed by Adobe, just like Photoshop (current version: CS5.1). It’d be nice if we would speak only about subjects we know at least slightly…

        Back on topic: As much as I am fan of Photoshop when it comes to photo editing and bitmap manipulation, I would never use it for export and slicing; Fireworks, indeed, is much better suited for this task, faster, and easier to use. But of course, if one prefers to work only in Ps, then it makes sense to export (even if slowly and in a much more complicated way) right from Ps, and not to move your PSDs to Fw… :)

        4
    • 5

      I absolutely agree. I used to be a massive Photoshop advocate until someone forced me to sit down and use Fireworks for a few days. Now Fw is my go to piece of software for anything to do with web imagery. I only ever open up Photoshop when I get a file from another designer – then grimace as I see all the half pixels badness contained within ;)

      5
  3. 6

    I do the same. The shortcut is “cmd shift and c “. I also use the Layers comp with the script “layers comp to files”. Very useful to same multiples frames for a web banner for example.

    2
  4. 7

    Good read. Just one issue… I always overlap slices in Photoshop and they export just fine for me?

    1
  5. 8

    My workflow sounds a little work-heavy and backwards – but it suits me to a tee.

    I create in PhotoShop, then save just the elements I need as a single .png image.
    Open in Fireworks and crop out the bits that I need.

    That’s it.

    5 years ago, this would be a really laborious task.
    But today, with so many design elements being able to be controlled with CSS3 and using fonts for simple icons (gradients, shadows etc), that it means that i rarely have to use more than 5 or 6 images on an entire site. (only non-css3 browsers needed to be catered for with images).

    Not perfect – but I can chop up a typical design in less than 5 mins in this method, and the flattened PNG files from Fireworks seem to be smaller in size than exporting directly from Photoshop too…

    DM

    4
  6. 9

    I’ve a different process.
    I mock-up in illustrator (easy to resize objects/move things about to exact locations).
    Any graphics I need I just copy and paste them into photoshop and save for web.

    I think the big plus about illustrator is that it’s really easy/quick to make changes to the design and layout during the design and later as requested by the client. It’s also slightly easier to create pixel perfect designs in AI than in PS…..

    3
    • 10

      I agree Illustrator is easier to work with for layout, but I’d argue that it’s not necessarily pixel-perfect. If a line falls between two pixels it gets anti-aliased and will look soft or blurry. I’ve spent way too much time redrawing elements in Photoshop because they were pasted into a Photoshop document from Illustrator and have soft edges (when they should be sharp) – yes, even as smart objects.

      Overall, I use a combination of copy merged, in-between files (files with only certain layout elements that should be kept together), and selective slicing to get my graphics ready to land on a web page.

      2
  7. 11

    Good read. Although I think the title of this article should be Exporting From Photoshop for Apps. If you have a website with only a few image elements, I think the copy merged method would be just as quick…

    1
  8. 12

    I select the layer that I want, hide all the others, Image > Trim

    There is no problem of flattening layers, etc, I just get the smallest possible file dimensions with that layer.

    Repetitive, but again, probably faster than copy-merge, imho.

    3
    • 13

      This is what I do also. Trim based on transparent pixels so you can be certain that your drop shadows won’t be cut off in the wrong place. Then select all and copy merged. Afterwards, you can use the History palette to go back to the original document state before you trimmed it and move onto the next element using the same process.

      2
  9. 14

    I use the ‘copy merged’ method and have set up an action to speed things up.

    If you’re using the action make your selection using the marquee tool and run the action. I’ve set mine to f2.

    Also, you need to set the background contents to transparent in the new file dialog (ctrl+n).

    0
  10. 15

    Am I the only one who design in InDesign then copy paste in photoshop as a Smart Object?

    1
  11. 16

    @Francis Thibault

    InDesign is a print based program. While I personally don’t use it to create mockups (unless it’s a Print layout that pulls in .ai and .psd elements) I have known individuals that do use it for web based layouts etc. So you’re not the only one, to each his own and whatever they are comfortable with. :P

    I have long stayed away from slicing (not saying it’s not a useful feature). It reminds me of the days of tables based web layouts and the headaches those caused. @_@ When it comes to saving/exporting for me it depends on what I’m working on, sometimes I’ll use copy merged, other times I’ll hide unwanted layers/layer groups, trim and save for web & devices.

    1
  12. 17

    My favorite key short cut for producing web graphics is command-option-shift-E (Mac)

    This creates a new layer on top and merges the visible layers onto your new layer. It’s not the right way to produce everything. But, it’s a nice tool to have in your arsenal.

    1
  13. 18

    I am using this workflow a lot:

    1 – Select the layers;
    2 – Duplicate to new file;
    3 – In the new file I use Trim ;
    4 – Save for web.

    The copy merged is cool but it fails if I have to select with the markee tool images with large shadows or gradients. The Trim will give me the exact last pixel.

    4
    • 19

      Careful, trimming can produce unintended results with layer styles or masks on the selected layers (esp. ones not linked to the layer). To eliminate any unintended changes, make sure to flatten the visible layers prior to trimming.

      This is my PS action, triggered by a function key for convenience:
      1. Copy selected layers to new document
      2. Create a new layer*
      3. Merge all visible layers
      4. Trim transparent pixels
      5. Save for Web (show dialog)
      6. Close document without saving

      * This is necessary since “merge all visible layers” isn’t available if there’s only one layer in the document, so this step always ensures that there’s always 2 or more.

      Hope that helps!
      Mike

      0
    • 20

      +1 Put it in a single 1-click action. Best method.

      2
    • 21

      this is what i do!

      0
  14. 22

    The issue with fireworks is that it’s not as easy or intuitive to create web graphics with the same level of polish and detail as one could in Photoshop.

    In any case, I don’t use Photoshop for mocking up web page layouts. I usually design in the browser. But I do use Photoshop for creating graphics that cannot be created with CSS3 alone.

    2
  15. 23

    Don’t forget to use the single column (& row) marquee tools, extremely useful for getting pixel perfect slices (without having to zoom in and use the regular marquee tool). It provides you with a 1px wide selection.

    0
  16. 24

    Thanks all! This means I’m in the right direction! I use Corel Draw for a long time because it is the software available at the company I work. As I want to start doing and understand better webdesign I started practicing fireworks at home to get used to it.
    I haven’t started yet to “export” the design content into dreamweaver in order to transform it into an website. Is it very difficult at a beginning stage? My knowledge about HTML and CSS still very weak.
    Best to all!

    0
  17. 25

    Thanks for sharing a great article for designers because I need some help for doing like this and you do help me, so again thanks.

    0
  18. 26

    well the same works great for me, the photoshop, all these tricks, i have been using for 2 years or so. it’s speedy and comfortable neverthless.

    0
  19. 27

    If I need a single image for web from Photoshop I usually select the layer/layers and crop then save for web.

    But I’m using more sprites than just single images. For sprites I prefer to spend some time to organize them myself and reduce colors etc since rarely all of them have similar sizes and I can’t use an automated command/software.

    0
  20. 28

    Seems like there is a goldmine waiting for developers that can create an app that reads out a PSD and returns assets!

    1
  21. 29

    i’m glad to find others who does similar to me. i use photoshop and go for trim, it really works fine but little time consuming. i should make action for this now, but thanks for post.

    0
  22. 30

    What is a Retina image?

    0
    • 31

      Retina image is in reference to the iPhone and development for it. In the iPhone 4 they created a higher resolution display (x2/double) and named it Retina. 480×320 was previous. Now screen size is 960×640 and downsized
      I am sure there are corrections or additions to the above but wanted to get this out there to help.
      Aloha,
      Clarke

      0
  23. 32

    In this case Fireworks wins on all creative softwares and also it’s easier to control gradient tool with my friend FW instead of PS…try to believe ;)

    0
  24. 33

    Great stuff! I follow a pretty similar process, but a few little tricks in here which should make it into my work flow.

    0
  25. 34

    How do I make or rather create my own name and my backround and color it.

    1
  26. 35

    PS for web is ok if the guy knows what he does and i believe there are such guys out there. It’s just i haven’t met such designs which would not produce annoying variable width semitransparent <1px edges on elements and especially – in sprites. So if a PS guy is also exporting png's to be used for buttons, cool, i wish there were more of you out there.
    Thankfully css is agile enough to handle gradient rounded and shadowed buttons. And if not using html5 canvas, then aero buttons also can be made just by using single semitransparent overlay

    0
  27. 36

    Btw, how can I export layers with opacity, which contain some layer properties (Color, Overlay, etc.) — when merged with blank layers, they totally change appearance, so what should be done?

    0
  28. 37

    In my opinion there’s nothing more efficient and faster than Convert to Smart Object > open it > trim if needed > save for web.

    Good post

    0
  29. 38

    Is there a script or action to export individual layers to files using the Save for Web dialog and preserving the layer name?
    This used to be a feature of ImageReady before Adobe canned it. I cannot figure out why they STILL have not added it to Photoshop.

    0
  30. 41

    Hi Guys, Please tell me How to create transparency image in adobe photoshop becuase when i am incorporate my transparency image there is shown in bacground gray box.

    Regards

    Rakesh

    0
  31. 42

    In order to have an absolute perfect crop, every single time you could convert your layer(s) into a Smart Object.
    Double click on the new created Smart Object it and then save it in your desired format.
    What Photoshop will automatically do for you is that when it will create the Smart Object it will create the perfect canvas for it. This is a time saver especially when you export loads of pngs or other transparent format.

    Happy Photoshoping :)

    2
  32. 43

    I just wanna know one thing. It seems to be imposible to rasterize and export layer with diffrent blending mode without loosing some effects. When i have few layers and few other blending modes on them after rasterizing or saving for a web and devices (transparent png) the effects always gone. Can somebody tell me why?

    1
  33. 44

    Check this out
    http://www.slicephotoshop.com

    This online tool will export your PSD file’s layers to individual PNGs.
    Free of charge, served with love to the web development community :-)

    0
  34. 45

    Yes, that will work, but watch out for soft edges (from anti-aliasing).

    0
  35. 46

    Looks like someone removed my link. Email me if you’d like the action sending over.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top