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

Answer 1

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:

• https://blogs.adobe.com/photoshopdotcom/2013/09/introducing-adobe-generator-for-photoshop-cc.html

Here’s my workflow, including lots of info on using slices sheets and exporting for Android and iOS.

• http://bjango.com/articles/appdesignworkflow/

Another option, if the assets are simple enough, is to use Android’s new vector drawables:

• https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html

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:

• http://max.adobe.com/sessions/max-online/#/video/609

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.

Answer 2

Let me begin by saying this method is just a workaround - the dark side of Android is, unfortunately, the multitude of screen sizes and densities we designers and developers need to work with, and the only way to create pixel-perfect assets in Photoshop is doing it manually.

The following solution works only in Photoshop, as far as I know:

If I understand correctly, you mentioned that the best method is using the bicubic sharpen, but you'd like to use it in the Batch feature. Well, what you can do is create an Action that resizes your image and select the bicubic sharpen method - this way it will be saved into the Action, and you can Batch Process multiple images with it, hopefully achieving the desired effect.

If you want more information on Actions and Batch Processing, try this tutorial (I swear it's not a shameless self-promotion, this is the only one I know the link to).

(Or, if you want simple shapes and icons, try converting them into a font, like Font Awesome - here's one of many tutorials on how to do it (again, the only one I know). This way you won't have to resize them for all densities, and they will always be fairly crisp no matter what device you display them on).