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 finish up our high fidelity mockup in Photoshop. We'll also save all the image assets that we'll need for our page.
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 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up