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.
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)
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!”
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.