iOS 6-7 icon comparison | cross compatible inset shape with rounded corners

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.

Comparing iOS 6 7 icon rounded corners there is an annoying offset to do something with it.

Comparing iOS 6 7 icon rounded corners there is an annoying offset to do something with it.

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.

The actual pixel dimensions of the iOS 6-7 icons are annoyingly diversive.

The actual pixel dimensions of the iOS 6-7 icons are annoyingly diversive.

Overlaying iOS 6 icon pixel grids. Click for full size!

Overlaying iOS 6 icon pixel grids. Click for full size!

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.

Overlaying iOS 7 icon pixel grids. Click for full size!

Overlaying iOS 7 icon pixel grids. Click for full size!

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.

The first (outermost) overlayed pixel grid highlight shows similarities with the Ive grid suggested by Apple.

The first (outermost) overlayed pixel grid highlight shows similarities with the Ive grid suggested by Apple.

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.

Overlaying this grid highlight measurements both for iOS 6 and iOS 7 shows promising similarities.

Overlaying outermost grid highlight measurements both for iOS 6 and iOS 7 shows promising similarities.

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 70px inset size seems to scale down to every device icon size well, even across iOS 6 and 7.

The 70px inset size seems to scale down to every device icon size well, even across iOS 6 and 7.

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

An iOS 6 inset cut into an iOS7 icon shape (bottom left) seems awkward, opposite (bottom right) is bearable for an extent.

An iOS 6 inset cut into an iOS7 icon shape (bottom left) seems awkward, opposite (bottom right) is bearable for an extent.

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.

Difference between an iOS 6 and an iOS 7 inset (70px) with rounded corners.

Difference between an iOS 6 and an iOS 7 inset (70px) with rounded corners.

We can experiment with the different intermediate shapes to see which gives the best result.

We can experiment with the different intermediate shapes to see which gives the best result.

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.

click to download

The result seems satisfactory with both iOS 6 and iOS 7 icon shape cut (click to download).

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!