Using Adobe Photoshop Generator to Speed Up Your Workflow
Real-time asset generation from Adobe Photoshop mockups is a game changer for UI and web designers, and developers.
Originally posted on TeaPowered.co.uk
You’ll need a copy of Adobe Photoshop CC (2014 or newer), part of the Creative Cloud suite, to use the Generator feature.
In this tutorial I shall be demonstrating how you can use Adobe Generator to export UI assets from PSDs in Adobe Photoshop, ready to for use in your website, app design or project. You will also find out how to use built-in features to take the pain out of exporting assets at multiple resolutions, with different file formats and compression settings.
Existing Tools and Methods
Firstly a little background into other methods of exporting UI assets from PSDs, and where Generator may finally help alleviate some pain.
The Slice Tool
The slice tool is a relic of the past. Useful for print, graphic designers and the early pioneers of web design, but outdated since the dawn of transparent PNGs, in a world where interfaces that use layers of image assets is now commonplace.
The slice tool treats the canvas as a flat image, slicing and dicing artwork the way a graphic designer of-old would cut up artwork for print media. Because of this, UI designers are forced to make a decision:
- Perform multiple exports with different layers visible and reorganise their slice areas between layered assets.
- Extract all the UI image assets into a bespoke ‘Style Sheet’ where assets are laid out in a flat arrangement for easy exporting.
DevRocket
DevRocket is invaluable in my day-to-day work, and you should give it a try right away. DevRocket offers features such as instant template setups for iOS interfaces, app icon workflows, refill options, and more. But the best feature for me is the ‘cut’ tool. No single button has ever sped up my workflow as quickly as the ‘cut’ feature. The ‘cut’ feature copies and isolates selected layers and layer groups into their own canvases for quick exporting or manipulation.
Whilst DevRocket provides a feature for exporting assets from design mockups in a similar way to the built in Generator feature, it offers less flexibility in asset resolutions and compression settings.
Slicy
Slicy has been my chosen method for exporting UI assets for the past few years. And I love it. The tool works almost like a ‘3D’ layered version of the Slice Tool. Slicy works by using vector shapes to identify the size of the ‘slice’, placing it in the same layer group as the assets you wish to export, and giving the shape layers a file name.
It works beautifully. A ‘3D slice tool’. But it requires strict a layer organisation to work, with a significant amount of added junk layers cluttering your layers pane. Even so, when MacRabbit confirmed that they will not be adding automatic scaling to @3x support, deciding to drop future development of the product, it was time to part ways and move on. Sad times.
Enter Generator (The Tutorial)
The Generator feature in Adobe Photoshop (CC 2014 or newer) allows you to export layers and layer groups from PSDs instantly, without the need to setup a separate asset style sheet, drawing slices, and cluttering your layer structure with additional junk.
Step 1 — Turn on Generator
In the ‘file‘ menu, under ‘Generate‘, you will find a menu item called ‘Image Assets‘. Clicking this turns on the Generator feature. The Generator will now start tracking your document for any image assets you choose to export.
Step 2 — Exporting your first image asset
First choose the asset that you want to export. In my example, I shall be exporting the header background. In the layers pane, rename the layer to your desired file name followed by the image format (for example .png or .jpg). This will be the file name of the exported image asset. You may use any conventional image format that Photoshop allows you to export in the ‘save’ dialogue, but the typical formats will be PNG, JPG or GIF.
Now open up Finder (or file explorer for Windows users), and navigate to the location of the PSD that you are exporting. Next to your PSD there is a folder named after the PSD followed by ‘-assets’. In this folder you will find your exported image asset.
That’s it!
That is the Generator feature of Adobe Photoshop in a nutshell. No frustrating slicing and dicing to do, no complicated layer structure, no switching around of layers to export on transparent. Only 2 steps to export the image assets from your UI design mockup, ready for development.
It’s some of the additional features that will save you the even more time and effort.
Image Compression
The above example exports the layer at the highest quality jpeg settings. Compression instructions can set simply by adding the desired level of compression to the end of the layer name.
Renaming the layer to header-background.jpg50% (or header-background.jpg5) will automatically update and replace the existing image asset export with a new version featuring your new compression settings.
Resizing
Say that you designed your UI mockup at retina resolution, you have exported the @2x assets for iOS and now it’s time to export the 72ppi non-retina image assets. Previous methods included automated Photoshop actions or Automator scripts to automatically generate scaled versions of the assets, or in extreme circumstances the resizing of your mockup to re-export the assets.
Generator’s built-in resizing feature is a huge time-saver, with increased practicality, flexibilities and re-export capabilities. Simply add your resize instruction before the filename.
For example, if I want to export the header background asset from earlier at half the resolution, the layer name would become 50% header-background.jpg
Generator allows you to use any measurement units that is recognised in Photoshop. This includes inches, millimetres, centimetres, etc. Exporting a 250-pixel square version of the header background would use the layer name 250px x 250px header-background.jpg
If no measurement unit is included Photoshop Generator automatically assumes that it is in px (pixels).
Using Wildcards
The above example uses fixed-values to resize the export, which skews and stretches the layer (or layer group) to fit the dimensions given, which is not often the desired outcome. The way to avoid this is to use wildcards. First identify which dimension is fixed. In this example the header background must be 250 pixels wide, but the height is not important as long as the width-to-height ratio is the same. Wildcards are denoted as question marks (‘?’). The layer name then becomes 250px x ? header-background.jpg
Joel Brandt and Samartha Vashishtha from Adobe have written a detailed article on a closer look at the syntax of Photoshop Generator that includes wider documentation of what Generator will and will not accept as layer names.
Exporting Multiple Versions
Another massively time-saving feature of Generator is the ability to export multiple versions of the same layer or layer group. This is done simply by including multiple sets of filenames and export settings in the the layer name, separated by a comma.
To export both a high quality, retina resolution (remember that I designed the mockup at @2x resolution), and low quality, non-retina resolution versions of the header background, the layer name would appear like this: header-background@2x.jpg100%, 50% header-background40%
Using Layer Masks to Export Fixed Sizes
In this example, the developer has asked for the icons shown below to be exported as equally sized image assets. Firstly Generator is activated by going to File > Generate > Image Assets, each of the layers is renamed to ‘icon-camera.png’, ‘icon-microphone.png’ and ‘icon-eye.png’. But when checking the exports, we find that each icon has exported at different dimensions.
This happens because Generator exports layers using the smallest possible canvas size by finding the edges of the layer or layer group.
Luckily the problem is easily solved using layer masks. Generator will use vector or raster later masks as instructions for the export dimensions.
To summarise…
Adobe Photoshop Generator is arguably the most efficient way for exporting UI image assets from PSD mockups. The learning curve is relatively shallow, and can be picked up quickly. The tool has already shaved hours (if not days) of work from my workflow, and hopefully adopting this method can help you too.
If you have any questions, feel free to drop a comment and I’ll do my best to get back to you.
