Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
    
I haven't made ios icons, but this seems pretty legit: appicontemplate.com - pixelresort.com/blog/app-icon-template –  Joonas Aug 24 '12 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 Aug 24 '12 at 9:25
    
That might be a good idea. –  Joonas Aug 24 '12 at 9:34

2 Answers 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):

  • Icon512.png - 512px - 89.825
  • Icon.png - 57px - 10
  • Icon@2x.png - 114px - 20
  • Icon-72.png - 72px - 12.632
  • Icon-72@2x.png - 144px - 25.263
  • Icon-Small.png - 29px - 5.088
  • Icon-Small@2x.png - 58px - 10.175

As discussed here: http://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.

share|improve this answer
    
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 Aug 25 '12 at 4:52

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.

share|improve this answer
    
This is an interesting approach. It won't work for every design (with corner highlight e.g.) but it's worth a try. –  KMSTR Aug 25 '12 at 4:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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