3.3 Create Alternative Buttons
It’s time to apply your newfound skills from previous lessons and create new shapes for your buttons. We will also discuss different use cases for your UI elements, including health bars and menu buttons.
1.Introduction1 lesson, 00:32
2.Create the Wooden Textures4 lessons, 38:10
3.Buttons3 lessons, 34:37
4.Conclusion1 lesson, 01:14
3.3 Create Alternative Buttons
Hi everyone, and welcome back to the Game UI course. In this lesson, we'll go through how to create alternative buttons for your UI using techniques seen in previous lessons of the course. Let's begin by creating a long horizontal button, or a long horizontal wooden frame that you can use for things like a stamina or health bar for video games. So starting with the Shapes tool here, let's go with a rounded rectangle and let's just draw out a wooden frame Like so. So you can make it as long or as short as you want. And then we are going to choose the within color for this. Let's go with the dark base color first. Then we are just going to duplicate that, and exactly as what we did before. Just add some depth to it. So you can see now I'm just quickly adding some depth like so. Oops, using the same techniques as what we had previously. It's just using the cutting technique here to create some highlights So I want this one to be at the bottom sent back. So now let's have a top highlight here. And now we'll want to bring this down. And cut that as well. One, two. And then choose a suitable colour. In fact, let's have this one as that color. Then the one underneath as the top color, like so. In fact, let's bring this up so that we can use our color palettes without scrolling up and down the screen so much. So now we've got our base horizontal shape for our button. Let's create the inside of this button as well. So just, Using this as our base, we're going to create a stroke for this. So let's create a stroke and make sure that this stroke is in the inside. And this will act as the thickness of our button. So let's keep it about 12 and put it back in like so. And then just send it backwards a few times. And then the, in fact, where is it gone? Right, so inside here we'll want to have a darker color, so let's make that into that. And then we can see how the frame of a wooden board X. So now we can send this back a few times. So let's make this into a shape, so I'm going to expand the appearance. That'll make it easier to select. Send it backwards once, and then send it backwards again. So now we've got a shape inside here as well. We'll make sure this is all centralized in our group. So now we've got the frame of our wooden health bar or button. Let's begin by creating the actual button for our long shape. So let's ungroup this. I'm going to actually need the shape underneath here. So I'm going to select the frame and the inside of this button. And we're going to use the Cutting tool to delete the top bit. And then we're left with just the bottom here. So I'm just gonna ungroup so we can get rid of all the artifacts. So we've got some artifacts here and some over here as well. Now with this shape, let's create the button now, the same way that we did with this, you could follow a similar technique of what we did with the round button. But I'm just going to quickly show you another way that we can do it without creating the top bubble. So let's choose a suitable color. So I'm just going to choose this blue gradient here that I've created. And then, what I'm going to do is I'm going to quickly create a quick highlight at the top here. So move this down. Oops. In fact let's do it this way. Select one, two and in fact this has to be at the top. So, Arrange > Bring to Front. Select the top shape, select the bottom shape, minus the front. That's still not working, let's do this again. So duplicate this and duplicate it twice. We need to move it down a few times, and now mine's the front. So now we're left with the top highlight here. And I'm going to make this into a linear gradient, but I'm going to want it to be about 90 degrees. Then I'm going to adjust the gradient so that we've got, in fact, let's see what it looks. I think I preferred what it was originally. Let's see. And 90 degrees. And, in fact, no, let's turn it into minus 90. There we go. So now we've got the white elements at the top to give us a highlight And I'm going to create another half here. So just. Select this highlight, make it into a gradient of 90 degrees, minus 90 degrees. And now what I'm going to do is I'm going to delete the first half of this. And let's bring the gradient down and see what that looks like. Yeah, so we can have a nice, a sharper edge here like so. Right, and then the next thing we're going to do is create the lighting effect. So I'm just going to do a quick eclipse tour. Choose our screen gradient, so this is a radial gradient. Make it screen a 38%, and then just put that on top of our button, like so. So this could be a button or a magic bar as anything that you want. Making sure that's all centralized. And now for the final touches, we're just going to add some of those quick little bubble effects. So I'm going to make the fill-in to white. Let's zoom in here quickly. I'm just going to quickly draw this out using our Pen tool. So, one corner here. And then we're just going to duplicate that. Transform > Reflect, Vertical. I'm going to take this to the other corner. Like so. And you can make these into a low transparency as well. Let's make it 75 and make it a screen, too. And now for the next, for the final touches here, we are just going to add those quick little small bubbles. So one here, And the smaller one. Like so. So I'll add one over here. And it can be the same gradient as that, and we can add one. Whoops. Let's duplicate this and add one over here. And there you go. What we need to do now is select it all, group it together, and lay it on top of our wooden frame to create a button, or a health bar, or magic bar. Whatever you prefer to use it for. So this is one way that we could use the same techniques of what we've learned over the past few lessons to create something completely different. So that's it for this lesson. In the next lesson, we'll go through what we've learned over the course of the project and summarize on all the techniques we've used to create the UI. Well, those I discuss different ways and techniques in this course can be used to create different elements. See you all there.