0

I've created an icon in Illustrator and have been uploading it into makeappicon.com to try to get all of the correct icon sizes. Most of the icons are extremely blurry and I can't figure out why. Any thoughts?

I've tried "snap to pixel" and I've tried using Object > Path > Outline stroke, but got the same results.

  • Its impossible to give a meaningful answer with this info alone. But yes you can often not scale icons to extremely small sizes without doing a lot of the work again. Being able to scale does not mean infinite sacaleability, Nyquist limits and all that Snap to pixel is very unlikely to help anything.. – joojaa Feb 5 '17 at 8:38
1

The problem is anti-aliasing.

It may be tempting to believe if you create a large icon in Illustrator with snap-to-pixel enabled, then it will scale down to any size while staying sharp. But horizontal and vertical edges in your artwork that lie on odd pixels – take pixels 5, 23 and 99 as examples – will, once scaled 50%, be rendered between pixels at the new size (ie. pixels 2.5, 11.5, and 49.5). Of course, there’s no half-pixels, so the edge is represented with an averaged colour, and blurriness is the result.

The only way to retain crisp edges is to only use pixel boundaries in the source artwork that will still fall precisely on pixel boundaries after scaling.

In the example shown below, the source icon (on the left) shows the red box drawn on pixel boundaries 3 and 29, and the white box on 8 and 24. When scaled 50% (right) only the white box remains crisp. The red box is at 1.5 and 14.5, so becomes anti-aliased.

enter image description here

| improve this answer | |

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.