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.
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.
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.
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.
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. 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.
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. I don't care. Since we're spamming the thread with examples, here's two of many icons of done for various developers.
Uh, I don't think we're obligated to support Jailbroken themes. EDIT: Nevermind, I'm just confused now.
Yeah, that's what I had done up to now for the design stage of it. I just wanted to find out if any official info was out there which confirmed what I had done was correct, to make sure I didn't end up with a dodgy-looking icon. Or not.
Firstly, I assume you mean iPhone / iPod Touch / App-Store icon, not dock icon. Secondly, yes, there is an exact specification when it comes to what the corner radius of these icons are. Apple applies one rounding-rule to all the square icons that people create. Whether the general public knows precisely what it is though is perhaps another matter, and it is this information that I was querying. No there are not "so many different sizes and shapes". There is only one *official* Apple-sanctioned shape - square. As for the sizes - how many can you list? You get one size for the iPhone / iPod Touch screen. You also then appear to see a few other sizes - one for your "local listings" in iTunes, one for the small icon in the App-Store, one for the larger icon when viewing the app's details page... But these are all based on one large icon that you submit and which Apple just scales down accordingly to suit, depending on where it's being used. But that's all by the by anyway, because, like I said, the various sizes are all just scaled-down versions of one large icon, so when you scale down the basic square shape of it, the corner-radius will scale down accordingly. You don't care? You don't care if the information you supply is correct or not?? Now that's ... erm ... "interesting". And who's spamming? Well, before you posted those pictures, that is... The graphics I posted were relevant to the original topic, as they all demonstrated elements of the corner-radius. What on earth have your examples got to do with anything? The jailbroken iPhone icons are irrelevant, as they do not follow any Apple guidelines, and the other two icons didn't have any graphical information on them that was specifically dependant on the corner-radius. You want more relevant examples, perhaps? Then have a look at the icons for Lumen and Enigmo. They both have inner-borders which are dependant on the corner-radius that Apple applies to these icons. My scenario is similar to those. And if I can finally bring this topic full-swing back to the original point - put really simply, what I want to know is, does Apple tell us what this corner radius is or not? If yes, can someone let me know what it is. If no, then I will stick to working with screenshots. Thank-you, that is all.
Erm... just out of interest, I notice a moderator has altered the title of this topic, changing the word "radiuses" to "radii"... Not that I'm particularly attached to using one word or the other, but was that really necessary? What was the point? What was the thinking behind this? Was there really a need to come here and "correct" my words? (Even though the dictionary does list both "radiuses" and "radii" as correct: http://dictionary.reference.com/browse/radiuses ) Should I expect to find various words in the paragraphs of my posts altered too? I can understand altering topic titles if the original is not descriptive or misleading, but c'mon, this is just silly now...
I had them do it to make it a unofficially non-sanctioned topic so it wasn't perfect just like the topic's point.
I know. it's an ugly set. Who ever made it took a good crakc at it. But the example was to make the point.
I guess Apple doesn't say, so I would start with a Cmd-Shift-4 screenshot from iTunes (which shows bigger icons than the phone). Crop it precisely, and scale it up to your working size. (128 pixels?) It will look soft and ugly, but should give you something to work with in estimating the radius. Tweak if needed after you see the result. One way to test without the dev tools, if you have access to a Web server: make your icon (including the border but let the corner bleed--make it a full square) and save it as apple-touch-icon.png. (True size is 57x57 but for this test it's probably simpler just to save your full size square--the phone will scale it.) Then toss that PNG it into the root folder of any Web site (one that doesn't already have an iPhone icon to overwrite!) and visit that site using an iPhone/iPod. Bookmark it on your home page and the icon will get Apple-ized, complete with shine, beveled edge, drop shadow (seen only in the iPhone dock) and round corners. That's one way to see if your corner borders look right or not. (And also to decide how bad the shine looks!)
Thanks Adams Immersive for a sensible answer... I kinda gave up on this thread after it went off the rails a bit. It was awhile ago that I asked, but for anyone who might still be interested, I did manage to get what I feel is the definitive answer, by both screen-capturing and then live-testing (the icons have been completed now)... By my calculations, a 512x512 icon has a corner radius of 100-pixels. The 57x57 icon is simply scaled down proportionately from there. Yep, good thinking, and I guess great minds think alike, because I had actually remembered that trick too and had already tested it. I've actually got a few "blank" webpages set up on my server and have the icon bookmarks for these saved to a screen on my iPhone as a mini-portfolio of sorts...
