share

DESIGN

5min read

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!

Setting up

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.

setup.png

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.

generate_assets.png

Naming Layers

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

menu_icons.png

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% filenamedensity.type, e.g. 25% icmenuwhale_ldpi.png. I’ll include a full list of parameters you can define at the end of this guide.

layer_names.png

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.

whalespotting-assets.png

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.

counter.png

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.

whereabouts.png

That’s it?

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% icon@2x.png), 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.

Bonus trick

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.

automator.png

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.

share


MagdaUI Designer

LEARN MORE

Contact us if you have any questions regarding the article or just want to chat about technology, our services, job offers and more!

POLIDEA NEWSLETTER

Sign in and expect sharp insights, recommendations, ebooks and fascinating project stories delivered to your inbox

The controller of the personal data that you are about to provide in the above form will be Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: 0048 795 536 436, email: hello@polidea.com (“Polidea”). We will process your personal data based on our legitimate interest and/or your consent. Providing your personal data is not obligatory, but necessary for Polidea to respond to you in relation to your question and/or request. If you gave us consent to call you on the telephone, you may revoke the consent at any time by contacting Polidea via telephone or email. You can find detailed information about the processing of your personal data in relation to the above contact form, including your rights relating to the processing, HERE.

Data controller:

The controller of your personal data is Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: [0048795536436], email: [hello@polidea.com] (“Polidea”)

Purpose and legal bases for processing:

 

Used abbreviations:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

ARES – Polish Act on Rendering Electronic Services dated 18 July 2002

TL – Polish Telecommunications Law dated 16 July 2004

1)        sending to the given email address a newsletter including information on Polidea’s new projects, products, services, organised events and/or general insights from the mobile app business world |art. 6.1 a) GDPR, art. 10.2 ARES and art. 172.1 TL (upon your consent)

Personal data:name, email address

2)       statistical, analytical and reporting purposes |art. 6. 1 f) GDPR (based on legitimate interests pursued by Polidea, consisting in analysing the way our services are used and adjusting them to our clients’ needs, as well as developing new services)

Personal data:name, email address

Withdrawal of consent:

You may withdraw your consent to process your personal data at any time.

Withdrawal of the consent is possible solely in the scope of processing performed based on the consent. Polidea is authorised to process your personal data after you withdraw your consent if it has another legal basis for the processing, for the purposes covered by that legal basis.

Categories of recipients:

Your personal data may be shared with:

1)       authorised employees and/or contractors of Polidea

2)       persons or entities providing particular services to Polidea (accounting, legal, IT, marketing and advertising services) – in the scope required for those persons or entities to provide those services to Polidea

 

Retention period:

1)       For the purpose of sending newsletter to the given email address – for as long as the relevant consent is not withdrawn

2)       For statistical, analytical and reporting purposes – for as long as the relevant consent is not withdrawn

Your rights:

 

Used abbreviation:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

According to GDPR, you have the following rights relating to the processing of your personal data, exercised by contacting Polidea via [e-mail, phone].

1)       to access to your personal data (art. 15 GDPR) by requesting sharing and/or sending a copy of all your personal data processed by Polidea

2)       to request rectification of inaccurate personal data
(art. 16 GDPR) by indicating the data requiring rectification

3)       to request erasure of your persona data (art. 17 GDPR); Polidea has the rights to refuse erasing the personal data in specific circumstances provided by law

4)       to request restriction of processing of your personal data (art. 18 GDPR) by indicating the data which should be restricted

5)       to move your personal data (art. 20 GDPR) by requesting preparation and transfer by Polidea of the personal data that you provided to Polidea to you or another controller in a structured, commonly used machine-readable format

6)       to object to processing your personal data conducted based on art. 6.1 e) or f) GDPR, on grounds relating to your particular situation (art. 21 GDPR)

7)       to lodge a complaint with a supervisory authority,
in particular in the EU member state of your habitual residence, place of work or place of the alleged infringement if you consider that the processing
of personal data relating to you infringes the GDPR
(art. 77.1 GDPR)

No obligation to provide data:

Providing your personal data is not obligatory, but necessary for Polidea to provide you the newsletter service

Refusal to provide the above data will result in inability to receive the newsletter service.

Profiling

In the process of providing the newsletter service, we make decisions in an automated way, including profiling, based on the data you provide.

 

“Profiling” means automated processing of personal data consisting of the use of your personal data to evaluate certain personal aspects relating to you, in particular to analyze or predict aspects concerning your personal preferences and interests.

 

The automated decisions are taken based on the analysis of clicked and viewed content. They affect the targeting of specific newsletter content to selected users registered to receive the newsletter service, based on the anticipated interests of the recipient.