Designing a Website Background13:09 with Nick Pettit
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.
[?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 up