Apple is not only revamping the look of iOS 7 apps to be kind of flat, also most app icons will have to get a redesign.
Over the recent years we could see a trend that some app designers felt that they had to add a border to their icons to make them “pop more”. So they they enabled the “Icon already includes gloss effects” setting to avoid the application of the trademark shine and used a photoshop template for make the border fit.
We followed this trend with the icon design for our most recent app Urban Airship Commander which also has a chrome border. Because frankly, without this border, we feared that a phosphorous radar screen might look too boring…
Technically icons are square images which get cropped by static square with rounded corners. iOS (or a mask image when shown on the web) took care of this cropping and so the only decision you were left with as an app maker is whether or not you wanted to enable shine via info.plist.
Sir Ives has decreed that a simple corner radius is too simple. The outline of iOS 7 icons will follow a complicated formula that is probably rooted in some form of a numeric kabala which believes that certain mathematic proportions yield harmonious results.
Marc Edwards, Director and Lead Designer at bjango, revealed the formula in a tweet. He used the OS X Grapher tool to tweak the formula until it fit perfectly.
This shape is called a Superellipse. More precisely it is a Squircle which is a “mathematical shape with properties between those of a square and those of a circle” which is a special case of Superellipse. (Thanks Wikipedia for allowing me to sound so smart)
Of course we are not satisfied with merely reading René Ritchie’s regurgitation of Marc’s tweet, we like to reproduce the results.
Wolfram Alpha
Looking at the formula we see two parts with vertical bars, those mean that their contents are to be taken as absolute values. In C we’d use the fabsf(x) function for that. If you confuse these with normal round brackets then you will only get the upper right quadrant of the icon correct, where x and y are positive.
A simple way to reproduce the output is to input the formula into WolframAlpha which happily graphs it for you:
Unfortunately you need a Pro account to be able to export anything from Wolfram.
The second method, used by Marc on his Mac, is to use the Grapher tool which you also have on your Mac, probably without even knowing about it.
Grapher Tool (OS X)
Launch your Grapher via Spotlight or from the Utilities folder in your Applications. Create a new 2D Graph with the Default template.
Adjust the range of the x and y axis to go from -70 to +70 by double-clicking on each axis and entering the extents.
Next you enter the formula:
- If it is not visible show the Equation Palette from the Window menu
- Delete the y= from the formula
- From the Standard tab pick the Absolute Value box, which is the one with just two vertical bars
- In the box, enter x/60, note how the display changes into a horizontal fraction bar as soon as you type the slash.
- Move the cursor to the right of the box
- to get into the exponent, hit the ^ and type 5 there, cursor to the right goes back to the normal level
- enter a plus and repeat 3-6 for the second part for y
- finally add the =1
Note that Grapher will not keep a 1:1 ratio if you horizontally or vertically stretch the chart window. You can always push the “Equalize Axes” button to restore the 1:1 ratio. But generally you want the be the right-hand graphing area to be a square as well.
As a free bonus you can export this graph as EPS or PDF vector graphic. This way it can be imported into an overlay into your favorite illustration application.
You can impress your designer friends if you practice how to enter the formula in Grapher and produce the EPS file for them to use in PhotoShop right in front of them right on their Macs. “Oh, you didn’t know you had Grapher? I use it all the time!”
Conclusion
The new shape of the iOS 7 icons will make it impractical to have a framing chrome border around your icons, as long as you are looking to have your app support both iOS 7 and earlier versions. But even if you decided to support iOS 7 only you still will find that such a border will look weird on the redesigned iOS 7 springboard.
You will probably find that even though you now know how to get the curve that defines an iOS 7 icon outline this doesn’t help you. The Squircle is such an organic and fluid form that it will make any chrome border look weird.
We all will have to redesign our icons with a flat look that works without a border.
Your Urban Airship Commander looks like a bomb. Like the original atom bomb. In crosshairs, no less…
Isn’t “Watch what your icons evoke” a lesson module in Iconography 101 ?????
@ike well, it’s the best I could get for the little money.
Nice!
One thing tho…when exported as eps, the icon curve looks good, but instead of being made of bezier curves in illustrator, its made of several hundreds of short, ungrouped and unconnected straight lines. It makes it difficult and cumbersome to handle. For example to be filled with a colour. Or did I maybe miss something?
Fredrik
It’s Sir Jony, not Sir Ives
funny thing; when I first tried to mimic skeuomorphic style of iOS, I took some pictograms I’ve made and place them on the similar shape, maybe even more circle less square.
anyway, what we supposed to do now? make two sets of icons or just include squares in the app?
I used a genetic algorithm to determine the precise shape: http://blog.mikeswanson.com/post/62341902567/unleashing-genetic-algorithms-on-the-ios-7-icon
Here is a study into the curve that might interest you.
http://www.designbygeometry.com/ios-icon-mask-corner-curve-study/