Adding structure to your site with the vector shapes

In this tutorial we’re going to mock-up some of the big kind of structured areas using the rectangle tool. Now the rectangle tool, for the people that are web designers, know that it creates, essentially, divtags that you can pull the style and size and colours and things from later on. So you’ve got to make sure you’re using this rectangle tool here. If you can’t find the rectangle tool, click, hold and drag it down and you might find that the last tool you were using , the ellipse tool, you might have to hold it down and grab the rectangle tool.

What we’re going to do is, if you’re following along using my template, there’s an option here that says delete me – I am actually going to delete that, because it gets rid of these little green boxes. Those are my little advertIsing bits there. So I’m going to bin him. I’m going to zoom a little bit, command plus, and I’m going to zoom in so I can see the edges of my desktop view and what I’m going to do is, I’m going to start creating.

So my first box is going to be my big kind of main hero image. I’m going to use this purple here, so click that, or pick it from your swatches panel. And I’m going to click, hold and drag and what you’ll notice is that I can drag over the edges, its no problem, and it wraps to the edges there. Now if yours has gone the wrong colour like mine has it’s remembered the last colour even thought my foreground colour says be this lovely new BYOL purple. What you can do is Just click on it again and it will try and change or I go to undo - I can click up here and pick the colour from my swatches panel.

Great. And so that’s going to be my klnd of hero graphic image. What I’m going to do now is I’m going to add my navbar so I’m going to use my rectangle tool again and I’m going to click hold and drag over the top here and I’m guessing a little bit, ok? So this is going to be my navigation bar. What I want to do is fill it with black. Now black is somewhere in the top of your swatches here or you can use it from up here. I’ll pick this as my foreground colour. Great.

So that’s going to be my navigation panel. What we’re going to do, is in the end we’re going to have an image underneath the navigation that we can still see. So what we’re going to do is we’re going to have the navbar selected. The way I know its selected is I can see it here in my layers panel. What I’m going to do is double click the word rectangle and call this one navbar and I’ll call this one here hero graphic. Now on the navbar here I’ve got this one called opacity. Now if I lower the opacity a little bit - ok? - maybe down to about 80%. What you’ll notice is that if I lower it right down its actually quite transparent over the top of the background. Now this is up to you and how see-through you want it be and we’ll change it, probably later on, when we get our image underneath. But for the moment that’s how you change the opacity of any of your rectangles.

Next thing I’m going to do is I’m going to shuffle across here and for this tutorial we’re going to skip tablet just so the tutorials not ten hours long. I’m going to do mobile version, ok? So, on mobile, how do I know I’m on mobile? You can see in here in my layers panel, it’s the extra small version, I’m going to go into this and delete where my name and my website is and delete that, and don’t need that. What we’re going to do though, is we’re going to zoom out, so I’m going to close that, pop it in, zoom out a little bit, and what I want to do is take these rectangles and move them across. So I’m going to switch to my move tool. I’m going to use my trick we learned in the earlier video by holding command down, I’m going to click the rectangle, which is my navbar and I’m going to drag it across holding the alt key and what the alt key, remember, dragging that will do, is it will make a copy as it moves across. And to get it in the right function, the right bit, you might have to give it a little wiggle, but there, it looks like its perfectly lined up. Great.

I’m going to move this one across as well, so this purple one here, holding command key down – okay - and its selected the herographic – I’m going to hold the alt key and drag it across . I’m going to move it so it lines up perfectly. Great. Got a slight problem where the hero graphic is above the navbar so all we need to do is to change the order of this is click hold and drag the hero underneath the nav. Okay, so I’ve got my desktop and my mobile view with my two rectangles. And these rectangles are going to be used as the structure or the divtags for my mobile website.

Now I love to share so I made a few of these videos free. Of course, though I’d love for you to go on and do my full course of over fifty videos. There’s a discount code in the description. Please like and subscribe and Haere Ra good youtube people. Now I’m saluting and waving but you can’t see that can you