Icon Design with Sketch

Lesson 5 of 11

Using Sketch to Design Icons

 

Icon Design with Sketch

Lesson 5 of 11

Using Sketch to Design Icons

 

Lesson Info

Using Sketch to Design Icons

We've created a couple drawings of the icons we'd like to create. A color swatches icon, and a whale icon. And now it's time to make vector versions of those in Sketch. I'm expecting that you have a little bit of familiarity with Sketch, that you at least have it, that you've opened it, you know some of the basics, although I will be going through and explaining everything as we do it. By the end of this, you're gonna know how to create almost any kind of icon in Sketch. So, let's get started. Let's open up a new document. And we're going to insert an artboard. You can also just hit the A key. We're gonna be using a lot of keyboard shortcuts here. And we'll drag this. We want this to fit within a 60 by 60 square. And, you can zoom in. Now, to see how large this is actually going to be on screen, we'll use the Command-zero shortcut, and that will always zoom us back to actual size. You can use Command-two, to kind of make it really large, and Command-zero to make it the actual size. So ...

let's start by inserting a rectangle. Basically, the icon is a collection of rectangles. So we'll just insert it here. And, that's good. Let's maybe make it a little bit larger. You can just use the arrow keys in any input. And, first let's add a border. Now, you may already have a border by default, when you create a new shape. The way to turn that off, because I personally prefer to only have a fill, is to just go to edit, set style as default. If you don't already, just add a border. And let me get black. We'll make our fill white. And, this is pretty good, but if we zoom in, we can see our pixel grid here, and you notice that this line is actually in between two pixels. That's like the big no-no of pixel perfection, right? So, how do we alleviate that? Well, we can actually change this border to exist inside the rectangle, or outside of it, instead of centered along the line. And, just to kind of show what that anti-aliasing would look like if we were centered, we've got this view, show pixels mode. I call this pixel preview. And you can hit Control-P to toggle between pixel preview. And you see if we change this to inside, it's no longer an issue. And Sketch makes it really easy to add a radius to the rectangle. To the corners, and let's do three. And, let's say we want the bottom two to be basically a perfect circle. Well we can actually just enter edit mode, or hit return. Select these two vector points, which are by the way completely editable. We can start modifying our shape as much as we want. Start adding new points. We'll get into that with the next icon, but for now let's just select these two, and we can bring these upward a little bit, to just affect the radius on those two points. Now let's create the color panels for the actual swatches on each panel. So, we'll just hold down the Option key, and I hit the R key to add a rectangle. It's super useful shortcut. You can also use the O key to create an oval, or a circle. I'm gonna use the Command and arrow keys to make sure that these are all the same size. Alright, that looks good. And let's add a little pin down here at the bottom. Now, Sketch has this really useful feature for measuring the distance between objects. So, we wanna make sure that this pin is perfectly centered in the, at the bottom here, so we can hold down the Option key and hover over another object. So we see it's six pixels away from either edge, but it's only five from the bottom, so we need to bring that up, so that it is truly centered, if this was a circle. Alright. Now let's add some color. First to these panels. And maybe make the pin and the edges here a nice gray color. So, here we go. Now, one thing to note is that I like my gray colors to be a little bit blue, or have a little bit of color in them. Maybe a warm gray or a cool gray. In this case I think a cool gray works really nicely. So we want all of these color swatches to be a slightly different color. And the way that we're gonna achieve that, is just by going into the color picker, and changing the colorspace from RGB to hue saturation, and brightness. HSB. And saturation and brightness are on a zero to 100 scale, but hue is a spectrum. It's really like a circle. So this is a value in degrees. So it's 206 degrees on this color spectrum. Because once you get to that edge, you really just start again at this other edge. And, we'll just choose an increment, like we wanna bring this down five. One, two, three, four, five. And you see it's changing slightly in hue. So, Sketch allows you to type math into an input field, which is incredibly useful. So we can just type in minus 10, and it does the math for us. Minus 15. Minus 20. Great. Now, I've prepared the colors for our other swatches, and I'll just copy this in right now. And ultimately we're gonna have three of these panels, so we want to group them, and then rotate them. Before we group them and create all these duplicates, it's a really good idea to rename our layers, that they're more intelligible, more understandable. So we'll just call this panel. And we'll call this pin. You can just hit Command-R to start renaming something. And hit tab. Swatch one. But going through all of these swatches is a little tedious, so, let's just select all of them and there's this really great plugin called RenameIt that allows you to type in what you wanna rename all these layers, and it even adds a few extra features, so you can do percentage number to append a number to the end of those names. So there we go. Now let's group the swatches in the panel together, because the pin we only need one of. And we'll call this panel. Now, if we just start rotating this, which we can either do in the inspector here, or we can hold down Command, it's going to rotate around an origin at the very center of the shape. And, we can get around that a little bit by using the rotate function here, and actually moving the origin to exactly where we want it. And then it does what we want. But, there's actually kind of like a little easy hack that you can use. So, if we take our panel, and we just, I'm holding down Option here to duplicate this layer. We'll bring down the opacity a little bit. We can create a duplicate of it, that is just as far away, six pixels from this pin. If we hide this completely, call this rotation hack, now when we rotate our panel, it thinks that it's larger than it is. So the transform origin is exactly where we want it. Great, now let's create a couple duplicates. Call this one top panel. Call this one mid panel. And back panel. And when we start rotating these, we wanna keep in mind that keeping the icon pixel perfect is gonna get even harder, because we're starting to use diagonal lines. So let's turn on pixel preview, and try and find a rotation value that is pretty crisp in at least one place. That's good, 27. And for the back, I found about 53 is pretty good, because it's very aligned with these two pixels. Great, now we need to change the colors on these other two panels. So, holding down the Command key while you click, is going to ignore groups, and it's just gonna drill down as far as it can, and try and find the object that you're hovering over. So we'll click on this and use the eyedropper tool. And, this eyedropper actually has a keyboard shortcut as well. You can hold down Control-C. And that just becomes so darn quick. You don't even need, oops ... That's definitely not the color we were looking for. There we go. You don't even need to have the color picker up. You can just select an object, and hit Control-C. Mind you, that's Control-C, not Command-C. Great, there we go. Now, this is basically our icon. It's all set. We'll call this Color Swatches for our artboard. And, I've created a few other versions of this icon, just to kind of show what it would look like in grayscale, or various other versions. And, one thing that I want you to notice is kind of these little tricks that we have to use on grayscale versions, such as having an additional white border around the panels to kind of separate the shapes a little bit more. I've also changed the number of panels to just four, instead of five, because otherwise it just feels like there are way too many lines. So, it's okay if the monochromatic version of your icon isn't the same as the colored version. So here's our icon. In the next section we're going to turn this into an SVG, but now we have one more icon to make. We've got our whale. Let's hit the A key and create another artboard. This one we've got specs for. It needs to fit within 80 by 80 pixels. And, this is a tough one, and it's always really good to have your notebook right beside you, and sometimes even just scan your drawings in to use those as a starting point. For now, we'll just start with a basic shape. We'll create an oval here. And just kind of block out where the whale should be. We can then enter edit mode, and move these points over a little bit. So we have something a little bit closer to the shape we're looking for. And we bring this down. Now, these are Bezier curves, and there are a few different ways that you can, a few different modes for these curves. So we can have the handles be asymmetric, which means that they're always pointing the same direction, or they're always at the same angle. But, one can be longer than the other. And, if you wanted, you could use disconnected, where the handles are completely separate. It's generally a good idea to have as few Bezier curves, and as few points, as possible, so that it's easier to edit, and also to keep these handles perfectly horizontal, or perfectly vertical, as much of the time as you can. Here we go for that. And we'll add like a little eye right there for ... And, I will just use the vector tool. You can hit V. This is kind of like the pen tool in Illustrator. And we'll just kind of block off where the tail should go. Again, we're just trying to get a sense of size, where this fits in the icon. And for the flipper, we'll also use the vector tool. And, we're gonna create a custom shape. And try and curve it really nicely. And you can even, while you're drawing this, you can even change the mode and adjust these curves. This one I actually wanna keep it at a diagonal. And then when it gets to the top, maybe arc it back. Great, that looks good. Notice that the ends of these points end in a very harsh angle. If you go to the little gears button under borders, you can change that line end to a rounded one, or a square, which kind of adds a little bit of extra to the end of the line. In this case, rounded is gonna feel really comfortable. And also, although this particular shape doesn't have it, there are these line joins, which is to say, when two lines come together at a point, does it kind of bevel out? Is it rounded, or is it perfectly pointy? And we want this to be a really friendly whale, so let's make it rounded. Alright, we'll add a border here, and we know that we want our pupil to be filled in, so we'll just place it in there. And why not? Let's hit Control-C, and sample this color, now that we know that keyboard shortcut. So, let's actually come back to our tail, and use some of these more advance Bezier curve modes to create a tail that's shaped like a whale's tail. We'll choose disconnected for this, and then we can start pulling the handles out. And ... So the interesting thing is that these ... Tail actually has the handles coming in first, and then going out. And then on this other side they come here. And then these two points really need to be kind of angling against that curve. Sometimes you pull the other handle, and that's fine. You can also just click on any Bezier curve handle, and hit the Delete key, if you don't need it. Great, so there's our tail, and that's a pretty good place to start. And, we can spend a lot of time refining this shape, and this is not a segment where we're really gonna art direct. It's just more how to construct the icon that we're trying to achieve. You can also hit the one, two, three, and four keys to alternate between them, so that's a really, really quick shortcut. And we'll add a border to this. Now, when we, if we want to bring these two shapes together, the tail and the main body, we'll just select them, and we can combine them with these various Boolean operations. So we can subtract one from the other. In this case, just merge. And, once we've done that, they're actually still editable as independent sub-shapes, or sub-paths on this main path. And, if we want them to be ... First of all, if they intersect, we can flatten them. So, flatten here is a button that actually just turns these into the same shape, which if we really needed a smooth intersection here, would be a perfect way to achieve that. In this case, we don't wanna flatten them, because we're going to be using these as independent objects. We can animate the tail separately from the body. One way that we're going to need to accomplish that is by getting rid of the line there, so that this path becomes an open path. For that we use a tool called the scissors tool. You can just cut out any line segment. I wrote an article about the scissors tool, because understanding it is really critical to making the most out of it, and you can kind of accidentally find yourself using it in ways that it's not really intended for. The last little detail that we want on our whale, is the spray that's coming out of the blowhole. So, let's just add a vector point for the blowhole. And we can rotate that. And, the important thing is, we're gonna be doing a line drawing kind of animation for the spray, for each of the streams. And so, we need to make sure that the path is moving in the same direction that we want the stream to move, which is bottom to top. And every vector path has a start point and an end point. So, we'll start it at the bottom. Bring it up here. Again, trying to keep our handles perfectly horizontal or vertical. And you can go in here and noodle with these to make them look as good as possible. One thing that will really help you while you're moving these points around is that Sketch allows you to round the coordinates of each of these points to half pixels, or full pixels, or not at all. In this case, if we turn on pixel preview, we'll notice that this will look even more clear, if that line is right in between a half pixel. And that's because we're using a centered border. So, I've actually done a lot of this work already. And, I'm gonna pull in a whale that I've already spent a lot of time working with, and getting just right. And one thing that I did with the stream, this is more just for the static icon, is I played around with this dash for the line, where you can change the gap length, and the length of each of the dashes on a path. And you can create some really fun effects. So, this will be in the example in the resources section for you to take a look at. And there you go. So, now we have two icons, and if you just wanted a PNG version of those, you can go ahead and export them here. Whatever scale you want, because it's a vector path. And in the next section, we're gonna go over SVG, and why that's really the best way to present our icons.

Class Description


Learn the fundamentals of icon design, and how to create icons in the software program Sketch. You'll also learn how animation can enhance your icons, and see how it's done with a little bit of code. Peter will cover the basic principles of icon design and show you his process. He'll guide you step-by-step as he works in Sketch to execute icons. He also explains what SVG files are and when to use them. Peter will show you the benefits of adding animation to icons with CSS code, and tips for adding unexpected movement to your graphics. 


Software Used: Sketch 2016

Reviews

Michael Oeser
 

I don´t take online courses very often but this time I was courious how it will be and how knowledge would be transferred. It was great, really. Peter is an awesome presenter who is able to share and show his knowledge in a very pleasant and professional way. Great course for everybody interested in icon design with a focus on animation. For me personally I would like to see a course with a deeper focus on the design principles and techniques of icon design because I´m not so much interested in animation. But anyway great course.

lovemydreams
 

Peter great job teaching Icon Design! I have no background in making icons but was interested in learning how it was done. I had know intention of using this course in my web/app design but now that i've started watching your easy to follow lessons I realized that I want to make my own icons and highly recommend this course to anyone that wants to take their skills to the next level! Worth buying this course to review many times as there is so much covered that you wish it was available sooner! Thank you Creative Live!

Aris K
 

I stumbled upon this course after searching for more of Peter’s excellent tutorials. This beginner course will give you an overview of the icon design process starting with a useful icon design theory and considerations. The course then proceeds with two hands on examples that the viewer can also design while watching the tutorials. The first design uses basic geometric shapes the second is a "freehand" drawing using bezier curves. (TIP: read Peter's "Mastering the Bézier Curve in Sketch" free tutorial on medium.com beforehand). The second part is an overview of exporting SVG graphics and animating them with CSS. Personally, I would have liked more tutorials on icon design within Sketch and less about SVG , CSS. All in all, I enjoyed this course and would recommend it to anyone looking for a hands-on introductory course in icon design.