How to export crisp Android icons in Photoshop/Illustrator?


Question

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:

  1. Using XXXHDPI in Illustrator, Save for Web down to all the other small sizes. (lots of blurred pixels)
  2. Using XXXHDPI in Photoshop, batch effect resizing images (still less blurry)
  3. Using XXXHDPI in Photoshop, manually saving for web with bicubic sharpen selected (best method, but doesn't work in a batch effect).
1
0
12/16/2014 5:03:00 PM

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.

Generator intro:

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.

1
1/16/2015 1:30:00 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^