We sat down with the Product Design Director at ConsenSys Sarah Baker Mills to talk about designing for blockchain and the challenges that come with it.
Streamlining asset production with Adobe Generator
This tutorial requires a working knowledge of Photoshop and a basic understanding of screen densities.
Photoshop CC now includes Generator, a feature that could mean “no more slices”. Ever. Generator scans your layer names looking for file extensions. Once it finds one it understands, it takes all the pixels it can find on that layer (or, as you will see later, layer group) and saves them to a file of the specified kind. The beauty of this is that you can tell it to generate multiple asset sizes from a single item, making designing for multiple densities more thought-process than manual labour (and a lot more fun). To explain exactly how this works, I have created a PSD mockup with the right specs. Let’s go!
This is a key step when working with Generator. At this point, you need to decide what kind of device you are tailoring your design to. I am using an Android design for this tutorial, since it requires the most diverse range of assets. It used to be standard practice to design at mdpi, because that’s what sp and dp are based on, but now it’s really more about what kind of screen sizes you are tailoring your design to. I’ve decided to design in xhdpi (~320dpi), to make the app look best on big phones like the Nexus 4 or Samsung Galaxy S3. If you’re designing a snazzy app for flagship phones, you’ll probably want to start with xxhdpi, if your project is a basic tool and you want it to look good on smaller phones, too, go lower. To fully understand how screen densities work and how to scale things for them, see the very helpful Android Developer guide, Supporting Multiple Screens.
Start by creating a new file with the right screen size. I’ve used 720x1280, a standard xhdpi screen, like a Nexus 4. This is a Photoshop Mobile & Devices preset, so you don’t have to worry about the rest of the settings, like colour space or resolution.
Once your file is created, you’ll want to turn on Generator to see the results of your work immediately. You can do this by selecting File > Generate > Image Assets. This can be turned on at any point and will yield the exact same results.
Generator is fully controlled through layers. This means that everything that is cut as one piece needs to be on one layer (or in a layer group), and it needs to be the only thing there, since Generator will simply get rid off all empty pixels to cut an asset. Once you have created things that are going to be assets, give them file names inside the layer name. I started by creating a menu for my very cool Whalespotting app and I put in some Menu Icons (thanks to my fellow designer, Gosia Dzierżerwicz, for letting me use her graphics).
All of these icons need to be prepared as PNG files in each of the four densities this app will support: ldpi, mdpi, hdpi, and xhdpi. They can all be expressed as percentages of my source size: 25%, 50%, 75% and 100%, respectively. In order to cut these assets, I will name each of the layers according to the following pattern: x% file_name_density.type, e.g. 25% ic_menu_whale_ldpi.png. I’ll include a full list of parameters you can define at the end of this guide.
Note that the question mark icon is a text layer. That’s fine - Generator doesn’t care what draws the pixels in the file, it just cuts whatever is visible.
Organisation is key
As soon as you turn on “Generate Image Assets” and type the first file name, Generator will create a folder in the same place your .PSD file is located. This means you’ll want to hit ⌘S now and decide on where to put your file. Once you’ve done that, have a look at the folder that has appeared. It should have all the assets you have specified, in this case there should be 20 - 5 icons x 4 densities. From now on, you don’t even need to save to re-generate; once Generator detects a change has been made, it will automatically re-cut the layer.
This is the most straightforward way of creating assets: create a layer with whatever you want cut and type a name. You can, however, make more composed images, if you want to be able to manipulate parts of it later on, for example. To demonstrate, I have created a counter graphic that is composed of three separate parts: two differently coloured rings and the circle in the middle with a nice drop shadow. To generate a single asset from these, put them in a layer group (⌘G) and name it according to our pattern.
There are also things beyond assets that you can find Generator useful for. For example, you might want to have a screenshot of each screen in your app that updates itself when you make changes. To achieve this, put the whole layer in a layer group and give it a file name. For previews you probably don’t want each density – it’s enough to just have the original size. Have a look at the screen I have created, a geolocalisation of sorts. It is located underneath the menu, to give a realistic preview of how the app would be layered. Some of the icons on this screen are repeated; I have given them extension-less names to avoid conflict, but if you have duplicates, Generator will simply produce a txt file with a list of things that went wrong.
Yes. It really isn’t rocket science. Once you’ve mastered the basics you can produce all sorts of custom combinations to match your needs.
As promised, here is a full list of parameters you can control with your layer name:
- size: use percentages for relative scaling (200% firstname.lastname@example.org), pixels for absolute scaling (100x80 icon.png) and "?" wildcards for proportional scaling (100x? icon.png)
- filetype: .png .jpg and .gif are the supported file extentions at this time.
- quality: add a suffix to control the quality of the output, e.g. icon.jpg60% or icon.jpg6 - they both produce the same file. PNG files come in standard quality options: .png8, .png24, .png32. The defaults are JPEG 90% and PNG 32.
If you're working on Mac OS X, you can use Automator to sort your assets into the appropriate folders according to density. Just make a workflow with the actions "Find Finder Items" and "Copy Finder Items" and run it each time you want to pull assets out of the common folder. I have set this up to search the whole project, so I don't need to run it for every screen.
Do you have any Generator tips and tricks? Seen or written a better script to distribute assets? If you have any comments at all about streamlining your work, feel invited to leave them below.
- MagdaUI Designer