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