Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:9Length:1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Create a Round Button

In this lesson you will learn how to create the texture style for a round button. We will also go through how to create different colours for your button.

3.2 Create a Round Button

Hi everyone, and welcome back to the Game UI course. In this lesson, we're going to go into how we can create some colored buttons for our UI. So in the last lesson, we created these two iconic buttons. Now we're going to take the same button here. So let's duplicate that, and create something which is a little bit more generic, a little bit more universally useful, okay? So let's move these out of the way. And the way that we're going to do this, first of all, is to create a base for our button, just so that we can continue using this wooden theme throughout. So let's create that by duplicating this circle here. I'm just going to do the same thing as what we did before, so I'm going to put this into the middle like so, okay. And now I'm going to duplicate this, move this up a few notches, and make the bottom one into a highlight like so. And then we're going to do the same thing again with the top. And we're gonna make that into the shadow. So exactly the same process as what we did with the icons, except this time, it's just a circle. Whoops, sorry, filled in the wrong one there. So lets select the right shape, so lets select the top one. Fill it in, and there we go. We've got some shadow, we've got some highlights, and now that's ready. Okay, let's move the whole thing down a little bit. So I'm going to select all of our circles here, group them up, and then, just moved them down so they're sorta centralized. Okay, maybe we can make it a little bit smaller as well. So let's line that up, oops. Line that this way, there we go. All right, so now, the first thing that I'm going to do is I'm going to create a little stylized bubble that we can put our color into. So the first thing that we're going to do is we're going to create a circle on top of this. So we can actually reuse one of these circles here. So, let's go ahead and select. Let's Ungroup this and select one of the circles. Okay, and I've got a new color palette here that we can use for the bubble. So let's select this color here. So this color is actually the same color but with a bit of a transparency. So we've got a 20% transparency on this just to make it a little bit see through, like so. And I'm going to also create a border around this as well. So let's go ahead and select a stroke for this. So let's select this and select a stroke. And then the stroke will be, say, about, in fact, we'll need to create a different shape for this. Because we'll also have the opacity on the stroke too, so we don't want that. So let's remove the stroke on this. Ctrl+C, Ctrl+Shift+V to duplicate it, and now I'm going to bring the opacity up 100%, convert that into a stroke, and then make the stroke about 2 points. Make sure that it's all centralized. So, now we've got the base of our bubble. The next thing we're going to do is we're going to put the stylistic elements of the bubble in here as well. So, let's go ahead and use our pen tool for this. Zoom in here a little bit and create some, Some bubble highlights like that. So this is gonna be our first bubble highlight. And for the next bubble highlight, I'm gonna make it a bit longer. So let's do it this way, I'm going to use the cutting technique. Going over here, and oops, I cut the wrong one. But never mind, we can always rotate this one around like that. Like so, just resize it as you see fit. And for these two, we're going to use one of the gradients that I created. So let's go a head and look at these gradients. So we've got one of them here, and one of them here. I wanna to use this second one here for the highlights, so let's select that. And bring those gradients in, and we are going to change the layer properties of these to Screen. And make sure that Screens are in the drop down menu, change that to Screen. Now I am going to edit the gradient here. Just find the center point, So that it will adjust it to look so that we've got some back borders around as well. Like so, all right. Let's see if we can do that. The reason why it's not doing it is because we've set it to Linear. Let's set it to Radial, that's better. Now bring that in here. And now we're going to do the same thing with the other one. So let's set this to Radial as well, and there we go. So both of these now should be set to Screen, good. And now we're going to add another highlight. So let's go ahead and create a highlight here. Just going to turn it around. And pop this on top. Just fit that over that highlight here. And I'm going to use this radial highlight here. Now this one is set to Screen, but its opacity is about 36. Like that, and now we're going to add two more highlights. So these are the little bubble effects that you see. One, and a smaller one, just move that here. I'm just going to turn this around and put this over here and this over here. And now we have our bubble, so we just place this on top, and it should look like that. So now that we've got our bubble here. Now what you can do is you can keep this transparent. And you can actually add items inside here and it should show up underneath the bubble because it's transparent. So what we're going to do with this one is we're going to create a color that we can put underneath the bubble, so we can have two. We can have the bubble and the color underneath. So let's go ahead and select the circle. And with this one, I'm going to make an orange button. So with this, you can see we've got an orange gradient. I'm going to just move the gradient up a little bit, like so. And now, oops. And now, we're going to put a highlight on top. So this highlight is a gradient, but it is set to Screen. Okay, and all you have to do with this one is put this on top. But you can see here that it's adding this sort of glow effect around, which is quite nice. And then, for the next layer, we're going to add another layer here, but this one's going to be set to Multiply. So let's put that one in, change the gradient here, like this. Oops, that's a bit too much. Let's undo that. And this back to the center. And then make sure that this is set to Multiply. And that should add some shadows to the button. So make sure this is all centralized. And you can change the color of the gradients to change the color of the button. So we're just going to have an orange button here. Put this underneath. And then, put your bubble on top to give it a little bit of depth. So this bubble is not actually on top, so we want to arrange this. Bring it to front, and now, we have our button. So that's it for this lesson. In the next lesson, we'll go through how we can use the same techniques that we used in this video to create other elements of IUI to expand our sets. See you all there.

Back to the top