And, in fact, no, let's turn it into minus 90. I think I preferred what it was originally. Then I'm going to adjust the gradient so that we've got, in fact, let's see what it looks. And I'm going to make this into a linear gradient, but I'm going to want it to be about 90 degrees. So now we're left with the top highlight here. We need to move it down a few times, and now mine's the front. So duplicate this and duplicate it twice. That's still not working, let's do this again. Select the top shape, select the bottom shape, minus the front. Select one, two and in fact this has to be at the top. And then, what I'm going to do is I'm going to quickly create a quick highlight at the top here. So I'm just going to choose this blue gradient here that I've created. But I'm just going to quickly show you another way that we can do it without creating the top bubble. 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. So we've got some artifacts here and some over here as well. So I'm just gonna ungroup so we can get rid of all the artifacts. ![]() And then we're left with just the bottom here. And we're going to use the Cutting tool to delete the top bit. So I'm going to select the frame and the inside of this button. I'm going to actually need the shape underneath here. Let's begin by creating the actual button for our long shape. So now we've got the frame of our wooden health bar or button. We'll make sure this is all centralized in our group. So now we've got a shape inside here as well. Send it backwards once, and then send it backwards again. So let's make this into a shape, so I'm going to expand the appearance. So now we can send this back a few times. And then we can see how the frame of a wooden board X. 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 just send it backwards a few times. So let's keep it about 12 and put it back in like so. And this will act as the thickness of our button. So let's create a stroke and make sure that this stroke is in the inside. So just, Using this as our base, we're going to create a stroke for this. Let's create the inside of this button as well. So now we've got our base horizontal shape for our button. ![]() In fact, let's bring this up so that we can use our color palettes without scrolling up and down the screen so much. Then the one underneath as the top color, like so. In fact, let's have this one as that color. It's just using the cutting technique here to create some highlights So I want this one to be at the bottom sent back. Oops, using the same techniques as what we had previously. ![]() So you can see now I'm just quickly adding some depth like so. Then we are just going to duplicate that, and exactly as what we did before. And then we are going to choose the within color for this. So you can make it as long or as short as you want. 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. 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. In this lesson, we'll go through how to create alternative buttons for your UI using techniques seen in previous lessons of the course. Hi everyone, and welcome back to the Game UI course.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |