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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[?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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up