[?music?]

[Master Class: Designer and Developer Workflow]

[Third Sprint: Slicing Up the Mockup]

[Nick Pettit] In this Sprint, we're going to first slice up our Photoshop mockup

and then, we're going to get started on the responsive side of things

for our layout.

We're going to at least try to get the fluid grid in place

and then if we have time, we'll go ahead and get into media queries.

So first, I'm going to just go ahead and get caught up with what Jim has done

and I'm just going to say $git pull

and I've actually already done this, so everything is up to date.

And we can say $rake db:migrate

and that's going to go ahead and make any database changes that need to be made.

And then, I'm going to go ahead and say $rails s

and that's going to go ahead and start up our server.

Then we can go ahead and switch over to Google Chrome,

and if we refresh the page here, it looks like not much has changed.

Jim has gone ahead and added in some login features there

where you can go ahead and register for the site or sign in,

but we don't really need to concern ourselves with that.

We're going to switch over to Photoshop

and use our high-fidelity mockup that we created to get some images

that we'll need for the layout and do our fluid grid calculations.

So we have a lot of work to do here, but let's just take this one step at a time.

First, we need to slice up our layout and get the images we need,

so let's spend a little bit of time just analyzing this.

We have a white background as our base up here at the top.

We have Log In, Sign Up, and those are the links that Jim just added in,

so we'll go ahead and restyle those and put them over to the right later on.

We have a logo up here for Easy Jobs!

and there's some pretty complex effects going on on the text,

so I think we're probably going to make this an image rather than just plain text.

We also have the tab of the manila folder up here

which is a somewhat complex shape,

so we're going to need to make that an image as well.

Then, if we scroll down here a little bit,

we can see that we have this manila folder background

and then we have this secondary paper background.

So let's first look at the manila folder.

So we'll go ahead and get rid of our navigation, get rid of our logo,

get rid of the content area and just look at this.

Like I said, we have the tab up here and then we have this background.

The background is slightly textured.

We have this paper texture and then if we zoom in here,

you can see that we also have this very subtle noise texture.

And in addition to these textural elements, we also have a very subtle gradient

going down the manila folder here,

so we need to somehow include all of these things into the background

and there's a number of different ways that we could do that.

Because this is a relatively complex background

with a lot of different textural elements going on,

I'm going to go ahead and just do this as a repeating image.

Alternatively, we could take another approach using multiple backgrounds,

and I think that's what we're going to do in this content area.

We do have a slight gradient on this piece of paper,

just like we do on the manila folder,

and if we go ahead and zoom in here,

you can see that we also have some very subtle noise texture on top of that gradient.

However, what we do not have is this paper texture

with these little bits of recycled-looking paper, like the manila folder.

So we can actually use a separate technique here where we'll use

a CSS3 gradient and then we'll layer a repeating noise transparent PNG

on top of that gradient.

The reason we can't really get away with that for the manila folder

is because of these little flecks of paper.

If we tried to just repeat the background, it would end up looking very repetitive,

and that's not what we want.

In addition to this background on this piece of paper,

we also have a very subtle shadow going all the way around the edges

and we can accomplish that using a CSS3 box shadow.

Also, on the manila folder, the reason we might want to use an image

is because of the light hitting the top of it, just to give it a very slight 3-D effect,

and we could probably reproduce that in CSS, but again,

it's going to be much easier to do that just using an image.

Now, on the logo, we said that there were too many effects going on here

to accomplish this as just a pure font--particularly this inset shadow.

However, on the rest of the text, we can certainly go ahead and make this text.

In fact, we're going to have to do that, but we do have sort of a typewriter-looking font

on all of this, so we're going to need to pick out a font in order to do that.

We have a stamp up here

and that's slightly rotated, but again, that can be done with CSS3.

We can just rotate that text a little bit.

And actually, I think the most complex part of this layout

is this little paperclip right here.

I'm not exactly sure how we're going to do that.

We might be able to get away with a transparent PNG.

However, we do have to also keep in mind that this layout needs to be responsive

and responsive layouts and fixed-position elements

don't always work together very well,

so we may have to omit that if we don't have time,

but if we do have time, we'll try to include it somehow.

So now that we've thought about this for a little bit,

let's go ahead and start slicing up this layout.

First, I'm going to go ahead and focus on the manila folder and the logo up here.

So I'm going to remove anything we don't need,

such as the navigation and the content area.

And first, I'm just going to try to grab this logo.

Now, there's a bunch of different ways you can slice things up in Photoshop.

The way I like to do it is I like to flatten the image first,

and to do that, I'm just going to go up to the menu, which is offscreen,

go to Layer, Flatten Image, and it'll bring up this dialog box

that says Discard hidden layers?

That's fine; you can hit OK.

And the reason for doing that is if you try to crop the image, which we're about to do,

you could sometimes have some strange effects happening on the layer styles.

So let's go ahead and isolate this logo.

That'll be a little bit easier to do if we bring up our guides,

and we'll want just a little bit of overlap with the upper part of the manila folder

so that we can blend that in seamlessly, so let's really zoom in here

and make sure we got all of the curve on that side

and it looks like we're good on that side.

And I think we're ready to go ahead and crop this,

so I'll say Image, Crop

and then I'm going to save this for web, so I'll bring up the Save For Web dialog box.

And let's try to do this as a 24-bit PNG.

Actually, let's first try a 8-bit PNG

because we don't really need any transparency here,

and that should save us a little bit of space, although I'm going to go ahead

and bump it up to the full 256 colors just to make sure we get that paper texture

and all that subtle noise in there.

So that looks good.

I'm going to go ahead and save this out

and we need to put this in the Projects folder in Easy Jobs,

and this is going to be in our public directory inside the Images folder.

Now I'm just going to go ahead and create a new folder here

and I'm going to call this folder Layout

just to keep these images separate from any other images

that we might want to include into this site.

And I'm going to name this file Easy Jobs because this file is the logo,

and now we have the logo, so I'm going to just go back in history a little bit here

until we have our layers down here again.

And now, we're ready to isolate the next image

and that's going to be this background here.

Now, what we're going to do is we're going to grab a slice or a column

out of this background.

What we need to do is make sure that this is wide enough,

that we get enough of a sample of these flecks of paper

to make sure that it doesn't look like a repeating background

even though that's exactly what it is: a repeating background.

Now, normally, using this technique, you would just keep the column 1 pixel wide

and that would be used for things like gradients before CSS3 gradients, of course,

but we need to make sure this is wide enough that it doesn't look like it's repeating.

So I'm going to just grab a sample of this,

maybe move it over a little bit more here,

and I think that's pretty good.

I don't think it's going to be obvious that this is a repeating background

if we get enough there.

So let's move that up

and we're going to go pretty far down the page here.

I think that's probably pretty safe for our gradient.

In fact, I think it stops up there, but it'll be good just to get a little bit more.

So now, we're going to go ahead and flatten the image again

and I'm going to crop this.

And once again, I'm going to save this out.

So PNG-8 looks pretty good.

We don't have a tremendous number of colors here,

but we do want to make sure that we're picking up all of the subtlety here

that we've been so careful to preserve so far.

We'll go ahead and save this out, and again, we're already in our Layout folder

inside of the Images directory, which is inside the Public directory in our project

and I'm going to call this bg for background.

So we'll save that out,

step back in time here again, and let's see where we're at.

So far we have our logo and we have our background,

so now, I think we're ready to go ahead and grab the content area.

So I'm going to get rid of everything else because all we really need here

is this noise image.

We don't need the gradient because we're going to add that in with CSS.

So let's try to remove everything else except for this noise,

and we're going to go into the Paper directory here and actually remove the element itself.

And right now, it doesn't look like there's anything on the page,

but if we go ahead and add in the background again,

we can see where that noise begins and where there's no noise.

Now, this is a very subtle effect, so we don't need a tremendous amount of noise.

I'm going to go ahead and just grab a sample of it here in a square box

and I'm going to make this 128x128.

I'm going to get rid of this white background and now we have nothing there.

And I'm not going to flatten this image

because that will actually add in a white background again.

This time, I'm just going to crop it, which is fine

because we don't have any visible layer styles

and I'm going to save this for web and I want to save it as a transparent PNG here.

And I'm going to save this as Noise,

and now we can go ahead and go back here.

And we'll turn all of our layers back on

just to see where we're at.

And I think that's just about it.

That's probably all the images that we're going to need;

sans this paperclip here which we can eventually come back to,

should we decide we still want it.

There is one more image that I think we should grab just to be safe;

we may not end up needing it, and that is some noise down here

at the bottom of this gradient.

Now, remember, this is going to be a repeating background that will repeat

along the Y axis; however, it does have a height limitation.

We we get down to the bottom, there needs to be a solid color

or gradient or some kind of other background image.

Now, we can go ahead and add in a noise image down here

using multiple backgrounds in CSS3, so we'll go ahead and grab that noise.

And again, just like the content area, we don't need a tremendous amount,

so we'll go ahead and try to meter ourselves a little bit here

and just keep it to like 128 pixels.

That's pretty good.

And there are layer styles on this shape, so we do need to make sure

that we flatten the image so the image is now flattened.

We're going to crop it

and then save it for web, and there's not a lot of detail at all here.

In fact, we're all the way up at 256 colors on a PNG-8

and it's hardly using any of the color table;

in fact, it's all the way down to 25 colors in the palette.

So that's really all we need

and we'll go ahead and save it out.

And we're going to call this image folder noise, or we could call it manila folder noise

or something similar.

And I'm just going to go back in time here again

and turn on all of our layers and take one last look at this Photoshop document,

but I think that should about do it for images,

and now we're ready to move on to the CSS.