[?music?]

[Master Class Designer and Developer Workflow: Second Sprint Details]

[Nick Pettit] So now that we have our logo for Easy Jobs!

and we have the basic visual look or background of the site,

we can go ahead and keep going with this layout.

First, I'm going to go ahead and rearrange some of these layers

just so we don't get confused later on.

First, I'm going to move the grid up to the top

and I'll go ahead and get rid of the background in there

because we don't really need it.

Actually, I'm just going to go ahead and fade the opacity on that

so that we can bring up the grid, should we need it.

But for now, I don't think we really do, and if we need to align something with the grid,

we can just go ahead and bring up our guides like this.

So we'll turn those off

and next, I'll go ahead and label this secondary noise layer,

and I'll call it Paper Noise, and I'll group all of these together

into a folder called Folder.

And even though we just have one layer here that says Easy Jobs,

I'll go ahead and put that into a folder as well, and we'll call that Logo.

Now, I'm going to create another folder

and I'm going to call this one Content Area

because now, we need to design what the actual page is going to look like

and where our information is going to go.

You can sort of think of this as maybe a secondary background.

So I'm going to go ahead and create what looks like a piece of paper

and that will be inside of this folder, so I'm going to go ahead and turn on my guides

and I think I'm going to start a few columns in here.

So we're starting 2 columns in on the left, so we'll do the same on the right side

and we'll just drag this all the way down to the bottom of the page.

That looks pretty good.

And I'm going to go ahead and actually move this up a bit, just like that.

And now, let's go ahead and make this look more like a piece of paper.

So we'll go ahead and jump into the layer style here,

and let's first add a gradient overlay

and this will be pretty close to white.

We'll just make this slightly off-white, just to give this a little bit of variation.

So if we zoom out here, that's what our page is starting to look like,

and subtle gradients like this--oftentimes, you won't even really notice, but that's okay.

When you add subtle little things like this to the page,

they all add up to an overall visual effect and give it some really nice depth and variation.

So we'll go ahead and hold onto that change,

and actually, I am going to move this back down.

I think it's a little bit too high up on the page.

We'll keep it there for now and see what we think in a few minutes.

So next, I'm going to go ahead and add a drop-shadow to this piece of paper.

I think that looks pretty good; it gives it some lift off the page.

I'm going to decrease that just a little bit.

It's a little bit too much--there we go.

That looks good.

And now, just like the gradient for the manila folder,

we need to go ahead and add some texture to this piece of paper,

and this is supposed to be a piece of printer paper, so it's a little bit more fine

than the rough manila folder, so we'll just go ahead and add just a little bit of texture here.

So again, we're going to create a new layer,

fill it in,

add some noise,

and we'll go ahead and adjust the blending mode here to multiply,

and we'll be decrease the opacity to about 5 percent.

That looks good.

And on this layer, we need to go ahead and add the same vector mask

as we have on the piece of paper

so we'll go ahead and call this Paper and we'll call this Noise,

and we'll group them together in a folder called Paper.

The visual weight over on the left here is a little bit heavy

and I feel like we should add something over on the right.

Of course, we will add other sidebar elements, but up at the top,

this logo still seems a bit heavy, so I'm going to add a little bit of visual flair over here

and I think I'm going to go ahead and put in a paperclip.

I'm not really sure what that's going to do, but in a future iteration,

we might be able to actually attach additional information to this piece of paper

and a good place to put it would be right under the paperclip.

So let's go ahead and go to our custom shape tool

and I actually already have a paperclip here

and I'll just go ahead and drag this out.

I don't want it to be too terribly large.

That looks pretty good.

I'm going to make that a little bit smaller.

There we go.

Now, let's zoom in on this and start to get detailed.

First, I'm going to go ahead and offset this paperclip a little bit to the right,

just like that,

and I want part of this paperclip to appear behind the paper,

and to do that, very simply, I am actually just going to go ahead and edit the shape

and just cut part of it off.

So I'm going to go ahead and use my direct selection tool

and let's just see what this shape looks like.

So it looks like we need to add a few vector points here

if we actually want this to cut off with the paper.

So let's first line everything up,

so we'll move our paper up so it lines up perfectly with that gridline there,

and now, we'll select our Add Anchor Point tool

and on this paperclip, I'm just going to add an anchor point there

and there, just like that.

So now we can go ahead and feel free to delete all of these other anchor points that we don't need.

So I'll go ahead and select them

and there's a few more down here; we just need to follow this edge

and I think that's all of them, so we can go ahead and delete that.

And now, just as a formality, let's go ahead and close this shape

and then we'll convert these points so they're not Bézier curves,

just so that they're straight.

And now, we can remove our guides and zoom out

and we have a pretty decent-looking paperclip.

Actually, I'm going to make that a little bit larger

and then we'll go ahead and move it

so that it cuts off with the paper properly,

just like that.

Now if we zoom out,

I think that's a pretty good size relative to the other elements on the page

and I think it balances out the logo very nicely.

So now, let's go ahead and add some layer styles to this paperclip.

First, I'm going to go ahead and add an inner shadow,

and this is going to be very light because all I really want this inner shadow to do

is to give some definition and 3-D shape to the paperclip

so that the wire here actually feels like it's round.

So we'll adjust the size here as needed.

I think that's pretty good, and that looks a little bit sharp,

so I'm going to adjust the opacity, and I think that's good.

We'll increase the size by 1,

just make a few fine-tuned adjustments here,

and that looks pretty good.

I think that paperclip looks pretty round,

and now we can go ahead and make it look a lot more metallic

by adding a gradient.

So we'll go ahead and pick a nice metallic gray color here.

I think that's pretty good.

We'll duplicate that color

so that it's on the other side of the gradient

and then we have this shiny white area that we can play with in the middle,

and I think it's a little bit too bright.

We should make the shininess of this paperclip a little bit lower.

I think that looks good.

Maybe it should be a little brighter.

There we go.

And now, we can adjust the angle of the light

so that it looks a bit more realistic,

and I sort of like that angle there

and I think that looks good.

We'll go ahead and accept those changes.

Now, this paperclip does have a gradient on it

and I know I said earlier that you should add noise to nearly all gradients,

but because there's such a small amount of surface area here,

we really don't need to add any noise because this is already visually varied enough.

So if we zoom out here, we can start to get a sense

of what our page is ultimately going to look like.

I think this is looking pretty good so far.