Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll continue polishing the background of our page and add some additional details.
[?music?]
0:00
[Master Class Designer and Developer Workflow: Second Sprint Details]
0:02
[Nick Pettit] So now that we have our logo for Easy Jobs!
0:06
and we have the basic visual look or background of the site,
0:11
we can go ahead and keep going with this layout.
0:15
First, I'm going to go ahead and rearrange some of these layers
0:19
just so we don't get confused later on.
0:22
First, I'm going to move the grid up to the top
0:25
and I'll go ahead and get rid of the background in there
0:30
because we don't really need it.
0:34
Actually, I'm just going to go ahead and fade the opacity on that
0:37
so that we can bring up the grid, should we need it.
0:43
But for now, I don't think we really do, and if we need to align something with the grid,
0:47
we can just go ahead and bring up our guides like this.
0:52
So we'll turn those off
0:55
and next, I'll go ahead and label this secondary noise layer,
0:58
and I'll call it Paper Noise, and I'll group all of these together
1:02
into a folder called Folder.
1:11
And even though we just have one layer here that says Easy Jobs,
1:16
I'll go ahead and put that into a folder as well, and we'll call that Logo.
1:20
Now, I'm going to create another folder
1:28
and I'm going to call this one Content Area
1:33
because now, we need to design what the actual page is going to look like
1:39
and where our information is going to go.
1:44
You can sort of think of this as maybe a secondary background.
1:46
So I'm going to go ahead and create what looks like a piece of paper
1:50
and that will be inside of this folder, so I'm going to go ahead and turn on my guides
1:57
and I think I'm going to start a few columns in here.
2:01
So we're starting 2 columns in on the left, so we'll do the same on the right side
2:05
and we'll just drag this all the way down to the bottom of the page.
2:10
That looks pretty good.
2:16
And I'm going to go ahead and actually move this up a bit, just like that.
2:20
And now, let's go ahead and make this look more like a piece of paper.
2:32
So we'll go ahead and jump into the layer style here,
2:37
and let's first add a gradient overlay
2:42
and this will be pretty close to white.
2:48
We'll just make this slightly off-white, just to give this a little bit of variation.
2:53
So if we zoom out here, that's what our page is starting to look like,
3:00
and subtle gradients like this--oftentimes, you won't even really notice, but that's okay.
3:04
When you add subtle little things like this to the page,
3:11
they all add up to an overall visual effect and give it some really nice depth and variation.
3:14
So we'll go ahead and hold onto that change,
3:21
and actually, I am going to move this back down.
3:24
I think it's a little bit too high up on the page.
3:27
We'll keep it there for now and see what we think in a few minutes.
3:30
So next, I'm going to go ahead and add a drop-shadow to this piece of paper.
3:35
I think that looks pretty good; it gives it some lift off the page.
3:55
I'm going to decrease that just a little bit.
4:00
It's a little bit too much--there we go.
4:03
That looks good.
4:06
And now, just like the gradient for the manila folder,
4:08
we need to go ahead and add some texture to this piece of paper,
4:11
and this is supposed to be a piece of printer paper, so it's a little bit more fine
4:15
than the rough manila folder, so we'll just go ahead and add just a little bit of texture here.
4:21
So again, we're going to create a new layer,
4:28
fill it in,
4:32
add some noise,
4:34
and we'll go ahead and adjust the blending mode here to multiply,
4:36
and we'll be decrease the opacity to about 5 percent.
4:43
That looks good.
4:51
And on this layer, we need to go ahead and add the same vector mask
4:55
as we have on the piece of paper
5:01
so we'll go ahead and call this Paper and we'll call this Noise,
5:05
and we'll group them together in a folder called Paper.
5:08
The visual weight over on the left here is a little bit heavy
5:20
and I feel like we should add something over on the right.
5:24
Of course, we will add other sidebar elements, but up at the top,
5:27
this logo still seems a bit heavy, so I'm going to add a little bit of visual flair over here
5:31
and I think I'm going to go ahead and put in a paperclip.
5:37
I'm not really sure what that's going to do, but in a future iteration,
5:41
we might be able to actually attach additional information to this piece of paper
5:44
and a good place to put it would be right under the paperclip.
5:50
So let's go ahead and go to our custom shape tool
5:54
and I actually already have a paperclip here
5:57
and I'll just go ahead and drag this out.
6:05
I don't want it to be too terribly large.
6:09
That looks pretty good.
6:15
I'm going to make that a little bit smaller.
6:17
There we go.
6:25
Now, let's zoom in on this and start to get detailed.
6:27
First, I'm going to go ahead and offset this paperclip a little bit to the right,
6:31
just like that,
6:40
and I want part of this paperclip to appear behind the paper,
6:44
and to do that, very simply, I am actually just going to go ahead and edit the shape
6:51
and just cut part of it off.
6:57
So I'm going to go ahead and use my direct selection tool
7:00
and let's just see what this shape looks like.
7:05
So it looks like we need to add a few vector points here
7:09
if we actually want this to cut off with the paper.
7:13
So let's first line everything up,
7:16
so we'll move our paper up so it lines up perfectly with that gridline there,
7:19
and now, we'll select our Add Anchor Point tool
7:27
and on this paperclip, I'm just going to add an anchor point there
7:34
and there, just like that.
7:39
So now we can go ahead and feel free to delete all of these other anchor points that we don't need.
7:41
So I'll go ahead and select them
7:49
and there's a few more down here; we just need to follow this edge
7:53
and I think that's all of them, so we can go ahead and delete that.
7:58
And now, just as a formality, let's go ahead and close this shape
8:03
and then we'll convert these points so they're not Bézier curves,
8:10
just so that they're straight.
8:14
And now, we can remove our guides and zoom out
8:17
and we have a pretty decent-looking paperclip.
8:23
Actually, I'm going to make that a little bit larger
8:27
and then we'll go ahead and move it
8:39
so that it cuts off with the paper properly,
8:43
just like that.
8:47
Now if we zoom out,
8:50
I think that's a pretty good size relative to the other elements on the page
8:52
and I think it balances out the logo very nicely.
8:57
So now, let's go ahead and add some layer styles to this paperclip.
9:01
First, I'm going to go ahead and add an inner shadow,
9:07
and this is going to be very light because all I really want this inner shadow to do
9:13
is to give some definition and 3-D shape to the paperclip
9:19
so that the wire here actually feels like it's round.
9:24
So we'll adjust the size here as needed.
9:29
I think that's pretty good, and that looks a little bit sharp,
9:34
so I'm going to adjust the opacity, and I think that's good.
9:39
We'll increase the size by 1,
9:46
just make a few fine-tuned adjustments here,
9:50
and that looks pretty good.
9:53
I think that paperclip looks pretty round,
9:55
and now we can go ahead and make it look a lot more metallic
9:58
by adding a gradient.
10:02
So we'll go ahead and pick a nice metallic gray color here.
10:04
I think that's pretty good.
10:17
We'll duplicate that color
10:19
so that it's on the other side of the gradient
10:23
and then we have this shiny white area that we can play with in the middle,
10:29
and I think it's a little bit too bright.
10:35
We should make the shininess of this paperclip a little bit lower.
10:37
I think that looks good.
10:47
Maybe it should be a little brighter.
10:49
There we go.
10:52
And now, we can adjust the angle of the light
10:54
so that it looks a bit more realistic,
10:59
and I sort of like that angle there
11:02
and I think that looks good.
11:07
We'll go ahead and accept those changes.
11:09
Now, this paperclip does have a gradient on it
11:14
and I know I said earlier that you should add noise to nearly all gradients,
11:17
but because there's such a small amount of surface area here,
11:22
we really don't need to add any noise because this is already visually varied enough.
11:26
So if we zoom out here, we can start to get a sense
11:35
of what our page is ultimately going to look like.
11:39
I think this is looking pretty good so far.
11:42
You need to sign up for Treehouse in order to download course files.
Sign up