How to export icon in different sizes without getting blur edges?

Question

I need to export icons for an android app in 4 different sizes: 36x36, 48x48, 64x64 and 72x72 px. The original size of icon I've created has size 272x272 px.

For example, see this image:

Left one is original size. The other two are scaled down but when exported, they have blur edges

Now, what I've always done is scaling them down and exporting one by one as PNG with size I need. But there's a problem. Some of the edges in each icon get blur. They are not crisp. However my original icon, when exported for testing, (272x272) is crisp.

What is the right way (if any) to get crisp edges for each icon size that I export?

PS: One way is to create each icon in separate file with size exactly that I need and align it to pixel grid. But that would need me to create a new icon every time I need a different size. If that's the only way to do this, I would do it, but do professional designers really do like this? e.g., you can see f of Facebook logo. It's crisp on every device. So is it the reality that they design each size individually for same logo?

Answer 1

Two quick responses:

1) That "blur" is either anti-aliasing or non-pixel alignment: if alignment, your P.S. workflow will take care of it, though with a lot of extra work; if anti-aliasing, it won't.

2) No, that is not how most of us handle icon design: we tend to use vector based apps which support multi-res output: my toolkit includes Adobe Illustrator, Adobe InDesign, Affinity Designer, Inkscape, Sketch, and on iPad Pro Concepts.

I mostly use Affinity Designer for icon work at this point, which has a powerful export persona with multi-res slice definitions allowing me to design the icon, and in one click, set up exports for icons of all appropriate resolutions and formats for Mac OS, Windows, iOS and Android.

As has been pointed out above, you can use Adobe Photoshop to create vector artwork, but it's not the primary usecase for the app, and so it's clunky and cludgey; given the low pricepoint, (29€ for eternal license) for me Affinity Designer was a no-brainer given its power.

Answer 2

when you scale done 272 to 36 I guess you wont be able to avoid blurry edges without altering your icon, since it simply will have have half pixels as (at least if my maths hasnt failed me completely) you cannot devide 272 by 36 without a remainder.

It is best to design at the smallest size you need to and then scale upwards. Maybe this video here is helpful: https://vimeo.com/169809377

Answer 3

In Photoshop. Use the shape and then convert that to a smart object instead of rasterizing the layer.

Then change every time just your wanted png you'll get same of all.

You have to do is opposite click on the layer and edit content and select another png.

You'll get same sizes with more accuracy.