All right, this is the process video. So I'm gonna go through and start styling my website. So first of all, the bring your laptop, lay here, the logo. Okay. I'm gonna pick a kind of a, if you've got a logo,  obviously you'll be damning in the company logo. And what I'm gonna do is I'm gonna have this guy sitting  next to this column here.

Now if you are moving things around  and it tries to snap to too many things, it's snap  to the um guide there. Okay? You can use your keyboard lift  and right arrow keys on your keyboard just  to tap things along and get them in the right place. I'm gonna pick a font. So with the layer selected grip,  the type tool, and I'm gonna use my re roboto  and I'm gonna use the slab one. I'll use the bold version for this  in terms of the font size.

Ah, there's no guaranteed font size. I'm gonna use this one here,  tap it down a little bit using my arrow keys. And now I'm gonna look at adding my navigation. Okay. Panel, which is over here. So I'm gonna grab the type tool.

I'm gonna get it so it spans, I've got a lot of room  to work with, so I'm gonna get it. So it spans that column all the way long. How many is that? About nine columns. And inside of here I'm gonna type  in, I'm gonna zoom in a little bit. I'm gonna type in  home F like me.

You can't see your text and it's disappeared. It's 'cause the font's actually really big. It's, remember the font from the last thing we were doing. So I expanded out. Here. Here, there he is there, okay?

But if he is small and you can't see him,  'cause the text box is too small, just expand the box out,  select all the text and make it appropriate size. So I'm gonna put mine down to 12 actually maybe 16  pixels okay for the moment. And then I can move it back up again  so I can see it for the text here. And these capitals. And this first one  here is going to be services. Services.

Then I'm gonna put a space between them. I'm gonna put two tabs in between mine. I'm going use, next one's gonna be  portfolio two tabs. Now in terms of, should I be using tabs or spaces  or should they be in separate boxes? It really doesn't matter because this is just a visual. Okay?

When it comes to web design, they'll have  to be separated properly, but for the moment it's up to use  what you use to space them out. So maybe let's go 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. So I'm gonna copy that, select it  or copy it so I know that the spacing here is exactly 10. Then I'm gonna use team, put the same spacing in  and then we're gonna have a contact us. Great. Um,  what I also wanna do is I'm gonna select all this text  and I'm gonna make it up the top here to be left aligned.

So it's always left aligned along that column grid there. Font size is fine,  but the font style, I'm gonna switch back  to our plain old roboto. So I'm gonna select this text here. Type in Roboto  and I'm just gonna use Medium for the moment. Okay? I'm gonna turn my grids off using command Semicolon.

Okay, to get a sense of it, I'm gonna zoom out a little bit. I don't like the text. I'm gonna pick instead of medium,  I'm gonna pick the light version. Okay, I like that. Nicer. Now next thing we're gonna look at,  we're gonna put a big headline above this piece  of lower nips in here.

So I'm gonna find the lower nips sum in my  menu, drag it down. So I'm gonna use my type tool. I'm gonna draw out a fixed width box  'cause I want it to sit inside of here. Even when you're dragging out text boxes,  you should use the grids to line things up, okay? Using these columns, just  that it makes it a lot easier when  it comes to development time. This one here is gonna be called, what is this one?

I'm gonna make sure it's centered and this one's gonna be,  lets make this awesome. Wow. Okay, select in the text, make it a nice size. When I say nice appropriate for this one,  a nice big super graphic. And I'm gonna pick roboto and I'll use the slab. I'll use thin for this one here.

In terms of color, I'm going to use one  of my swatches that I used. Okay, down the bottom here. I'm gonna use this color here. Now to do it with it selected, I've clicked on swatch here  and it switched the color out. Great. I'm gonna turn my guides off.

I'm gonna move that down. Okay, this text here,  I'd like to be centered as well. So I'm gonna grab my type tool, click inside of it, okay? And I'm gonna make you centered. And if you're finding problems with uh, this hyphenation,  what you can do is you can click this icon here,  which will bring out your character panel. You can switch to paragraph and turn hyphenate off.

If you are having trouble with  Hyphenation, I hate Hyphenation. Alright, pop him back in. Now three layers. Let's just say for this bit of text,  it's actually only gonna be three lines, okay? I'm gonna try and get the copywriter to work for three lines  for this one and I'm gonna move him up a little bit. Grab, let's make it down.

Awesome. Actually, one little bit I've forgotten is I'm gonna add a  nice big call to action button here. So I'm gonna grab my type tool and I'm gonna click once  and this one's gonna be called the more,  more even half a plus. What text am I gonna pick? I'm gonna pick,  I'm gonna make it a little smaller, maybe about 30. I'm gonna make it a lot heavier, bold.

I'm gonna make it white by selecting up here  and I'm gonna grab my rectangle tool. It's gonna be above this guy,  but we can change the layers in a second. What I wanna do is turn my guides on. So come on colon. And I'm gonna get this one to be snap between these two. Okay?

These two center ones colors are gonna be,  I'm gonna pick my green and I wanna make sure more is  above that rectangle. I'm gonna give this rectangle the name and call this one bt. So I know it's a button and this one's gonna be  the more button. Great. I'm gonna grab my more text,  grab my move tool and move it around. Remember, if you can't get it in the line,  just use your cursor to move it around.

Great. Everything needs to be moved up a little bit. Okay? To do that, I can hold down my command key  and I've got more select already. Hold down command key, click button more. I've got, let's make this awesome.

And Lauren Epsom. So those are the four parts I wanna move  and I'm gonna click and drag it up. Okay? Remember if you're unsure about if it  Snaps to the wrong points, maybe you can just use your  arrow key just to tap it up and tap it down. Turn my guides off. Yeah, we're almost there.

That moore's a bit big. So go back to my Moore layer,  grab my type tool, turn it down. 2 24. Yeah, nice. Move it up a tad. There we go.