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

2.4 Create Alternative Shapes

In this lesson you will learn how to apply the skills from the previous lessons to create new shapes for your game UI assets. These will include different shapes you can use for your buttons and other elements.

2.4 Create Alternative Shapes

Hi everyone, and welcome back to the game UI course. In this lesson, we're going to have a quick overview of the skills that we learned so far. And I'll show you how to reuse them for other parts of your UI. So the next thing that we'll create is the shape for our wooden buttons. We're gonna follow the same process as what we did before, and we'll start by laying out the basic shape for our buttons. So we're just going to create a round button. So selecting the ellipse tool here, you're just gonna click and drag. Now, to create a perfect circle, just hold Shift, click and drag like so. And then, following the same process as before, we're going to lay one circle over the other. Each one becoming lighter in color. Now this last one, I'm just going to shrink down a little bit. So we've got that nice sort of layering effect. Make it slightly bigger. And then bring it up, like so. So those are our basic shapes for our buttons. And you can also reshape the top button like what we did here for our wooden board. And add in some cuts and grooves here. So we can quickly do that. So if I quickly choose another color so you can see. Just going to add a few cuts and grooves into our wooden board. Make sure we're working on the same layer. So we've got one cut here. Select both of those shapes, and then hit this button here, minus front, to do that. And we'll also create a few more grooves here. So one here, and let's create another one here. So we've got three grooves, like so. Oops, so make sure that the top shape is on top. Now you've got three grooves. The next thing that we're going to want to do is add some wooden grains to our button. So just to recap, let's take the wooden grains from our board. Oops, so I just want to Ungroup that and the just select the wooden grains, like so. So these are our dark grains here. And then I'm going to select some light grains. So some of these light grains are ungrouped, so let's try and select them. Copy some light grains. And let's layer the dark grains on top. I'm not gonna worry about the circle that we did at the bottom. So let's bring that up a little bit and then just stretch this out. And I want to move this one further in so that we're covering the whole shape. And then working with just our dark grains at the moment, we're going to create a rectangle on either side. And then unite our grains with them. So let's highlight that, unite, highlight this, unite. And then grab our circle at the bottom there, Ctrl+C, Ctrl+Shift+V and then clicking on the intersect button here. All we have to do from there is just select the color once again. And we're gonna do the same thing with our light grains. So let's ungroup some of these. Let's ungroup some of these because they're all the way at the end there. So let's take these away for now. Just work on these light grains. Going to do exactly the same thing. So creating a rectangle. Unite. Pasting our circle in, and then cutting them out. And then just select the right color to put that in. Now let's do that for the bottom grains, So just move something here, Just these three, unite all of them, like so. And then cutting them out by pressing the intersect button. And then choosing the correct color afterwards. So that's our wooden button. And then what's the next step is to create some highlights. Now, remember how we did the highlights? We selected our bottom shape again. Ctrl-shift-V twice, so that we've got two duplicates. I'm going to move the top one down just a little bit, like so. Selecting both of those shapes, we're going to minus the front. And then selecting our chosen highlight color, which is that one, I believe. And then we're going to do the same thing again, this time with a new shape, for a slightly smaller highlight. Let's see if we did that correctly, see if we got one shape there. All right, so let's do that again. So Ctrl+C to copy, Ctrl+Shift+V twice. And moving the first one down just a tiny bit. Then selecting the one underneath. We're going to minus front, Or intersect, nope. Select two intersecting parts, I understand why. It's because we've got, if you see here, we've got several shapes. So what we're going to do is first, we're going to delete some of these shapes. So let's ungroup. And all I am going to do is edit this first shape here, so that it looks correct. And then delete these two shapes here. Now we can do the top highlight. So let's select the first shape. Ctrl+C and then Ctrl+V twice. Hit the down button a couple of times. And now minus front. I'm going to do the same with this one. Ctrl+V a couple of times, select the two shapes, minus front. And now select these two. And now we're going to select the top highlight, like so. So now that we've got our top highlight, we want to create the glow and the gradients. So to do that, let's create our ellipse tool, quick circle like that. Select our bottom circle again, paste it on top. And let's intersect. Then we are going to select our gradient. And using our gradient tool, smooth our highlight to where we want it. And just adjust our gradient to the way that we want it, like so. Then once we've done that, we're going to want to create these little highlights here on the side. So let's copy that. Make this one bigger. Keep that one small. Put these on top. And again, cutting off the excess part of our highlight bubble. So there you have it. We've now got one wooden plank over here, which we can use for our UI. And one wooden button that we can use for our buttons. So that's it for this lesson. In the next chapter, we'll have a look at how we can create the icons for our button elements. And we'll also discuss the different ways that we can use them. See you there.

Back to the top