During my latest icon designing process I wanted to involve a simple inset/inner stroke (also derive further shapes from it later on), so I got into a deeper iOS 6-7 icon comparison to create a cross compatible inset shape (with rounded corners) that fits both iOS icon shape well.
iOS 6-7 icon comparison at a glance
There are tons of great articles out there, like Start making iOS 7 Icons with the App Icon Template 3.0 as my preference, here I am only to depict the iOS 6-7 difference in terms of overall icon shape focused for the chamfer/rounded corner size.
For iOS 6 the canonical rounded corner is 10px considering 57px icon size. For the iOS 7 the exact formula is still uncovered, though the article mentioned before discussed this topic nicely.
Determine pixel perfect inset size
As iTunes atrworks needs to be provided in dimension of 1024px, icon designing happens in that size at most. Though, when the icon will be rendered at their live size on the actual design, it is hard to keep the internal layout dimensions pixel perfect. One can create slightly different layout for each device, but that approach can hardly maintan over the time.
iOS 6 icon render dimensions are 57px for the iPhone/iPod, and 72px for the iPad (considering @1x). iOS 7 counterparts for these values are 60px for the iPhone/iPod, and 76px for the iPad (still considering @1x). Like you can check it all over Google.
As a first step I try to put these values into the 1024px design context, I derive the design size for 1px in each dimension mentioned above. That gives us iOS 6 iPhone 17,96491228070175, iPad 14,22222222222222, iOS 7 iPhone 17,06666666666667 and iPad is 13,47368421052632. Such a lovely numbers. No common divisors, so the best I can do is to lay out a pixelgrid for each, then overlay everything and look for any pattern.
As you can see on the full size image below, you can see a grid highlight. That means if you measure 71,5px (square at left top) from the edges in an 1024px context, it counts 4px from the edge for iPhone and 5px for iPad render size with a decent accuracy. Thats a great start. The same method for iOS 7 shows quiet similar figures.
Something similar than before, once you measure 67,817 from the edges at 1024px context, you’ll end up 4px for the iPhone and 5px for the iPad.
Moreover, this grid highlight at 67,817 seems coincidentally covered by the outermost grid line of Ive icon grid. Actually this is (like all the others) a third party grid, so accuracy is just estimated, but seems fine at the first glance.
When overlaying iOS 6 and iOS 7 pixel grids (actually every dimension I’ve mentioned so far), we can see that the outermost grid highlight falls within a bearable range for every icon pixel dimension. It the terms of the 1024px design context it ranges from 67,817 (iOS 7) to 71,5px (iOS 6). A cross iOS version compatible outermost inset dimension must take place within this range.
So let’s go on with 70px since it is somewhat in the middle, and easy enough to catch up with.
The tests above made by Photoshop Image size with a simple Bilinear sampling. I tried values from 67px and seems 70px gives the best result considering every possible icon size. And as a bonus feature it fits the Ive icon grid. Yip.
Finding cross iOS version inset shape with rounded corner
Creating simple inset/inner stroke with this 70px is straightforward, but when trying to fit those shapes into the the other iOS cut size, strange things happen. The truth is somewhere in the middle.
Since iOS 7 inset shape fits better into the iOS 6 cut, we should push the iOS 7 inset toward the iOS 6 shape, and see if we can live with the result. After some comparisons, seems the best is to use the value in the middle.
Phew. A shape with such a charming personality deserves a name after such a cumbersome coming to light, eppz! shape will be fine for now. Gonna change the company logo shape on the top soon, so the whole stuff comes to a full circle.
Once you want to create a cross iOS version inset with rounded corners, do not hesitate to use this setup. The illustrator file is around here or on the image above.
Since I’m gonna use it in a production design, will update with the designs soon.
DISCLAIMER. THE INFORMATION ON THIS BLOG (INCLUDING BUT NOT LIMITED TO ARTICLES, IMAGES, CODE SNIPPETS, SOURCE CODES, EXAMPLE PROJECTS, ETC.) IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE INFORMATION ON THIS BLOG (INCLUDING BUT NOT LIMITED TO ARTICLES, IMAGES, CODE SNIPPETS, SOURCE CODES, EXAMPLE PROJECTS, ETC.).Become a Patron! Tweet