I know that I don't often post about 'work' stuff here, but I've just discovered Photoshop's Generate Image Asset tool and it's saved me a ridiculous amount of time. Designing for mobile used to be simple. I designed for iOS, which meant I'd design at retina sizes (@2x) and save everything out at 50% for non-retina (@1x).
But then came Android with their multi density devices (LDPI, MDPI, HDPI, XHDPI, XXHDIP, XXXHDPI) and iOS 6 and 6+ (@3x).
Suddenly saving out assets for 8 different versions was a massive time suck. Figuring out how things fit together, and updating several assets every time we made a change was painful.
Turns out some clever person at Adobe was also suffering, and they built this amazing tool into Photoshop CC.
Step 1 - Turn it on.
File > Generate > Image Assets
Step 2 - Figure out your file structure and sizes.
This is where you figure out your file structure, and how you want the asset sized in comparison to your psd.
First, you need to understand the relationship between all the different densities. If you're not familiar, this intro from Teeanlax might help.
The intro is awesome, but was published before 6+ and XXHDPI happened. No worries, we can slot them in in a similar way.
I typically design at @2x resolution as standard. It makes it easy to scale up or down, so my design scaled at 100% is good for @2x and XHDPI.
Here is the scales I use for each different density:
@1x - 50% @2x - 100% @3x - 150%
MDPI - 50% HDPI - 75% XHDIP - 100% XXHDPI - 150%
Now that I know the scales, onto the file structure.
With iOS, they can live in the same file, but each version must be saved out as @Nx on the end, depending on which density it's for.
For Android, they need to be in separate files with the same naming conventions.
Create a new, empty layer at the top, can call it:
default 100% ios/@2x, 50% ios/, 150% ios/@3x, 75% android/drawable-hdpi/, 50% android/drawable-mdpi/, 100% android/drawable-xhdpi/, 150% android/drawable-xxhdpi/
Here's how this works:
Each version is separated by a comma. The scale is how big it will be, the folder name will define where it saves to, and the append (optional) will add an extra bit to the filename.
So, 150% ios/@3x will save an asset 150% of the scale of the original, in a file named ios, with @3x appended.
Step 3 - Save Your Layer
To save out the asset into the file structure, simply add a file format on the end of the layer name.
searchicon > searchicon.png
I'm pretty sure you can use either .png or .jpg.
And just like that, all your assets are in the right place, as the right size.
Generator is pretty clever. If you make a change to a layer, it will update the asset on the fly. So handy!