2.1 Blocking Out the Shapes
In this lesson you will learn how to create the basic shapes for our wooden textures. You will also be introduced to all the main tools that we will use for the rest of the course.
1.Introduction1 lesson, 00:32
2.Create the Wooden Textures4 lessons, 38:10
3.Buttons3 lessons, 34:37
4.Conclusion1 lesson, 01:14
2.1 Blocking Out the Shapes
Hi everyone, and welcome back to the Game UI course. In this lesson, we'll take you through how to create the basic shapes for our wooden textures. And I'll also give you a quick overview on most of the main tools that we'll be using in Adobe Illustrator. So let's begin by creating our stylized wooden texture. The first thing I like to do before creating anything like this is to choose a suitable color palette. So if I move my screen over here, you'll see I've created a color palette using a Rectangular tool here. And you'll see I've got a selection of darker colors for the shadows and lighter colors for the highlights. I have also got some gradients here, which I can use for some lighting effects later down the road as well. So now that we have got a mixture of colors to choose from for our color palettes, I'll also show you some of the tools that we'll be using. So most of the tools that we'll use in Adobe Illustrator will be over on the left-hand side here. For shape creation, we'll mainly be using just a few of them. So the Shapes Tool, the Pen Tool, the Selection Tool, and also the Eyedropper Tool. There are also a few tools here on the right-hand side of the screen that I'll show you how to use as we go along. So now let's concentrate on creating our wooden board. So to do this, we are just going to head over to the Rectangular Tool here. And we're just going to draw out a rough rectangle for the shape of our wooden board. Then making sure that this rectangle is selected, I'm going to go over to the Eyedropper tool. And just click a color on our color palette to add the color to our board. Now I'm just going to duplicate this. Now before I duplicate this, notice that there are these four white circles in the corner of our rectangle. Now, what we can do with these is if we move over to the circles here with our mouse and click and drag on them. We can curve the corners out like so, which is very useful. Now there is also another way to create a rounded rectangle. So we can use the Rounded Rectangle Tool here. But I thought it would be quite useful for us to know how to create these curves using this tool here as well. Now let's duplicate this rectangle, so Ctrl+C and the Ctrl+V. And I am just going to select a lighter brown color and move this over the top of our previous rectangle just to create some depth, like so. And then I'm also going to paste the rectangle again, and now select a brighter color. Now, using the selection tool here, I'm going to resize this rectangle to the size that I want. Just roughly, because what I'm going to do now is I'm just going to reshape this rectangle using the Pencil and the Selection Tool. So, making sure you've got the white direct Selection Tool selected. I'm going to click on this rectangle, click on anchor points and then just delete. So, deleting these anchor points here like so. And I'm just going to get the Pen Tool and then using the Pen Tool, just click and just draw out the rectangle shape that I want. So you can click and drag to create a curved point. And now you can see I've created these handle points here that I can use to edit this shape later on. Let's just click and drag to create that. Click and drag, and then click and drag, like so. And now what I'm going to do is using the Live Selection Tool, just zoom in here a little bit. And just edit these points, so you can edit the anchor point by holding onto the anchor point and moving it along like this. Or you can edit the handle point, so you can make the handle longer or shorter or rotate it like so. I was just going to do this. Just going to make that less exaggerated and bring this further in. Just wanna make this top shape a little bit more organic. Now, what I want to do is using this circle here I want to curve this out. Now notice, if I zoom out, that this will affect the other corners on the left as well. Now if I just want this to affect that anchor here, make sure that you just select that anchor. Those two points will go away, and now I can just curve it as much as I want without that affecting over here. Now the next thing I wanna show you is I wanted to show you selecting, how to select these anchor points individually. Now, if I want to move the top of this wooden board without moving the anchor points at the bottom. All I have to do is select that anchor point, hold Shift, and select the rest of the anchor points at the top. And then choose an anchor point, click and drag. So now I can move these anchor points without it affecting the anchor points at the bottom. So just wanna move these anchor points to the top here, like so. And I'm just going to continue editing this board, Just like so, just to make it a little bit more organic looking. Curve this corner a bit more here, like so. And then once you're happy with this shape, we'll go through how to add these grooves. So you'll notice in a lot of wooden boards, they have holes in them. So to do this, let's separate these shapes first of all. So I'm going to add some grooves to the top two boards. So let's move these top two boards away. And using the Pen Tool again, I'm just going to use a white color. So you can see what I am doing, so I am just going to create the grooves here. like so. So I am just going to have one here, have a small one here. And now using the black Selection Tool, I am going to select our first groove, and then the board at the bottom. Then we're just going to go over to path finder. And then click on Minus Fronts, and what that will do is it will delete the front shape from the bottom shape. And then we'll do the same here, Minus Front. And I'm just going to move this back down into place, so I can see what this is doing. Now you can see that the top shape has now gone to the bottom. So to fix that, all we have to do here is click on my top shape, Arrange>Send to Back. And now we can continue creating our grooves. So getting the Pen Tool, now I want to make this groove slightly smaller than the one at the back. So I'm just going to do this. And I'm going to do this, In fact, oops! I've accidentally joined the two shapes together. So make sure you press P again, so that you can create a new shape. In fact, let's make this one bigger. I wanna make this one bigger as well. Like so, now again the same thing as what we did before. Select the top shape and the bottom shape Minus Front the top shape and the bottom shape Minus Fronts. And then don't worry if you're not too happy with the shapes that you've created. You can easily edit them again using the Selection Tools, like so. Now I'm just going to bring these shapes back down. And, there you have it, so that's how we create the basic shapes for our wooden boards. In the next lesson, we'll go through how to create some details for the wood. Such as the grooves and the grains of the wood, as well as some highlighting effects. See you all there.