24/12/2013 - admin

Outlining iOS 7 icons: the ultimate flattening

outlining-ios-7-icons Just for fun, there are times when you want to embody some of your ideas playing with somebody else’s creations, and nowadays, iOS 7 is probably the mobile OS people has proposed improvements for the most. This is basically because we all want, at some point, to see at least one of our ideas implemented in major updates of a widely spread product. On the other hand, another most subtle reason is because Apple messed up in some parts of the design, and somehow we see ourselves as crusaders on a mission to save them from this, but hey, is not our work to remember that every time we publish a post, but to propose improvements to the elements we think are wrong, so that’s what we’ll do today: since I enjoy creating outlined icons, I will outline some of the native apps icons of iOS 7. For this guide, it’s important you read this one too; it’s about creating basic outlined icons, and it’s important because it’s pretty detailed. So if you don’t even use Illustrator on a regular basis, check it out first. In the meantime, let’s create the canvas and set up the workspace. I’m going to start with six iOS 7 icons, which are simple and can be outlined pretty easily. Remember that outlining icons also means you need to simplify the message to its minimum expression; this is because we need to put aside a lot of small details in order to portray an accurate message using just a few lines. so let’s begin!

Clock Icon

For the Clock, you’ll need the regular frame, created with the rounded rectangle tool and a 30px radius. I’m going to use this frame to save time in other icons, and you could do the same by replicating it. Just keep them organized once you copy them. Clock-01 Now, create a circle pressing shift to make it perfect. Clock-02 With the help of guides (not shown) locate the center of the app icon and create two simple lines, one longer than the other to represent the needles for hours and minutes. Clock-03 Finally, create the circle that stabilize the needles. I added it because I like it, but some might want it even simpler than that, so it could also be left aside. Clock-04 Now you have a nicely designed outlined icon for your interface! Clock-05

Contacts Icon

For the contacts icon, I wanted to simplify the concept we are used to, where we see a group of users or an address book. These concepts are not mistaken despite the fact that the address book is getting outdated (if not yet), and the group of people, although relevant, its crowded for an outlined icon. So in that way, I decided to use a simple symbolization of a person, nothing less, nothing more. So, with our frame already replicated, let’s create a regular rectangle and add four new centered anchor points in it. That will look like this shape: Contacts-01 After that, remove all the corners with the delete anchor point tool, so you get a shape like this... Contacts-02 With the convert point tool, drag the upper and bottom points so you can create an ellipse-like shape. This is not done directly with the ellipse tool since its a little harder to modify than the other way and it might look bulky. Contacts-03 Now, the easy part, create the head by adding a simple circle. Press shift to make it perfect. Contacts-04 And that’s it, another simple icon for your UI, one of the easy ones, although they’re all very simple to create.

Calculator Icon

Another one of the most easy-to-do icons, this one is composed of short lines. So in the first place, trace two lines with an angle of 90 degrees to create the dividers... Calculator-01 Now, start drawing simple lines to represent the plus, minus, multiplication and equal symbols like this: Calculator-02 And finally, select the symbols and use the Round Cap tool to easing the squared borders of every one of them. Calculator-03 That way, you’ve just created a calculator icon. Easy, right?

Compass Icon

For this icon, we are going to create a simple line to represent the arrow. It needs a thickness of 12px and to be converted into an arrow as shown. Compass-01 Then, you need to create two lines with 90 degrees angles in the middle in order to represent the center of the compass… Compass-02 Then, add the letters W, N, S and E to represent the cardinal points... Compass-03 And that way, you just created the compass app icon.

Weather Icon

The weather icon is the one I like the most; it is pretty easy to create and looks beautiful. To begin, we need to create three perfect circles to make the cloud. You’ll actually need the image of the official iOS weather icon put behind as a guide. You must have something like this at this point... weather-01 Right after, create a rectangle which joins the bottom anchor points to create a cloud. It needs to be a rectangle because if you just draw a line connecting both bottom anchor points it won’t integrate by the time of applying the unification. Rectangle ready? Click the Unite tool so and now you have a cloud. The only problem is that you still have sharp corners, so to solve this, apply the property Round Cap, found under stroke properties. weather-02 Then, create the sun by adding a perfect circle... weather-03 Copy and paste in situ the resulting shape, and change the shape from “stroke” to “fill”. weather-04 Select both the layer of the sun and the layer of the recently created filled cloud. Be sure the layer of the sun is behind the cloud, so the next step is applied correctly. Click the property Minus Front found under pathfinder. After doing it, you’ll have something like this: weather-05 And that’s how you create a beautiful weather icon. weather-06

Reminders Icon

For the reminders icon, I wanted to establish a different approach for its creation. The original icon is not only difficult to represent with outlined shapes, but also it is not that great itself. So I used a Check Mark as the symbol to represent and condense the message of a fulfilled reminder. So let’s dive into this icon. First, create a squared rectangle and then create another one based on the previous. The idea is to create one of them larger than the other (almost double). reminders-01 Take the small one and turn it 45 degrees clockwise. Then, take the other one and turn it 45 degrees counterclockwise; you’ll have something like this... reminders-02 Match both shapes at the bottom to form a check mark and Unite both shapes (Pathfinder / Unite), so you get just one shape like this. reminders-03 Then, apply the Round Join tool to ease this union... reminders-04 That’s all! You now have the Check Mark icon for the reminders app. reminders-05 Remember to expand all shapes in all icons (object/expand) so when you resize the icons they keep their shapes. This is important to do at the end of every icon, although some of them have already been expanded. As you can see, outlining iOS 7 icons is not that complicated. It is a fun experiment which will improve your skills in icon design and let others know your ideas about the things you think Apple can improve. You can modify things like the thickness of the outline and the size of the inner icons as you like, but remember not doing them too thin, bulky or small because they will be difficult for the user to recognize. Be sure to download the source to see how they were created. Until next time!


Leave a Reply