Slicing Up a Photoshop Mockup for Web

[?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