Preview

Start a free Courses trial
to watch this video

Slicing Up a Photoshop Mockup for Web

16:18 with Nick Pettit

In this video, we'll slice up the high fidelity mockup that we created in the previous sprint. Slicing up the mockup will provide us with the image assets we need to recreate the site in HTML and CSS.

Download: Project File and Source Code

Speaker's Notes
Questions?
Video Transcript
Downloads
Workspaces

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[?music?] 0:00

[Master Class: Designer and Developer Workflow] 0:02

[Third Sprint: Slicing Up the Mockup] 0:04

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

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

for our layout. 0:15

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

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

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

and I'm just going to say $git pull 0:32

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

And we can say $rake db:migrate 0:38

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

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

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

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

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

Jim has gone ahead and added in some login features there 1:06

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

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

We're going to switch over to Photoshop 1:20

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

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

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

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

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

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

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

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

We have a logo up here for Easy Jobs! 2:04

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

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

We also have the tab of the manila folder up here 2:18

which is a somewhat complex shape, 2:23

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

Then, if we scroll down here a little bit, 2:29

we can see that we have this manila folder background 2:32

and then we have this secondary paper background. 2:36

So let's first look at the manila folder. 2:40

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

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

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

The background is slightly textured. 2:57

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

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

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

going down the manila folder here, 3:13

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

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

Because this is a relatively complex background 3:24

with a lot of different textural elements going on, 3:28

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

Alternatively, we could take another approach using multiple backgrounds, 3:36

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

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

just like we do on the manila folder, 3:50

and if we go ahead and zoom in here, 3:53

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

However, what we do not have is this paper texture 4:01

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

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

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

on top of that gradient. 4:25

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

is because of these little flecks of paper. 4:31

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

and that's not what we want. 4:40

In addition to this background on this piece of paper, 4:42

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

and we can accomplish that using a CSS3 box shadow. 4:50

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

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

and we could probably reproduce that in CSS, but again, 5:04

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

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

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

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

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

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

We have a stamp up here 5:40

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

We can just rotate that text a little bit. 5:48

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

is this little paperclip right here. 5:56

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

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

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

and responsive layouts and fixed-position elements 6:10

don't always work together very well, 6:14

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

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

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

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

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

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

such as the navigation and the content area. 6:38

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

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

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

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

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

that says Discard hidden layers? 7:06

That's fine; you can hit OK. 7:08

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

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

So let's go ahead and isolate this logo. 7:21

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

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

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

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

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

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

so I'll say Image, Crop 8:03

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

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

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

because we don't really need any transparency here, 8:21

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

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

and all that subtle noise in there. 8:38

So that looks good. 8:40

I'm going to go ahead and save this out 8:42

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

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

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

and I'm going to call this folder Layout 9:01

just to keep these images separate from any other images 9:07

that we might want to include into this site. 9:11

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

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

until we have our layers down here again. 9:31

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

and that's going to be this background here. 9:38

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

out of this background. 9:51

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

that we get enough of a sample of these flecks of paper 9:57

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

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

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

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

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

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

maybe move it over a little bit more here, 10:28

and I think that's pretty good. 10:39

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

if we get enough there. 10:45

So let's move that up 10:48

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

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

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

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

and I'm going to crop this. 11:18

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

So PNG-8 looks pretty good. 11:28

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

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

that we've been so careful to preserve so far. 11:38

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

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

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

So we'll save that out, 11:57

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

So far we have our logo and we have our background, 12:06

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

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

is this noise image. 12:26

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

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

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

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

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

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

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

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

and I'm going to make this 128x128. 13:12

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

And I'm not going to flatten this image 13:23

because that will actually add in a white background again. 13:26

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

because we don't have any visible layer styles 13:31

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

And I'm going to save this as Noise, 13:43

and now we can go ahead and go back here. 13:50

And we'll turn all of our layers back on 13:56

just to see where we're at. 13:59

And I think that's just about it. 14:04

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

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

should we decide we still want it. 14:13

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

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

at the bottom of this gradient. 14:27

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

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

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

or gradient or some kind of other background image. 14:43

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

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

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

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

and just keep it to like 128 pixels. 15:06

That's pretty good. 15:10

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

that we flatten the image so the image is now flattened. 15:18

We're going to crop it 15:23

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

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

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

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

So that's really all we need 15:43

and we'll go ahead and save it out. 15:46

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

or something similar. 15:59

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

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

but I think that should about do it for images, 16:11

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

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace

Design and Development

Slicing Up a Photoshop Mockup for Web

Related Discussions

Related Discussions