I learned a very cool method over the weekend which should make managing image resources for my Android apps much more streamlined. Adobe Generator adds asset organization into Photoshop layers, dramatically simplifies the process for creating images, and resolves common human errors.
If you're not familiar with Adobe Generator, it was introduced in Photoshop Creative Cloud in 2013 as a means to auto-generate image assets.
Why is this useful? Because a lot of time is spent on generating mobile image assets by hand. A small change to a single icon can take a few minutes to resize & save to multiple folders, not to mention manually confirming that each file was placed in the proper folder. UI devs (like me) tend to want to speed through this process, so mistakes are bound to happen.
In this post I'll show you how to set up Generator and how to organize your file and layers.
Setting Up Adobe Generator
There's two checks you need to start using Generator with your file.
First, be sure Generator is enabled in your Preferences. Navigate to Preferences > Plug-Ins and look for the Enable Generator checkbox:
The checkbox should already be enabled, but best to confirm first. This is a global setting so you can leave it on without any harm.
The second step is specific to each file with which you will generate assets. When you're ready, navigate to File > Generate and turn on Image Assets (by selecting it):
When you select Image Assets, Generator will create a (file-name)-assets folder with your PSD file:
Now you're ready to begin.
Using Generator in Photoshop Layers
The rest is managed in Photoshop's Layers panel. You'll basically tag your layer by renaming it to the file type you want. So if you rename a layer from "button" to "button.png", Generator will automatically convert that layer to a png file named button.png and put it in the assets folder.
Generator also enables you to do multiple files with modification settings. You can separate files with a comma and change values to quality, size, format, and even folders. We'll use this technique to auto-generate your Android image resources.
For my example, I'm going to use some social icons used in my app Dayframe:
The image is sized for xxxhdpi graphics so I can scale down from there to make the remaining sized resources. To create the xxhdpi image, I'll rename the layer "xxhdpi/instagram.png":
Which will automatically create an xxxhdpi folder with an instagram.png file:
Now to make the remaining resource sizes (in the right folders), I'll use commas and relative percentages to update the layer name to:
"xxxhdpi/instagram.png, 75% xxhdpi/instagram.png, 50% xhdpi/instagram.png, 37.5% hdpi/instagram.png, 25% mdpi/instagram.png"
and Generator will create the additonal images automatically:
What about my other layers?
It's easy: use a text editor to find / replace your asset name:
and then copy the result into each layer:
and voila, you have ready-made resources, organized by folders:
From here you can safely copy your images over to your resource folder in your Android app.
Now managing your image resources is easy. Need to update? Change your PSD and bam! - you have new resources for each size.