How to Add Subtle Design Details

[?music?] 0:00 [Master Class Designer and Developer Workflow: Second Sprint Details] 0:02 [Nick Pettit] So now that we have our logo for Easy Jobs! 0:06 and we have the basic visual look or background of the site, 0:11 we can go ahead and keep going with this layout. 0:15 First, I'm going to go ahead and rearrange some of these layers 0:19 just so we don't get confused later on. 0:22 First, I'm going to move the grid up to the top 0:25 and I'll go ahead and get rid of the background in there 0:30 because we don't really need it. 0:34 Actually, I'm just going to go ahead and fade the opacity on that 0:37 so that we can bring up the grid, should we need it. 0:43 But for now, I don't think we really do, and if we need to align something with the grid, 0:47 we can just go ahead and bring up our guides like this. 0:52 So we'll turn those off 0:55 and next, I'll go ahead and label this secondary noise layer, 0:58 and I'll call it Paper Noise, and I'll group all of these together 1:02 into a folder called Folder. 1:11 And even though we just have one layer here that says Easy Jobs, 1:16 I'll go ahead and put that into a folder as well, and we'll call that Logo. 1:20 Now, I'm going to create another folder 1:28 and I'm going to call this one Content Area 1:33 because now, we need to design what the actual page is going to look like 1:39 and where our information is going to go. 1:44 You can sort of think of this as maybe a secondary background. 1:46 So I'm going to go ahead and create what looks like a piece of paper 1:50 and that will be inside of this folder, so I'm going to go ahead and turn on my guides 1:57 and I think I'm going to start a few columns in here. 2:01 So we're starting 2 columns in on the left, so we'll do the same on the right side 2:05 and we'll just drag this all the way down to the bottom of the page. 2:10 That looks pretty good. 2:16 And I'm going to go ahead and actually move this up a bit, just like that. 2:20 And now, let's go ahead and make this look more like a piece of paper. 2:32 So we'll go ahead and jump into the layer style here, 2:37 and let's first add a gradient overlay 2:42 and this will be pretty close to white. 2:48 We'll just make this slightly off-white, just to give this a little bit of variation. 2:53 So if we zoom out here, that's what our page is starting to look like, 3:00 and subtle gradients like this--oftentimes, you won't even really notice, but that's okay. 3:04 When you add subtle little things like this to the page, 3:11 they all add up to an overall visual effect and give it some really nice depth and variation. 3:14 So we'll go ahead and hold onto that change, 3:21 and actually, I am going to move this back down. 3:24 I think it's a little bit too high up on the page. 3:27 We'll keep it there for now and see what we think in a few minutes. 3:30 So next, I'm going to go ahead and add a drop-shadow to this piece of paper. 3:35 I think that looks pretty good; it gives it some lift off the page. 3:55 I'm going to decrease that just a little bit. 4:00 It's a little bit too much--there we go. 4:03 That looks good. 4:06 And now, just like the gradient for the manila folder, 4:08 we need to go ahead and add some texture to this piece of paper, 4:11 and this is supposed to be a piece of printer paper, so it's a little bit more fine 4:15 than the rough manila folder, so we'll just go ahead and add just a little bit of texture here. 4:21 So again, we're going to create a new layer, 4:28 fill it in, 4:32 add some noise, 4:34 and we'll go ahead and adjust the blending mode here to multiply, 4:36 and we'll be decrease the opacity to about 5 percent. 4:43 That looks good. 4:51 And on this layer, we need to go ahead and add the same vector mask 4:55 as we have on the piece of paper 5:01 so we'll go ahead and call this Paper and we'll call this Noise, 5:05 and we'll group them together in a folder called Paper. 5:08 The visual weight over on the left here is a little bit heavy 5:20 and I feel like we should add something over on the right. 5:24 Of course, we will add other sidebar elements, but up at the top, 5:27 this logo still seems a bit heavy, so I'm going to add a little bit of visual flair over here 5:31 and I think I'm going to go ahead and put in a paperclip. 5:37 I'm not really sure what that's going to do, but in a future iteration, 5:41 we might be able to actually attach additional information to this piece of paper 5:44 and a good place to put it would be right under the paperclip. 5:50 So let's go ahead and go to our custom shape tool 5:54 and I actually already have a paperclip here 5:57 and I'll just go ahead and drag this out. 6:05 I don't want it to be too terribly large. 6:09 That looks pretty good. 6:15 I'm going to make that a little bit smaller. 6:17 There we go. 6:25 Now, let's zoom in on this and start to get detailed. 6:27 First, I'm going to go ahead and offset this paperclip a little bit to the right, 6:31 just like that, 6:40 and I want part of this paperclip to appear behind the paper, 6:44 and to do that, very simply, I am actually just going to go ahead and edit the shape 6:51 and just cut part of it off. 6:57 So I'm going to go ahead and use my direct selection tool 7:00 and let's just see what this shape looks like. 7:05 So it looks like we need to add a few vector points here 7:09 if we actually want this to cut off with the paper. 7:13 So let's first line everything up, 7:16 so we'll move our paper up so it lines up perfectly with that gridline there, 7:19 and now, we'll select our Add Anchor Point tool 7:27 and on this paperclip, I'm just going to add an anchor point there 7:34 and there, just like that. 7:39 So now we can go ahead and feel free to delete all of these other anchor points that we don't need. 7:41 So I'll go ahead and select them 7:49 and there's a few more down here; we just need to follow this edge 7:53 and I think that's all of them, so we can go ahead and delete that. 7:58 And now, just as a formality, let's go ahead and close this shape 8:03 and then we'll convert these points so they're not Bézier curves, 8:10 just so that they're straight. 8:14 And now, we can remove our guides and zoom out 8:17 and we have a pretty decent-looking paperclip. 8:23 Actually, I'm going to make that a little bit larger 8:27 and then we'll go ahead and move it 8:39 so that it cuts off with the paper properly, 8:43 just like that. 8:47 Now if we zoom out, 8:50 I think that's a pretty good size relative to the other elements on the page 8:52 and I think it balances out the logo very nicely. 8:57 So now, let's go ahead and add some layer styles to this paperclip. 9:01 First, I'm going to go ahead and add an inner shadow, 9:07 and this is going to be very light because all I really want this inner shadow to do 9:13 is to give some definition and 3-D shape to the paperclip 9:19 so that the wire here actually feels like it's round. 9:24 So we'll adjust the size here as needed. 9:29 I think that's pretty good, and that looks a little bit sharp, 9:34 so I'm going to adjust the opacity, and I think that's good. 9:39 We'll increase the size by 1, 9:46 just make a few fine-tuned adjustments here, 9:50 and that looks pretty good. 9:53 I think that paperclip looks pretty round, 9:55 and now we can go ahead and make it look a lot more metallic 9:58 by adding a gradient. 10:02 So we'll go ahead and pick a nice metallic gray color here. 10:04 I think that's pretty good. 10:17 We'll duplicate that color 10:19 so that it's on the other side of the gradient 10:23 and then we have this shiny white area that we can play with in the middle, 10:29 and I think it's a little bit too bright. 10:35 We should make the shininess of this paperclip a little bit lower. 10:37 I think that looks good. 10:47 Maybe it should be a little brighter. 10:49 There we go. 10:52 And now, we can adjust the angle of the light 10:54 so that it looks a bit more realistic, 10:59 and I sort of like that angle there 11:02 and I think that looks good. 11:07 We'll go ahead and accept those changes. 11:09 Now, this paperclip does have a gradient on it 11:14 and I know I said earlier that you should add noise to nearly all gradients, 11:17 but because there's such a small amount of surface area here, 11:22 we really don't need to add any noise because this is already visually varied enough. 11:26 So if we zoom out here, we can start to get a sense 11:35 of what our page is ultimately going to look like. 11:39 I think this is looking pretty good so far. 11:42