All right.
Welcome back.
So this is the fun part of the course where we actually get to dive into Photoshop and start designing
something for my Web site.
So let's open up Photoshop.
And what I want you to do, all that's loading is go to the five page web design folder and we're going
to right click on the home image here.
I believe it's a PMG.
Right.
Click on that.
Open with Photoshop.
Twenty.
OK.
And then close this window.
And so what you're going to see here is it is a Holmdel Panji.
Right.
So I want to I want what I want you to do is hold control shift s.
And it should work.
OK?
They're killing my shortcuts now.
All right, no problem.
Let's go to file save as.
Save on the computer and we're going to desktop.
We're going to call this home and change the file format to PTSD.
Someone save that file here.
Okay.
And now we have our source.
So we're going to change the name layer one to source.
OK, now what we're gonna do.
We're going to go through.
And we're gonna design this.
Page using this as a reference guide to get the height and width of each element that we're gonna be
designing.
And also to grab content so that we can add that to our final product.
OK, so the first thing we're going to work on is.
Indices up, then click on Workspace and do a centrals and just see what's going on here.
Go to graphic and web for me.
There we go.
Beautiful.
For some reason, my menu disappeared.
So I'm going to close these out.
And if you click on this little hamburger menu over here and you just closed tab group, what I'll do
is I'll give us a little more real estate to work with.
There we go.
All right.
So now we have a little more room.
But the idea is here is I want to bring the grids down.
An action of the grids, the guides.
I want to bring the guys down so that we can mark off each section and find out what the height and
the width is, OK.
So, for example.
With the layers here, I want to drag this down and we're gonna make a new layer and we're gonna call
this.
Top bar.
OK, so the first the very first thing that we're going to design is the top bar.
OK.
So what I want to do is I'm going to grab the marquee tool so you can click right here or hit the letter
M to get the marquee tool.
And then we're going to line it up.
Right here.
And what I'm gonna do is I'm click on this these two little arrows, Reyher.
And that's going to.
Shorten up the toolbar here so we have more room to work.
And then I'm going to send it to the default colors of black and white.
So this is the foreground.
This is the background.
So if you flip these and this will be the background, that'll be the foreground.
OK.
So I'm going to hit the letter G and my keyboard, which is the paint bucket tool shortcut.
And then I'm going to click and I'm going to paste in where I had that highlighted.
OK.
So now if I get rid of the source, now we have our top bar.
OK.
Now the next thing we want to build is we want to build the menu.
So I'm going to use the eyedropper.
So hit the the key eye on your keyboard.
OK.
So that's going to grab the color there.
And we've already put the guides around the nav.
So we're going to call this.
So the top part is going to be number.
So we got the nav bar and then what I'm to do is, again, grab the marquee jewel.
And we're going to highlight that and matching up with the guides and then hit the letter G again on
your keyboard.
And then Clark, and that will fill.
And now we have.
Two elements built for our Web site.
Now, if I hit.
Control.
I think it's apostrophe and C..
There we go.
Now you can see what it will look like when we're done.
OK.
So the next section we're going to build.
Is the footer.
Now, you're probably saying, well, why don't we build the body?
In fact, we are going to build the body.
So what we'll do is we will do this.
We're going to do.
We did the top bar, nav bar.
Now we're going to do the body.
And let's see here.
I'm going to grab the market to again and I'm just going to highlight I'm going to select from very
top to here and I'm gonna hit the letter axe instead of using the eyedropper because we to have white
in there.
And then I hit the letter G and then fill that.
And now the body.
It's filled in in the right color that we want.
OK?
Now we're going to do the Futter.
So what I like to do when I design Web sites is I like to build the nav bar and the footer that way.
Really, it's the header in the footer.
That way you have that done across all the pages.
And then what you do is you come back and you add the content.
So the footer.
We're gonna hit the letter X again so that we can get the navy blue here.
We're gonna do the top footers.
We're gonna call his top Futter.
OK.
And we'll grab the market tool, and I'm in a rough.
I'm going to wing it here a little bit and just line that up to about right there.
Hit the letter G.
Fill that in and then we're going to do the bottom footer.
So the bottom footer.
And then hit control has to save.
Make sure we keep saving.
And then hit X so we can switch the swatches here from foreground to background and then hit the letter
I on your keyboard so that we can get the color black hair from the eyedropper.
And then we're going to draw out the bottom footer.
So let's do that right here.
And I mean, hit the letter G to select the bucket.
And there you go.
So now we have the framework.
Of our.
I going to hide the guides.
Now we have the framework of what our Web site is going to look like.
OK, so this is just a rough, rough draft.
But you can see we have the top bar here.
We have the nav bar there.
We have the body here and then we have the top footer and then the bottom footer, and it's really going
to give people.
A good glimpse of what we're trying to do when they go to our Web site.
OK.
So now what I want you to do is I want you to turn off all these layers that we just created and now
we're going to go to the source file and grab a couple of things.
OK.
So would the source file.
The first thing I want to do is I want to grab the content for the top bar.
Okay, so I'm going to grab the marquee tool and we're just going to highlight around the content.
Over here and then over there, I'm here control, see?
And then control d the D Select, we'll go to the top bar and I'm in hit control v.
OK.
And what it's gonna do is it's gonna drop it down, which is fine.
And the color is a little different.
So we're gonna Photoshop that.
Here.
So hit the letter E on your keyboard and then make sure you have selected the magic eraser tool.
OK, and once you have that selected, then we can move this up and down.
And so right about there, if you hold control, what it's going to do is it's going to give you the
measurement.
From the left and from the right.
And so what we want to do is want to line this up so it's flush.
OK, well, I can live with that.
I'm a dropped down a little bit right there.
OK.
So you can see.
Let me zoom in a little bit.
Say concern.
I'm talking on her.
You can see that when I.
Were 16 pixels from the top and 16 pixels from the bottom.
Now, why is this important?
Like why you showed me that?
I'm going to explain right now.
When you're designing a Web site, you want to know.
Every pixel that you're working with.
So if I'm a developer, which I am myself.
If you're designing this and then you're handed it off to a developer.
You want to make sure that it is easy for them to.
Build the site and it's actually doable.
OK?
You want to design something that's doable.
You don't want to design some crazy thing that nobody can do or that will take a long time.
If if you're on a deadline.
OK.
So I'm going to save this.
So I control us.
And also, the nice thing about this is then you could write notes and give them if you wanted to.
The.
The margin on the left, the margin on the right, the margin on top and the bottom.
OK.
That will really help a developer out to really build this fast if they have those different that information.
OK.
So that's the top bar.
Now the nav bar.
What we're gonna do again is we're gonna grab the content from the source here.
I mean, it control C, control D, D, select.
And then we're gonna open up the Navar.
And I'm at a pace that n.
And we're going to do the same thing.
We're going to delete the.
Delete the content there and then we'll bring this up.
And then I've got a whole control to see where we're at.
So we got 34 on top, 33 in the bottom, 65 and 71.
So we want to move a little bit to the right.
OK, so we can go one more pixel and now we are on the left and the right.
You can see right here it's gone.
It's bleeding through the layer here.
Right over there.
If I zoom out here.
OK, now what we have.
We go.
Let's go right here.
OK, so my margin right and left are 68, the top margin is six to 34 and the bottom is 33.
OK, so that tells me that we need to add a pixel to our NAV.
We're not going to do that in this instance because it's fine the way it is.
We're learning.
So it's OK.
But that's how you do it there.
Now for the body.
We're gonna grab all the content here, so let's grab the marquee tool again and I'm going to grab from
there down to here, will have control, see, and then we'll go to the body and we'll head control
D and then control V to paste it in.
And then I'm just going to hit control T so that I can grab all the content and then we'll just bring
that up and give it a little more space than the other one has.
So it's.
OK.
Right there.
And then like I did or the other ones, we're gonna hit control and then move your cursor and then you
can see our margin on the top is 23 pixels.
On the bottom, it's 22.
On the left, it's 43.
On the right.
It's 37.
So which way do we need to go?
We need to go a little bit left to even this out.
And if I just nibble it, there we go.
So now we're even on the left and the right margin, 40 pixels on the left for the pixels on the right.
And then we also have 23 pixels on the top and 22 pixels on the bottom.
OK, we still have a beautiful design, but it's also functional and easy for someone to develop.
Take it from someone that develops Web sites and also designs them.
You want to make it.
You want to think about the developer.
You don't have to, like, overthink it and say, well, they can't do this.
The coders can code anything seriously.
You can make a work.
Just.
Understand that the more complex you make it, the longer it's going to take.
That's my thing to think about when you're thinking about that.
So next, what we're gonna do is we're going to do the top Futter.
So let's go to the source.
And we're gonna grab all the content in there.
Someone who controls see and then we're in go to the top Futter and control D and then control V to
paste.
Let me see.
Mirza's.
Now, no one, I can find it.
All right, there it is.
Now, if we do the same thing, we grab we hit the letter E for the magic eraser tool.
And then we had control.
We hold control.
Which way do we need to go?
We got 74 pixels on the left.
Eighty four on the right.
So we're gonna move to the right until we're just about even.
OK.
Seventy nine in the left.
Seventy nine on the right.
And then the top.
And the bottom.
We need to go up.
Kurt.
OK, we're good there, we got seventy three in the top seventy four in the bottom.
I'm going to hit control us to save that and then the last thing we're going to do is the bottom footer.
OK.
So let's go to the bottom footer.
You k now we're going to do the Futter, so I'm going to grab the marquee tool and I'm going to highlight
20-20 Learn, Talk plus.
All rights reserved.
Control.
See, and then we'll go to the bottom foder here.
Control V the pace that n.
And there you go, so now you have a web, you do what you've designed, your first Web page, and not
only that, but it's the homepage of my actual Web site.
So congratulations on that.
You did a great job.
And this looks great.
And like I said, it's not really about the content in this instance.
It's more about the layout.
OK.
Does this make sense?
OK.
The top.
We did top bar.
We have our e-mail address.
We have social media links.
Then we have the navigation.
We have the logo and then links here.
And then you can also search.
And then you have a welcome message.
And then icons for my blog, they're.
And like I said, as I go along.
I'm going to be adding more content to the site.
So but this is exactly the process that I went through when I was creating this site.
I was thinking about, OK, so what do I need to do to start with the site?
I'm going to keep it simple with a couple different elements.
In this case, just to and as I get more content than I'm going to keep adding to adding layers to the
site, so to speak.
OK.
So great work on this.
I'll see in the next video where we're going to design the podcast page.