How to Design Game Icons in Adobe Illustrator #MSI

hey guys you're watching dowsky the place to be to develop your creative skills and in this tutorial we're going to be designing some gaming inspired icons we will be using the pen tool and we will be applying some texturing at the end and we're going to be doing it all in adobe illustrator and this video is in partnership with msi so i'm going to be using this beast here the creator 17 laptop it's packing a 10th gen processor 32 gigs of ram 2 terabytes of storage and an rtx 2080 super for the graphics and the standout feature is the mini led display it's hands down the brightest screen i've ever seen and it's also 100 adobe rgb color accurate so that's what we're going to be doing this is the hardware that i'm going to be using without further ado let's get started righty-o so we're now in illustrator and have a new document with an artboard that is 1920x1080 and we're going to be using the pen tool for this tutorial that's over here in the toolbar the shortcut for this is p and we can use this to essentially create custom shapes and we can then apply fill colors and stroke colors to those shapes now this is uh this is awful so we'll delete that and forget that never happened and i'm just gonna go over here and make sure my fill color is set to none and black that's fine we'll keep the black for now all good another thing i'm going to do is go up to view and down here and just pick one of these two when they're both turned on illustrator tries to snap to everything and it's utter chaos so i'm going to keep snap to point on so let's turn off snap to pixel also smart guides they're really useful i definitely recommend keeping those on so let's switch this off right what we can do now is we can start creating our first icon now this is going to be an icon of a handgun the handgun is going to be for our character i say our character because these icons will be used as part of a game menu ui design for a future tutorial but we've got to create them first for that video so you might have your icon design already i don't well i do it's off camera but if you do or you don't that's fine you can just left click with the pen tool and we're going to create our gun so i'm going to hold down shift this will snap this vertically or horizontally or at a 45 degree angle and then i'm just going to go up now i don't want to go at 45 degrees here so i'm just single left clicking and doing a little bit of a dot to dot i'm going to go all the way out here for the top of the gun and we'll come down and i'm going to try and sort of keep some of these angles consistent bring this in now this is a very stylized icon so it's not going to be like a a lifelike representation you'll see what i mean in a moment now i've just done a curve by left clicking and holding and you can see it wants to continue this curve you may want that i don't in this example so what i can do is press escape on the keyboard and it essentially deselects and disappears but another thing we can do this is what i use all the time as we draw our curve out like this and then we hold alt or option we hover over this point here and we click and it will then cut this anchor point and it will let us continue this with a straight line so if it tries to force a curve on you hold alt or option click on the anchor point and it does a nice little cut there and what i can do now is i can actually continue this with another curve but it just doesn't try and help me with that continuation so i can kind of go back on itself so you can see here it's again it's trying to do a curve we don't want that hold alt or option click and then i'm going to hold shift go along a bit and then we'll go down here and again we'll press escape to deselect this now what i could do is i can actually go over here click on an anchor point and then pick up that selection so i'm just left clicking and holding to draw out this curve and again it's trying to do a curve for me i'm just going to zoom in really close here and i'm actually going to cut this as we did a moment ago and i'm just going to draw my own curve it's trying to be helpful i appreciate the help so here we go it's trying to help me again i'm going to say yes thank you illustrator you can help me with this curve here so it depends what you're trying to create sometimes it'll be helpful sometimes less so so i'm just going to do this really quickly you can also hold shift as well to kind of snap again even if you are doing curves and we're just going to do this up here and i'm just going to try and do this nice and quick and it's continuing a curve there i don't really want that so again i'm just going to cut that with alt or option and clicking just make sure that's absolutely straight press escape and there we go we have the very basic layout for a gun now when i design these icons this is often how it starts out especially if you are just doing this out of your head and you don't have a design that you're bringing into illustrator already like a sketch or something and oftentimes you'll do something like this and you won't always get it first time and it may look a bit terrible you can see over here we don't have some nice smooth curves this is a bit too far out this curve down here is horrible that is okay what we're going to do now is we're going to work on this and touch this up and the tool we're going to be using for this is the direct selection tool so the main selection tool that you probably use for everything and we've just used just a moment ago is how you select shapes resize them rotate them that kind of thing the direct selection tool allows you to go in and select individual anchor points so you can see with this anchor point selected i can now move this one piece around similarly i can click on an anchor point and it brings up those handles and i can use these to manipulate that curve after i've created it and essentially that's exactly what i'm going to do now so i'm just going to go through and just make a few adjustments now if i bring this across and zoom in you can see that they are not in line they're ever so slightly out so a nifty little trick is with the direct selection tool i could select all of these anchor points here along the top and then from the property inspector i can align these to the top and it will just snap all of those anchor points in line so that's a nifty little trick there let's just go around a bit more same here these don't quite line up so i'm just going to make sure everything is selected with the direct selection tool snap those to the top and i can also drag over all three of these anchor points and then i could drag like this that's not really working out for me i could hold shift to snap it even better or i can use the arrow keys on the keyboard to just manually move this into position and then i could grab this anchor point down here bring this down a bit i do want this trigger to be a bit larger and again as we did a moment ago we're just manipulating these handles to control that curve and get it exactly how we like now at the moment these lines are very thin i can actually make sure everything is selected and go over here into the property inspector and increase the stroke weight something a little bit closer to what our final design will be if you are on an older version of illustrator and panels like align and stroke aren't appearing for you go to window you have the align panel there and the stroke panel there and then you can go ahead and you get the same or very similar options and with that said i'm going to select stroke here and just change the cap to rounded so it rounds off those corners nope this is rounding off the corners that just rounds off the cap but i am going to round off the corners as well so you can see those sharp edges like the trigger and down here at the bottom of the magazine those are now just a little bit smoother and i think in my opinion this just looks a little bit more pleasing to the eye but you can of course style your icons exactly how you like so what i'm going to do now is again just grab the direct selection tool and just make a few more tweaks so i'm just moving these around so remember as you move one anchor point you do run the risk of upsetting the curvature of something else you can see here i've kind of botched all of this up now another trick you can use is you can select everything with the main selection tool go over here and where the shaper tool is left click and hold and you actually get access to the smooth tool and it likes to deselect everything for some reason so just reselect it again grab that smooth tool and then just click and drag roughly where you would like it to go and illustrator will smooth out those anchor points so if you're not after perfect geometry then you can just keep drawing over this and it will smooth out those curves now it does add in a few more anchor points so it makes it a little bit harder to control all of the points that you've created but that's done a pretty good job you can see here we get a bit of a kink with all those anchor points so what i can do is just go and drag over those hit backspace to delete them grab the pen tool and then just pick this back up and we'll just do that one manually and then just go down here and just bring this in and if it doesn't work out then you can just grab the direct selection tool and just drag over all of these anchor points hit delete or backspace just remove all of these and then maybe it's good sometimes just to go back and do it again so i'm gonna have another crack at this [Music] see if i can do a better job second time round can i do this in three anchor points possibly oh look at that much much better so sometimes that's a a good little trick it's just to start again so i'm just moving these just make sure these anchor points are both aligned so what i'm doing now is just doing the same things again that i've just showed you but just doing it a little bit faster and creating a bit of space here bring this out and down so we get a little bit more of the trigger and i think i might bring all of these down so i'm just going to spend a few minutes now just tidying this up [Music] okay so that's looking a little bit tidier now i've got a lot of angles here that are very similar i want to make sure they're exactly the same so with the direct selection tool i'm just going to select a piece a couple of anchor points holding shift go to edit and copy edit and paste and it pastes the entire thing i don't necessarily want this so i'm just going to use that direct selection tool to delete those end anchor points so i have this line here now i can jump into outline mode which is command or control y essentially this is a stylus wireframe view so now i can go in here and just make sure all my lines are consistent so you can see these ones here aren't really parallel they don't necessarily always need to be but for this particular design i just want a little bit more consistency between some of my angles so i'm just using this line here as a little bit of a a guide that one's not too bad how are we looking over here pretty close but maybe we could just zoom in super close move that over a pinch just so it's a bit more consistent this is useful especially if you are a little bit of a perfectionist as well just zoom in nice and close there we go so it's subtle no one will probably notice it but you but it will just make things a bit more consistent so command or control y to jump out of outline mode and i'm just going to tidy up a couple of bits over here honestly i could tinker around with this all day and i'm actually just going to select everything i'm just going to bump up that stroke a little bit more something a bit chunkier let's see how 30 looks i think that looks pretty good and of course i may need to just go in here and just tweak a couple of these anchor points and there we go this is much closer to the final shape of my gun icon and you can see it looks considerably better than it did earlier okay so now i'm going to add some bullets so we'll grab the pencil just left click and hold shift to draw a straight line press escape there we go we have one bullet obviously it's a very stylized bullet i'm just going to zoom in maybe shorten this with the direct selection tool and position this i'll probably start from the bottom i think will make a little bit more sense and i'm actually going to give these a color so i'm just going to go to the swatches panel here remember if you don't see it go to window down to swatches i'm going to double click on red go to global check that check preview and then i can fine tune this color now something else you can do is you can actually just double click the color picker over here and you could pick or enter your own swatch so i do actually have a red in mind which is ff5454 something like this press ok and then what i can do is actually create a new swatch from the currently selected color so if we get that first rule i made i've got one here that i'm going to use instead so now what i can do is i can hold alt or option and drag this will duplicate the selected object you can hold shift as well so what we could do is we could hold shift but i want there to be a slight angle so i'm just going to offset this ever so slightly and then without pressing anything press command or control d on the keyboard that's d for donkey and illustrator will repeat that last step and ah you can see i got it a little bit off there a little bit off there i was hoping it would all be perfect but you know we can't always get it first time so nifty little trick we can go into outline mode again command or control y we'll just drag these over to the right and make sure the right edges all line up with the same line so again i'm already using this part of my gun here as a bit of a guide i have to guess that one in the middle just making sure all of the right edges of these stylized bullets all line up with this slightly angled line an almost vertical line so now i can hop out of outline mode move those back into position with the arrow keys and there you go we have that nice even spacing away from the edge and then i could actually go object and group we'll group all of these bullets together so we don't have to move those around anymore and i can actually resize them in this group and it will retain that stroke weight now if your stroke weight does change just go up to your transform panel here click on the more options icon and you have this box here scale strokes and effects i've got mine turned off so if yours is on turn it off and then your stroke will stay the same regardless of how you scale it so it depends how you like to work personally let's just move that to the left of pinch okay there we go now this icon is actually going to be white so i think it's about time we added a background and to be honest i need a bit more space so i have my artboard here which is great for final exports and all that kind of thing but at the moment i'm just being creative creating icons and having fun so i don't really want to worry about artboard bounds so let's go up to view down to hide artboards oh look at all that white space much better so now i'm going to grab the rectangle tool and just draw a big old box swap the fill in the stroke and we'll go in here and i'm going to enter in a color for the background which is 1d 1d 1d it's like a charcoal black color go to object and arrange we'll just make sure this is behind our icon and then what i could do is actually go up to object lock and selection as well just let it move this around by mistake and then if i just select all the lines we can go up here make sure that you do have your stroke selected rather than the fill and go up to the swatches panel and we'll pick a color we're going to go with white set that as global now the reason we do global swatches is because if i ever want to change the color of something throughout the entire document i just have to go and edit this global swatch and then every instance of that color will change throughout the entire document so if i design 100 icons in this style and i want to change them from white to gray i can do that literally in seconds up here rather than having to go through and manually change the color with every single icon okay so there we go we have a gun icon and we have some bullets fantastic next what we're going to do is drag over to select everything hold alt option shift and drag to create a copy grab the direct selection tool and we'll just delete all of the anchor points around the edge now i'm going to create a couple of spare magazines this is going to be an item that will be part of the game ui as well so i don't really need all of these lines i just really need one at that particular angle because then i can hold shift and scale it up move this around and then what i can do is hold alt or option and shift to duplicate and then i can grab the pen tool and i can just connect these up and i want to add a little lip to the bottom of the magazine so i'm just going to click hold shift click again that's basically the same as using the line tool there we go something like this and of course it probably would be beneficial to put the bullets inside the magazine like so and then maybe i could just use the direct selection tool and the right arrow key just to nudge this in a little bit so the magazine does in fact fit inside the handle or the grip of the gun the mag well i don't know what it's called i'm no firearms expert and we're gonna have to pop that in the middle there we go so it's vertically and horizontally central lovely and then what i can do is actually go and grab the pencil and i could do the same thing again or i could just very very quickly and crudely do this by eye which usually means it will be good but because i'm doing a tutorial it's probably a little bit rushed that's the excuse i'm going to run with we'll stick with that okay so there we go so there we have another icon we have created an icon for uh extra ammo magazines it can be whatever you like so there we go we're just gonna pop this one here okay so let's do something a little bit more explosive i know the grenade so we'll left click on the rectangle tool and go down to the ellipse tool we'll just left click and hold shift illustrator still remembers this stroke and its styling so now i'm just using the ellipse tool and the rectangle tool essentially just basic shapes to create a grenade now what i can do is left click and hold where the line tool is grab the arc tool click and hold shift and essentially we draw a quarter segment of a circle and i can rotate this around holding shift and position this here so we have a nice consistent width between the circle and this segment and then i could grab the pen tool now it has something selected at the moment you can also go up to select and deselect and i'm just going to draw a nice little curve here just to give this like a little bit of depth like it's curved spherical and then alter option click on the circle and drag scale it down with shift this is going to be our pin there we go and i'm going to make these red now we can actually use the eyedropper tool to sample styling as well as color so i can just sample a bullet and then boom there we go it will match that now i do need to select both of these will shift just go up to object arrange bring to front just so the red is on top of the white there we go we have a grenade i think we'll just do one more grenade we'll do something like a flashbang or a smoke grenade you can tell i'm a gamer can't you okay oh red we don't want that so we'll grab the eyedropper tool move this over here i'm just going to add a line at the bottom [Music] make sure that is central if your smart guides do go a bit funny or they don't quite snap just drag over the different objects and then align them over here on the right or from the align panel and you see it just snaps those together and i'm just gonna do like a top part here we'll zoom in move this down try and make it as symmetrical as quickly as i can move this up and then we're going to have a slightly different shaped pin here something like this i'm just nudging this in and the speed really comes with just a lot of practice and learning all the different shortcuts and i've been using this software for years now and so if it seems fast or a bit crazy don't worry you will absolutely get faster the more you use it so there we go but essentially everything that we did pretty much with the gun at the beginning we're just using those same tricks and techniques to create all these other icons pen tool selection tool direct selection tool that's essentially how you can create and then customize and manipulate shapes however you like now something else i can do is click here and then if i press a on the keyboard in the latest version of illustrator so the cc versions you get this little circle inside of the edge and if you click on that you can see it has a little blue ring around it now i can pull this in and it allows me to control just that curve so i can zoom in nice and close and just make sure we have a nice consistent width around the edge there and then maybe just bring this down so i'm really just fine-tuning this at this point so there we go we have a gun some extra ammo and a couple of grenades don't ask me why the grenades are bigger but the good thing is i can actually select everything and just scale it down with shift you might need to go in and adjust the positioning and sizing of things a bit but then with everything selected we can just go object and group we've got the shortcut there command or control g so i'm just going to group all of these together so they now all move around independently so there we go we've got four icons and one last thing that i want to show you that's going to be a little bit more demanding on the old hardware it's going to be how we can apply some texturing to these icons because it's cool if you just want it in solid colors or with gradients but if you want some texturing well there's a lot of different ways we can do that one way is to jump into photoshop grab an image like this i downloaded this from unsplash and first of all we're just gonna we're gonna strip out the color by going to image adjustments hue and saturation saturation all the way to the left it doesn't really have too much of an impact on this image but you might have more color in yours and then go up to image adjustments and levels and essentially what we want to do is we can adjust this here but we want to grab the shadows and the highlights now we want to bring these as close together as possible but we need to do it in a way where we can retain the texture because what we're going to do is convert this into a vector shape so if we have lots of gray it's not really going to work we need to get as much black and white only as we can so we'll uh we'll go with something like this click ok now you can go to file save as save it as a jpeg or something and bring that into illustrator in the latest version we can just go to select all edit copy and then we'll paste this in illustrator but if you do have your own texture you're going to bring in you just go up to file and down to place and that's how you can get it in there if copy and paste doesn't work so now i've got a texture in here you can see it's a rasterized graphic it doesn't look particularly great so if i go up to view and nope if we go up to window we're going to go down to image trace and we can turn on preview here and it gives you a warning tracing may proceed slowly with this large image so if you have a large image and you try and trace this and essentially convert it into a vector format this is going to be very demanding on the old hardware so if you do have a beast of a computer it's going to make this part of the process considerably faster so we'll click ok then we can adjust the threshold here you can see it just brings in a little bit more of that detail and it takes a moment to render each time so we're in black and white mode you can toggle down get lots of different settings but we're going to keep it simple maybe just bring up a tiny bit more detail there we go perfect so we'll close this down now when you're happy go to object and expand leave everything selected and click ok now what we're going to do next is we're going to go to edit and cut this will copy it to the clipboard but remove it from the document and i like to just jump into a new document this is only going to be temporary we'll paste this in and you can see it's absolutely huge now you might be thinking well why have we done this the reason is because when illustrator traces in black and white by default it includes black and the white now there is an option where i could have disabled the white so it's not included within the trace but that's actually something that i only really noticed not that long ago so i've done it this way pretty much my entire career and it's a nifty little trick that uh i like to share anyway so if you have done it like this you can see over here we have a question mark this indicates we have a mix of color of course it's going to be black and white we need to separate those out to create our texture so how we do that is we just zoom in really close grab the magic wand tool now i've done this in a separate document so i don't grab anything else or like select my icons by mistake i select the black go to edit now we're going to cut this and you can see it leaves all this behind now sometimes it will leave a color or just some artifacts other times you'll just get this if you jump into outline mode and you won't see anything but there will just be lots of different artifacts and pieces it depends entirely on your trace but what i can do is go back into the main tutorial document and go to edit and paste and you can see it's pasted it in i'll just give this a color so you can see we'll make this bright green no illustrator wants it to be gray so i have had this happen before if it does go up here and select rgb just force it out of grayscale we want bright green so there we go we have that texture and what i can do now is well i should have grouped everything but because that's the only instance of this color it's safe to use the magic wand tool so i'm going to select this entire thing and we're going to go down here to the pathfinder panel and we're going to click unite now this will unite all of these different shapes of which there are many into one shape now what i'm going to do is go up here to object and down to compound path and select make now the reason i do this is because even though we've united these shapes together a lot of these little speckles of shape or dirt or dust or whatever you're going to use it for they are not touching but we want illustrator to treat all of these hundreds of shapes as one single object that's why we're going to make it into a compound path if you don't do this when we come to the next step it's not going to knock out all of these little bits of particle from our icons which is going to give us that textured look so there we go let's make that into a compound path so now you can see i can move this around as its own thing so what i'll do is i'll pop this over here now i'm going to demo this on the gun so if we just grab this hold alt or option shift and drag now we're going to expand this so we're expanding all these strokes so we can no longer edit them however we can do other cool stuff i'll show you in a moment so we're just going to go into outline mode and again we just need to check all of these they're grouped together at the minute so i am going to ungroup those because i need to make sure we've got the different paths sorted so you can see here this is all one path so that's all good these bullets though they're not all one path so first of all i'm just going to unite them if in to help just click unite and then go up to object down to compound path so all of these bullets will be treated as a single path and what i can do is if i get this texture here and i'll position it over the gun we'll scale it down so it's going to be much much smaller smaller smaller so it depends how big you want your texture that of course looks awful but if i grab the eyedropper tool and just use the same color as the background we can see how it's going to look then what i can do is i could move this around like so get the positioning right the sizing scale all that good stuff maybe just bring it up a pinch and with the texture on top that's very important it has to be on top of everything else what i'm going to do is select the white and then go down to where am i going down to the pathfinder panel the second option along minus front and it may take a moment and it will knock out all of that texture those little vector shapes from your design so if i just go back a step what i'll do is i'm going to select the texture go to edit and copy if i then jump forward a step again i'm going to need to repeat this for the bullets as well because they are two different shapes so what i could do is i could paste this back in place and then select that select the bullet do it all again but there is another way to do this a much simpler way and it comes back to compound paths so if i just move this out the way what we can do is we can select these two different colors and go to object make these compound paths and you can see it does change the color but if i go in here we just knock out the black texture from the white icon with subtract or minus front i can then zoom in and with the almighty direct selection tool i can go in and i can change the color of this one element so even though it's a compound path and it treats everything as one single object and i can now move this around i can still use the direct selection tool to influence the color of one aspect of that if i go into outline mode you can see i don't have any crazy texture everywhere this is nice and clean this is very final you can see i can't really go and easily edit these paths anymore but yeah that's a really nice and tidy way to finish that up so when i do bring this into another application or if i were designing some icons and handing them over to someone else to work with it's just all really polished up we don't have any kind of bits of texture and artifacts and things just lying around and uh yeah there we go so we have our icons we've got a nice clean vector icons a gun a magazine two different grenades we have an icon over here with some lovely lovely texture and as i say we will be using these icons in an upcoming tutorial where we design a game menu ui and there we go so that is how to design some gaming inspired icons all in adobe illustrator so huge thank you to msi for sponsoring this video and thank you to you for watching as well i hope you enjoyed it if you do have any questions or comments you know what to do drop those down below but as always like this video if you enjoyed it take care and i'll see you next time

Channel: Dansky

Views: 21,952

Keywords:

Id: gD-OJ0buTGg

Length: 36min 13sec (2173 seconds)

Published: Thu Aug 20 2020