1

The problem: The anti-aliased rounded corners of my app icons show, due to the transparency, some pixels of the underlying background.

My quick solution: Instead of exporting with "intact" corners I filled the space with the apporpriate texture. Making the corners look perfect on iOS devices.

enter image description here

And it was good for the time. But now as icons get more and more complex, this gets harder and harder to do. And the second problem I have with this is that wherever the icon is used as well (testflight, app reviews) where I have no control over what icon gets picked, the cornerless version simply does not represent the final design.

My question: Do you have a better/different workflow to for making beautiful corners without compromising the appearance of the icon?

Improve this question
3
  • I haven't made ios icons, but this seems pretty legit: appicontemplate.com - pixelresort.com/blog/app-icon-template
    – Joonas
    Commented Aug 24, 2012 at 9:08
  • Thank you. I have found these and similar templates. I am actually pretty well prepared in terms of dimensions and corner radius. My question really is directed specifically at the anti-aliased corners. Should I edit my question to make that more clear?
    – KMSTR
    Commented Aug 24, 2012 at 9:25
  • That might be a good idea.
    – Joonas
    Commented Aug 24, 2012 at 9:34

2 Answers 2

Reset to default
2

I always extend the colour and let the OS mask the corners.

The exact radius for each size is (getting the corner radius perfect ensures the masking done by iOS matches closely):

As discussed here: https://stackoverflow.com/a/10239376/1347722

Start with a 10px radius on the 57×57px icon and scale the document up and down from there to get the correct corner radius.

Here's some examples of icons I've made, with the various corners unmasked. I really do think extending the art beyond the corner gives the best results.

enter image description here enter image description here enter image description here

Sometimes it means building your shapes a little differently to get the desired effect.

And the second problem I have with this is that wherever the icon is used as well (testflight, app reviews) where I have no control over what icon gets picked, the cornerless version simply does not represent the final design.

It's a shame you can't control everything, but users are less likely to see your design on those sites than on their home screen or in the App Store.

Improve this answer
1
  • Thanks for all the details. I have of course too researched the correct radius. I guess it helps most to know others work the same way.
    – KMSTR
    Commented Aug 25, 2012 at 4:52
0

Compromise. Build your icons with your own rounded corners with a transparent background, but let the corner radius be just a tad smaller than what iOS uses. That way iOS still gets to crop as it sees fit to make the nice round corner, and those that just grab the full version will still see a rounded corner, albeit at a slightly different radius/slightly thicker edge.

Improve this answer
1
  • This is an interesting approach. It won't work for every design (with corner highlight e.g.) but it's worth a try.
    – KMSTR
    Commented Aug 25, 2012 at 4:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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