Photoshop: Part 1

[?music?] 0:00 [High Fidelity Mockup: Part 1] 0:02 [Nick Pettit] We just got finished creating a low fidelity mockup, 0:05 so at this point, you might be wondering 0:10 why aren't we just jumping straight into the HTML and CSS? 0:12 Why even bother with a high fidelity mockup if we don't really need it? 0:15 Well, the truth is we do need it 0:20 and we need it because we have to use it to create all the calculations 0:22 for our fluid grid layout. 0:27 Now, what we're starting out with here is just a very simple grid 0:29 and this is actually from the Blueprint CSS project. 0:34 It's a PSD that is included in the asset files. 0:38 And if we go ahead and turn on our guides here, 0:43 you can see that we have some really nice guides that will help us line up 0:46 all of our elements on the page. 0:51 So I'll go ahead and turn those off, and the first thing that I'm going to do 0:53 is just create a gradient background, so I'll go ahead and create a new layer 0:58 and I'll just fill it in with a solid color. 1:03 And of course, this is actually going to cover up our grid, 1:07 but we'll go ahead and turn this off when we're done creating this gradient background. 1:11 So I'll say gradient overlay, and we want this to be a linear gradient, 1:16 so that's fine. 1:21 And then, we want to adjust the gradient colors here. 1:23 We want this to go from a solid white color 1:26 down into sort of a light gray. 1:30 So we'll go with maybe C5 there, as a hexadecimal value. 1:33 That looks pretty good. 1:39 And then, we need to actually tighten up our gradient, 1:41 because we only want a little bit of white towards the top of the page. 1:44 So that looks pretty good to me. 1:48 We'll go ahead and accept those changes 1:51 and save this file. 1:54 You always want to make sure to continuously save your files 1:56 so you don't lose any changes should Photoshop or your image editor crash. 1:59 Now we'll go ahead and turn off this layer 2:04 so that we can see our grid again, but just be aware that we do have that gradient there 2:08 should we need to look at it. 2:12 So the next thing we're going to do is add in the actual phone 2:15 because that's the most prominent part of this layout 2:19 and that's the thing that we really want to use to capture the overall essence of the layout. 2:23 So I've actually taken the liberty of creating this asset beforehand, 2:29 so I'll just go ahead and open that up, 2:32 and I'll zoom in here just so you can see the high resolution that this phone is at. 2:35 We've also go ahead and cut out the background so that this will be transparent. 2:42 Now, I've actually put this into a smart object, 2:48 so we'll go ahead and put our documents side by side here 2:52 and we'll just drag our layer over to our grid document. 2:57 And then, we can go ahead an safely close this 3:02 and now, of course, this is huge and we need to resize our smart object. 3:06 So we'll go ahead and zoom out 3:12 and put our guides up 3:16 and we'll resize this by turning on our Transform controls 3:19 and just dragging here, just like that. 3:24 That looks like a pretty good size 3:32 and we'll go ahead and drag that into the middle of the page 3:34 and zoom back in so that we can place it a little bit more accurately. 3:37 Right here is the exact center of the page and that's about where we want our phone to be 3:43 but we do want this to take up a certain number of rows 3:48 and I want this to be across rows 9-16. 3:53 So we'll move it over a little bit 3:58 and just size it up until it hits the 16th row 4:03 and we're centered on the page; that looks good. 4:09 I'll go ahead and hit Enter to accept those sizing changes 4:12 and that's right where we want the phone. 4:16 So that looks good. 4:20 The next thing we want to do is add in some text 4:21 on both the left side and the right side. 4:24 We'll start out with the left because that's where we're going to put the logo 4:28 and that's probably where people will be looking first. 4:32 We'll go ahead and create a new text layer 4:34 and this is going to be for the logo 4:39 so I'll type out the name of our app, GeoNotation. 4:42 And it looks like we're on a white font here, so we need to make some adjustments 4:45 to our font. 4:50 We'll change it to maybe a just-off-black color, 4:52 at about 22 all the way across in hexadecimal 4:57 and we'll accept that. 5:03 I have a very specific font picked out here. 5:06 It's called Pacifico, and later on, I'll show you where to get that font from 5:10 because we actually need to use that as a CSS3 font in our layout. 5:15 So this looks pretty small, and we need to make it a lot larger 5:20 if we're actually going to use it for our logo. 5:25 Now, we could just go ahead and increase the font size on this, 5:27 but it would actually be a lot better to put this into a smart object 5:31 because for this logo, we need to make an image for it to respond 5:35 to all of the different various layouts. 5:40 We can't actually use webfonts for this particular image 5:43 and we'll get into that a little bit later on, 5:46 but for now, let's just go ahead and take this text layer 5:49 and we will convert it to a smart object. 5:52 And I'll go ahead and open that smart object up, 5:56 and this needs to be a lot larger, so I'm going to increase the canvas size here, 6:00 and we'll make the width about 700 pixels across 6:07 and the height 165 pixels tall. 6:11 And then, we need to take the text layer 6:16 that's inside of our smart object here 6:19 and just increase the size to the point where it takes up the entire area here. 6:22 So we'll try maybe something like 130 points, 6:28 and we'll move it a little bit. 6:33 That's almost just right, but we need to make it a little bit larger, 6:36 so we'll go ahead and just increase the font size a little bit more, 6:41 maybe up to about 136. 6:46 That looks pretty good. 6:50 It's still getting cut off, though, so we do need to make it a bit smaller. 6:53 And there we have it, so we'll go ahead and save our smart object 6:59 and close that. 7:04 And now we have this nice big logo inside of our actual layout. 7:05 What we'll do later on is open up this smart object 7:10 and save it out as a separate image because we'll need that as an asset 7:13 in our actual site. 7:17 But for now, while we're just actually laying out our page, 7:19 we'll go ahead and turn on the grids and resize this 7:22 so it's actually much smaller 7:26 and I'm holding down shift here so that it maintains its aspect ratio. 7:29 I want this to be between columns 2 and 7 7:34 so that looks just about right. 7:39 I want to put it maybe a little bit lower here in the layout, and that's good. 7:42 So I'll go ahead and hit Enter there to save that out, 7:47 and then we need to put our tagline just below that. 7:51 And again, our tagline is Take Notes Anywhere. 7:56 This is way too large and it's not on the correct color, 8:05 so we'll go ahead and switch that over to the right color, 8:09 and we'll decrease the font size quite a bit here; 8:13 maybe just a little bit smaller here, down to 16. 8:18 Actually, I'll go down to 14. 8:23 That looks good. 8:26 And we'll go ahead and move that into position, 8:28 just below our logo graphic, and we need to change the font on this. 8:31 I'm going to go ahead and just use Helvetica 8:36 for any fonts that are actually not our logo 8:40 or this sort of scripty Pacifico font 8:45 and we'll place that again. 8:49 That looks pretty good so far. 8:51 Now, there are lots of other elements that we need to include here. 8:54 The next thing we're going to put in is some paragraph text 8:58 so I'll go ahead and select my text tool 9:00 and I'll just type a little bit here. 9:04 And then, I'm going to actually commit those changes 9:07 and I'm going to go up to the Layers menu 9:11 and convert this type layer into paragraph text. 9:13 So now when I select my type tool and actually select this layer, 9:18 I can go ahead and make it any size I want 9:21 and then fill it out with real text. 9:24 So we'll go ahead and give it a little bit more room there. 9:27 That looks pretty good. 9:31 And of course, we want to try and stick to a gridded layout here, 9:33 so we're staying between the columns 2 and 7, 9:38 just like our logo. 9:43 I'm going to copy some text from off-screen into our paragraph text here, 9:45 and I'll go ahead and select our paragraph text and paste it into our layout. 9:50 And of course, this font size is way too large, so we'll go ahead and commit the text we have 9:58 and make this much smaller. 10:03 That's looking pretty good; we'll maybe go down to about 14. 10:07 Actually, that's too small. 10:12 We'll go up to 16. 10:14 That looks good. 10:17 And now, we're ready to add in our call to action button 10:19 over on the right side here. 10:23 So first, we're going to drag out a shape 10:25 and we'll use a rounded rectangle with a border radius of about 10 pixels. 10:28 We want one column of separation between the actual phone and the button, 10:35 just like how we have one column of separation between the phone and our logo. 10:41 So we'll drag that out and let it be about 3 rows tall. 10:47 We want this to be between columns 18 and 23. 10:54 So we've dragged that out, and now we're ready to apply some effects to this button. 11:00 So I'm going to turn off the guides here 11:06 so that we can see this button a little bit more clearly. 11:08 And of course, it's white right now, but we'll change that in just a second. 11:11 So we'll double-click on the layer, 11:15 and in the Layer Style window, the first thing we're going to do 11:17 is add a gradient overlay 11:21 and we'll go ahead and pick out a few green colors here. 11:24 This doesn't necessarily have to be exact. 11:30 We can always change these later in the HTML. 11:35 So that green looks pretty good, 11:39 and we'll copy this and give the top part sort of a lighter green color 11:42 and make it just a little bit of a change in hue. 11:51 Actually, we'll make it a lot lighter. 11:55 There we go. 11:58 That looks good; I'll go ahead and accept those changes. 12:00 The next thing we need to do is add in a drop shadow 12:04 and we don't want to use the global light. 12:07 We'll change that to an angle of 90 degrees. 12:10 We want the Spread to be 0, the Distance to be about 3, 12:16 and the Size to be about 1. 12:23 We want this to be a pretty tight shadow. 12:26 Actually, we'll tighten that up even more, 12:28 maybe just give it 2 pixels of distance. 12:30 That looks pretty good. 12:33 And now, we want to add just a slight white line 12:35 right at the top of our button, just to give it a little bit of a shine, 12:39 so to do that, we'll go ahead and create an inner shadow 12:44 and we'll set the Blending mode to normal. 12:48 We want to set the color to full white. 12:51 And of course, we don't want to use the global light in this case. 12:55 We want to set the angle to 90 degrees. 13:01 We'll set the distance again to about 2. 13:04 We want to set the size down to 0 13:08 so that it's a very tight white line 13:11 and that looks pretty good so I'll go ahead and accept those changes. 13:15 And now we have this nice, really simple-looking button. 13:20 Now there are still a few more things that we need to do to this, 13:24 and the first thing we want to do is add some noise to this button. 13:28 So I'm actually going to go ahead and create a new layer 13:32 and I'm going to fill it just by hitting Command-Delete on the Mac, 13:36 and that's going to actually fill the entire screen--that's the expected result. 13:42 And so we'll go ahead and go up to the Filter menu, Noise, and Add Noise 13:46 and that's going to bring up this dialog box here. 13:51 We want to actually add a lot of noise--I have it maxed out at 400 percent. 13:54 We want some Gaussian noise and we want it to be monochromatic, 14:00 so we'll go ahead and hit OK. 14:04 We're going to copy the layer mask 14:07 and then we're going to copy the vector mask over to our noise layer, 14:12 and that's going to isolate the noise to our button. 14:17 Now, we're going to change the blending mode on this 14:20 to Screen and we'll go ahead and reduce the opacity, 14:24 maybe down to about 10 percent, 14:29 which is a little bit exaggerated, but I want to make sure that you can see it. 14:33 And the reason that we're adding this noise 14:38 is to give our button a lot more depth aesthetically, 14:40 and this will also combat color banding should this be seen at a lower bit depth 14:44 so that we don't get those bands running across the button; 14:49 we just get a nice smooth gradient with a little bit of dithering 14:52 done by this noise. 14:56 So now, we'll go ahead and add some text right on top of this. 14:58 I'll go ahead and select my text tool 15:02 and we'll go ahead and actually switch our colors here 15:04 so that it starts out as black 15:08 and we'll type out the text Start Taking Notes. 15:11 We'll put this right on top of our button, 15:18 and actually we do want this text to be white, so we'll switch it back again. 15:21 Switch to our text tool and go ahead and select a white color here. 15:26 That looks good. 15:32 And of course, we need to change this to Helvetica 15:33 and increase the font size quite a bit here. 15:39 That looks pretty good. 15:44 We'll go ahead and move this so that it's centered on our button 15:46 and we actually want this to be bold, so we'll select Helvetica bold, 15:50 just like that, and size it down just a little bit. 15:57 That looks good. 16:00 And then, we can go ahead and recenter this, 16:03 just like that. 16:06 Now, we're going to go ahead and add a drop shadow to this, 16:08 and when we move over into CSS, this will actually be a text shadow. 16:13 So we'll add a drop shadow, we'll turn off the global light 16:17 and we want this to be at an angle of -90 degrees 16:21 so it's actually appearing above our text. 16:26 We want the distance to be pretty tight. 16:29 We'll start out at about 2 pixels 16:33 and we'll set this size to 1--actually, maybe 0. 16:35 We do need to decrease that distance; 16:40 tighten it up, down to 1 pixel 16:43 and that looks pretty good. 16:46 I'll go ahead and accept those changes, and the reason that we're adding in that shadow 16:48 is so that this text looks like it's actually imprinted into the button 16:53 and there's this slight shadow just above the ridge of the text. 16:57 So the next thing I'm going to do is add some quotes 17:03 right below our Start Taking Notes button. 17:06 And to do that, we're going to go ahead and select our text layer again 17:09 and this is going to be that quote from Ryan Carson, "Holy heck, it's awesome!" 17:14 And if we want this text to be black, that looks good. 17:25 And we're going to use a little bit more of a scripty font--that same Pacifico font 17:29 that we picked out earlier because we want this to look like it's handwritten 17:36 to just humanize it a little bit more since it is a quote. 17:41 We want this to be centered just between the end points of our button there. 17:45 We'll go ahead and turn on the guides just to make sure that it is. 17:52 That looks good. 17:55 And we'll actually go ahead and move that down the page just a little bit 17:57 using the arrow keys. 18:01 That's a little bit too far down; we'll move it up. 18:03 That looks good. 18:06 And then we need to write in who the quote is actually from, 18:08 and of course, this quote is from Ryan Carson himself, 18:14 and this we want to change to Helvetica just so it's a nice, printed name. 18:20 We'll make that a little bit smaller; 18:25 maybe up to about 16. 18:28 And then, of course, we'll center it right underneath our quote, just like that. 18:31 Now we'll go ahead and duplicate this first quote here 18:39 and we'll move it down the page, because this is going to be our second quote, 18:46 which will actually be from me. 18:52 I'll say, "This changes everything." 18:55 And then, we'll go ahead and duplicate the layer for the name 19:02 and we'll move that down the page. 19:06 That looks about right. 19:09 We'll change this to my name, Nick Pettit. 19:12