tart making iOS 7 Icons with the App Icon Template 3.0
Not sure if you guys noticed, but Apple introduced a minor update to the look and feel of their upcoming mobile operating system last week. No? Well all controversy aside it looks like we’ve got a big job ahead of us, and obviously we need to have our tools in order! That’s why I’m glad to introduce the 3rd version of my App Icon Template, optimized and ready for iOS 7.
You can head right over to appicontemplate.com and download this thing if you’re impatient. If you want to know more about what’s new, superellipses and golden ratios, read on.
Head on over to appicontemplate.com to download now
So whats new?
Other than a very different look, iOS 7 has some important icon changes in store for us. Here’s what’s new in this version:
★ Icons on the iPhone home screen have received a slight increase in size up from 114px and 57px to 120 px and 60px respectively
★ A new golden ratio grid has been introduced. (but so far people, including apple, seem to be taking it very casually)
★ A very bright new color scheme is included in the PSD
★ New iOS 7 app store and home screen preview generators
★ More flat
★ A new curved outline… Oh the elusive corner radius.
The hunt for the perfect curve
Arguably the largest change to our everyday working environment is the new icon corner radius. Gone is the old radii that we’ve all designed for in the past few years and here to stay is an entirely new and more complicated shape; The superellipse or, more precisely (and way cuter), the Squircle. Since the reveal there’s already been a dozen templates or so that have tried their hand at the new form and I have yet to see an exact representation. This is one of those things that seem very simple, but is actually quite hard to get exact. (until someone cracks it and we all laugh at how “easy” it was)
The formula for the superellipse as proposed by Marc Edwards
The last few days I’ve been collaborating and discussing this very topic with some very talented people on twitter. Marc Edwards, Photoshop guru, has put forward the above formula as the exact mathematical proportions of the new shape. Unfortunately we’ve been less than successful at converting that formula into an exact and usable vector shape in illustrator and photoshop. This is partly because the fidelity of the curve isn’t good enough when converted into a working vector file. As you can tell from the below experiments the sheer amount of points is less than ideal and the curve simply doesn’t seem to hit the exact outline of the iOS 7 icons when superimposed.
A lot of people have been trying to crack this over the past week or so, from the mundane attempts using round rectangles to the more adventurous attempts at hand editing an SVG file. To my knowledge, the exact outline used in iOS 7 icons haven’t been reproduced yet. We’ve had some very very close approximations, but not an *exact* outline.
Heres a selection of the templates that currently exists out there, look at that rainbow of variation. None of us have the right answer.
The golden ratio
A few people have been working on reverse engineering the new icon grid that was introduced with iOS 7 last week in the hopes that it would unveil some secrets. This grid is (supposedly) build on the golden ratio and people like Alexander Ustinovhave put forward some of the more exact outlines based on this theory. After having tried my hand at every possible method out there I managed to build my own golden ratio grid that have yielded the most exact outline I’ve come across so far. This is the shape I’ve used for the App Icon Template 3.0.
The golden ratio grid that I’m using for my shape
Now it’s important to say right up front, that this shape is an approximation. As you can tell from the below gif it’s a close fit, but no cigar. Everybody seem to have build different grid systems and ended up with variations on the curve. On top of that, our only way of measuring correctness is by superimposing our meticulously calculated shapes on top of screenshots and png masks found in iOS 7 to see where the shapes overlap. Not exactly the best way of verifying!
It’s silly to think that something this simple (and vital for our design efforts) can be this hard to get exactly right. However, I feel the above shape is ‘close enough’ to be usable. If, or rather when, someone cracks this with an exact vector outline, I’ll obviously update the template. It might very well be that there’s a simple solution that we’ve just not found yet.
Graphic supplied by @marcedwards
Some of you are probably asking why all of this is important, seeing as Apple is the one rounding off the icons in the end. Well, having a solid and exact tool for creating icons have a very real world impact on what sort of designs we can create. If we have the exact rounded corner mask we’ll be able to create designs that utilize the edges of the icon. Essentially the more precise our guides are, the more control we have over the final result. Until the mathematically exact shape shows up, I hope you’ll find that the work put into this brings you close enough.
Head on over to appicontemplate.com to download the latest version of the app icon template. And be sure to let me know if you find any errors or have any suggestions for improvements. As always, have fun making icons!
UPDATE: The template has been updated to 3.1 with the new iPad sizes (76 & 152) and now uses Marc Edwards outline.
363
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
