Hey there, in this video we're gonna bring in our lovely,  sexy, uh, vector logo  and we will drop in our nav bar, play with the opacity,  and add a bit of type for our navigation. All right, let's go and do it, right? So you can start obviously by replacing things. I often just go through  and this is what I've kind of used, you know,  get my ideas across to the client,  but it's not something I find useful to start with. I kind of start, you know,  thought a bit more about the product  and I'll keep my wire frames close, I'll print them off  and stick them close, but I don't kind  of like switch them out verbatim. It's not that kind of design process.

Um, so what I do is I'm gonna kind of start,  I'm gonna use them as a guide. Don't, don't, don't get me wrong,  but, um, I'm just gonna kinda let the content, you know,  push and move and jiggle as it needs to, okay? Because I've got, I mean, images from the client now  and I've got logos from them  and everything's changed just a slight bit. So, um, I'm gonna bring in my logo. This is gonna be my first bit  and it's gonna probably drive a lot of the design,  especially colors, maybe fonts. So we're gonna bring it in first.

Now, when you're finding logos from your client,  make sure it's a vector version. Um, and what we're gonna do is we're gonna go to file  and we're gonna go to place, okay? This one here. And let's say the client in our exercise  files, I've got lots of logos, okay? There are, uh, what is there five versions. So JPEG and a p and G are bad.

S-V-G-E-P-S or an AI file are good. The reasons are, I'll show you the kind of difference  between the do let's say, uh, all  of these three are very similar. Pretty much the same, okay? And these guys have a very similar sort of working as well. So let's bring in the P and g  and let's bring in, uh, say the EPS version  or let's say the SVG. Okay, let's see the difference between the two.

And it's something called, uh, pixels versus vector  or bitmap versus um, paths. So what I'm gonna do is I'm gonna turn my guides off  and I'm gonna zoom in, okay? So they look exactly the same,  but watch what happens when I start  scaling both of these two. So if I grab these guys  and I start scaling them up, okay, nice  and big, you can see one starts, pixelating looks horrible,  and this other one here stays nice and crystal clear. So if you do have the option, the client says,  which version do you want? Make sure you get the vector version.

Okay? And the vector is S-V-G-E-P-S or ai. Sometimes it can be A PDF, okay? But uh, stay away from p gs. P g's are handy because they have transparency. So if you only have say a jpeg and a p  and g, uh, get the p and g version, okay?

It's not gonna scale very well. That's not gonna help us with our responsiveness. It's not the end of the world. Okay? But, um, uh, let's, let's compare it with the JPEG version. JPEG is a clear loser because he has a white background.

He's still the same kind of pixels. He still pixelates, but you can see at least the PNG has a  transparent background often, not always. Okay, so goodbye you guys. I'm gonna bring in our SVG again just  'cause it came through at the right size, uh, SVG. Great. Okay?

And there's gonna be my logo for my site. Remember, be working at command one actual pixels, okay? And you'll notice that our logo has a white background. It's 'cause what I want to do is turn my guides back on. Okay? If you've forgotten, that's command  colon or Ctrl Colon.

I'm gonna get it to kind of bang up maybe just a little bit  further in because what I'm gonna do is I'm gonna grab my  rectangle tool and I'm gonna put like  a nav bar along the top. I'm gonna make it semi-transparent later on so you can kind  of see underneath it and make it all cool. So I'm gonna move it across so I can see both sides. There we go. And I'm gonna draw a rectangle in here. Goes from, it's gonna go across 12 columns.

I'm gonna give it a fill color of black  and I'm gonna give it no stroke. So the little red line through it means no stroke  and lower the opacity a little bit. Um, kinda goes a little bit gray  and I'm gonna put stuff behind it. Actually, when we build our site, we're  gonna pin it to the top. So it means that it's gonna scroll down when we start  scrolling and it's gonna stick to the top  and we'll always be able to see the logo and the navigation. It's kind of cool anyway.

Now at the moment the logo's on the wrong side. This box is on top, so we just right click it. Okay? If you're on a Mac, you hold down control  and click with any buttons you've got. Okay? On a, on a pc it's a little easy.

You can right click and go to the one  that says arrange and go to send it back. You can see I got my logo up front. Cool. I'm gonna tap it so it sits in there. Turn my guides off and it looks okay. Now what I wanna do is I wanna put in the text  for my navigation.

So I'm gonna grab the type tool  and I'm gonna click once, um,  it doesn't really matter where it goes. And I'm gonna go about us. So about, it's gonna be about me 'cause it's my portfolio. And what I'll do is I'm gonna have, I'm gonna copy  and paste it, stick it up next to 'em,  and there's gonna be another page called contact me. Contact me, okay? I maybe have my portfolio button as well.

I've decided just to keep my, um,  those images we had on the bottom to get to our portfolio. Okay? These are just kinda like these guys here. I'm gonna make them white. So with the black arrow,  I've got them both selected. Okay?

I can grab my type tool now  and up the top here I can go and change the color to white. Okay? Actually what I'm gonna use is this off  white all the way through it. Okay? I dunno why I like it. It's just, I don't know, a little hint on the white.

It looks white basically. Um, and yeah, so we've added our type. We're gonna go and style fonts in a  movie just after this one. We'll just use Ariel for the moment. Um, the next thing I want to do is I want  to work with a little bit of color. So let's go and do that in the next video.