What are the corner-radii for app icons?

[BrettArchibald]

OK, firstly, yeah I know it's not exactly an iTouch programming question, but this forum doesn't have an iTouch designing section, so...

Moving on, I'm putting together a couple of icons for a colleague and I've done the designs and they're now finished and so all I need to do now is export them as PNGs in the correct sizes, etc.

As I understand it, when I create the PNGs, there's no need for me to include any rounded corners with alpha-transparency, etc. as Apple add this themselves.

OK, so that's fine, but the designs I've done make use of an inner-glow effect which follows the icon's rounded corners. So even if I export a flat square-cornered icon, I still need to know the corner radius of the icon so that I can set my inner-glow effect to follow the rounded corner that Apple will add afterwards.

For the initial designs, I've worked on my own assumptions and guesstimates of what the corner radius is, but for the final product, I'd really like to be absolutely 100% pixel-perfect.
So I'm asking if anyone here knows precisely what the corner-radius of the icons is?

Now that's going on the knowledge I have that I need to create one uber-large icon at 512x512 (that Apple will scale down and use at several sizes on the App-Store) and one small icon at 57x57 that will be used on the iPhone / iPod itself.
Is this also correct?
So what I'd really need to know are BOTH corner-radiuses ("radii"?) for these two icons.

Any precise confirmed information on this is appreciated.
Thanks.

[PoV]

I've seen a few icons that don't do it right, so I'd suggest measuring it and setting up some bleeding room. I eyeballed it myself to create my web graphics, but used the full images since Apple would crop them.

[BrettArchibald]

Originally Posted by PoV

I've seen a few icons that don't do it right, so I'd suggest measuring it and setting up some bleeding room. I eyeballed it myself to create my web graphics, but used the full images since Apple would crop them.

If you mean I should set my inner-glow to extend past the "imaginary" rounded corners in my square-icon and for that glow to reach right into the corners, then yes, I had already anticipated doing that. But that will only solve any potential problems of the glow's outside edge being cut short, and not the problem of the glow's inner edge potentially being too round or not round enough.

Picture the scenario illustrated below, where the yellow is my glow effect (stretching right into the corners), and the dotted line is where Apple rounds off the corners.
Although I've overly-exaggerated the radiuses somewhat in the bad examples, this should give you an idea of the scenarios I don't want to end up with.



As for measuring an existing "live" icon on which to base mine... Well, if you can point me to a 512x512 example, then I'd use that, but surely there's some developer documentation which implicitly states what the corner radiuses are?
Not being a developer, I don't know this...
I'd still prefer to work to supplied exact measurements, rather than merely working off a screenshot.

[Zandog]

12px radius @ 128px size icon square.

[PoV]

From what I've seen, the developer docs don't give any details about the radius beyond that it's automatic. What I think you'd have to do is fire up iTunes and take a screenshot, or an iPhone and take one (power button followed by home button quickly) and just measure. Blow it up huge, and approximate the curve. It's unlikely that Apple uses different sizes.

EDIT: Or Zandog knows.

[BrettArchibald]

Originally Posted by Zandog

12px radius @ 128px size icon square.

Thanks for the reply, but that information doesn't appear to be correct.

I drew a blank round-cornered square with those measurements and it just didn't look right to me. It looked way too sharp.

So I checked it against an existing icon from the App-Store, and sure enough, that appeared to be the case.

Have a look at the example below.
The existing icon on the left is just how it appears when it's sized to 128px. I have not applied any corner radius settings of my own. What you see there is the corner that Apple applies.
The icon on the right is how it looks when I implement a 12px radius to it. You can see the Apple-rounded corner is somewhat larger than the one I have cut. You can still see the background colour that's UNDERNEATH the icon showing up INSIDE my corner-radius.

[dannys95]

dosen't x-code do this automatically?

[PoV]

So you blow out/bleed the corners like so:



Hacky example, but it should demonstrate the point. Get it as close as you can from actual screenshots and iTunes estimates, and do that. That way, even if you're wrong, it'll mostly work.

dosen't x-code do this automatically?

Not X-Code per se, the but the problem is when you want to put something in front of the shine... at least I hope that's the question.

[Zandog]

Originally Posted by BrettArchibald

..but surely there's some developer documentation which implicitly states what the corner radiuses are? Not being a developer, I don't know this... I'd still prefer to work to supplied exact measurements, rather than merely working off a screenshot.

There isn't an exact dock icon specification. The most common reference was the one released long ago by some other developer. Your welcome to download it for yourself and stringently dissect it's radius, pixel for pixel. The fact is, there are so many different sizes and shapes, even in the formal shape of beveled corners, there's no point in fussing over it.

Originally Posted by BrettArchibald

Thanks for the reply, but that information doesn't appear to be correct....

I don't care. Since we're spamming the thread with examples, here's two of many icons of done for various developers.

[PoV]

Uh, I don't think we're obligated to support Jailbroken themes.

EDIT: Nevermind, I'm just confused now.