Icon Design Basics | Matt Schroeter | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (16m)
    • 1. Intro

      0:29
    • 2. Photograph Object

      0:26
    • 3. Set Up Adobe Illustrator

      4:06
    • 4. Outline Object

      5:01
    • 5. Refine Object & Export

      5:29

About This Class

In just 16 minutes, learn how to take an object and turn it into a clean + simple icon you can use in design projects!

Tools needed:

  • A camera or smartphone with a camera
  • A computer with Adobe Illustrator installed

If you want to see how I prepared my design at each stage, you can download the examples below and use them as a reference or starting point to your own project.

Downloadable Examples:

Transcripts

1. Intro: Hi there. I'm at and I'm a freelance designer and photographer. A huge part of what I do involves icon design. I use them for websites, APS, you name it. During this course, you'll learn how to create a simple icon in Adobe Illustrator. First, we're gonna take a reference photo. Then we're gonna trace it in Adobe Illustrator and then add some refinements and color so you can end up with a great icon Design. Thanks for taking the course. Let's get started. 2. Photograph Object: So our first task is to find something that we can use for icon design. I picked up my watch just for this example. Once you found an object, lay it down flat on a table or floor and just take a photo of it with your digital camera or smartphone. Last thing. Make sure there is some even lighting to show off the details of the object. It'll make tracing much easier. 3. Set Up Adobe Illustrator: So now that we have a reference photos, we're gonna start working in Adobe Illustrator. So go over to Adobe Illustrator and can go to file new. And this will create a new document window. Um, I like to set something for icon design with 1000 pixels by 1000 pixels and just gives a nice uniform cannabis to start from. That's perfectly square. Um, and then go down to the advance tab here and make sure that color mode RGB is set and that will keep the colors looking good for screen type stuff. So for Weber App type of things, if you want print, you can select the c m y que. We're going to stick with RGB for this one I wanted. Thing you want to do is set a name, so just put icon design basics and hit okay or enter, and you'll be presented with a nice clean canvas to start by cons from. So I like to do a couple things right before I'm trying. And the first thing is to set everything to snap to a grid. And you do that by going to view and selecting snap to grid and to show the grid that everything's gonna snap to you just go up to view and show grid. So what this will do is when you're creating shapes and I'll just do something quickly here , it'll snap to the grid whenever you're creating and re sizing things, so just helps. When you're trying to make things, I'm lying up, and especially if you're dealing with different types of shapes and straight lines and that type of thing. So now that set we can put in our image and I'm just going to use one as example. So we're gonna start with the watch. I'm just gonna click and drag it straight into it over. Illustrator is you can see it's pretty huge right now, So we're gonna want to take that down toe something that's gonna fit within the canvas. The first thing we're gonna do is scaled down. So a zoom out and you could do that by hitting command with the minus key or control with the minus Keith here on windows. And then, um, make sure you have this black arrow selected, which you can type with V on your keyboard to select it and click and drag one of the corners of the image and hold down shift to make sure it skills proportionately. So I'm scaling it down and clicking and dragging to move it straight into kind of the center of the canvas. That way, it's a little bit better fit inside here. Such work for now. Now what we want to do is take down the capacity of the image just to set it up for tracing on top. So we're gonna go to the window and go to laters, and you'll see this layers tab open. Now what I like to do is name my layers because I'm pretty organized. But so what you can do is, you know, double click the name and maybe just do image right now and click the circle next to it and that will select the image and then click the Transparency tab. And if you don't see it here you go upto window and click transparency there, and we're gonna put it down to maybe something like 40%. So this will get it ready. So when we're tracing things on top of it, we can actually, you know, see the stroke like so just doing with Phil so I can see something on top of it. Um, a little bit better. So that doesn't first setting up the canvas for tracing your icon. Next, we'll go into actually drawing shapes on the icon background. 4. Outline Object: Let's go back into illustrator and we're going to start tracing some basic shapes for your icon design. So we've got this later of the photo and the image of the background, the next thing we're gonna do is create a later right on top of it, that's gonna set the stage for shape tracing. So if you go back to your layers panel on the right side, uh, it'll give you this option to start a new layer. So create that and it will show you this option of name. And I'm just gonna name it trees right now. And what we want to do is lock the image layer so you can do that by clicking right next to this eye icon here. And what that will do is lock the appearance and everything, like the position of that image so that we can trace on top of it without moving other stuff around. So we're gonna go ahead and pick up a few simple shapes that we can use to trace this So thing that jumps out to me most is the face of the watch. So I'm gonna go ahead and go to the tools panel here on the left and select the lips tool. Now, before I start drawing, I would set a bright color so that I can really tell what I'm tracing over the image and that something is really just bright and clear. See, you have a pink thing going here. I'm just gonna switch this to the stroke by clicking this color here and then I don't really want to fill. I just want this outline, so I'm gonna click this none option, and that's going to set it with a clear Phil. Now, you can obviously choose it, fill color. But just for what I like to do, this is a great step just outlining your thing. So I'm just gonna zoom in a little more so I could get a more accurate circle, and I'm just gonna click and hold down shift, and that's gonna keep the circle proportions. Even you're gonna end up with a nice regular circle and you can see I just, uh, created a basic shape to go over the watch. Now, the stroke is pretty thin here, so I'm gonna go into the stroke panel and what's again? You can go to window and go to stroke if you don't see it here on the right side and I'm gonna change the weight is the first option here to something like 10 pixels. So that's much more clear. And I can kind of see the outline better here. So from this point, I just like to start drawing more shapes. And you can see all the shapes by, um, clicking on the Ellipse tool here and clicking and holding it. And then you can see all these different shapes here. No todo rectangle. And I'm gonna use that I just to trace the bands of the watch. It's good to do that and maybe another one here, and I was like to use the pen tal to. So if you end up with, like, a shape that's a little more regular or doesn't really fit into the other shapes, you can use the pencil. And since we're on the grid, we can just start clicking around and create lines to fit our icons. So that's what I'm gonna do here. So I'm just gonna click here and, you know, maybe a little further down here to fill out that part. And when you're moving between shapes and other tools. What I like to do to kind of reset things is hit V or select this tool and then select Save a pen tool again so I can start a new line. Something like that. And I'll just keep doing over and over. And that's how I'll start with, you know, some basic outlines. And that way I can even keep doing the outlines here and just kind of loosely tracing more and more details to fill out what I'm trying to design. You can even start filling in the hands of the watch here, and you can change. You can drag around these points as much as you want, and I like to use the, um, direct selection tool, which you can buy A. To do that, you should now have a nice basic outline of your object. Next, we're gonna add some details and some color before you finalize your icon design 5. Refine Object & Export: if you made it this fire, You're really close to a great icon design. Now we're gonna add some detail and some color, and that's gonna give you a really nice result for your project. Now, the first thing I'm gonna do is round some of these strokes and shapes. And the way I do that is through the strokes panel. Select all the shapes here and just do that with the selection tool with hitting V or selecting a black arrow in the toolbar and your trace later, make sure that selected, just click and drag so you can select all the shapes. Then go into your strokes panel and in the cap in the corner, there's two options for rounding. So click those and you'll notice that the strokes just become a nice, uniform, rounded edge. And that's kind of what we want here. Now we can add some more details to the shape. So, um, I'm gonna use the shapes that are kind of already existing in the design. So with the watch face, I'm gonna select the existing shape here, and I'm gonna add that little insect border. And to do that, I'm just gonna copy this exact shape by clicking and dragging and holding down Alz, and that's gonna create a direct copy of the shape. It's really useful when you want to make little copies of things everywhere. So just do that. And then to scale down hold shift like we've done before, looks good there and just move it into try to move it into a good place within the design. Looks like about right there and a few other things that we could do you, maybe to fill out the details is maybe a couple of notches eating the pen tool for the different times. A day says something like that. And this is kind of where the grid comes in handy when we set it up in the first step, just making sure that everything is the same length and I'm just going to select one of these watch hands and move it around Nice. So I think we've added some good details here, and the next thing where you just had some color. So in our layers panel, let's go back to that and then we can hide the image layer and so now we have our nice icon design here. And what I really like to do is set a background color. Um, and that can either be your final thing or just something that you're testing with. But we do that by creating a new layer. And we're gonna name this just BG for background right now. And to create the background color, we're just going to use a regular square shape. So go back to your shapes here and click and drag. So it covers the whole art word here and you'll notice there's ah, uh, stroke around it. So we're just going to reverse that. So swap the fill in the stroke on this left tool panel here. Click then. And it's super bright right now. So we're gonna tone that down and usually with color combinations on, easy way to make it look good is just to use the same color, but at a different shade or in a different capacity. So I'm gonna go back into my opacity panel here And what the transparency. I'm gonna take it down, Teoh say it is 20% and now we have that kind of future pink thing going. But it complements the stroke color that we have going, So I think that looks okay for now, The last thing we could do here is save it as an image and we're gonna go to file and export export as and you'll see, it'll open up a dialogue just to show you where you're gonna save it. We're going to go with a PNG for now. Um, it's one of the easier formats that I like to use. So you can either name your file up here and down here we have the format PNG selected. If you want to export everything in the canvas that you set up, you said use art boards and that will constrict everything to that area and just hit export . It'll open up this little window here and 150 pp. Eyes totally find for a lot of things. It's great for this project can change the resolution. Here. Um, hi is, you know, the best, but yeah, 1 50 is gonna work for now and just hit, okay? And after that's done, you're gonna end up with the icon design all exported, ready to go in your folder. We're now finished with our icon design, and I think it looks pretty good. Thanks again for taking this course and be short of post your project in the class feed.