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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[?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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up