Creating an icon set for a ninja game

István Szép
A free video tutorial from István Szép
Design teacher
4.5 instructor rating • 18 courses • 36,790 students

Lecture description

How to make a good icon set? Set your rules and draw accordingly! 

Learn more from the full course

Create engaging 2D Game UI with Inkscape!

Learn 2D game user interface design with a free vector software!

03:53:40 of on-demand video • Updated November 2017

  • Create fresh User Interface for 2D video games with Inkscape
  • Create several types of icons and buttons for your game UI
  • Use Inkscape on a higher level to create what you need for your game (i.e. menu items, buttons, icons)
English [Auto] In this lecture we will practice and create an I can. And I said is basically yes a set of matching icons. They are matching visually and conceptually. Now I have this game. Game design I did before for my previous course is one of my courses and I know what I can I need I need a sword. I need a shuriken or a throwing star and I need the blinding icon like I need the smoke bomb or firecracker here on the left. I would like to have the controller for the movement and I supplicated the circle and I decide where I want my other icons. I move my left thumb. Let's say this is a mobile game. I move my knee jerk in my left arm and with the right I am pushing the icons. So it's jumping and throwing shooting guns and attacking. I already have the place for that I can see on the bottom. That's why I designed this game that the foreground is black and here in the bottom I have plenty of black space for my icons. I can also here a score or live by whatever I want. But now I'm just focusing on the icons so I have the circles. This is where my three icons will be on the right. I will make this one bigger the circle. Ok this will be my controller. This is just a placeholder as you know. This can be invisible and only appears when the player is placing his thumb on the screen. So now this is just a placeholder. Now I would focus on the three icons. Let's decide what colors I use for the icons. I obviously will use the colors from here from the game so no I throw a few squares to create my own color palette. I just control the squares with them all up and smaller. This doesn't have to be good looking. These are just for matching colors so obviously there will be black. There will be bluish from the background. At least this level is blue why not and there would be a small amount of red because there is a small amount of red on the Ninja and some here and there and I am planning if I make this game that the blood will be red. Obviously a joke and there will be a light part which is white or very bright gray. So these aren't my colors. Black red may be blue and white and I use these colors in my icon set so I can decide how my I can look together. If they are white. They are very good looking. They look very nice but it could be another color but I don't want them to be green or yellow or something. I love this type of green but not for this game. It's totally not matching the whole game it's an action game. I want it to be scary I want it tough. I want to use black and red green is to come. It's not matching. So let's stick to the white ones. They are standing out very nice on the background. I start with my first icon which is the sort that is the most interesting for me so I started there. I removed the THROW IT retrieve Control-C I turn the square into Poth. It's the same thing if I pushed his bottom in the pot. And I moved the edge a bit. I turned off the snapping. It's good if you want something very controlled like drawing a blueprint or plan. But for this type of creative drawing it's not very good if the snapping is turned on. I don't like it. I hated the blade of the sword so I have the handle as well. I draw a square over both of them and shift and with Poth difference I cut it down. I take it there is a tiny distance between the blade and the cross-eyed on which is that too but I think the Japanese word is a little horizontal bar and there is a distance between the handle and that not much just a bit. Now I take that the bottom is wrong. Here is a trick. If the little hand those are aligned to the side of discraft then it would be a perfect rounded edge on the bottom. So I made them perfectly vertical and it works. Now I make the handle. There is a special wrapping techniques for these Japanese handles. I will draw a small icon so I can make a handle but it doesn't have to be perfect so I just duplicate this little orange line. Turn it around. And that they can that it's ending here. Now I up like these and again and put it up there as we've gone through the gate now withholding shift time selecting these orange bars and imagine them together with Poth Union now which you've tasted like this one and the handle and they go to Poth difference and it's cut out and I have nice triangles. So it looks like from a distance on the small scale it is looking like it's wrapped. So it is looking like a prop. In just what I would call it later. I'm fine with it right now. Let's check what else I have to do. OK. Sure you can. And a little blinding balm. Let's start with this really come I want Star so I draw a square with Chef Control-C or path or object or path. I make it at the table. I select these these two notes and I added a node I move that out and move these two bottom ones closer to each other. You see I can move the nodes and scale that my size scale object. Now I have these and this is one piece of the star one leg. I make it to be shorter. Now I moved the center of rotation. Downer. And if I located and rotated it's rotating exactly around that center duplicate and rotate it again. This is how I would throw a flower by the way drawing one petal and rotating it around one access point. Which is defined by that little Plus I moved. So I updated it four times. Now I have five petals of my shuriken. I move that around. OK let's let's fix it a bit. Now zooming and the circle in the middle supplicated again and they merge it together with little petals but because it was not placated I can shrink it down and select the surely you can select the circle and the path difference. I cut a hole in the middle of it. It's very simple. I can rotate it. It will look very nice in a small square. I could make different stars. There were a lot of them. And they say they were not even strong. They were used in close combat. That's a new theory. But anyway I call it a throwing star as in many games. And my last task now is to create a smoke bomb. I draw a circle and I want it to be broken apart like a little clay sphere and then enjoy throwing to the floor. So I draw this part which will be broken and I go to path division and it will be divided by the edge of the object which is higher. And now I can move them apart. I do the same again. If will be divided to several parts. So pass the vision and thus you can say you can see I can move it apart little parts I move them out of the center of the object. So it's it's like broken up and shattered is already looking like it's blowing up. I imagine them together. And now I am adding little lines with bezier to depend too. So it is really looking like it's shattering and blowing up by holding Shift. You can rotate by one edge so you see all of them are pointing to the center of my little bone. I believe this one on the bottom like clicking a tile in the in the group. I can move that object separately so I no I have the three icons. I am quite happy with the shape of them. I group it up with everything. And now I have to resize them and create an icon set and put them into my scene which controls the topic of my sort. I always used up the cape because I keep the originals for later if I want to read it if I want to change something. If I merge the object with something else I still keep the original because I want to be able to edit it. So let's see what if my sword is here and the thread is looking nice but I want to put it here on the right side because this is what the player will push the most like step steps. And this is what you push them almost next to it. I'm going to put the throwing star obviously. I really color that as well. If not you'll be orange. I obligated. Let's have more than one. I rotate it so it looks more random and I squeeze it a little. So it seems like it is turned a bit in the I move it to the right side of my circle and I'm I'm adding some dashes you know like it is flying through the air. So it is more dynamic. And the last thing I drew was red because I picked this red for the sword and I like this red. I will keep it for the Desiree's. And I made the stars black Now if I look at my icon it's not good it's too much white. So I have to scale up my objects select everything and I made them bigger and OK it's nice and dynamic. I like that she's a bit outside of the icon actually. This gave me an idea I could make the same for my sword. I grew up my little boom and I would use the same idea I used at the shuriken. You see I'm very playful but I still aiming to create an icon set so my boom will be this dark color of the shuriken order it will be read no darkies better and what will be read the Desiree's of the explosion like exactly that there she is on the Szulik and I can make it a bit bigger. So it as well coming out of the screen of the I can I mean it is more dynamic this way. Like really it is blowing up. I really like it that it's as well coming out of the screen. Let's make even this ones even bigger. That's more stiring the big one. Like someone just threw two stars very fast and now I have this idea that even the black part is coming out of the screen a bit of the iconic I make it longer and put it behind the star. OK it is looking nice and dynamic still a bit of positioning. And as I said this gave me the idea let's do the same for my sword with Cointreau Greek. I'm selecting the blade and picking the same color for it the same for the cross-site on the handle. It was good but not much is visible from the handle so let's make this one smaller the whole sword and rotated a bit. Now to keep my eye on set I want to give some blood so I duplicate the blade with control the and I draw an object over it. So I have some splashes some blood splatter over the blade. Now we shift I select this red blade and this red shape over it. And they go the path intersection and we're like I have the blood on it now. I upgraded the circle in the back. I colored it to read I at it again color it to whatever color just to cut this nice arch from it. I use paff difference and as with throwing stars and with the little bomb now I have this comic book like effect which is red and it indicates that the sword is moving. I have to cut off the bottom of it. I imagine them together with control plus or I could go Poth Union I draw an object over these two whooshes. I don't know what there are shoes. And they go to Poth difference. So I cut off the bottom of it. So now if you look at the three icons they are getting pretty similar My only. Yeah blades could cut like this. My only problem is that the sword is a bit too small. I like the size of the stars and I like the size of the bomb the bomb in this size looks like a screaming face. That's great. What if I make this one bigger than this. It looks prominent because it's nice but the sword is very tiny. And if I make it bigger you see it's not much visible. So what I do now I select the handle and I make good white experimented if I size it smaller still good. But then the two bodies cross-eyed don't I have to make black. Sorry if you are a Japanese ninja geek and I pronounce it badly. No I just grew up in a group of my other icons as well. The Star and the little bomb and I pull a guide just simply clicking there and they pull another one so they are on the same line and they are more or less the same size. I know they are the same size because the circles are the same. I just wanted that different little objects are not hanging out too much and visually they are on the same line but they seem good to me. I used the red here and it's coming back and I'm very satisfied with that. And I didn't use the blue I didn't need it after all. I think it's quite good and violent enough that I use these random colored objects and colored them red and black and white actually black and red on a strong white background. I have a color sets and I have an icon said because of this. So if you look at them separately not inside the game you can still see that this is a ninja. I can set and this is what we are aiming for. This is the result. What you are aiming for with every game you make. So please if you create an icon set up we could do a lot in this coming lectures. But if you create an icon for your own game please send it to me because I want to see it. I want to know how you solve it. How do you create different icons for your games.