How to export crisp Android icons in Photoshop/Illustrator?
Both Photoshop (layer shapes) and Illustrator (vectors) are terrible at making crisp Android assets when I save out. Can anyone lend a hand how to make crisp items at multiple sizes without doing it by hand? Here are the methods I've tried:
- Using XXXHDPI in Illustrator,
Save for Webdown to all the other small sizes. (lots of blurred pixels)
- Using XXXHDPI in Photoshop, batch effect resizing images (still less blurry)
- Using XXXHDPI in Photoshop, manually saving for web with bicubic sharpen selected (best method, but doesn't work in a batch effect).
Any method that uses bitmap based scaling is going to generally look terrible for vector shape-based designs, especially for small glyphs. The good news is that Android really only requires 2Ã—, 3Ã— and 4Ã— assets these days (maybe 1.5Ã—, if you want to target older devices. iOS is similar, requiring 1Ã— (iPad Mini and older devices), 2Ã— and 3Ã— (iPhone 6 Plus).
- 1Ã— = Android mdpi = iOS non-Retina
- 1.5Ã— = Android hdpi
- 2Ã— = Android xhdpi = iOS Retina
- 3Ã— = Android xxhdpi = iOS Retina HD (iPhone 6 Plus only)
- 4Ã— = Android xxxhdpi
Youâ€™ll notice that iOS and Android are similar complexity these days, in terms of asset scales.
Iâ€™d recommend using Photoshop and either the newish Generator feature, or slices. Generator can save assets out at various scales, and it scales using vector scaling, rather than bitmap scaling.
If you work at the 1Ã— size, scaling up by exact integer multiples will be perfect. That means your 2Ã—, 3Ã— and 4Ã— artwork will look great.
Hereâ€™s my workflow, including lots of info on using slices sheets and exporting for Android and iOS.
Another option, if the assets are simple enough, is to use Androidâ€™s new vector drawables:
If youâ€™re using vector drawables, then youâ€™ll need to create SVGs, so Illustrator might be the best choice (please note that Photoshopâ€™s Generator can also create SVG assets).
I also gave a talk at Adobe MAX that covered the topic:
And finally, if you really do need 1.5Ã— assets, Iâ€™d recommend tweaking those by hand â€” if you do a lot of the work at 1Ã— scale, then the 1.5Ã— assets will end up with blurry edges, due to the scale factors involved. Thereâ€™s not much you can do about that.
This post may be met with replies of â€œYou work at 1Ã—?! Are you insane?â€. I do most of my work at 1Ã—, yep. But, itâ€™s very easy to switch between scales if you need to see the detail, or simply nudge half-pixels where appropriate.