Photoshop: Part 223:14 with Nick Pettit
In this video, we'll finish up our high fidelity mockup in Photoshop. We'll also save all the image assets that we'll need for our page.
[?music?] 0:00 [High Fidelity Mockup: Part 2] 0:02 [Nick Pettit] Now, we've created a lot of layers here and it's best practice 0:06 to put these all into groups, so we'll go ahead and group up just a few of these. 0:10 for our own sanity. 0:15 We'll go ahead and group these quotes or testimonials. 0:17 .We'll go ahead and call the group Quotes. 0:21 We want to group up our button, which includes the text, the noise layer, 0:25 and the actual button layer itself 0:30 and we'll call that Button. 0:33 And then, we want to go ahead and group the left column, 0:36 which includes the tagline, the actual logo, and some text 0:40 describing the application. 0:45 So we'll go ahead and select those, put those into a group, 0:47 and we'll just call that Header. 0:52 And then, we don't really need to put this layer into a group 0:55 because it's its own layer by itself, but we'll go ahead and give it a name. 0:59 We'll just call it Phone. 1:04 That looks good. 1:06 So now, before we go ahead and start filling out the features down below, 1:08 let's go ahead and save this, turn off the guides, 1:12 flip on the background layer, and just zoom out so that we can look at our whole design 1:15 and see how we're doing. 1:21 That looks pretty good so far, and I think we're ready 1:24 to go ahead and start adding in the features down below. 1:27 Now, for these features, we're going to actually add in a few icons 1:31 that have already been made. 1:35 Of course, you can go ahead and create your own icons if you're feeling ambitious, 1:37 but that's not really the focus of our project here, 1:41 so we're just going to go ahead and use some icons from The Crystal Project 1:44 www.everaldo.com/crystal/?action=downloads 1:50 which is a project to bring standard icons to the Linux operating system. 1:53 All of these icons--in the spirit of open-source software--are free to use for any project 1:57 that you'd like. 2:02 Now, if you're following along, you're going to want to go ahead and download 2:03 the 256x256 PNGs here 2:07 and I've gone ahead and already picked out a few icons from that set that we'll use, 2:12 so I'll go ahead and close the browser window here. 2:17 Now I'm going to go ahead and drag our icons that I've picked out into this project 2:20 and it's going to want to place each one of these as a new layer. 2:26 So I'll go ahead and accept each one of these, 2:30 and then we're going to go ahead and place them. 2:34 Let's put these into a group, just to keep everything organized, 2:37 and we'll call this group Features. 2:41 These icons are pretty large for our purposes, 2:45 so the first thing we're going to is actually size all of these down. 2:49 So we'll bring up our transform controls 2:54 and make these smaller, just like that. 2:57 And then, we'll adjust the sizes as needed when we actually place all of these. 3:02 So we'll go ahead and zoom back in here 3:08 and separate these out a little bit and just roughly place them. 3:14 We want the heart down here. 3:17 We want our lightning bolt down here. 3:20 We want our globe actually right where it is 3:26 and we want our notes over here. 3:29 I'm going to go ahead and turn on our guides 3:34 so that we can see where we're placing these. 3:39 And before we continue to place these, let's just go ahead and name them 3:42 to stay organized: this is the Notes layer, 3:46 we'll call this Heart, 3:51 this will be Bolt or Lightning Bolt, 3:54 and this will be the Globe. 3:58 Now, we want the globe to be between columns 4 and 5. 4:00 I need to turn off our gradient layer in order to see the columns. 4:04 There's column 4 and 5 right there, so we'll just keep track of that 4:08 as we scroll down the page here. 4:12 We'll go ahead and move the globe there 4:17 so that it's lined up with column 4, 4:21 and then we'll size it down until it hits column 5, just like that. 4:23 And we'll move that down the page a little bit, 4:31 and then we need to do the same thing for each one of our icons. 4:34 So I'll go ahead and grab these 4:37 and size these down so they're just 2 columns wide. 4:43 We'll move that heart back down 4:47 and we need to do the same thing for our lightning bolt. 4:51 Actually, it's already about 2 columns wide, but it's a little bit too tall, 4:56 so we'll go ahead and just decrease its width a little bit there 5:02 so that it's not actually taking up 2 columns, 5:09 but it has the appearance of being about the same size as the other icons. 5:11 We'll move that back to where it was--right about there. 5:16 And then, finally, we need to do the same thing for our notes. 5:19 So we'll just decrease the size there so it's about 2 columns wide 5:25 and drag that back. 5:32 So now, we need to add some text, and the text will really inform 5:35 where we're actually going to place these icons. 5:40 So I'll select my text tool, 5:43 and we have a globe here because we want to say that this app is global. 5:47 We'll change this to the Pacifico font, 5:54 just to make it a little bit more visually interesting. 5:57 We'll increase the font size here to about 18--actually, well make it a little bit larger, 6:01 maybe up to 24. 6:07 I like how that looks. 6:10 And then, we'll put it in place right next to our globe. 6:13 That looks good. 6:17 And then we also need to make some additional text in Helvetica, 6:19 just sort of elaborating on why this app is global. 6:23 So we'll go ahead and type in the text: 6:27 Keep track of your notes using advanced geolocation technology. 6:30 Now, of course, this is way too wide, so we need to go up to the Layer menu, 6:44 go to Type, and convert that to Paragraph text. 6:50 And then, we'll go ahead and select it, and we need to 6:54 just sort of make it smaller here so it's taking up fewer columns. 6:59 We'll increase the height just to give it some space, 7:05 and then we're going to change this to Helvetica and decrease the font size, 7:09 maybe down to about 15. 7:19 Actually we can go a little smaller here, 7:22 down to about 13. 7:25 That looks good. 7:27 Then we're ready to go ahead and place this, and we want to place it so that it's left-justified 7:30 and lined up with our header there, which says Global. 7:37 I think that looks pretty good. 7:42 Now we'll go ahead and do the same thing for each one of these icons 7:44 and we'll put these into subgroups, actually. 7:49 We'll call this one Globe 7:52 and we'll of course put our globe icon in there. 7:56 And then, we need to duplicate these layers 7:58 so that we can reuse them elsewhere. 8:03 So I'll go ahead and take those out of the group 8:07 and I'll put them with Notes in a Note group-- 8:10 say Notes--and then we need to move those text layers over 8:16 so that they're right next to our notes icon 8:23 and we'll select the Global text here 8:27 and say that this app is easy to use. 8:30 And then, we need to change the description here 8:35 and say something silly, like: 8:39 This app is even easier to use than regular old pen and paper. 8:42 That looks good. 8:52 Again, we'll duplicate these layers. 8:54 Next, I want to go ahead and group these with the Heart. 9:01 Just call that Heart, and then we'll go ahead and move these duplicated text layers 9:07 down next to the Heart. 9:14 There we go. 9:17 And now, we just need to change the text here 9:20 instead of Easy, this will say Friendly. 9:23 And then the description here will say: 9:31 You'll love the experience of taking notes and interacting with GeoNotation. 9:37 I'm going to go ahead and just increase the size of that a little bit there, 9:51 so it's not jumping down to the next line. 9:56 And then, finally, we just need to duplicate this text one more time 9:59 and group it with our Thunderbolt, so we'll move it down there. 10:08 Group these all together, we'll name this Bolt. 10:12 We'll scoot over our text layers; over next to the Bolt 10:20 and instead of Friendly, we'll say that the application is Fast, 10:28 which is of course represented by this Thunderbolt. 10:34 And then for the description of why it's fast, 10:37 we'll go ahead and say GeoNotation is fastest note-taking app on the market. 10:41 Quite a bold statement there. 10:52 So we'll go ahead and close that, 10:56 and now, we need to just adjust the placement of these a little bit. 10:58 We want our Note and Thunderbolt probably to be around columns 14 and 15, 11:03 so we'll go ahead and check up here. 11:10 There's 14 and 15--scroll down here and line those up. 11:14 So first, we'll move our Notes over to just about there. 11:22 And of course we want to make sure this is lined up along the same row 11:32 as our Globe, and then we'll adjust the placement of the text just a little bit here. 11:36 So we want to move this up, 11:41 move this maybe down a little bit; 11:45 and actually, we should move that header back down just a touch. 11:48 There we go. 11:55 And I actually like the placement of Global and Friendly here. 11:56 I think I will move Friendly up just a little bit, 12:02 so we'll select our Heart group and move it up to about there. 12:06 And then, we just need to adjust our Thunderbolt here. 12:09 And again, we'll go ahead and put that right underneath our Note 12:16 and right next to our Heart to line it up. 12:20 And then we'll move our text. 12:24 I'll move Fast down just a hair 12:29 and move our description just a little bit. 12:32 That looks pretty good. 12:36 It doesn't have to be exact. 12:38 And that about covers it. 12:41 We'll go ahead and turn on our background layer again and zoom out, 12:44 just to go ahead and take a look at the design. 12:50 I think this looks pretty good. 12:55 This will look very nice on a large 27" screen 12:58 or 24" screen and we'll be able to slice up this document 13:01 and actually use all of these images in the responsive design. 13:05 So we'll go ahead and save this, 13:11 and next, we're going to open up our phone smart object 13:14 because we need to actually save this out to go ahead and use it in our application. 13:20 There's two things that we need to do to this image. 13:30 I'm going to go ahead and turn on the Info panel 13:33 by going to Window, Info or just hitting the F8 key 13:36 and this will allow us to see exact pixel measurements 13:42 when we go ahead and drag out a selection marquee. 13:46 So I'm going to go ahead and actually select the entire document 13:49 and it says that it's 1011 pixels wide. 13:53 Now, normally, this would be just fine, but you'll notice on the left side here 13:58 we have these buttons and over on the right, we don't; 14:03 it's pretty much flush against the document. 14:07 The problem with this is later on, we're going to want to center this image 14:11 and we can't really center it if there's a little bit more room on the left 14:16 than there is on the right. 14:21 So this is just about 10 pixels here. 14:23 I'll go ahead and select that--zoom in just to make sure we're selecting it exactly right. 14:26 That looks good. 14:37 So it is indeed a width of exactly 10 pixels 14:39 and we want to go ahead and add that on to the right. 14:42 And to do that, we'll go ahead and go to Image, Canvas Size, 14:45 and that will bring up this Canvas dialog box. 14:51 We want to anchor it over on the left, 14:54 and we'll change the width to 1021 pixels, 14:58 just to add 10 on the right. 15:02 There we go. 15:05 We'll go ahead and save that, and that will have a small effect 15:07 on our larger document, but it's going to be so minimal 15:11 that it's not really going to matter. 15:14 And the next thing we need to do is actually mask off part of this image. 15:16 We're going to be putting a video inside of this phone 15:22 and we want to just go ahead and black this out just so that none of this shines through 15:26 should this image load up before the video comes up. 15:33 This will also decrease the overall file size of this image. 15:36 So this will be pretty simple. 15:40 We'll go ahead and just create a new shape here using the rectangle tool 15:43 and we want to be a little bit precise here. 15:48 We'll go ahead and drag this out so that it's covering our image on the phone. 15:53 We'll crop it just about there, 16:04 and when we zoom back out, you can see that our phone is now blacked out, 16:08 and that will look really good when we put a video on top of it. 16:15 So we'll go ahead and save that out, and we'll switch back to our actual layout, 16:18 and there's what it's looking like--so, pretty good. 16:25 Now we need to go ahead and actually start saving out 16:29 all of these different assets. 16:32 So I'm going to go ahead and bring up the Save for Web dialog box, 16:34 which you can access by going to File, Save for Web and Devices. 16:40 I'm going to want to save this as a full 24-bit transparent PNG image, 16:45 which is quite large at this point. 16:52 It's all the way up to 435k. 16:55 Now, we don't actually need all of that resolution. 16:58 When we place this image into our fluid grid, 17:02 it will resize on its own and the only reason we need it to be this large 17:05 is for really large monitors. 17:10 So we'll go ahead and decrease the width down to about 660 pixels 17:12 and it has a height of 1162 pixels--that's fine 17:19 and that's going to cut down on our file size. 17:25 We just commit that, and now you can see that we're down to about 160k. 17:29 We'll go ahead and save this out, and we're going to save this to our images folder 17:36 and we're going to call this image Phone. 17:44 I'll go ahead and save that. 17:47 Now we need to create a second version 17:51 that will actually just be a static version of this image 17:53 should a browser not support HTML5 video. 17:57 Now, I already have a screen shot 18:00 from the videos that have already been created-- 18:03 and I'll go ahead and commit that--and we'll move it into position here. 18:06 We want this to be lined up pretty nicely with our screen. 18:10 That looks good, and we'll move it over just a little bit 18:19 and zoom in to make sure that this is indeed in the right spot. 18:23 It might help to actually turn off that mask there. 18:28 There we go. 18:39 And then, we just need to check the bottom corner here 18:40 and it's hitting the corner perfectly. 18:44 We'll go ahead and zoom out and see how that looks. 18:48 That looks pretty good. 18:54 Now we're ready to go ahead and save this for web. 18:56 So again, I'll go up to File, Save for Web and Devices, 18:59 and because there's so much going on in this image, 19:04 we actually want it to just be a JPG. 19:06 So we'll switch to JPG there and that will bring us down to 133k, 19:09 but we can do a little bit better than that. 19:16 We need to change the matte color here 19:18 to the same color as our light gray background, 19:21 which is again, C5 in hexadecimal. 19:24 And once again, we definitely don't need all of this resolution, 19:28 so we're going to decrease the image size down to about 800 pixels across 19:32 We'll go ahead and commit that, save the file, 19:37 and in our images directory here, 19:41 we'll go ahead and call this file phone_static 19:44 and we'll save out our smart object there, 19:50 just to commit it to our document. 19:53 And now, we're actually done with this particular smart object. 19:55 The next thing we need to save out is the noise that we created 20:01 for our button here, so we'll go ahead and go to our Button layer 20:05 and we're just going to go ahead and turn off this mask, 20:14 set the opacity to 100 percent, 20:19 set the blending mode to normal, 20:24 and then we're going to go ahead and turn off all the layers above it and below it. 20:27 And then we're just going to go ahead and flatten the entire image 20:40 by going to Layer, Flatten Image. 20:44 And then, we just need a small sample of this noise, 20:46 so we'll go ahead and drag out our selection marquee 20:49 and we'll crop that image. 20:56 And then, again, we'll Save for Web, 20:59 and there's our noise image. 21:01 We want this to be a PNG image, and we can size it down to 128x128. 21:04 And then we'll go ahead and save it and we will call this noise.png 21:14 and accept that. 21:24 Then we'll go ahead and just undo all of the changes we just did 21:29 and turn our layers back on. 21:37 We'll zoom out and we're almost done here. 21:41 Now we just need to save our actual logo, 21:45 so we'll go ahead and again, open up this smart object 21:50 that says GeoNotation, and all we need to do 21:55 is just save this, 21:58 and we want to save it as a full 24-bit PNG 22:00 so we get nice anti-aliasing along the edges. 22:04 Then we'll go ahead and save it, and we're going to call this image geonotation 22:08 and save that to our images directory. 22:17 We'll go ahead and save any changes that may have been made there 22:20 and switch back to our document and save it 22:23 and we'll zoom out here to take one more look. 22:27 And that's about it for our high fidelity mockup. 22:31 We've created a mockup and we've sliced it up so that we have all the assets 22:34 that we're going to need when we're actually building our site. 22:39 And of course, we have our nice grid here, which we'll be using soon 22:42 to make all of our fluid grid calculations. 22:47 We're done creating our design and we now have a high fidelity mockup, 22:51 which we'll use later on when we generate all of the calculations 22:56 for our fluid grid. 23:00 In the next Master Class, we'll code up all the HTML and CSS, 23:02 create a fluid grid, and make our design responsive 23:06 across a wide array of screen resolutions. 23:10
You need to sign up for Treehouse in order to download course files.Sign up