05/12/2013 - admin

Simple guide to creating outlined icons

outlined-icons Outlined icons are right now more useful than ever. Not only because of flat design, but for the great amount of web and mobile apps which have been created. These types of icons are sleek, awesome creations, which we all should learn how to make, even if it is for fun. So with that in mind, this article will guide you through the process of creating an outlined icon in adobe Illustrator, which can be fully understandable. Thinking about what you want to transmit with your icons is not complicated; it gets difficult when you try to portray the idea since there’s no unified view for them. That way, as the first step, is to find the best semantically correct and meaningful elements to transmit a message. Create some sketches with different shapes and show them to different people, that way you ensure they understand the message of your icon. In this guide, we are going to create 4 icons for some of the most useful aspects of a messages app.

Setting up the canvas and layers

To start creating outlined icons in Illustrator, first let’s create a new document; we’ll use a 504px x 360px canvas, with a resolution 72 DPI, which is set by default. You can later change these settings if you need to. new-document Then create a layer for your first icon... layer And remember to create layers throughout the process with every icon you want to create in order to keep it organized.

The icon creation process

Before you start creating your icon, it’s a good idea to create a list of the required aspects of your project, and then put them into paper (or digitally). For this guide, we wanted to create a mobile messaging app, so we’ll be using icons for that purpose. It’s important to research different styles of mobile messaging apps for this. For that, we checked the Facebook Messages App, Google Hangouts, the Messages app in iOS, Whatsapp and Skype; some of this apps have specific characteristics, but there are universal features like writing and sending a message, the settings and the profile options, so we’re going to focus on these four. So, without further ado, let’s create the icons.

Messages Bubble Icon

The Message bubble is probably the most universal feature of all; it could be used to represent both the app itself to single actions. First, add a rounded rectangle with a thickness of 5px in its stroke. This goes with one’s preferences. message-1 This shape by itself, of course, does not represent anything, but just by adding three adjacent circles it’s taking the shape of a message bubble. We’ll create them with the ellipse tool, pressing shift to make them perfectly rounded and then Alt + drag to replicate them… message-2 Finally, add three anchor points at the bottom of the square (left or right), then drag down the one in the middle to create the semantic effect of chatting. message-3 Remember to “expand” all shapes (object/expand), in order to keep intact the proportions of the icon because if you enlarge the icon without doing it, its outline will keep its original thickness. That was your first outlined icon! Wasn’t that complicated, right? Let’s create another one.

Compose Message Icon

The usual representation of this icon is pretty accurate, so the first step is to create a rounded rectangle. compose-1 In another part of the workspace, create a rounded rectangle with a border radius of 20px or more: the idea is to have really round corners... compose-2 With the Convert Anchor Point Tool, click the three bottom anchor points. That way you give the rounded rectangle the shape of a pencil. compose-3 Once you have the pencil, you can integrate it with the rest of the design. You’ll have something like this: compose-4 After that, duplicate the pencil and give the duplicate a stroke of 10px. Also remember to click expand this duplicated shape, just the same way as we did in last icon. compose-5 Select both this shape and the square, press Alt + Minus Front (pathfinder/shape modes/Minus Front). If you don’t keep Alt pressed, you’ll lose the shape in the upper layer, and then you won’t be able to edit it. compose-6 In the end, you have your second icon ready! compose-7

Profile Icon

So far we’ve seen easy shapes, mostly rectangles with no so much editing, and this next one is not an exception, although it has a little tweaking. In this part, we are going to create a profile icon, suitable for accessing personal settings and personal information. First, create a usual rectangle.. user-0 Add two anchor points at the top and bottom (in the center of the outline) and remove all corners... user-1 Drag the anchor point at the bottom to create a smooth curve. user-2 Then, do the same at the top, dragging it a bit longer than the last one to create a pronounced curve. user-3 Now drag diagonally to create curves in the remaining straight outlines... user-4 Finally, add the head with shift + ellipse. Expand all shapes to keep the ratio intact when resizing. user-5 Pretty neat, huh? Now let’s create the last one (the coolest!)

Settings Icon

This icon is quite interesting to do, and I have to say I had fun creating it. The settings icon is usually represented by tools or gears. Be aware of keeping the layers organized because that will be important for not messing up the shapes and, therefore, the process. First, create two ellipses (outer and inner) with a thickness of 5px like these: settings-0 Add one rounded rectangle matching the middle of the ellipses... settings-1 Replicate the rounded rectangles with an angle of 45 degrees. Expand the shapes that weren’t expanded. settings-2 Duplicate the outer ellipse and suppress the inner circle, so you have a fully filled element. settings-3 Copy the rounded shape, select a rounded rectangle, and press Alt + Minus Front to cut the shape keeping editable capabilities. settings-4 Ensure to repeat the last step with the rest of the rounded rectangles. The design and layers should look like this in the end... settings-5 Now, in this step, first select the inner anchor points of one rounded rectangle and copy the resulting inner shape. Secondly, Paste in situ such resulting shape; change the color, so you don’t confuse them. You must have something like this: settings-6 Copy and paste in situ the resulting shape four times, applying angles of 45 degrees between one another, then press Alt + unite to the resulting shapes to create an editable compound shape like this: settings-7 Select both the compound shape you just created and the first outer ellipse you first made... settings-8 Apply the Minus front option, keeping Alt pressed so you don’t lose the editable capabilities... settings-9 And that’s it. You now have a great settings icon to be exported and used in your projects. settings-10 As you could see, creating outlined icons is not very difficult. I hope you’ve had fun reading and implementing these steps the same way as I enjoyed creating them. Be sure to download the AI file and complement it with your own outline icons. Till’ the next time!


Leave a Reply