7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Create the Icons

In this lesson you will learn how to create the icons for your buttons. Specifically, we will design the settings and volume icons.

3.1 Create the Icons

Hi everyone and welcome back to the Game UI Course. In this lesson we're going to go through how to create some buttons for our UI and how to create the icons for them. So to begin with let's start by selecting our button. So this is the button that we're going to use, and we're going to place some icons on top of this. So just as a starting point I'm going to copy the whole thing and I'm going to paste it over here. And we're just going to work separately. I'm just going to use this as a rough size guide for our icon. So the first icon that I'm going to create is the Settings icon. And we're gonna do this by first of all selecting the Ellipse Tool. So let's start by drawing out a perfect circle. Again holding Shift and then clicking and drag to bring out the circle. And then, I'm going to change this fill into a stroke. So I'm going to bring up the stroke points up a few notches. So let's see that should be okay, let's bring it up a little bit more. We can always change the stroke size later on. And then I'm going to use the pen tool. Let's just zoom in here a little bit. I'm going to create a little notch here for our settings and then I'm going to duplicate this. So that's Ctrl+C, Ctrl+Shift+V and transform reflect on the vertical axis. Just gonna move it over here. And then if you wanted to, you can use the pen tool and then just connect the two anchor points like so. All right, now to ensure that this is all in line with everything with each other, let's select both of these, go to the aligned tool. I'm just going to do a horizontal alignment, just to make sure that they are all in the center. And now for this part, I'm gonna make it into a fill like that. So just bring it up a little bit. And then make sure that it's all in line with each other again. And then for this stroke here, starts to get the feeling that it's a little bit to be thin so what you can do here is, you can actually go to the stroke panel and you've got all these stroke options here. And I want to bring my stroke inside the circle like so. Just to bring out this element here a little bit more. Right, so now we've got our first piece. I'm going to group everything together. And then I'm going to duplicate this as well. So Ctrl+C, Ctrl+Shift+V. And now for the top shape I'm going to reflect this time on the horizontal axis like so. So now you've got two parts, one bottom and one top. We're going to try and align the two together like this, Making sure that everything is centered. I'm going to group And now what you're going to have to do from here is copy, control-shift V, and now I'm going to transform, rotate by 90 degrees. Now you're starting to see that your cog is starting to take shape Let's do the same thing again so group everything, control C, control shift V. Now I'm going to transform and rotate, let's say by about 30 degrees. Not quite. Let's try 45 degrees. There we go. So now we have our cog shape. We can group all these together. And what I like to do from here, if we zoom out a little bit, let's see if it fits over our button. It fits there quite nicely. Let's go ahead to object, expand appearance. And then from here we're going to go to our path finder tool, and unite. So that sort of makes everything into one nice solid shape. So that's our cog for our settings. Now we're going to make a volume icon. So the volume icon is made in pretty much a similar way. We're gonna start off with a rectangle tool. So size this up. So let's do a small little rectangle. And then another, in fact let's use the pen tool for this, so let's make this part of the micro phone here like saw, just the first half In fact let's bring this over, Now let's bring the anchor points over like that. All right, so now we've got the first half, group that, Ctrl+C and then Ctrl+Shift+V. And then we're going to reflect the first layer. And move it into position, like that. So, now that we've got a microphone let's unite the whole object. I'm just going to pull these two anchor points out little bit, like that. And now we're going to make the sound waves. So, the way that I'm going to create the sound waves is by using the ellipse tool. I'm going to make that into a stroke. Let's say about ten points. And I'm going to make another circle, so let's duplicate the circle and then bring it up a little bit. So we're sizing it up and I'm going to use the alignment tool, make sure they're both aligned with each other. So both center points are exactly the same now. And now I'm going to use the direct selection tool to delete half of the circle, so I'm clicking on the anchor point, delete, clicking on this anchor point, delete. There we have our sound waves. Just sizing this up so that it fits with our icon. And so I'm gonna group these together and make sure that they're aligned in the center, like so. All right, so now that we've got two icons In fact let me just expand these first. Right, so we've got sound icon and our settings icon. What I'm going to do now is we could place these icons on top of our person and that would look fine. However, I'm going to make a little bit of changes, a little bit of adjustments to these icons to make them look like they've been embedded into the wooden icon here. So let's zoom out so that we can go to our palate again. I'm just going to move our palate close to where our working area is. I'm going to duplicate these two icons, so we can keep our Y icons just in case we want to use the Y icons in the future. And let's go ahead and change the color of these icons to this color here. And what I'm going to do from here is if we place one of these, in fact, let's make both buttons. So we're going to duplicate this. Line these both up, whoops. So let's make sure that this is group. Now lined them up. So we got our settings and our sound icon. Yeah like so make sure that they're in the middle. All right. So, now we're going to duplicate the icons, moving them up just a little bit, by maybe 2 pixels and then by selecting the bottom shape, let's try and select the bottom shape... Let's choose a lighter color, so something like that. Not quite. Let's use an even lighter color than that. It will sort of give you that beveled effect for our icons. So we can also do the same for the inside of the icons as well. Let's bring this button color a little bit, here you go. Select the two icons again, Ctrl C then Ctrl Shift V. Then take them down once or twice and then Ctrl Shift V again. What we are going to do is we are going to select both of those icons that we just duplicated.I am going to intersect and then from there we want to select the darkest color that we have. Let's make it so that this color isn't so dark. So we'll come out, there we go. So now you can see here, we've got some shadow and some highlights. That sort of just brings out a little bit more depth to our button. So we'll do the same here. Now, with this one we may need to ungroup the whole thing and do it separately. So lets do that, and hit Enter set. So that's why we had to un-group, so we got all these shapes here. Which means we got too many shapes, we only need two, so lets do that there. And then choose the dark color, and then these will be the lighter color, over there like so. Now, we've got that shadow, and we'll do the same here. Ungroup. So, one, two, oops. So the second batch will have to be ungrouped as well. One, two. Hit that button. And now this will be that color. Then the same here, one, two. And then the main color will be the light brown. Like that, whoops, let's zoom out, and there we go. There are two buttons, and you can do the same for other icons as well. So these are just examples for setting the sound. You can also have play, pause, a player icon, anything that you can think of but the overall process is exactly the same. So that's it for this lesson. In the next lesson, we'll learn how to create colored buttons for a UI. See you all there.

Back to the top