Learn basics, tips and tricks of icon design and save your time

1. Introduction: How my name is Thomas. A stroke scandal in motion designer, graphic designer and illustrator from Poland. I work us full time seeing graphic designer at Polish company, but also I am a freelancer. In this last, I will be to how to create full I can't set and save your dying. We will start with theory principles. Get through the metals and techniques, some tips and streaks on creating full icon set and exporting kids for a client's I will show you some examples and inspirations To boost your creativity. You will need to have some vector program I will be using. It'll be you Striker CC, but you can use any other software because another suffer will be good. These metals and things are very universal, so don't worry, so let's get started. 2. Theory and principles of icon design: welcome. In the first lesson, we will speak about fury off Conte's I'm and some Crazy equals. What is an icon icon is a simple that we present certain objects. Action situation or Paris. Um, the purpose of icon is toe deliver some message in simple and more uniform way. They can also be used as ah, separate for ricin message and to be more specific, with fewer words used. Where do we use cycles? Icons have very wide range of applications. Nowadays, we use cycles mostly in user interface and twit, but they are also used in public spaces such as airports. Cities are shopping centers. We can also find icons in advertisements such as poster suppliers and packaging. Icons are is sometimes even in Lagos to help deliver more meaning behind the brand, but in this case, we don't call them icons rather simple sign or remark. Now we will get through some principles off icon design. They will help you be more efficient and safer time. Be obvious first, and probably the most important principle of icon design is to be obvious. What does that mean? It means that you should use simple and recognizable symbols to make the message clear and understand table. For example, you should avoid using modern symbols such as SS, the hard drive or pen drive instead of a floppy disk. Floppy disks are went in years anymore, but the meaning behind the simple is obvious. And you wanna be obvious, even if you use obvious symbol. You need to make this ass readable as possible, especially in user interface and public spaces. You want your icons Toby, Understand? Able in a blink of an eye. These needs us to the next principal. Keep it simple. Avoid unnecessary elements in your icons if some extra lies are element of their style than try to apply them in a way that your icons are still readable and so they aren't confusing off course. If you're I concern mint to be used in some artistic way, and the message is not that important. You can go a little bit crazier Bots remember, don't overdo it. Always remember to focus on the meaning unless you need to create more abstract symbols than go for it. But I always think set to the rules to make it easier and think less later. You should think for a while everywhere and said the rules for your icon style. This will help you save some nerves and possible Saviour time. Think about where your icons will be used. What sizes will you need, Then continue with some ideas and maybe some sketches on extract. Most important rules are guidelines in simple statements. Don't be scared of writing them down. It will be helpful, lighter, and it will make easier to remember and apply them. Be consistent if you defined your style, then follow the rules and think how to apply it without over doing your icons designed each I count of Peter guidelines and make whole set consistent. Remember to think about your style in advance so you avoid going back through your icons over and over. It will save you some time. Be flexible if you need to. Don't hesitate to step back and fix their icons when you notice something went wrong. You should avoid it because it will cost you time. But it is better to take time. Go back and fix it, then end up with unreadable or inconsistent icons. Remember to always think about how and where your icons will be used and designed them toe feed to these needs. If you know that your icons will be Astin very small sizes than prepare smaller versions or even try simplify arrivals. 3. Icon design methods and techniques: in this lesson, we show you some methods and techniques that will save your time and make creating Caricom's even easier. In this lesson, we will talk about software tools, turnings and some tips and freaks toe help you create your Reichel's. Faster I will be using could abuse traitors he seeing. But you can use any other software. You can use something to designer or maybe some free software like Escape. You will need toe have the mental that we'll help us create lines and join them into shapes . You we needs toe have some basic shapes, like a square or a rectangle. Andi Ellipse. This will be used in creating some more complex shapes by cutting one shape from another or maybe joining Kwan shape with another one. Another thing that will be helpful is great video and snapping toe the greed you can turn it down in the view. Many in Arab illustrator it's right here you can hide, are so great you can stop to greet. You can snap toe, pick so and snap to point this wheel, help creating our icons and make the whole process faster. Another helpful toe is our boat tool. We can set the size off our art. Bart. We can copy our art bored with the icon so we can modify the style or just used the same size are put, which will help toe expert single icons on and to organize our documents. With these basic tools, you can create icons just like the once you see now from the most basic icons toe more complex icons and under tool that we will be using a corner tow. It lets you create a rounded corners are another kind of corners. Not every software we have these but that administrator have the stool on our affinity designer Also have that's on this kind of tool. It will help you create different looking shapes. We've is because everything you need to do is just select uncle first, which you wants to alternate and drug uh, circle we have distal. It will be much easier toe create more complex shapes. And as he will say, it will be very useful. In the most cases, we will also use stroke pile, toe alternate Look off our strokes. We can make them feel girl. We can make the thinner. We can change on the cups off our lights, and we can also change our corners. Toby Sharpe over around it. Another helpful thinks are the keyboard circuits you can duplicate the stroke are object or whole icon when you press out and drug the stroke. If you want to move your stroke in vertical or horizontal line, you can use shift and just drank your stroke icon or another ship. So if you don't know, keep our short cuts off your software. You can go toe the preferences on and check out whole shortcuts are you can just Google. It's Andi. Find what you need. For example, we we'll create some basic icon. It will be a floppy disk which stands for saving. Firstly, we will creates square. We will set the stroke. I we set mine toe one. I will center eat to the airport. Now I will duplicate the square so I can create another part off our floppy disk. For these, I will use shortcuts control C control of sheep to be. And now I have another square. If your strokes are changing when you scaling down or up your object, it means that you have turned on scaling strokes. You can uncheck the dese in this panel in preferences, skill corners, scale, strokes and effects. So you need to I'm taking these now we will move our square toe the top off another square . If you see that your stroke is not aligned with another stroke, it is probably caused by dis options snapped. A great on. It's not a big sell you can set shortcut to quick. We change your options. I will turn off snapping to greet and snapping too big so and align my shapes. Now our shapes are perfectly aligned. I will change the sites of little square just like this. Now, on the real on line toe, imitate the text on the floppy disk. I will also at honest, occur and move the lines down. Now we have toe create sliced corner. We can use the mental at some UN course into Deletes de Suncor. Or we can use the corner too by selecting proper uncle setting the size of our corn around well said mine toe to pixels and change the corner type toe jumper. Maybe it is too little I will change this corner size too. Maybe free. Yeah, that will do it And now I will want some vertical line on and all I need's to the center, all their little square. And now we have something that looks like a floppy disk, and we made it. We just a few clicks. 4. Working on a style of icons: in this lesson, we will talk about style of your icons, and I will show you some examples. We have our basic icon, Andi. Now it will be time toe. Apply different states to it. But first, I will show you some examples. Here. You can see if you use different looking clients. You can get different looking icons. Here. We have run the cups. Here we have flat caps and it's Manx, our icons more sharp. Here we have some shading. We've secondary color. I used gray in this once, and I used different type of shading. Here you can see that I use a more natural shading, which is more realistic. And here I just added full color to the shapes. The next style is toe. Take the main shape off over icon and opposite it a little bit by one pixel are by to pick serves. It is up to you. Another cool effect is cutting cure lines, and we've different looking lines. You will get different looking icons here. We've rounded cups and here with flat caps. As you can see, it makes our icons more cool. With more complex icons, you can use different shapes I used little circles and little lines toe add some details. It makes our icons more interesting. Here is another example we offsetting shapes and we shading. And finally we have blind icons. We some colors. You can also use Onley full shapes. Without the strokes, it will look much different and it won't be good for every case. But it is up to let's get back to our icon. I will duplicate it. We hold our work and I can see that our rectangle is not centered. So I will quickly unjust it. Okay, now we have our basic shape on I will apply first style. I will have some shading toe our icon. It can be a simple us You can see now or we can use more complex trading. Firstly, I duplicate these or Congo and I just feel to none. I select the rectangle behind it and select stroke to none. And I will duplicate again and I will offset it by one pixel Reach side. And now we will use Pop Finder so I can extract this shape from this shape behind. Now we have our highlights. We need to change their color and he needs to apply background for weeks and we need toe move it behind our stroke and here we have more interesting icon. Now we will duplicate this icon Onda. We real cut the lines to make it even more interesting. But duties? I will add anchor points. You can find it in the mental section of your tools and I will add some on course. We need to get rid off this line from the rectangle on the front. We need to bring more for ground for these shape and movies to the front. And now we can cut. He's on course and really it's their line. I already do the same thing for DIESER Congo, but the's time it will be on the left side and maybe more beats by one pixel and we can add some color to our I come. Let's see some really cool into. Now we have first style about where I come. We will create another style from the first icon. I will take dese main to say duplicate it without a stroke, and I remove it by two pixels. Each side's and I will remove the foreground color on the street and at some card to the shape and morbid back. As you can see, I have some color right here, so I will just remove it. And we have another style off our icon, and you can go on and tone and create different looking icons from icons you already have. Or just by creating basic icon So you can come up with more ideas and tried so to your client, or think what will be the best for your project? I will show you one more style of icons. We will loose on Lee shapes without lions, maybe some accent lines, but without the main strokes. So we delete the stroke and we can use some color. I will use some bluish black great. And now I will close this shame and my kids white. We will remove the stroke from these shape also, and we will. My kids like crazy Louise Cray. Maybe we will change this cold too, and his color also, I think we will change the core of our accent stroke and also our text lights. And now we have some what I come. You can alternate the colors toe, be more abstract, or you can use just more nutty oracle. Everything depends on where you will use their icons and what kind of project you're working on. 5. Designing full icon set: in this lesson where you create fly concepts first and most important, step to save your time. Designing icons is to define your style. You can also create basic shapes. Basic look for your I consent and all treat Later. We will talk about it in the next lesson, but it is good habit toe. Do it before designing Reichel's. It will make everything easier and faster for my eye concepts. I choose the team off application, mobile application or maybe some Web application where you can get some notifications. You can charts with other people you have in books. You can add comments you can get to the gallery. You can follow the other people, and you can also altered the settings on and edited your posts. I pointed out some basic characteristics off my icon style. I will single white. That means I will use on Lee one weight off flights, for example. It can be one point or two point, but never mixing them. In other point is rounded cups, which means that I will use rounded cups and probably run corners. Another one is top left corner lightning. It will help to define your shapes and at some depth, it means that the lights will come from top left corner, so the casting shadow is on the right sides. Another thing I like to add to my icons is cutting lines. It's just mean that you cut your lines in some way toe, add some accent and make your eye incomes more interesting. And the last honest rating. Coxon, which I already spoke off. And you can see in my sketches, which I made on iPad pro in procreate and you can use any other software. Or you can use just a pen or pencil and paper and sketcher icons. It is also good habit because it will make the process even faster. Now it's time to set up our greets. We go toe, edit preferences, kites and greets Andi. I will choose greed line every 32 big Selves and subdivisions. For Tito, it means that I will have one by one big soul grieved lines, thanks. Step is toe. Define your arberg size. I will lose 32 big Selves by 32 picks elves, so now we can start designing cover. Reichel's 1st 1 is user profile are proposal settings. We will start with basic shape were my cynical. I will delete the field on arms, black stroke with rounded cups and rounded corners centered to the That's make it smaller. It will be easier toe come back to our sketches and now we have toe make this guy and I will use the pentacle and altered the shapes. I have some basic wise. I will duplicate this and flee Pete's horizontally. As you can see, it's not snap, Inc. Well, so it means that I have turned down snapping to pixel can turn it off on join my strokes And now I have basic shape our guy and I can alter right now. Firstly, I will make it a little bit smaller. And now on I will try to apply rounded corners, maybe make it do higher and maybe movie to legal. Be tire with all this points and try this. Okay. Looking okay. Not all will you around up shoulders. If you have some glitches like this, it means that you have turned on GPU preview. You can turn it all by pressing control me And now it's ok. I will out a chain toe, my guy and maybe I will like the neck longer. Now it's time to act. Cut it lines. So I will choose adding uncle points at some uncle here here Q. And you select all the uncles. Cut them and we will delete the one so you don't need. You know what? I will make the next shorter. I think it's look better. Yeah, that's better. And I will make the chain a little bit bigger, just like this. Now it's time to add some shading. I will duplicate my main shape, said the few complicated Again and move. It's a little bit to the right on and a little bit down. And now I can use Pathfinder to create a highlight and defeat unnecessary elements. I will move it back, duplicated again. Change the color, Dwight, Send it back now. I will. Your abs Afraid as you can see here we have some empty space. I would love anchor point in the center. Firstly, I need to doing our lines. And now I cannot Encore point can move to the center off our art birds moving to the edge off our art birds and Mikey trod okay, I need to move it a little bit down and maybe one pixel dough. Okay. And we have perfectly aligned shape here. You can see that our highlight is not working as good as we want. So we can align it and also sent it back behind are just more peace line to the front Now I will add some rounded corner you and we have our icon. Next one will be I come for settings. Firstly, I will turn on snapping to greet and snapping to peak So on duplicates over our birth I was named the first our boat tool I see profile. The next one will be settings. I would believe this And we will also start with some surgical. To make sure Dr Super is same size as the 1st 1 You can check the size off this one. It's 28 by 28 pixels on guy Will did We sent hurried to the artwork and changed size toe 28 . Now we need to create these shapes and will use rectangle, toe and the joint the shapes together I was centre. It's my kids. They could be tire and now I will duplicate it. I would let some feel toe be ableto easily select my shape and we need one more and number one Now I can duplicate this circle. Thank you, Small. And now we will join these shapes. We've find their tool and we have something that looks like a gear. I will select the inner on course toe aren't some rounded corners. I will sense the size, though two picks us. Maybe Then the one pixel is enough. Yeah, that's enough. And we can make it as big us, our previous icon. It looked better when it was smaller. So I will alter thes inner corners and make them bigger, maybe to pick sauce and maybe make its nine. Yeah, that will do it. Now it's time to extract the circle from our main shape. To do that, I will duplicate the circle, select my main shape and use the Pathfinder to I would change the color of our coke. And now we can add some highlights. In this case, I don't want to be as realistic as I can because it's will make the whole icon unreadable. So I will use just simple Sirica will shades like in the sketch. Okay. And now, to placate thes shape two times but without a stroke move this shape to the front and d lead. It's we find her toe, it's now we have our highlights. We will send it to the back and removed the feel of our stroke. And we have our coke. I will add cutting line right here in the inner circle. And we have our coke or gear. No, it's time for the first icon, which is fanciful. I will start with a rectangle and I will aren't encore right here in the middle. We need to turn off snapping and now it's perfectly in the center, off our shape. We can also move it to dissenter if it's not already into center and now we need toe, create the pointy edge of our pencil. Make these little more. Now we were crates. Peace line. We will also creates this line right here. And by now the we need to create this line, maybe make it the shape so its field. And now I can see dispenser is toe pick and I want to move these points inside and I need toe alter these points. Also, I will move this line to the insight so it don't touch the other lanes and we'll make thes line. Cut it And I will also make these line contents. As you can see on this couch and then we move This points be like these. I turned on snapping so I can move my lines. And now we cannot shading to do that, we duplicate this shape joined cutting lives, making to feel sent back. Change the color and I will create so rectangle duplicate this shape. Move our rectangle to the top and use the Pathfinder toe ec strategies. Now we have our highlights. So it would change the car to the white and these two gray and I will send it back. And now I will you coop my I come and your date just like these. And now we have our icon. But I don't like this line being cut. So are we Join it and it looks better. Next icon is an eye we created with some ellipses on and we've mental, I will turn off snapping to greet and to peak. So just to my kids lying to the center and how we move it to the top just like this. And now I will duplicate it with this telling the encores we center it now I can create the circle and alter their corners. Maybe markets. Even I told her, As you can see, the shape is not that being so. I need toe move it even further from the center and even murder. Okay, Now I have my safe than I and I will make the iris bigger. And at another circle a smaller one. And I would change the six weeks cells. Now I will duplicate this shape under a few, duplicated again offset it on using the finder tool dilate it duplicated again. Change the cooler. Sending the back sent. Taste the back We have highlight. So I will change the colors and I will change the color off the middle circle through the whites and we have our eye. Now it's time toe at some. Cut it lines and our I is ready. Now we re create next icon. Next one is heart. How we used the mental to create basic shape. More bids. Thank here. No, I can duplicate this. Keep it Join the anchor points century to the our boat. And now I can work on these move, it's back. It is also to make the heart bigger. And now I can use cornetto to create heart. As you can see, it is a little bit too small, so I can adjust it by bringing date higher. Select them again and his better and but notes Yet we could make short right here and now we have our heart alignment and we will add some siding. As you can see here, I also used the sickle shaped just like in the Gator icon. I will make it a little bigger. I will duplicate my shape, changed their feel. Mike it gray. We aren't Sirico just like peace. Morbid. Maybe it would be good. And here we have our highlight. Now we can duplicate our shape again. Think of the color. Send this to back and we have our heart. I come now we need toe create coated line so I will select my main shape. It's at some uncle points and now we have our heart icon. Next icon is the bell icon. We we created this with mental. I will sketch the basic shapes which I will alter later. I would duplicate this. Flip it untrusted join the on course and I will make this beaker. Now I can around the corners like so on. It is still legal, so I need to Internet days and we have our basic shape. Now I will. And this little circle right here my kids, maybe five pixels and I will deal it. This anchor points So we have this shape now it's time toe aren't shading. I will use this main shape duplicated Change the color complicated again. Move it by two pixels in the each site and use the Pathfinder tool. No, I can duplicate it one more time. Change the core Sanded toe back changed thescore Also send it back, worked and duplicate this Change the car too gray sending to back I would align me to the center, Maybe make it legal bigger. And now I will abs cutting line and our bell is ready to use Next icon is rather simple Only stays our boat Make the rectangle center REITs Now I will create these lines and here and now I will create He slides I'm using shift So my life are in the same angle and now I can make them shorter and now we will create sending duplicated, change the color, send it back. Replicate These elements also changed their Koehler and send it by court. Now it's timeto ads. Cut it lines right here on day. Maybe right here. As you can see, our ship is not aligned. So we need to tow uncheck the snapping and more weeds the place that we want it to be. And now I will duplicate it one more time. They're all a stroke and sad deeds by courts. And now we have our envelope. Maybe we will my kids even bigger, just like this year. And it's looking better time for another icon. This one will also be very easy. I will deliver these elements leave bomb the rectangle and I will use it to create my another icon. I would alignments maybe make this weaker like this and I will have some circles or pick sauce who I lined everything the center of our Bert and move the see, Of course, by pushing arrows so our circus are evenly spaced. I can not. Some more rounded corners. Two pixels will be good And now it's time for sending. I will lose this shape we're mind safe. We changed color and I will create rectangle and extract it from our shape. It will create our highlight. And now we will duplicate thes shape, Change the color, send it to back. Sent these also to buck. I want to move it by one big so and here also to pixel corner just like this one. And we are good toe go with cutting the lines. But firstly I will align everything and I know I can cut the lights. Let me see on this couch how you look here and maybe here and we have another icon Now it's time for the last one. I will use the same rectangle change the style of its creates our son maybe six weeks levels. And now it's time for the Montanes. Maybe my kids little small, maybe five pixels will be good. And now we cannot shading. This would be our highlights. And now we We aren't shading that Montes. As you can see here, we need to at some UN car to make it feel the space we added here and move to these. Send it back Now we can use this shape. We'll be by gray pick cells duplicated again. Send it back. Here we have our highlight for thes mounting on. We will create same thing for this month. We need to move it by two picks is and extend this line on also piece line. And now we can cut the shape and we have our highlight. Send it to back group them together centuries and we have the last of our icons. We have our meaning icon set in the next lesson, I will show you how to change the style of this icons. As you can see, every step is repeatable and we training and this knowledge E will be able to create icons faster and you can save a lot off. 6. Class project: for the class project you need to create full I concept in style of their choice. Firstly, you need to define your style and then you need toe to see our topic thing for your iPhones , and then you need to create minimum nine ankles in the same style publisher icons in the class projects, and I will be last to see them and maybe give you some feedback. 7. Applying different style to the existing icons: in this lesson, I will show you how to apply different side to your icon Set. Now it's time to apply different style toe our icons. I will select these are parts and duplicate them. I will also group them so I can change their lines and the colors at the same time. Okay, if you want to change the lines at the same moment you need toe, select your line, select the select many from the top off. Other be illustrator and choose same stroke color or stroke weight in depends on what strokes do you have in your project. And now I can change the strokes to maybe plots cups, maybe some sharp corners, and you can see that our icons look different Now we can do the same for the full color, select same feel color, and we will go with some blue. And now we have some nice, vibrant color, and it brings alive toe our Eichel's. We can also change the color off the stroke, select same stroke color and maybe to some darker one, and remember to have some contrast in your colors. So you're icons are still readable. I would just even darker, and here we have our icons. We have just a few clicks in a totally different style 8. Exporting single icon and whole icon sets: in this lesson, we show you some expert options and we will expert our I concepts. Now it's time who take a look at the expert options off our icons. First thing you need to ensure that your icons are prepare Lee named here. I changed the name off my first Michael set. Now I need to change the name off these alternate icons. I will adds the word blue before the name of an icon so I can identify them and easily change on. This will be helpful when you delivery to tow the client or when you're in, put it in your project. So I have selected the Alberto and now I will go and change the names of every art. Bert. Now I have proper names for each I come, you can see the names of your ireports in our birds panel. You can turn it on from window menu and selecting this we will also need acid experts so you can check these. But probably if you check these, you will have this set off panels so you can act a seat from the stops. We need toe change the settings off our export here. You can turn needs off. You can add some scales final four months. PNG is good when you want to use your icons on different bag grants and they will stay transparent. If you want toe, use their icons in different sizes and so you don't want toe. Prepare bigger PNG file. You can use SPG and your icons will be skill able and ready to use in HTML program American in Put them on the Web sites in line in the code and they are very light in this way and they are very fast to load. I will use this panel toe export my icons. As you can see, we have all off our ports. You can clear selection if you just want toe export single icons. I want all all of my icons so I will take the whole set. As you can see, you can type the range by a finger and you can also expert full document for the preview. It means that the full document from each pixel toe edge speaks on Dutch pixel and each pixel will be exported. So start off our our boat will be something Be somewhere here on the end of our file will be right here. I want to export my icons in original size in two times scale. I don't need four times, so I will do it. This and I want to export our boards in SPG and I will delayed the suffix. I don't need it here. You can set advanced options for your final four months. If you have done doing this settings, you can save them. Here You can change D folder that you want toe your icons to be exported Now, which is this one and expert. Our court you can see that is it is now exporting. You can see that progress bar and when it's done, we are having these folders. We've proper 54 months and Size Inc options. I have also pdf because I didn't believe that So remember to select proper file for months . If you don't want toe be messy. Here we have our icons in 100 person scale in PNG. Here we have our double scale also in PNG and here we have our SVG icons on and you can use them toe scale infinitely. And I recommend to export their icons in SPG because They are Web friendly and they are loading faster and you can scale them as you want. Remember, toe do Ah, research. What? Vial Sizes on. And what kind of file? Four months we will need in your project are what file for months your client needs I usually experts. My files in many formats so declined can have the choice and choose what he needs even in the future. If he wants toe modify D icons are declined. Need some other final four months they 9. Summary: thank you for taking this class. I hope this knowledge will make your process even faster. And you will learn some good habits off icon design. I invite you toe, take a part in the class projects and prepare your icon sets and show to the other students . Thank you for watching and sealing the next classes.