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 start creating the background of the page and choose a few more colors that will be prevalent in the rest of our layout.
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 Background]
0:02
[Nick Pettit] Let's go ahead and actually get into the layout for this site.
0:07
So I think I want to have sort of a manila folder look to this site,
0:12
so up at the top where the logo is will be the tab of the manila folder
0:17
and then we'll have a line going across the top here
0:22
and our horizontal navigation will appear across the top there
0:26
and we could possibly have other login information up there in the future.
0:31
My only concern with creating this layout is that the tab might be confused
0:36
for actual tabbed navigation, but I think if we make it large enough,
0:41
we can actually avoid that just fine.
0:45
The theme of the manila folder might suggest that this is actually a file folder
0:48
and a file filled with jobs and these jobs are the Easy Jobs.
0:54
So let's go ahead and create that tab, and to do that,
0:59
we're going to go ahead and use some shapes.
1:03
So we'll zoom in here
1:06
and to start out, I think I'm going to just go ahead and create a rectangle.
1:09
So we'll just drag that across, just like that.
1:23
And then, using the pen tool, we need to go ahead
1:26
and add a few anchor points here.
1:30
So we need to add four anchor points
1:36
and we'll go ahead and try to be a little bit careful about this and turn on our grid.
1:38
So we'll add one there and maybe right there,
1:45
and then add in an anchor point here,
1:49
and one right there.
1:53
So now, we can go ahead and actually select these
1:55
and when we move them up,
2:04
it should create a nice tab there.
2:06
Now we can go ahead and move these sides out
2:08
and adjust them to our grid,
2:13
maybe make this tab a little bit larger.
2:16
And then, of course, we need to rearrange our layers
2:19
so that we can get the logo on top of this tab.
2:25
And so far, I think that looks pretty good.
2:36
I think I am going to go ahead and move this tab over to the left a little bit
2:39
and because this is the logo,
2:48
it doesn't totally matter if it lines up with the grid.
2:51
It's mostly just a visual design thing.
2:54
So we could maybe do a little bit better job lining up with the grid there
3:00
and we'll go ahead and take this side in just a bit,
3:08
and then we can adjust the text size, just to make this fit.
3:13
There we go.
3:28
So if we zoom out, we can see what our page is starting to look like.
3:30
We have Easy Jobs! in the upper left here
3:37
and I still think that's just too large.
3:40
I'm going to bring it down even more, and then we can adjust our tab to the text size.
3:44
So we'll go ahead and turn on our grids again
3:55
and just bring that in a little bit
4:00
and maybe reposition this text, and now when we zoom out,
4:05
that's looking much better.
4:12
So now, we need to create the actual texture for this manila folder
4:15
because it's going to be dominating the page
4:20
and it should really affect pretty much everything else that we design.
4:24
For this manila folder, I'm going to go ahead and add a gradient overlay
4:28
and I'm going to set the top color to sort of a manila folder color
4:34
and we do want this to be light.
4:45
We don't want it to be overly yellow and distracting.
4:47
That looks pretty good, so we'll go ahead and copy this color.
4:53
And for the second color here, we want to make sure that this is a little darker,
5:01
and just so we can see what's going on, I'm going to bring this in temporarily.
5:08
And I think that's getting to be a little bit too saturated
5:16
and we should actually adjust the hue on this so it is hitting a different color entirely
5:20
just to add in some variety.
5:26
That looks pretty good.
5:38
I'm going to continue to adjust these colors
5:40
just to see if we can hit a little bit more of a tighter look.
5:45
I think that's pretty good.
5:57
We'll go ahead and adjust this darker color a little bit more and lighten it up some.
6:05
And I think that's good for the dark color,
6:20
so we'll go ahead and accept those changes
6:22
and I actually am going to keep the gradient up towards the top
6:26
so that the tab color will be slightly different than the background of the overall page.
6:29
So now, we need to go ahead and add in some texture
6:37
and additional visual details,
6:40
so first, I'm actually going to add a bevel
6:43
and I'm going to set the angle here so that the light is coming straight down from the top
6:48
and let's see if we can try and adjust this so that we can get sort of an edge
6:55
along the top of this manila folder, just to give it a little bit of depth.
7:04
So we'll adjust some of the settings here
7:12
and I think that's a little much.
7:21
There we go.
7:26
Let's just see what different types of bevels might look like
7:28
and you'll notice that I'm actually just clicking through the interface, just experimenting here.
7:36
I already know technically what each one of these things does,
7:41
but it's always hard to tell what something's actually going to look like
7:45
unless you actually try it, so feel free to go ahead and just experiment
7:48
with different looks, even if you already think you know what they'll look like.
7:52
So I think that looks pretty good.
7:56
We'll go ahead and accept that and now we can go work on the texture.
7:59
So for the texture, I'm going to create a new layer
8:04
and I'm just going to fill it in completely
8:07
and that should fill in the whole page.
8:10
I'm going to go to the Filter menu, Noise, and click Add Noise
8:13
and that will bring up the Add Noise dialog box.
8:18
And I want to add a little bit less noise than I might normally.
8:21
We'll go ahead and accept that,
8:31
and now we're going to apply the folder shape to this noise.
8:33
So holding down Alt, I'll go ahead and just copy that layer mask over to this noise layer
8:37
and we'll go ahead and label these so we don't get confused.
8:43
And for the noise, we'll go ahead and adjust the blending mode here,
8:51
so we could try Screen, maybe Color Dodge, Color Burn,
8:57
Multiply, and I think that's going to be what we want.
9:06
We just need to lighten it up quite a bit and lower the opacity.
9:09
That's looking pretty good.
9:17
I think that's a little bit heavy on the noise
9:19
so I'll pull that back a bit more.
9:22
That looks good.
9:26
And just as a pointer, it's always good to add some noise like this
9:28
to any gradient that you create,
9:33
or just about any gradient that you create, especially gradients that are large, flat areas,
9:36
like this manila folder.
9:43
The reason you want to add noise to a gradient like this
9:45
is to first reduce color banding that might come up from grading from one color to another.
9:48
And additionally, you also want to add some noise
9:56
because it adds a lot of depth and richness to a color.
9:59
So we'll go ahead and keep that noise there
10:02
and just as an experiment, let's see if we can create some manila folder papery texture
10:07
on top of the texture that we already created.
10:13
So we'll go ahead and create a new layer
10:16
and I'm going to go ahead and grab the pencil tool
10:19
and with a 1-pixel size pencil, I'm just going to go ahead and create a few random lines here.
10:26
So I think these pencil markings are turning out pretty well.
11:14
I think I am going to erase one that's a little bit heavy there.
11:18
There we go.
11:23
And now, I'm going to go ahead and soften these up a little bit
11:26
so they don't look quite so pixelated, like these lines look here.
11:29
So we'll go ahead and add a little bit of a blur
11:37
and we don't want a whole lot of blur
11:42
because we do want to keep these lines looking like lines.
11:44
That looks pretty good.
11:53
And now let's go ahead and maybe adjust the layer style
11:55
to make these a little bit of a darker color.
12:00
And we can maybe work in some of the yellow from this manila folder
12:10
so that they blend a little bit better.
12:16
And I think that looks pretty good.
12:27
I am going to make a few additional adjustments with my eraser here
12:29
just to clean these up a little bit
12:33
because a few of these marks do look a bit heavy
12:37
but overall, I think that looks pretty good.
12:44
We have a nice gradient.
12:46
We have the bevel to give it some depth.
12:48
We have the first layer of noise just to give it some general texture,
12:51
and then we have the more specific texture of the paper markings.
12:55
These types of small visual details can really add a lot of character
13:00
to the visual design of a site.
13:05
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