1
00:00:00,000 --> 00:00:02,000
[?music?]

2
00:00:02,000 --> 00:00:06,000
[High Fidelity Mockup: Part 2]

3
00:00:06,000 --> 00:00:10,000
[Nick Pettit] Now, we've created a lot of layers here and it's best practice

4
00:00:10,000 --> 00:00:15,000
to put these all into groups, so we'll go ahead and group up just a few of these.

5
00:00:15,000 --> 00:00:17,000
for our own sanity.

6
00:00:17,000 --> 00:00:21,000
We'll go ahead and group these quotes or testimonials.

7
00:00:21,000 --> 00:00:25,000
.We'll go ahead and call the group Quotes.

8
00:00:25,000 --> 00:00:30,000
We want to group up our button, which includes the text, the noise layer,

9
00:00:30,000 --> 00:00:33,000
and the actual button layer itself

10
00:00:33,000 --> 00:00:36,000
and we'll call that Button.

11
00:00:36,000 --> 00:00:40,000
And then, we want to go ahead and group the left column,

12
00:00:40,000 --> 00:00:45,000
which includes the tagline, the actual logo, and some text

13
00:00:45,000 --> 00:00:47,000
describing the application. 

14
00:00:47,000 --> 00:00:52,000
So we'll go ahead and select those, put those into a group,

15
00:00:52,000 --> 00:00:55,000
and we'll just call that Header.

16
00:00:55,000 --> 00:00:59,000
And then, we don't really need to put this layer into a group

17
00:00:59,000 --> 00:01:04,000
because it's its own layer by itself, but we'll go ahead and give it a name.

18
00:01:04,000 --> 00:01:06,000
We'll just call it Phone.

19
00:01:06,000 --> 00:01:08,000
That looks good.

20
00:01:08,000 --> 00:01:12,000
So now, before we go ahead and start filling out the features down below, 

21
00:01:12,000 --> 00:01:15,000
let's go ahead and save this, turn off the guides,

22
00:01:15,000 --> 00:01:21,000
flip on the background layer, and just zoom out so that we can look at our whole design

23
00:01:21,000 --> 00:01:24,000
and see how we're doing.

24
00:01:24,000 --> 00:01:27,000
That looks pretty good so far, and I think we're ready

25
00:01:27,000 --> 00:01:31,000
to go ahead and start adding in the features down below.

26
00:01:31,000 --> 00:01:35,000
Now, for these features, we're going to actually add in a few icons 

27
00:01:35,000 --> 00:01:37,000
that have already been made. 

28
00:01:37,000 --> 00:01:41,000
Of course, you can go ahead and create your own icons if you're feeling ambitious,

29
00:01:41,000 --> 00:01:44,000
but that's not really the focus of our project here,

30
00:01:44,000 --> 00:01:50,000
so we're just going to go ahead and use some icons from The Crystal Project

31
00:01:50,000 --> 00:01:53,000
www.everaldo.com/crystal/?action=downloads

32
00:01:53,000 --> 00:01:57,000
which is a project to bring standard icons to the Linux operating system.

33
00:01:57,000 --> 00:02:02,000
All of these icons--in the spirit of open-source software--are free to use for any project

34
00:02:02,000 --> 00:02:03,000
that you'd like. 

35
00:02:03,000 --> 00:02:07,000
Now, if you're following along, you're going to want to go ahead and download

36
00:02:07,000 --> 00:02:12,000
the 256x256 PNGs here

37
00:02:12,000 --> 00:02:17,000
and I've gone ahead and already picked out a few icons from that set that we'll use,

38
00:02:17,000 --> 00:02:20,000
so I'll go ahead and close the browser window here.

39
00:02:20,000 --> 00:02:26,000
Now I'm going to go ahead and drag our icons that I've picked out into this project

40
00:02:26,000 --> 00:02:30,000
and it's going to want to place each one of these as a new layer.

41
00:02:30,000 --> 00:02:34,000
So I'll go ahead and accept each one of these,

42
00:02:34,000 --> 00:02:37,000
and then we're going to go ahead and place them.

43
00:02:37,000 --> 00:02:41,000
Let's put these into a group, just to keep everything organized,

44
00:02:41,000 --> 00:02:45,000
and we'll call this group Features.

45
00:02:45,000 --> 00:02:49,000
These icons are pretty large for our purposes, 

46
00:02:49,000 --> 00:02:54,000
so the first thing we're going to is actually size all of these down.

47
00:02:54,000 --> 00:02:57,000
So we'll bring up our transform controls

48
00:02:57,000 --> 00:03:02,000
and make these smaller, just like that. 

49
00:03:02,000 --> 00:03:08,000
And then, we'll adjust the sizes as needed when we actually place all of these.

50
00:03:08,000 --> 00:03:14,000
So we'll go ahead and zoom back in here

51
00:03:14,000 --> 00:03:17,000
and separate these out a little bit and just roughly place them.

52
00:03:17,000 --> 00:03:20,000
We want the heart down here.

53
00:03:20,000 --> 00:03:26,000
We want our lightning bolt down here.

54
00:03:26,000 --> 00:03:29,000
We want our globe actually right where it is

55
00:03:29,000 --> 00:03:34,000
and we want our notes over here.

56
00:03:34,000 --> 00:03:39,000
I'm going to go ahead and turn on our guides

57
00:03:39,000 --> 00:03:42,000
so that we can see where we're placing these.

58
00:03:42,000 --> 00:03:46,000
And before we continue to place these, let's just go ahead and name them

59
00:03:46,000 --> 00:03:51,000
to stay organized: this is the Notes layer,

60
00:03:51,000 --> 00:03:54,000
we'll call this Heart,

61
00:03:54,000 --> 00:03:58,000
this will be Bolt or Lightning Bolt,

62
00:03:58,000 --> 00:04:00,000
and this will be the Globe.

63
00:04:00,000 --> 00:04:04,000
Now, we want the globe to be between columns 4 and 5.

64
00:04:04,000 --> 00:04:08,000
I need to turn off our gradient layer in order to see the columns.

65
00:04:08,000 --> 00:04:12,000
There's column 4 and 5 right there, so we'll just keep track of that

66
00:04:12,000 --> 00:04:17,000
as we scroll down the page here.

67
00:04:17,000 --> 00:04:21,000
We'll go ahead and move the globe there

68
00:04:21,000 --> 00:04:23,000
so that it's lined up with column 4,

69
00:04:23,000 --> 00:04:31,000
and then we'll size it down until it hits column 5, just like that. 

70
00:04:31,000 --> 00:04:34,000
And we'll move that down the page a little bit,

71
00:04:34,000 --> 00:04:37,000
and then we need to do the same thing for each one of our icons.

72
00:04:37,000 --> 00:04:43,000
So I'll go ahead and grab these

73
00:04:43,000 --> 00:04:47,000
and size these down so they're just 2 columns wide.

74
00:04:47,000 --> 00:04:51,000
We'll move that heart back down

75
00:04:51,000 --> 00:04:56,000
and we need to do the same thing for our lightning bolt.

76
00:04:56,000 --> 00:05:02,000
Actually, it's already about 2 columns wide, but it's a little bit too tall, 

77
00:05:02,000 --> 00:05:07,000
so we'll go ahead and just decrease its width a little bit there 

78
00:05:09,000 --> 00:05:11,000
so that it's not actually taking up 2 columns, 

79
00:05:11,000 --> 00:05:16,000
but it has the appearance of being about the same size as the other icons.

80
00:05:16,000 --> 00:05:19,000
We'll move that back to where it was--right about there.

81
00:05:19,000 --> 00:05:25,000
And then, finally, we need to do the same thing for our notes.

82
00:05:25,000 --> 00:05:32,000
So we'll just decrease the size there so it's about 2 columns wide

83
00:05:32,000 --> 00:05:35,000
and drag that back.

84
00:05:35,000 --> 00:05:40,000
So now, we need to add some text, and the text will really inform

85
00:05:40,000 --> 00:05:43,000
where we're actually going to place these icons.

86
00:05:43,000 --> 00:05:47,000
So I'll select my text tool,

87
00:05:47,000 --> 00:05:54,000
and we have a globe here because we want to say that this app is global.

88
00:05:54,000 --> 00:05:57,000
We'll change this to the Pacifico font,

89
00:05:57,000 --> 00:06:01,000
just to make it a little bit more visually interesting.

90
00:06:01,000 --> 00:06:07,000
We'll increase the font size here to about 18--actually, well make it a little bit larger,

91
00:06:07,000 --> 00:06:10,000
maybe up to 24.

92
00:06:10,000 --> 00:06:13,000
I like how that looks.

93
00:06:13,000 --> 00:06:17,000
And then, we'll put it in place right next to our globe.

94
00:06:17,000 --> 00:06:19,000
That looks good. 

95
00:06:19,000 --> 00:06:23,000
And then we also need to make some additional text in Helvetica,

96
00:06:23,000 --> 00:06:27,000
just sort of elaborating on why this app is global.

97
00:06:27,000 --> 00:06:30,000
So we'll go ahead and type in the text:

98
00:06:30,000 --> 00:06:44,000
Keep track of your notes using advanced geolocation technology.

99
00:06:44,000 --> 00:06:50,000
Now, of course, this is way too wide, so we need to go up to the Layer menu,

100
00:06:50,000 --> 00:06:54,000
go to Type, and convert that to Paragraph text. 

101
00:06:54,000 --> 00:06:59,000
And then, we'll go ahead and select it, and we need to

102
00:06:59,000 --> 00:07:05,000
just sort of make it smaller here so it's taking up fewer columns.

103
00:07:05,000 --> 00:07:09,000
We'll increase the height just to give it some space,

104
00:07:09,000 --> 00:07:19,000
and then we're going to change this to Helvetica and decrease the font size,

105
00:07:19,000 --> 00:07:22,000
maybe down to about 15.

106
00:07:22,000 --> 00:07:25,000
Actually we can go a little smaller here, 

107
00:07:25,000 --> 00:07:27,000
down to about 13.

108
00:07:27,000 --> 00:07:30,000
That looks good.

109
00:07:30,000 --> 00:07:37,000
Then we're ready to go ahead and place this, and we want to place it so that it's left-justified

110
00:07:37,000 --> 00:07:42,000
and lined up with our header there, which says Global.

111
00:07:42,000 --> 00:07:44,000
I think that looks pretty good.

112
00:07:44,000 --> 00:07:49,000
Now we'll go ahead and do the same thing for each one of these icons

113
00:07:49,000 --> 00:07:52,000
and we'll put these into subgroups, actually.

114
00:07:52,000 --> 00:07:56,000
We'll call this one Globe

115
00:07:56,000 --> 00:07:58,000
and we'll of course put our globe icon in there.

116
00:07:58,000 --> 00:08:03,000
And then, we need to duplicate these layers

117
00:08:03,000 --> 00:08:07,000
so that we can reuse them elsewhere.

118
00:08:07,000 --> 00:08:10,000
So I'll go ahead and take those out of the group

119
00:08:10,000 --> 00:08:16,000
and I'll put them with Notes in a Note group--

120
00:08:16,000 --> 00:08:23,000
say Notes--and then we need to move those text layers over

121
00:08:23,000 --> 00:08:27,000
so that they're right next to our notes icon

122
00:08:27,000 --> 00:08:30,000
and we'll select the Global text here

123
00:08:30,000 --> 00:08:35,000
and say that this app is easy to use.

124
00:08:35,000 --> 00:08:39,000
And then, we need to change the description here

125
00:08:39,000 --> 00:08:42,000
and say something silly, like:

126
00:08:42,000 --> 00:08:52,000
This app is even easier to use than regular old pen and paper.

127
00:08:52,000 --> 00:08:54,000
That looks good. 

128
00:08:54,000 --> 00:09:01,000
Again, we'll duplicate these layers.

129
00:09:01,000 --> 00:09:07,000
Next, I want to go ahead and group these with the Heart.

130
00:09:07,000 --> 00:09:14,000
Just call that Heart, and then we'll go ahead and move these duplicated text layers

131
00:09:14,000 --> 00:09:17,000
down next to the Heart.

132
00:09:17,000 --> 00:09:20,000
There we go. 

133
00:09:20,000 --> 00:09:23,000
And now, we just need to change the text here

134
00:09:23,000 --> 00:09:31,000
instead of Easy, this will say Friendly.

135
00:09:31,000 --> 00:09:37,000
And then the description here will say:

136
00:09:37,000 --> 00:09:51,000
You'll love the experience of taking notes and interacting with GeoNotation.

137
00:09:51,000 --> 00:09:56,000
I'm going to go ahead and just increase the size of that a little bit there,

138
00:09:56,000 --> 00:09:59,000
so it's not jumping down to the next line.

139
00:09:59,000 --> 00:10:08,000
And then, finally, we just need to duplicate this text one more time

140
00:10:08,000 --> 00:10:12,000
and group it with our Thunderbolt, so we'll move it down there.

141
00:10:12,000 --> 00:10:20,000
Group these all together, we'll name this Bolt.

142
00:10:20,000 --> 00:10:28,000
We'll scoot over our text layers; over next to the Bolt

143
00:10:28,000 --> 00:10:34,000
and instead of Friendly, we'll say that the application is Fast, 

144
00:10:34,000 --> 00:10:37,000
which is of course represented by this Thunderbolt.

145
00:10:37,000 --> 00:10:41,000
And then for the description of why it's fast,

146
00:10:41,000 --> 00:10:52,000
we'll go ahead and say GeoNotation is fastest note-taking app on the market.

147
00:10:52,000 --> 00:10:56,000
Quite a bold statement there. 

148
00:10:56,000 --> 00:10:58,000
So we'll go ahead and close that, 

149
00:10:58,000 --> 00:11:03,000
and now, we need to just adjust the placement of these a little bit.

150
00:11:03,000 --> 00:11:10,000
We want our Note and Thunderbolt probably to be around columns 14 and 15,

151
00:11:10,000 --> 00:11:14,000
so we'll go ahead and check up here. 

152
00:11:14,000 --> 00:11:22,000
There's 14 and 15--scroll down here and line those up.

153
00:11:22,000 --> 00:11:32,000
So first, we'll move our Notes over to just about there.

154
00:11:32,000 --> 00:11:36,000
And of course we want to make sure this is lined up along the same row

155
00:11:36,000 --> 00:11:41,000
as our Globe, and then we'll adjust the placement of the text just a little bit here.

156
00:11:41,000 --> 00:11:45,000
So we want to move this up, 

157
00:11:45,000 --> 00:11:48,000
move this maybe down a little bit;

158
00:11:48,000 --> 00:11:55,000
and actually, we should move that header back down just a touch.

159
00:11:55,000 --> 00:11:56,000
There we go.

160
00:11:56,000 --> 00:12:02,000
And I actually like the placement of Global and Friendly here.

161
00:12:02,000 --> 00:12:06,000
I think I will move Friendly up just a little bit,

162
00:12:06,000 --> 00:12:09,000
so we'll select our Heart group and move it up to about there.

163
00:12:09,000 --> 00:12:16,000
And then, we just need to adjust our Thunderbolt here.

164
00:12:16,000 --> 00:12:20,000
And again, we'll go ahead and put that right underneath our Note

165
00:12:20,000 --> 00:12:24,000
and right next to our Heart to line it up.

166
00:12:24,000 --> 00:12:29,000
And then we'll move our text.

167
00:12:29,000 --> 00:12:32,000
I'll move Fast down just a hair

168
00:12:32,000 --> 00:12:36,000
and move our description just a little bit. 

169
00:12:36,000 --> 00:12:38,000
That looks pretty good.

170
00:12:38,000 --> 00:12:41,000
It doesn't have to be exact.

171
00:12:41,000 --> 00:12:44,000
And that about covers it.

172
00:12:44,000 --> 00:12:50,000
We'll go ahead and turn on our background layer again and zoom out,

173
00:12:50,000 --> 00:12:55,000
just to go ahead and take a look at the design.

174
00:12:55,000 --> 00:12:58,000
I think this looks pretty good. 

175
00:12:58,000 --> 00:13:01,000
This will look very nice on a large 27" screen

176
00:13:01,000 --> 00:13:05,000
or 24" screen and we'll be able to slice up this document

177
00:13:05,000 --> 00:13:11,000
and actually use all of these images in the responsive design.

178
00:13:11,000 --> 00:13:14,000
So we'll go ahead and save this,

179
00:13:14,000 --> 00:13:20,000
and next, we're going to open up our phone smart object

180
00:13:20,000 --> 00:13:30,000
because we need to actually save this out to go ahead and use it in our application.

181
00:13:30,000 --> 00:13:33,000
There's two things that we need to do to this image.

182
00:13:33,000 --> 00:13:36,000
I'm going to go ahead and turn on the Info panel

183
00:13:36,000 --> 00:13:42,000
by going to Window, Info or just hitting the F8 key

184
00:13:42,000 --> 00:13:46,000
and this will allow us to see exact pixel measurements

185
00:13:46,000 --> 00:13:49,000
when we go ahead and drag out a selection marquee.

186
00:13:49,000 --> 00:13:53,000
So I'm going to go ahead and actually select the entire document

187
00:13:53,000 --> 00:13:58,000
and it says that it's 1011 pixels wide.

188
00:13:58,000 --> 00:14:03,000
Now, normally, this would be just fine, but you'll notice on the left side here

189
00:14:03,000 --> 00:14:07,000
we have these buttons and over on the right, we don't;

190
00:14:07,000 --> 00:14:11,000
it's pretty much flush against the document.

191
00:14:11,000 --> 00:14:16,000
The problem with this is later on, we're going to want to center this image

192
00:14:16,000 --> 00:14:21,000
and we can't really center it if there's a little bit more room on the left

193
00:14:21,000 --> 00:14:23,000
than there is on the right.

194
00:14:23,000 --> 00:14:26,000
So this is just about 10 pixels here.

195
00:14:26,000 --> 00:14:37,000
I'll go ahead and select that--zoom in just to make sure we're selecting it exactly right.

196
00:14:37,000 --> 00:14:39,000
That looks good.

197
00:14:39,000 --> 00:14:42,000
So it is indeed a width of exactly 10 pixels

198
00:14:42,000 --> 00:14:45,000
and we want to go ahead and add that on to the right.

199
00:14:45,000 --> 00:14:51,000
And to do that, we'll go ahead and go to Image, Canvas Size,

200
00:14:51,000 --> 00:14:54,000
and that will bring up this Canvas dialog box.

201
00:14:54,000 --> 00:14:58,000
We want to anchor it over on the left,

202
00:14:58,000 --> 00:15:02,000
and we'll change the width to 1021 pixels,

203
00:15:02,000 --> 00:15:05,000
just to add 10 on the right.

204
00:15:05,000 --> 00:15:07,000
There we go.

205
00:15:07,000 --> 00:15:11,000
We'll go ahead and save that, and that will have a small effect

206
00:15:11,000 --> 00:15:14,000
on our larger document, but it's going to be so minimal

207
00:15:14,000 --> 00:15:16,000
that it's not really going to matter.

208
00:15:16,000 --> 00:15:22,000
And the next thing we need to do is actually mask off part of this image.

209
00:15:22,000 --> 00:15:26,000
We're going to be putting a video inside of this phone 

210
00:15:26,000 --> 00:15:33,000
and we want to just go ahead and black this out just so that none of this shines through 

211
00:15:33,000 --> 00:15:36,000
should this image load up before the video comes up.

212
00:15:36,000 --> 00:15:40,000
This will also decrease the overall file size of this image.

213
00:15:40,000 --> 00:15:43,000
So this will be pretty simple.

214
00:15:43,000 --> 00:15:48,000
We'll go ahead and just create a new shape here using the rectangle tool

215
00:15:48,000 --> 00:15:53,000
and we want to be a little bit precise here.

216
00:15:53,000 --> 00:16:04,000
We'll go ahead and drag this out so that it's covering our image on the phone.

217
00:16:04,000 --> 00:16:08,000
We'll crop it just about there, 

218
00:16:08,000 --> 00:16:15,000
and when we zoom back out, you can see that our phone is now blacked out,

219
00:16:15,000 --> 00:16:18,000
and that will look really good when we put a video on top of it.

220
00:16:18,000 --> 00:16:25,000
So we'll go ahead and save that out, and we'll switch back to our actual layout,

221
00:16:25,000 --> 00:16:29,000
and there's what it's looking like--so, pretty good.

222
00:16:29,000 --> 00:16:32,000
Now we need to go ahead and actually start saving out

223
00:16:32,000 --> 00:16:34,000
all of these different assets. 

224
00:16:34,000 --> 00:16:40,000
So I'm going to go ahead and bring up the Save for Web dialog box,

225
00:16:40,000 --> 00:16:45,000
which you can access by going to File, Save for Web and Devices.

226
00:16:45,000 --> 00:16:52,000
I'm going to want to save this as a full 24-bit transparent PNG image,

227
00:16:52,000 --> 00:16:55,000
which is quite large at this point.

228
00:16:55,000 --> 00:16:58,000
It's all the way up to 435k.

229
00:16:58,000 --> 00:17:02,000
Now, we don't actually need all of that resolution.

230
00:17:02,000 --> 00:17:05,000
When we place this image into our fluid grid,

231
00:17:05,000 --> 00:17:10,000
it will resize on its own and the only reason we need it to be this large

232
00:17:10,000 --> 00:17:12,000
is for really large monitors.

233
00:17:12,000 --> 00:17:19,000
So we'll go ahead and decrease the width down to about 660 pixels

234
00:17:19,000 --> 00:17:25,000
and it has a height of 1162 pixels--that's fine

235
00:17:25,000 --> 00:17:29,000
and that's going to cut down on our file size.

236
00:17:29,000 --> 00:17:36,000
We just commit that, and now you can see that we're down to about 160k.

237
00:17:36,000 --> 00:17:44,000
We'll go ahead and save this out, and we're going to save this to our images folder

238
00:17:44,000 --> 00:17:47,000
and we're going to call this image Phone.

239
00:17:47,000 --> 00:17:51,000
I'll go ahead and save that.

240
00:17:51,000 --> 00:17:53,000
Now we need to create a second version

241
00:17:53,000 --> 00:17:57,000
that will actually just be a static version of this image

242
00:17:57,000 --> 00:18:00,000
should a browser not support HTML5 video.

243
00:18:00,000 --> 00:18:03,000
Now, I already have a screen shot

244
00:18:03,000 --> 00:18:06,000
from the videos that have already been created--

245
00:18:06,000 --> 00:18:10,000
and I'll go ahead and commit that--and we'll move it into position here.

246
00:18:10,000 --> 00:18:19,000
We want this to be lined up pretty nicely with our screen.

247
00:18:19,000 --> 00:18:23,000
That looks good, and we'll move it over just a little bit

248
00:18:23,000 --> 00:18:28,000
and zoom in to make sure that this is indeed in the right spot.

249
00:18:28,000 --> 00:18:39,000
It might help to actually turn off that mask there. 

250
00:18:39,000 --> 00:18:40,000
There we go.

251
00:18:40,000 --> 00:18:44,000
And then, we just need to check the bottom corner here

252
00:18:44,000 --> 00:18:48,000
and it's hitting the corner perfectly. 

253
00:18:48,000 --> 00:18:54,000
We'll go ahead and zoom out and see how that looks.

254
00:18:54,000 --> 00:18:56,000
That looks pretty good.

255
00:18:56,000 --> 00:18:59,000
Now we're ready to go ahead and save this for web.

256
00:18:59,000 --> 00:19:04,000
So again, I'll go up to File, Save for Web and Devices, 

257
00:19:04,000 --> 00:19:06,000
and because there's so much going on in this image,

258
00:19:06,000 --> 00:19:09,000
we actually want it to just be a JPG.

259
00:19:09,000 --> 00:19:16,000
So we'll switch to JPG there and that will bring us down to 133k,

260
00:19:16,000 --> 00:19:18,000
but we can do a little bit better than that.

261
00:19:18,000 --> 00:19:21,000
We need to change the matte color here

262
00:19:21,000 --> 00:19:24,000
to the same color as our light gray background, 

263
00:19:24,000 --> 00:19:28,000
which is again, C5 in hexadecimal.

264
00:19:28,000 --> 00:19:32,000
And once again, we definitely don't need all of this resolution,

265
00:19:32,000 --> 00:19:37,000
so we're going to decrease the image size down to about 800 pixels across

266
00:19:37,000 --> 00:19:41,000
We'll go ahead and commit that, save the file, 

267
00:19:41,000 --> 00:19:44,000
and in our images directory here, 

268
00:19:44,000 --> 00:19:50,000
we'll go ahead and call this file phone_static

269
00:19:50,000 --> 00:19:53,000
and we'll save out our smart object there,

270
00:19:53,000 --> 00:19:55,000
just to commit it to our document.

271
00:19:55,000 --> 00:20:01,000
And now, we're actually done with this particular smart object.

272
00:20:01,000 --> 00:20:05,000
The next thing we need to save out is the noise that we created

273
00:20:05,000 --> 00:20:14,000
for our button here, so we'll go ahead and go to our Button layer

274
00:20:14,000 --> 00:20:19,000
and we're just going to go ahead and turn off this mask,

275
00:20:19,000 --> 00:20:24,000
set the opacity to 100 percent, 

276
00:20:24,000 --> 00:20:27,000
set the blending mode to normal,

277
00:20:27,000 --> 00:20:40,000
and then we're going to go ahead and turn off all the layers above it and below it.

278
00:20:40,000 --> 00:20:44,000
And then we're just going to go ahead and flatten the entire image

279
00:20:44,000 --> 00:20:46,000
by going to Layer, Flatten Image.

280
00:20:46,000 --> 00:20:49,000
And then, we just need a small sample of this noise,

281
00:20:49,000 --> 00:20:56,000
so we'll go ahead and drag out our selection marquee

282
00:20:56,000 --> 00:20:59,000
and we'll crop that image. 

283
00:20:59,000 --> 00:21:01,000
And then, again, we'll Save for Web,

284
00:21:01,000 --> 00:21:04,000
and there's our noise image.

285
00:21:04,000 --> 00:21:14,000
We want this to be a PNG image, and we can size it down to 128x128.

286
00:21:14,000 --> 00:21:24,000
And then we'll go ahead and save it and we will call this noise.png

287
00:21:24,000 --> 00:21:29,000
and accept that.

288
00:21:29,000 --> 00:21:37,000
Then we'll go ahead and just undo all of the changes we just did

289
00:21:37,000 --> 00:21:41,000
and turn our layers back on.

290
00:21:41,000 --> 00:21:45,000
We'll zoom out and we're almost done here.

291
00:21:45,000 --> 00:21:50,000
Now we just need to save our actual logo,

292
00:21:50,000 --> 00:21:55,000
so we'll go ahead and again, open up this smart object

293
00:21:55,000 --> 00:21:58,000
that says GeoNotation, and all we need to do

294
00:21:58,000 --> 00:22:00,000
is just save this,

295
00:22:00,000 --> 00:22:04,000
and we want to save it as a full 24-bit PNG

296
00:22:04,000 --> 00:22:08,000
so we get nice anti-aliasing along the edges.

297
00:22:08,000 --> 00:22:17,000
Then we'll go ahead and save it, and we're going to call this image geonotation

298
00:22:17,000 --> 00:22:20,000
and save that to our images directory.

299
00:22:20,000 --> 00:22:23,000
We'll go ahead and save any changes that may have been made there

300
00:22:23,000 --> 00:22:27,000
and switch back to our document and save it

301
00:22:27,000 --> 00:22:31,000
and we'll zoom out here to take one more look.

302
00:22:31,000 --> 00:22:34,000
And that's about it for our high fidelity mockup.

303
00:22:34,000 --> 00:22:39,000
We've created a mockup and we've sliced it up so that we have all the assets

304
00:22:39,000 --> 00:22:42,000
that we're going to need when we're actually building our site.

305
00:22:42,000 --> 00:22:47,000
And of course, we have our nice grid here, which we'll be using soon

306
00:22:47,000 --> 00:22:51,000
to make all of our fluid grid calculations.

307
00:22:51,000 --> 00:22:56,000
We're done creating our design and we now have a high fidelity mockup,

308
00:22:56,000 --> 00:23:00,000
which we'll use later on when we generate all of the calculations

309
00:23:00,000 --> 00:23:02,000
for our fluid grid.

310
00:23:02,000 --> 00:23:06,000
In the next Master Class, we'll code up all the HTML and CSS,

311
00:23:06,000 --> 00:23:10,000
create a fluid grid, and make our design responsive

312
00:23:10,000 --> 00:23:14,000
across a wide array of screen resolutions.