1 00:00:00,000 --> 00:00:02,000 [?music?] 2 00:00:02,000 --> 00:00:07,000 [Master Class: Designer and Developer Workflow: Second Sprint Background] 3 00:00:07,000 --> 00:00:12,000 [Nick Pettit] Let's go ahead and actually get into the layout for this site. 4 00:00:12,000 --> 00:00:17,000 So I think I want to have sort of a manila folder look to this site, 5 00:00:17,000 --> 00:00:22,000 so up at the top where the logo is will be the tab of the manila folder 6 00:00:22,000 --> 00:00:26,000 and then we'll have a line going across the top here 7 00:00:26,000 --> 00:00:31,000 and our horizontal navigation will appear across the top there 8 00:00:31,000 --> 00:00:36,000 and we could possibly have other login information up there in the future. 9 00:00:36,000 --> 00:00:41,000 My only concern with creating this layout is that the tab might be confused 10 00:00:41,000 --> 00:00:45,000 for actual tabbed navigation, but I think if we make it large enough, 11 00:00:45,000 --> 00:00:48,000 we can actually avoid that just fine. 12 00:00:48,000 --> 00:00:54,000 The theme of the manila folder might suggest that this is actually a file folder 13 00:00:54,000 --> 00:00:59,000 and a file filled with jobs and these jobs are the Easy Jobs. 14 00:00:59,000 --> 00:01:03,000 So let's go ahead and create that tab, and to do that, 15 00:01:03,000 --> 00:01:06,000 we're going to go ahead and use some shapes. 16 00:01:06,000 --> 00:01:09,000 So we'll zoom in here 17 00:01:09,000 --> 00:01:23,000 and to start out, I think I'm going to just go ahead and create a rectangle. 18 00:01:23,000 --> 00:01:26,000 So we'll just drag that across, just like that. 19 00:01:26,000 --> 00:01:30,000 And then, using the pen tool, we need to go ahead 20 00:01:30,000 --> 00:01:36,000 and add a few anchor points here. 21 00:01:36,000 --> 00:01:38,000 So we need to add four anchor points 22 00:01:38,000 --> 00:01:45,000 and we'll go ahead and try to be a little bit careful about this and turn on our grid. 23 00:01:45,000 --> 00:01:49,000 So we'll add one there and maybe right there, 24 00:01:49,000 --> 00:01:53,000 and then add in an anchor point here, 25 00:01:53,000 --> 00:01:55,000 and one right there. 26 00:01:55,000 --> 00:02:04,000 So now, we can go ahead and actually select these 27 00:02:04,000 --> 00:02:06,000 and when we move them up, 28 00:02:06,000 --> 00:02:08,000 it should create a nice tab there. 29 00:02:08,000 --> 00:02:13,000 Now we can go ahead and move these sides out 30 00:02:13,000 --> 00:02:16,000 and adjust them to our grid, 31 00:02:16,000 --> 00:02:19,000 maybe make this tab a little bit larger. 32 00:02:19,000 --> 00:02:25,000 And then, of course, we need to rearrange our layers 33 00:02:25,000 --> 00:02:36,000 so that we can get the logo on top of this tab. 34 00:02:36,000 --> 00:02:39,000 And so far, I think that looks pretty good. 35 00:02:39,000 --> 00:02:48,000 I think I am going to go ahead and move this tab over to the left a little bit 36 00:02:48,000 --> 00:02:51,000 and because this is the logo, 37 00:02:51,000 --> 00:02:54,000 it doesn't totally matter if it lines up with the grid. 38 00:02:54,000 --> 00:03:00,000 It's mostly just a visual design thing. 39 00:03:00,000 --> 00:03:08,000 So we could maybe do a little bit better job lining up with the grid there 40 00:03:08,000 --> 00:03:13,000 and we'll go ahead and take this side in just a bit, 41 00:03:13,000 --> 00:03:28,000 and then we can adjust the text size, just to make this fit. 42 00:03:28,000 --> 00:03:30,000 There we go. 43 00:03:30,000 --> 00:03:37,000 So if we zoom out, we can see what our page is starting to look like. 44 00:03:37,000 --> 00:03:40,000 We have Easy Jobs! in the upper left here 45 00:03:40,000 --> 00:03:44,000 and I still think that's just too large. 46 00:03:44,000 --> 00:03:55,000 I'm going to bring it down even more, and then we can adjust our tab to the text size. 47 00:03:55,000 --> 00:04:00,000 So we'll go ahead and turn on our grids again 48 00:04:00,000 --> 00:04:05,000 and just bring that in a little bit 49 00:04:05,000 --> 00:04:12,000 and maybe reposition this text, and now when we zoom out, 50 00:04:12,000 --> 00:04:15,000 that's looking much better. 51 00:04:15,000 --> 00:04:20,000 So now, we need to create the actual texture for this manila folder 52 00:04:20,000 --> 00:04:24,000 because it's going to be dominating the page 53 00:04:24,000 --> 00:04:28,000 and it should really affect pretty much everything else that we design. 54 00:04:28,000 --> 00:04:34,000 For this manila folder, I'm going to go ahead and add a gradient overlay 55 00:04:34,000 --> 00:04:45,000 and I'm going to set the top color to sort of a manila folder color 56 00:04:45,000 --> 00:04:47,000 and we do want this to be light. 57 00:04:47,000 --> 00:04:53,000 We don't want it to be overly yellow and distracting. 58 00:04:53,000 --> 00:05:01,000 That looks pretty good, so we'll go ahead and copy this color. 59 00:05:01,000 --> 00:05:08,000 And for the second color here, we want to make sure that this is a little darker, 60 00:05:08,000 --> 00:05:16,000 and just so we can see what's going on, I'm going to bring this in temporarily. 61 00:05:16,000 --> 00:05:20,000 And I think that's getting to be a little bit too saturated 62 00:05:20,000 --> 00:05:26,000 and we should actually adjust the hue on this so it is hitting a different color entirely 63 00:05:26,000 --> 00:05:38,000 just to add in some variety. 64 00:05:38,000 --> 00:05:40,000 That looks pretty good. 65 00:05:40,000 --> 00:05:45,000 I'm going to continue to adjust these colors 66 00:05:45,000 --> 00:05:57,000 just to see if we can hit a little bit more of a tighter look. 67 00:05:57,000 --> 00:06:05,000 I think that's pretty good. 68 00:06:05,000 --> 00:06:20,000 We'll go ahead and adjust this darker color a little bit more and lighten it up some. 69 00:06:20,000 --> 00:06:22,000 And I think that's good for the dark color, 70 00:06:22,000 --> 00:06:26,000 so we'll go ahead and accept those changes 71 00:06:26,000 --> 00:06:29,000 and I actually am going to keep the gradient up towards the top 72 00:06:29,000 --> 00:06:37,000 so that the tab color will be slightly different than the background of the overall page. 73 00:06:37,000 --> 00:06:40,000 So now, we need to go ahead and add in some texture 74 00:06:40,000 --> 00:06:43,000 and additional visual details, 75 00:06:43,000 --> 00:06:48,000 so first, I'm actually going to add a bevel 76 00:06:48,000 --> 00:06:55,000 and I'm going to set the angle here so that the light is coming straight down from the top 77 00:06:55,000 --> 00:07:04,000 and let's see if we can try and adjust this so that we can get sort of an edge 78 00:07:04,000 --> 00:07:12,000 along the top of this manila folder, just to give it a little bit of depth. 79 00:07:12,000 --> 00:07:21,000 So we'll adjust some of the settings here 80 00:07:21,000 --> 00:07:26,000 and I think that's a little much. 81 00:07:26,000 --> 00:07:28,000 There we go. 82 00:07:28,000 --> 00:07:36,000 Let's just see what different types of bevels might look like 83 00:07:36,000 --> 00:07:41,000 and you'll notice that I'm actually just clicking through the interface, just experimenting here. 84 00:07:41,000 --> 00:07:45,000 I already know technically what each one of these things does, 85 00:07:45,000 --> 00:07:48,000 but it's always hard to tell what something's actually going to look like 86 00:07:48,000 --> 00:07:52,000 unless you actually try it, so feel free to go ahead and just experiment 87 00:07:52,000 --> 00:07:56,000 with different looks, even if you already think you know what they'll look like. 88 00:07:56,000 --> 00:07:59,000 So I think that looks pretty good. 89 00:07:59,000 --> 00:08:04,000 We'll go ahead and accept that and now we can go work on the texture. 90 00:08:04,000 --> 00:08:07,000 So for the texture, I'm going to create a new layer 91 00:08:07,000 --> 00:08:10,000 and I'm just going to fill it in completely 92 00:08:10,000 --> 00:08:13,000 and that should fill in the whole page. 93 00:08:13,000 --> 00:08:18,000 I'm going to go to the Filter menu, Noise, and click Add Noise 94 00:08:18,000 --> 00:08:21,000 and that will bring up the Add Noise dialog box. 95 00:08:21,000 --> 00:08:31,000 And I want to add a little bit less noise than I might normally. 96 00:08:31,000 --> 00:08:33,000 We'll go ahead and accept that, 97 00:08:33,000 --> 00:08:37,000 and now we're going to apply the folder shape to this noise. 98 00:08:37,000 --> 00:08:43,000 So holding down Alt, I'll go ahead and just copy that layer mask over to this noise layer 99 00:08:43,000 --> 00:08:51,000 and we'll go ahead and label these so we don't get confused. 100 00:08:51,000 --> 00:08:57,000 And for the noise, we'll go ahead and adjust the blending mode here, 101 00:08:57,000 --> 00:09:06,000 so we could try Screen, maybe Color Dodge, Color Burn, 102 00:09:06,000 --> 00:09:09,000 Multiply, and I think that's going to be what we want. 103 00:09:09,000 --> 00:09:17,000 We just need to lighten it up quite a bit and lower the opacity. 104 00:09:17,000 --> 00:09:19,000 That's looking pretty good. 105 00:09:19,000 --> 00:09:22,000 I think that's a little bit heavy on the noise 106 00:09:22,000 --> 00:09:26,000 so I'll pull that back a bit more. 107 00:09:26,000 --> 00:09:28,000 That looks good. 108 00:09:28,000 --> 00:09:33,000 And just as a pointer, it's always good to add some noise like this 109 00:09:33,000 --> 00:09:36,000 to any gradient that you create, 110 00:09:36,000 --> 00:09:43,000 or just about any gradient that you create, especially gradients that are large, flat areas, 111 00:09:43,000 --> 00:09:45,000 like this manila folder. 112 00:09:45,000 --> 00:09:48,000 The reason you want to add noise to a gradient like this 113 00:09:48,000 --> 00:09:56,000 is to first reduce color banding that might come up from grading from one color to another. 114 00:09:56,000 --> 00:09:59,000 And additionally, you also want to add some noise 115 00:09:59,000 --> 00:10:02,000 because it adds a lot of depth and richness to a color. 116 00:10:02,000 --> 00:10:07,000 So we'll go ahead and keep that noise there 117 00:10:07,000 --> 00:10:13,000 and just as an experiment, let's see if we can create some manila folder papery texture 118 00:10:13,000 --> 00:10:16,000 on top of the texture that we already created. 119 00:10:16,000 --> 00:10:19,000 So we'll go ahead and create a new layer 120 00:10:19,000 --> 00:10:26,000 and I'm going to go ahead and grab the pencil tool 121 00:10:26,000 --> 00:11:14,000 and with a 1-pixel size pencil, I'm just going to go ahead and create a few random lines here. 122 00:11:14,000 --> 00:11:18,000 So I think these pencil markings are turning out pretty well. 123 00:11:18,000 --> 00:11:23,000 I think I am going to erase one that's a little bit heavy there. 124 00:11:23,000 --> 00:11:26,000 There we go. 125 00:11:26,000 --> 00:11:29,000 And now, I'm going to go ahead and soften these up a little bit 126 00:11:29,000 --> 00:11:37,000 so they don't look quite so pixelated, like these lines look here. 127 00:11:37,000 --> 00:11:42,000 So we'll go ahead and add a little bit of a blur 128 00:11:42,000 --> 00:11:44,000 and we don't want a whole lot of blur 129 00:11:44,000 --> 00:11:53,000 because we do want to keep these lines looking like lines. 130 00:11:53,000 --> 00:11:55,000 That looks pretty good. 131 00:11:55,000 --> 00:12:00,000 And now let's go ahead and maybe adjust the layer style 132 00:12:00,000 --> 00:12:10,000 to make these a little bit of a darker color. 133 00:12:10,000 --> 00:12:16,000 And we can maybe work in some of the yellow from this manila folder 134 00:12:16,000 --> 00:12:27,000 so that they blend a little bit better. 135 00:12:27,000 --> 00:12:29,000 And I think that looks pretty good. 136 00:12:29,000 --> 00:12:33,000 I am going to make a few additional adjustments with my eraser here 137 00:12:33,000 --> 00:12:37,000 just to clean these up a little bit 138 00:12:37,000 --> 00:12:44,000 because a few of these marks do look a bit heavy 139 00:12:44,000 --> 00:12:46,000 but overall, I think that looks pretty good. 140 00:12:46,000 --> 00:12:48,000 We have a nice gradient. 141 00:12:48,000 --> 00:12:51,000 We have the bevel to give it some depth. 142 00:12:51,000 --> 00:12:55,000 We have the first layer of noise just to give it some general texture, 143 00:12:55,000 --> 00:13:00,000 and then we have the more specific texture of the paper markings. 144 00:13:00,000 --> 00:13:05,000 These types of small visual details can really add a lot of character 145 00:13:05,000 --> 00:13:09,000 to the visual design of a site.