Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

The Retina Asset Workflow You’ve Always Wanted For Photoshop

If you’ve dreamed of the day when you could design more than one thing at once in Photoshop, the wait is over. You can now have multiple designs right next to each other. Design mobile layouts alongside your tablet and desktop layouts. And in this article, we’ll design an entire set of assets all at once.

What many Photoshop users have been hoping for — with a push from Sketch1, no doubt — finally arrives in the form of artboards. No longer are you constrained to one canvas. Turning layer groups on and off, be gone. Create as many canvases as you like in one PSD.

Combine artboards with the Generate feature and you get the workflow you’ve always wanted. Slicing and “Save for Web,” step aside. Automatically export @1x to @3x Retina assets just by renaming layers.

Let me walk you through the basics of artboards and Generate. Then we’ll look at a real project in which I used these techniques together, making for a major time-saver. First up, artboards.

Artboards Link

While layer comps were an attempt to address the goal of working on multiple pages in a PSD, they were a bit clunky and restricted you to the same canvas dimensions. Artboards free you from these contraints and let you get on with design. At first, it might not sound like a big deal, but trust me, it is. Once you go artboards, you never go back.

In the past, working on Photoshop files needed some file-management skills. You would name your pages something like 01_home.psd, 02_products.psd, 03_contact.psd, etc. For complex websites, your files would quickly reach into the tens or even hundreds (especially counting versions). With artboards, you can consolidate all of these individual PSDs into a single website.psd. Think of all the time wasted opening and closing PSDs.

Not to mention duplication. Take a humble header as an example. It could be duplicated through tens or hundreds of PSDs. What a waste of file size and memory. Think how the same goes for the footer and many other components.

OK, enough of me preaching about how great artboards are. Let’s get into it.

Artboard Tool Link

Hidden behind the Move tool is the new Artboard tool, introduced in Photoshop CC (2015). Select the tool in the menu, or hit Shift + V to switch between the Move and Artboard tools. You are now ready to create your first artboard.

The new Artboard tool
The new Artboard tool.

Creating and Duplicating Artboards Link

Simply click and drag an area to create an artboard. The default names are Artboard 1, Artboard 2 and so on. You will see your new artboard in the Layers panel. Any layers will be neatly nested below, just like a layer group.

New Artboard is added and shown in the Layers panel
New Artboard is added and shown in the Layers panel.

To create another artboard, simply drag an area again in the empty background space. You can create as many artboards as you like.

A second Artboard created by dragging a new area
A second artboard created by dragging a new area.

You can also duplicate an artboard in the contextual menu. In the Layers panel, right-click on Artboard 1 and select “Duplicate Artboard.” This will create another artboard of the exact same size and position.

Artboard contextual menu showing further options
Artboard contextual menu showing further options.

Duplicating artboards is probably the feature I use the most. Normally, when creating assets, I need a full set of exactly the same layer structure. In the example project I’ll discuss later, once I set up my first artboard, I duplicate all of the rest. Then, with the layers, icon and type in the correct positions, all I need to do is swap these assets out. It’s a very quick way to keep everything pixel-perfect.

Resizing and Moving Artboards Link

There are a few ways to resize and move artboards. You have probably already noticed the first way: When an artboard is selected, you can resize using the transform handles that appear. This is very handy for resizing on the fly and seeing the layers beneath an artboard while resizing.

Using the transform handles to resize an artboard
Using the transform handles to resize an artboard.

While an artboard is selected, you can also use the Options panel just below the “File” menu. There are options to choose preset sizes, set custom widths and heights, and perform common tasks like switching to portrait or landscape.

Change an artboard's size using the Options panel
Change an artboard’s size using the Options panel.

If those aren’t enough options for you, there is also the Properties panel when an artboard is selected. This gives you the option to change the size and position and to access the preset sizes.

Resizing and positioning using the Properties panel
Resizing and positioning using the Properties panel.

Moving an artboard can also be done with your keyboard, just like a regular layer or object. While the artboard is selected, use an arrow key for a 1-pixel nudge, or hold Shift for 10 pixels.

The last way to move an artboard is by clicking the name of the artboard so that it is selected, and then clicking and dragging to any position. This is particularly useful because it is smart-guide-enabled, which means you can align all of your artboards by, say, 50 pixels and their positions will lock according to your previous spacing. Now that you’ve got the hang of artboards, let’s check out the Generate feature.

You can also check out the “Artboards2” section of Photoshop Help if you want to learn more.

Generate Link

This is another Photoshop feature that you might not have delved into yet; it is well worth your while. Generate lets you export layers and groups by using a special naming convention in your layer names. Think of it as a “Save for Web” shortcut just by renaming a layer. In most cases, it will completely replace having to go through the “Save for Web” dialog, which will save you precious time and keep you focused on what matters: the design. Let’s take a look.

Turn on Generate Link

Generate can be turned on and off for each PSD. When it’s active, any layers with the special naming syntax will automatically be exported. Make sure you have it checked by going to “File” → “Generate” → “Image Assets.”

Generate menu option
Generate menu option.

What Can Be Generated? Link

Basically, any layer in the Layers panel can be used with Generate, be it a bitmap layer, shape layer, layer group, smart object, etc. Even layers within layer groups can be exported. As long as the layer name has the correct syntax, it’s good to go. We will discuss later how this can be applied to artboards, but let’s not get ahead of ourselves. Let’s start with the basics.

Generate Basics Link

Now that we are all set up to generate images assets, having checked the menu item, let’s try out some of the options. Just by adding an extension — -opt.jpg, .gif or .png — to your layer or group name, you can save out an opt.jpg, GIF or PNG. These are the three image options currently supported by Generate. When image assets are created, they are saved in a new folder alongside your PSD. And they have the same name, but with an -assets suffix:

[ end1a-opt.jpg ][ end1b.gif ][ end1c.png ]
Showing generated images from layer names
Showing generated images from layer names.

Notice from the screenshot that only the layers with -opt.jpg, .gif or .png have generated image assets. The layer groups end2a, end2b, end2c didn’t export. Any layers that don’t include extensions are not exported.

There are also compression options for opt.jpg and PNG. For opt.jpg, I would recommend using the percentage syntax, which is 1 to 100%. For PNG, the options are simply 8, 24 or 32, which correlate to their bit formats. Just add the compression options directly to the layer name after the extension of -opt.jpg or .png, as shown here:

[ end1a-opt.jpg100% ][ end1b-opt.jpg40% ][ end1c-opt.jpg10% ]
Output showing opt.jpg compression
Output showing opt.jpg compression.

You can also export multiple images from the same layer. Use a comma (,) or plus (+) separator between image names, as shown below. Just make sure that each name is unique (a requirement of Generate).

[ 1a_1-opt.jpg, 1a_2-opt.jpg, 1a_3-opt.jpg ] or [ 1a_1-opt.jpg + 1a_2-opt.jpg + 1a_3-opt.jpg ]
Output showing multiple images exported from one layer
Output showing multiple images generated from one layer.

You can also set the scale of the output as a percentage or in pixels. This goes in the layer name before the image name. The percentage is easy to figure out, and pixels is simply the standard width by height. Here is an example:

[ 50% end1a-opt.jpg ][ 75% end1b-opt.jpg ][ 100% end1c-opt.jpg ] or [ 100x50 end1a-opt.jpg ][ 200x100 end1b-opt.jpg ][ 300x150 end1c-opt.jpg ]
Output showing various scales in percentage
Output showing various scales in percentage.

All of these custom syntaxes can be combined with each other to form complex image assets from your layers. Here is an example of scale, compression and image types all on one layer:

[ 150% layername-opt.jpg80% + 50% layername.png8 ]

As I’m sure you can see, the combination of scale, compression and image types is a powerful way to consistently export image assets.

Advanced Generate Link

If those aren’t enough options for you, there is also the default setting that gets applied to all Generate layers in your document. The default is created by making an empty layer in your document. I use the very top layer of my PSD so that I can always find it. Let’s look at an example.

[ default 150% large/_large + 50% small/_small ]
Default layer example in the Layers panel
Default layer example in the Layers panel.

The default keyword defines this layer as the default setting. Do not change this. The 150%, which is next, defines the scale. After that is something new. The large/ and small/ set the folders where these will be saved. And then _large and _small add suffixes to your file names. All you need to do to activate the output is to add an extension to the layer, such as -opt.jpg or .png. Now, all of the images with Generate layer names will be exported with these settings. Awesome, right?

Not convinced? Let me illustrate how this saves time. Below is Generate on individual layers.

Using layer names can get repetitive
Showing the Layers panel using each and every layer.

And here is the same but using the default:

Showing Layers panel using default
Showing Layers panel using default.

As you can see, this will save you from repetitively naming layers. It also adds some very advanced options for folder outputting and default settings across all of your generated output. It is a massive time-saver for sure. Once you give this a try, I doubt you will ever go back to the traditional “Save for Web” dialog and layers.

Still excited and want more on Generate and its syntax? Then check out “Generate Image Assets From Layers3” by Chris Converse, posted in Photoshop Help.

The Perfect Combo Link

As I hinted at the beginning of this article, these techniques really shine when used together: the combination of artboards to visualize multiple canvases at once, and Generate to export multiple image resolutions.

I put this into practice in a recent project while being contracted by BIG4. This project occurred in conjunction with Bermuda Tourism5 and Expedia6. You can view the result on the Explore Bermuda7 website. Basically, the experience lets you see Bermuda through first-person video by picking your own path. Cool, right?

What we will focus on here are the final images, for which I used the combined technique of artboards and Generate. During the experience, you can choose A, B or C at five decision points, which then builds an itinerary based on your choices. Here are screenshots of the itinerary:

Screenshots showing the itinerary screen of the Bermuda experience8
Screenshots showing the itinerary screen of the Bermuda experience. (View large version9)

Image Assets Link

To support phones, tablets and desktop, the final images needed to be exported at @1x, @2x and @3x. There were also wide and tall versions to better fit on phones. The PSD used as an example here is for the tall version. So, the 15 images quickly became 45 for each tall and wide version to support Retina displays!

If you are not familiar with the terms @1x, @2x and so on, then I’d suggest having a quick read of my article, “A Better Way to Design for Retina in Photoshop10.” It explains why I think this is the best technique when working with Retina assets and also why I design @1x.

Great! So, now you know what I needed to produce. Let’s walk through how I got there.

Layers to Artboards Link

The first improvement to my regular workflow was to change from layers to artboards. This is really powerful from a design perspective. You can now compare all of your assets that need to work together. I could make sure that all of the color options were correct and that all of the images work together as a set.

Comparison of layer groups and artboards in the Layers panel
Comparison of layer groups and artboards in the Layers panel.

Look at the comparison of layer groups and artboards above. As you can see, there isn’t much change here, nothing to scare you off: layers on the left and artboards on the right of the image. Instead of having top-level layer groups for each image, they now become an artboard. Sublevel folders and assets are kept neatly nested below the Artboard layer. Business as usual really.

Let’s see the biggest advantage. Here’s what you see with layers when working in a traditional Photoshop workspace:

Workspace with layers
Workspace with layers.

And here’s what you get when working with artboards:

Workspace with artboards
Workspace with artboards.

As you can see from the traditional layer setup, you get only one canvas. This allows you to work on only one image at a time, with no easy way to compare with others. To view another image, you must turn off the visibility on all other layer groups and turn on the layer group you want to see. A bit painful, really.

With artboards, you can see the full set of images at once. I have also arranged the images in rows and columns to keep them neat. Much better.

It doesn’t stop there. Let’s see how Generate works on top of this artboard setup.

Artboards Combined With Generate Link

As if artboards aren’t great enough already, let’s see them in action with Generate. My previous workflow with layers would be very different at this point. I would either use “Save for Web” if it was just a few layers, or use a script to export the layers I wanted if there were many layers. The difficulty arises when you need three images at different resolutions and with the correct naming to support Retina. Thankfully, Generate solves this for us.

I do need to give a quick shout out to Martin Pitt for his comment on my previous article11. He mentioned that you could use Generate on layer comps, which got me thinking: Maybe Generate would work on artboards. To my surprise, it does!

OK, from what we walked through earlier in the article, Generate with the defaults will be the most efficient setup for the multiple images I need. Here is the default layer name I used:

[ default 100% end/@1x, 200% end/@2x, 300% end/@3x ]
Default Generate layer name used to export @1x – @3x
Default Generate layer name used to export @1x to @3x.

Generate will automatically create a tidy folder named end. In this folder, the 15 artboards will get outputted to 45 images, all scaled and neatly suffixed. Could you ask for anything better than that? Here are the image assets that are generated:

Output images in the 'end' folder12
Output images in the end folder. (View large version13)

The combined technique of artboards and Generate greatly sped up my workflow with these image assets and kept everything neat and tidy. Working on images as a set and producing Retina assets became much easier.

You might have noticed that I used the comma separator (,). I prefer it to using the plus sign (+) simply to keep my layer names a bit shorter. When working with artboards, you need all the real estate you can get. The last thing you need is a wide Layers panel cluttering up the workspace.

Wrapping Up Link

I hope you’ve enjoyed looking at artboards and Generate. Both are great features that are definitely worth a look, and they work well together when you need to export multiple image assets for Retina, as my example should have highlighted. Don’t be shy — give them a try! Thanks for reading.

Say “Hi” on Twitter14, and feel free to comment below.

Performance Tip Link

Unfortunately, not everyone has the latest and greatest high-spec machine. For those who don’t, artboards and Generate can be a bit taxing. To save a bit of CPU, you can just turn on Generate when you need to create new image assets.

I use this technique when working on a mobile or desktop page design, because working through extensive layers and groups every time I edit something can get a bit heavy! Again, the menu option is “File” → “Generate” → “Image Assets.” Keep it in mind.

Generate menu option
Menu option to turn Generate on and off.

Further Resources Link

  • Retinize It15
    “The best Photoshop actions for preparing designs for iOS or optimized for Retina-display websites.”
  • Design Resources16,” Bjango
  • Slicy17, MacRabbit
    “Slice PSDs in a whole new way.”

(da, jb, ml, al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2015/04/using-sketch-for-responsive-web-design-case-study/
  2. 2 https://helpx.adobe.com/photoshop/using/artboards.html
  3. 3 https://helpx.adobe.com/photoshop/using/generate-assets-layers.html
  4. 4 http://www.bigdb.co.uk/
  5. 5 http://www.gotobermuda.com/
  6. 6 https://www.expedia.com/
  7. 7 http://explorebermuda.us/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/12/ProjectMockup-large-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/12/ProjectMockup-large-opt.jpg
  10. 10 https://www.smashingmagazine.com/2015/05/retina-design-in-photoshop/
  11. 11 https://www.smashingmagazine.com/2015/05/retina-design-in-photoshop/
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2015/12/ProjectOutputThumbs-large-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/12/ProjectOutputThumbs-large-opt.jpg
  14. 14 https://twitter.com/MurdochCarpentr
  15. 15 http://retinize.it/
  16. 16 https://bjango.com/designresources/
  17. 17 http://macrabbit.com/slicy/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Murdoch is a Designer/Developer who has worked at global agencies Ogilvy and Wunderman. He has worked on big name clients that include Coke, Microsoft, Xbox, Nokia, Mercedes, Nissan, Jaguar, IBM, Shell, BP and GSK. He keeps an eye out for the User in UI and is now focussed on mobile. Feel free to follow him on Twitter.

  1. 1

    First I used Slicy for extra assets… When photoshop came out with naming layers for differtent assets I was pleased. But then Photoshop changed it again… It’ s confusing…

    Now I let Gulp take care of my assets…
    I make artboards (in PS and AI) for every image and let Gulp make a sprite and a LESS file for my assets (one for PNG and one for SVG) … sweet…

    7
  2. 2

    A bit too little, too late from Adobe.

    Photoshop lost me. I still have to have it, but only for legacy clients, plus all Adobe products are crashbombs waiting to go off and CC has to be reinstalled every other week or it won’t open. The only good thing about Adobe is that it’s cross platform. Sketch and Affinity would have all my design time if they only dropped the whole mac-centric thing.

    2
    • 3

      I disagree. Sketch and Affinity’s tools have been great additions to the market, and are all great tools in their own right, but Sketch is absolutely far more buggy and crashy, even still, than PS or AI.

      I get that it’s the chic thing to crap on big software companies like Adobe nowadays, but at least do it honestly. Adobe tools can be bloated and inefficient sometimes, but no one I know in my rather large circle of designer friends have ever had to re-install it once a week or anywhere near close to that.

      5
      • 4

        I disagree. Photoshop crashes on me way more than Sketch. Additionally, Photoshops new export feature SUCKS compared to the legacy one. The images are larger in file size and you don’t have as much control. They really dropped the ball. Sketch’s export options are amazing and that’s where the app really shines. Plus, in PS it’s just confusing… I can’t even export only the artboards I want. I have to export all of them all the time. Then there’s both Export As and then Export Artboards to Files. What’s the point of having two different things that do the same thing in the same menu?

        1
        • 5

          You can right click an artboard in the layers panel and click “quick export as PNG” or “Export as” to export just that single artboard.

          3
    • 6

      You hit the nail on the head. At least Adobe is cross platform. Sketch and Affinity could be so much more if they only ditched the Mac only approach.

      -1
  3. 9

    I’m happy to get rid of photoshop, only using for image editing. Still a fireworks user, but Adobe Comet soon arrives and looks promising to take the shift.

    0
  4. 10

    Setting export options with layer names is soooo nineties. This is how Gimp animated gif export works. This is a hack, not a feature.
    Once you try Sketch export feature, you’ll immediately realize why Adobe export sucks. Especially if you are making a lot of game assets for multiple devices…
    I have both Sketch and Adobe CC suite but if I have to generate a lot of assets (for different screen sizes mostly) I’ll go with Sketch. It’s a shame that Adobe uses a hack and sells it as a feature. They really need to improve PS and AI exports. I don’t know how but something like layer effects panel can be done for layer export options (with preview and advanced options…).

    0
  5. 12

    Somebody needs to create a simple guide and set of rules for managing linked smart objects and similar assets. Especially with issues like pixels getting trimmed off at the edge when scaling linked vector shapes in linked smart objects, why some items get blurry when you scale them up despite being vector, good methods for managing things like “linked smart objects embedded in linked smart objects” with lay comps etc… it’s taken me ages to get it under control and I still manage to confuse myself.

    1

↑ Back to top