Advertisement


iOS App Icon design - the rounded corners issue


Question

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?

2012/08/24
1
0
8/24/2012 9:45:00 AM

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.

2017/05/23
1
5/23/2017 11:33:00 AM