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