-1

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:

enter image description here

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?

  • 1
    Set the interpolation to nearest neighborhood. Anyway this looks amazingly like your last question. And has same problem – joojaa Feb 26 '18 at 17:37
  • Yeah it may seem that it's like last question, but I learnt some good things from last question. I wanted to know more about next part, so asked the question specifically here. (I need to know more about the 1/3 thing you told about) :) – Vikas Feb 26 '18 at 17:41
  • So what's this "interpolation"? I ready about it. But it will reduce the accuracy of proportions? – Vikas Feb 26 '18 at 17:41
  • What do you think about my PS thing? – Vikas Feb 26 '18 at 17:43
  • 3
    "So is it the reality that they design each size individually for same logo?" Yes. There's really often no shortcut to excellent results. – Scott Feb 26 '18 at 18:08
0

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.

0

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

  • Scaling upwards also causes same issue. So I need to fix even that? – Vikas Feb 27 '18 at 10:32
  • @VikasKumar you will get blurry edges as soon as the scaled version is not a multiple of your base-size, because then your design will not sit on definite pixels but in between them, causing photoshop to use aliasing. Therefore you need to make adjustements, so that your design sits on full pixels again. I don't know about photoshop, but many other programs (e.g. Illustrator) have commands like "make pixel-perfect" that will shift your work so it fits again. helpx.adobe.com/illustrator/how-to/pixel-perfect.html – CrazyQwert Feb 27 '18 at 10:36
  • But using those tools like align to pixel grid destroys the ratio. – Vikas Feb 27 '18 at 10:53
  • @VikasKumar well, from what I know these are your only options: - live with the blurry edges - adjust your design so it is pixel perfect - choose export sizes, that are multiples of your base size (given that your base size is already pixel-perfect) Other than that I sadly have no Idea how to achieve your desired outcome :( – CrazyQwert Feb 27 '18 at 10:57
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.