[?music?]

[High Fidelity Mockup: Part 1]

[Nick Pettit] We just got finished creating a low fidelity mockup,

so at this point, you might be wondering

why aren't we just jumping straight into the HTML and CSS?

Why even bother with a high fidelity mockup if we don't really need it?

Well, the truth is we do need it

and we need it because we have to use it to create all the calculations

for our fluid grid layout.

Now, what we're starting out with here is just a very simple grid

and this is actually from the Blueprint CSS project.

It's a PSD that is included in the asset files.

And if we go ahead and turn on our guides here,

you can see that we have some really nice guides that will help us line up

all of our elements on the page.

So I'll go ahead and turn those off, and the first thing that I'm going to do

is just create a gradient background, so I'll go ahead and create a new layer

and I'll just fill it in with a solid color.

And of course, this is actually going to cover up our grid,

but we'll go ahead and turn this off when we're done creating this gradient background.

So I'll say gradient overlay, and we want this to be a linear gradient,

so that's fine.

And then, we want to adjust the gradient colors here.

We want this to go from a solid white color

down into sort of a light gray.

So we'll go with maybe C5 there, as a hexadecimal value.

That looks pretty good.

And then, we need to actually tighten up our gradient,

because we only want a little bit of white towards the top of the page.

So that looks pretty good to me.

We'll go ahead and accept those changes

and save this file.

You always want to make sure to continuously save your files

so you don't lose any changes should Photoshop or your image editor crash.

Now we'll go ahead and turn off this layer

so that we can see our grid again, but just be aware that we do have that gradient there

should we need to look at it.

So the next thing we're going to do is add in the actual phone

because that's the most prominent part of this layout

and that's the thing that we really want to use to capture the overall essence of the layout.

So I've actually taken the liberty of creating this asset beforehand,

so I'll just go ahead and open that up,

and I'll zoom in here just so you can see the high resolution that this phone is at.

We've also go ahead and cut out the background so that this will be transparent.

Now, I've actually put this into a smart object,

so we'll go ahead and put our documents side by side here

and we'll just drag our layer over to our grid document.

And then, we can go ahead an safely close this

and now, of course, this is huge and we need to resize our smart object.

So we'll go ahead and zoom out

and put our guides up

and we'll resize this by turning on our Transform controls

and just dragging here, just like that.

That looks like a pretty good size

and we'll go ahead and drag that into the middle of the page

and zoom back in so that we can place it a little bit more accurately.

Right here is the exact center of the page and that's about where we want our phone to be

but we do want this to take up a certain number of rows

and I want this to be across rows 9-16.

So we'll move it over a little bit

and just size it up until it hits the 16th row

and we're centered on the page; that looks good.

I'll go ahead and hit Enter to accept those sizing changes

and that's right where we want the phone.

So that looks good.

The next thing we want to do is add in some text

on both the left side and the right side.

We'll start out with the left because that's where we're going to put the logo

and that's probably where people will be looking first.

We'll go ahead and create a new text layer

and this is going to be for the logo

so I'll type out the name of our app, GeoNotation.

And it looks like we're on a white font here, so we need to make some adjustments

to our font.

We'll change it to maybe a just-off-black color,

at about 22 all the way across in hexadecimal

and we'll accept that.

I have a very specific font picked out here.

It's called Pacifico, and later on, I'll show you where to get that font from

because we actually need to use that as a CSS3 font in our layout.

So this looks pretty small, and we need to make it a lot larger

if we're actually going to use it for our logo.

Now, we could just go ahead and increase the font size on this,

but it would actually be a lot better to put this into a smart object

because for this logo, we need to make an image for it to respond

to all of the different various layouts.

We can't actually use webfonts for this particular image

and we'll get into that a little bit later on,

but for now, let's just go ahead and take this text layer

and we will convert it to a smart object.

And I'll go ahead and open that smart object up,

and this needs to be a lot larger, so I'm going to increase the canvas size here,

and we'll make the width about 700 pixels across

and the height 165 pixels tall.

And then, we need to take the text layer

that's inside of our smart object here

and just increase the size to the point where it takes up the entire area here.

So we'll try maybe something like 130 points,

and we'll move it a little bit.

That's almost just right, but we need to make it a little bit larger,

so we'll go ahead and just increase the font size a little bit more,

maybe up to about 136.

That looks pretty good.

It's still getting cut off, though, so we do need to make it a bit smaller.

And there we have it, so we'll go ahead and save our smart object

and close that.

And now we have this nice big logo inside of our actual layout.

What we'll do later on is open up this smart object

and save it out as a separate image because we'll need that as an asset

in our actual site.

But for now, while we're just actually laying out our page,

we'll go ahead and turn on the grids and resize this

so it's actually much smaller

and I'm holding down shift here so that it maintains its aspect ratio.

I want this to be between columns 2 and 7

so that looks just about right.

I want to put it maybe a little bit lower here in the layout, and that's good.

So I'll go ahead and hit Enter there to save that out,

and then we need to put our tagline just below that.

And again, our tagline is Take Notes Anywhere.

This is way too large and it's not on the correct color,

so we'll go ahead and switch that over to the right color,

and we'll decrease the font size quite a bit here;

maybe just a little bit smaller here, down to 16.

Actually, I'll go down to 14.

That looks good.

And we'll go ahead and move that into position,

just below our logo graphic, and we need to change the font on this.

I'm going to go ahead and just use Helvetica

for any fonts that are actually not our logo

or this sort of scripty Pacifico font

and we'll place that again.

That looks pretty good so far.

Now, there are lots of other elements that we need to include here.

The next thing we're going to put in is some paragraph text

so I'll go ahead and select my text tool

and I'll just type a little bit here.

And then, I'm going to actually commit those changes

and I'm going to go up to the Layers menu

and convert this type layer into paragraph text.

So now when I select my type tool and actually select this layer,

I can go ahead and make it any size I want

and then fill it out with real text.

So we'll go ahead and give it a little bit more room there.

That looks pretty good.

And of course, we want to try and stick to a gridded layout here,

so we're staying between the columns 2 and 7,

just like our logo.

I'm going to copy some text from off-screen into our paragraph text here,

and I'll go ahead and select our paragraph text and paste it into our layout.

And of course, this font size is way too large, so we'll go ahead and commit the text we have

and make this much smaller.

That's looking pretty good; we'll maybe go down to about 14.

Actually, that's too small.

We'll go up to 16.

That looks good.

And now, we're ready to add in our call to action button

over on the right side here.

So first, we're going to drag out a shape

and we'll use a rounded rectangle with a border radius of about 10 pixels.

We want one column of separation between the actual phone and the button,

just like how we have one column of separation between the phone and our logo.

So we'll drag that out and let it be about 3 rows tall.

We want this to be between columns 18 and 23.

So we've dragged that out, and now we're ready to apply some effects to this button.

So I'm going to turn off the guides here

so that we can see this button a little bit more clearly.

And of course, it's white right now, but we'll change that in just a second.

So we'll double-click on the layer,

and in the Layer Style window, the first thing we're going to do

is add a gradient overlay

and we'll go ahead and pick out a few green colors here.

This doesn't necessarily have to be exact.

We can always change these later in the HTML.

So that green looks pretty good,

and we'll copy this and give the top part sort of a lighter green color

and make it just a little bit of a change in hue.

Actually, we'll make it a lot lighter.

There we go.

That looks good; I'll go ahead and accept those changes.

The next thing we need to do is add in a drop shadow

and we don't want to use the global light.

We'll change that to an angle of 90 degrees.

We want the Spread to be 0, the Distance to be about 3,

and the Size to be about 1.

We want this to be a pretty tight shadow.

Actually, we'll tighten that up even more,

maybe just give it 2 pixels of distance.

That looks pretty good.

And now, we want to add just a slight white line

right at the top of our button, just to give it a little bit of a shine,

so to do that, we'll go ahead and create an inner shadow

and we'll set the Blending mode to normal.

We want to set the color to full white.

And of course, we don't want to use the global light in this case.

We want to set the angle to 90 degrees.

We'll set the distance again to about 2.

We want to set the size down to 0

so that it's a very tight white line

and that looks pretty good so I'll go ahead and accept those changes.

And now we have this nice, really simple-looking button.

Now there are still a few more things that we need to do to this,

and the first thing we want to do is add some noise to this button.

So I'm actually going to go ahead and create a new layer

and I'm going to fill it just by hitting Command-Delete on the Mac,

and that's going to actually fill the entire screen--that's the expected result.

And so we'll go ahead and go up to the Filter menu, Noise, and Add Noise

and that's going to bring up this dialog box here.

We want to actually add a lot of noise--I have it maxed out at 400 percent.

We want some Gaussian noise and we want it to be monochromatic,

so we'll go ahead and hit OK.

We're going to copy the layer mask

and then we're going to copy the vector mask over to our noise layer,

and that's going to isolate the noise to our button.

Now, we're going to change the blending mode on this

to Screen and we'll go ahead and reduce the opacity,

maybe down to about 10 percent,

which is a little bit exaggerated, but I want to make sure that you can see it.

And the reason that we're adding this noise

is to give our button a lot more depth aesthetically,

and this will also combat color banding should this be seen at a lower bit depth

so that we don't get those bands running across the button;

we just get a nice smooth gradient with a little bit of dithering

done by this noise.

So now, we'll go ahead and add some text right on top of this.

I'll go ahead and select my text tool

and we'll go ahead and actually switch our colors here

so that it starts out as black

and we'll type out the text Start Taking Notes.

We'll put this right on top of our button,

and actually we do want this text to be white, so we'll switch it back again.

Switch to our text tool and go ahead and select a white color here.

That looks good.

And of course, we need to change this to Helvetica

and increase the font size quite a bit here.

That looks pretty good.

We'll go ahead and move this so that it's centered on our button

and we actually want this to be bold, so we'll select Helvetica bold,

just like that, and size it down just a little bit.

That looks good.

And then, we can go ahead and recenter this,

just like that.

Now, we're going to go ahead and add a drop shadow to this,

and when we move over into CSS, this will actually be a text shadow.

So we'll add a drop shadow, we'll turn off the global light

and we want this to be at an angle of -90 degrees

so it's actually appearing above our text.

We want the distance to be pretty tight.

We'll start out at about 2 pixels

and we'll set this size to 1--actually, maybe 0.

We do need to decrease that distance;

tighten it up, down to 1 pixel

and that looks pretty good.

I'll go ahead and accept those changes, and the reason that we're adding in that shadow

is so that this text looks like it's actually imprinted into the button

and there's this slight shadow just above the ridge of the text.

So the next thing I'm going to do is add some quotes

right below our Start Taking Notes button.

And to do that, we're going to go ahead and select our text layer again

and this is going to be that quote from Ryan Carson, "Holy heck, it's awesome!"

And if we want this text to be black, that looks good.

And we're going to use a little bit more of a scripty font--that same Pacifico font

that we picked out earlier because we want this to look like it's handwritten

to just humanize it a little bit more since it is a quote.

We want this to be centered just between the end points of our button there.

We'll go ahead and turn on the guides just to make sure that it is.

That looks good.

And we'll actually go ahead and move that down the page just a little bit

using the arrow keys.

That's a little bit too far down; we'll move it up.

That looks good.

And then we need to write in who the quote is actually from,

and of course, this quote is from Ryan Carson himself,

and this we want to change to Helvetica just so it's a nice, printed name.

We'll make that a little bit smaller;

maybe up to about 16.

And then, of course, we'll center it right underneath our quote, just like that.

Now we'll go ahead and duplicate this first quote here

and we'll move it down the page, because this is going to be our second quote,

which will actually be from me.

I'll say, "This changes everything."

And then, we'll go ahead and duplicate the layer for the name

and we'll move that down the page.

That looks about right.

We'll change this to my name, Nick Pettit.