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
Well done!
You have completed Design and Development!
You have completed Design and Development!
Preview
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