Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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.
[?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
You need to sign up for Treehouse in order to download course files.
Sign up