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

2
00:00:02,000 --> 00:00:04,000
[Master Class: Designer and Developer Workflow]

3
00:00:04,000 --> 00:00:07,000
[Third Sprint: Slicing Up the Mockup]

4
00:00:07,000 --> 00:00:11,000
[Nick Pettit] In this Sprint, we're going to first slice up our Photoshop mockup 

5
00:00:11,000 --> 00:00:15,000
and then, we're going to get started on the responsive side of things 

6
00:00:15,000 --> 00:00:17,000
for our layout.

7
00:00:17,000 --> 00:00:21,000
We're going to at least try to get the fluid grid in place 

8
00:00:21,000 --> 00:00:26,000
and then if we have time, we'll go ahead and get into media queries.

9
00:00:26,000 --> 00:00:32,000
So first, I'm going to just go ahead and get caught up with what Jim has done

10
00:00:32,000 --> 00:00:35,000
and I'm just going to say $git pull

11
00:00:35,000 --> 00:00:38,000
and I've actually already done this, so everything is up to date.

12
00:00:38,000 --> 00:00:44,000
And we can say $rake db:migrate

13
00:00:44,000 --> 00:00:48,000
and that's going to go ahead and make any database changes that need to be made.

14
00:00:48,000 --> 00:00:53,000
And then, I'm going to go ahead and say $rails s

15
00:00:53,000 --> 00:00:56,000
and that's going to go ahead and start up our server.

16
00:00:56,000 --> 00:01:01,000
Then we can go ahead and switch over to Google Chrome,

17
00:01:01,000 --> 00:01:06,000
and if we refresh the page here, it looks like not much has changed.

18
00:01:06,000 --> 00:01:11,000
Jim has gone ahead and added in some login features there

19
00:01:11,000 --> 00:01:17,000
where you can go ahead and register for the site or sign in,

20
00:01:17,000 --> 00:01:20,000
but we don't really need to concern ourselves with that. 

21
00:01:20,000 --> 00:01:24,000
We're going to switch over to Photoshop 

22
00:01:24,000 --> 00:01:30,000
and use our high-fidelity mockup that we created to get some images

23
00:01:30,000 --> 00:01:36,000
that we'll need for the layout and do our fluid grid calculations.

24
00:01:36,000 --> 00:01:40,000
So we have a lot of work to do here, but let's just take this one step at a time.

25
00:01:40,000 --> 00:01:45,000
First, we need to slice up our layout and get the images we need,

26
00:01:45,000 --> 00:01:48,000
so let's spend a little bit of time just analyzing this.

27
00:01:48,000 --> 00:01:54,000
We have a white background as our base up here at the top.

28
00:01:54,000 --> 00:01:59,000
We have Log In, Sign Up, and those are the links that Jim just added in,

29
00:01:59,000 --> 00:02:04,000
so we'll go ahead and restyle those and put them over to the right later on. 

30
00:02:04,000 --> 00:02:07,000
We have a logo up here for Easy Jobs!

31
00:02:07,000 --> 00:02:11,000
and there's some pretty complex effects going on on the text,

32
00:02:11,000 --> 00:02:18,000
so I think we're probably going to make this an image rather than just plain text.

33
00:02:18,000 --> 00:02:23,000
We also have the tab of the manila folder up here

34
00:02:23,000 --> 00:02:25,000
which is a somewhat complex shape,

35
00:02:25,000 --> 00:02:29,000
so we're going to need to make that an image as well. 

36
00:02:29,000 --> 00:02:32,000
Then, if we scroll down here a little bit, 

37
00:02:32,000 --> 00:02:36,000
we can see that we have this manila folder background 

38
00:02:36,000 --> 00:02:40,000
and then we have this secondary paper background.

39
00:02:40,000 --> 00:02:42,000
So let's first look at the manila folder.

40
00:02:42,000 --> 00:02:48,000
So we'll go ahead and get rid of our navigation, get rid of our logo,

41
00:02:48,000 --> 00:02:53,000
get rid of the content area and just look at this. 

42
00:02:53,000 --> 00:02:57,000
Like I said, we have the tab up here and then we have this background. 

43
00:02:57,000 --> 00:02:59,000
The background is slightly textured. 

44
00:02:59,000 --> 00:03:03,000
We have this paper texture and then if we zoom in here, 

45
00:03:03,000 --> 00:03:07,000
you can see that we also have this very subtle noise texture.

46
00:03:07,000 --> 00:03:13,000
And in addition to these textural elements, we also have a very subtle gradient

47
00:03:13,000 --> 00:03:16,000
going down the manila folder here,

48
00:03:16,000 --> 00:03:20,000
so we need to somehow include all of these things into the background

49
00:03:20,000 --> 00:03:24,000
and there's a number of different ways that we could do that.

50
00:03:24,000 --> 00:03:28,000
Because this is a relatively complex background 

51
00:03:28,000 --> 00:03:31,000
with a lot of different textural elements going on, 

52
00:03:31,000 --> 00:03:36,000
I'm going to go ahead and just do this as a repeating image.

53
00:03:36,000 --> 00:03:42,000
Alternatively, we could take another approach using multiple backgrounds,

54
00:03:42,000 --> 00:03:45,000
and I think that's what we're going to do in this content area.

55
00:03:45,000 --> 00:03:50,000
We do have a slight gradient on this piece of paper,

56
00:03:50,000 --> 00:03:53,000
just like we do on the manila folder,

57
00:03:53,000 --> 00:03:56,000
and if we go ahead and zoom in here, 

58
00:03:56,000 --> 00:04:01,000
you can see that we also have some very subtle noise texture on top of that gradient.

59
00:04:01,000 --> 00:04:08,000
However, what we do not have is this paper texture

60
00:04:08,000 --> 00:04:13,000
with these little bits of recycled-looking paper, like the manila folder.

61
00:04:13,000 --> 00:04:17,000
So we can actually use a separate technique here where we'll use 

62
00:04:17,000 --> 00:04:25,000
a CSS3 gradient and then we'll layer a repeating noise transparent PNG

63
00:04:25,000 --> 00:04:27,000
on top of that gradient. 

64
00:04:27,000 --> 00:04:31,000
The reason we can't really get away with that for the manila folder

65
00:04:31,000 --> 00:04:34,000
is because of these little flecks of paper.

66
00:04:34,000 --> 00:04:40,000
If we tried to just repeat the background, it would end up looking very repetitive,

67
00:04:40,000 --> 00:04:42,000
and that's not what we want. 

68
00:04:42,000 --> 00:04:46,000
In addition to this background on this piece of paper, 

69
00:04:46,000 --> 00:04:50,000
we also have a very subtle shadow going all the way around the edges

70
00:04:50,000 --> 00:04:55,000
and we can accomplish that using a CSS3 box shadow.

71
00:04:55,000 --> 00:04:58,000
Also, on the manila folder, the reason we might want to use an image

72
00:04:58,000 --> 00:05:04,000
is because of the light hitting the top of it, just to give it a very slight 3-D effect,

73
00:05:04,000 --> 00:05:09,000
and we could probably reproduce that in CSS, but again,

74
00:05:09,000 --> 00:05:13,000
it's going to be much easier to do that just using an image. 

75
00:05:13,000 --> 00:05:18,000
Now, on the logo, we said that there were too many effects going on here

76
00:05:18,000 --> 00:05:23,000
to accomplish this as just a pure font--particularly this inset shadow.

77
00:05:23,000 --> 00:05:29,000
However, on the rest of the text, we can certainly go ahead and make this text.

78
00:05:29,000 --> 00:05:35,000
In fact, we're going to have to do that, but we do have sort of a typewriter-looking font

79
00:05:35,000 --> 00:05:40,000
on all of this, so we're going to need to pick out a font in order to do that.

80
00:05:40,000 --> 00:05:43,000
We have a stamp up here

81
00:05:43,000 --> 00:05:48,000
and that's slightly rotated, but again, that can be done with CSS3.

82
00:05:48,000 --> 00:05:52,000
We can just rotate that text a little bit.

83
00:05:52,000 --> 00:05:56,000
And actually, I think the most complex part of this layout

84
00:05:56,000 --> 00:05:59,000
is this little paperclip right here.

85
00:05:59,000 --> 00:06:01,000
I'm not exactly sure how we're going to do that.

86
00:06:01,000 --> 00:06:05,000
We might be able to get away with a transparent PNG.

87
00:06:05,000 --> 00:06:10,000
However, we do have to also keep in mind that this layout needs to be responsive

88
00:06:10,000 --> 00:06:14,000
and responsive layouts and fixed-position elements

89
00:06:14,000 --> 00:06:17,000
don't always work together very well,

90
00:06:17,000 --> 00:06:20,000
so we may have to omit that if we don't have time,

91
00:06:20,000 --> 00:06:24,000
but if we do have time, we'll try to include it somehow.

92
00:06:24,000 --> 00:06:26,000
So now that we've thought about this for a little bit, 

93
00:06:26,000 --> 00:06:30,000
let's go ahead and start slicing up this layout.

94
00:06:30,000 --> 00:06:34,000
First, I'm going to go ahead and focus on the manila folder and the logo up here.

95
00:06:34,000 --> 00:06:38,000
So I'm going to remove anything we don't need, 

96
00:06:38,000 --> 00:06:43,000
such as the navigation and the content area.

97
00:06:43,000 --> 00:06:49,000
And first, I'm just going to try to grab this logo.

98
00:06:49,000 --> 00:06:53,000
Now, there's a bunch of different ways you can slice things up in Photoshop.

99
00:06:53,000 --> 00:06:57,000
The way I like to do it is I like to flatten the image first,

100
00:06:57,000 --> 00:07:01,000
and to do that, I'm just going to go up to the menu, which is offscreen,

101
00:07:01,000 --> 00:07:06,000
go to Layer, Flatten Image, and it'll bring up this dialog box

102
00:07:06,000 --> 00:07:08,000
that says Discard hidden layers?

103
00:07:08,000 --> 00:07:10,000
That's fine; you can hit OK.

104
00:07:10,000 --> 00:07:16,000
And the reason for doing that is if you try to crop the image, which we're about to do,

105
00:07:16,000 --> 00:07:21,000
you could sometimes have some strange effects happening on the layer styles. 

106
00:07:21,000 --> 00:07:26,000
So let's go ahead and isolate this logo.

107
00:07:26,000 --> 00:07:33,000
That'll be a little bit easier to do if we bring up our guides,

108
00:07:33,000 --> 00:07:42,000
and we'll want just a little bit of overlap with the upper part of the manila folder

109
00:07:42,000 --> 00:07:47,000
so that we can blend that in seamlessly, so let's really zoom in here

110
00:07:47,000 --> 00:07:52,000
and make sure we got all of the curve on that side

111
00:07:52,000 --> 00:07:55,000
and it looks like we're good on that side. 

112
00:07:55,000 --> 00:08:03,000
And I think we're ready to go ahead and crop this,

113
00:08:03,000 --> 00:08:07,000
so I'll say Image, Crop

114
00:08:07,000 --> 00:08:13,000
and then I'm going to save this for web, so I'll bring up the Save For Web dialog box.

115
00:08:13,000 --> 00:08:17,000
And let's try to do this as a 24-bit PNG.

116
00:08:17,000 --> 00:08:21,000
Actually, let's first try a 8-bit PNG

117
00:08:21,000 --> 00:08:26,000
because we don't really need any transparency here,

118
00:08:26,000 --> 00:08:32,000
and that should save us a little bit of space, although I'm going to go ahead

119
00:08:32,000 --> 00:08:38,000
and bump it up to the full 256 colors just to make sure we get that paper texture

120
00:08:38,000 --> 00:08:40,000
and all that subtle noise in there. 

121
00:08:40,000 --> 00:08:42,000
So that looks good.

122
00:08:42,000 --> 00:08:45,000
I'm going to go ahead and save this out

123
00:08:45,000 --> 00:08:52,000
and we need to put this in the Projects folder in Easy Jobs,

124
00:08:52,000 --> 00:08:58,000
and this is going to be in our public directory inside the Images folder.

125
00:08:58,000 --> 00:09:01,000
Now I'm just going to go ahead and create a new folder here

126
00:09:01,000 --> 00:09:07,000
and I'm going to call this folder Layout

127
00:09:07,000 --> 00:09:11,000
just to keep these images separate from any other images

128
00:09:11,000 --> 00:09:14,000
that we might want to include into this site.

129
00:09:14,000 --> 00:09:24,000
And I'm going to name this file Easy Jobs because this file is the logo,

130
00:09:24,000 --> 00:09:31,000
and now we have the logo, so I'm going to just go back in history a little bit here

131
00:09:31,000 --> 00:09:34,000
until we have our layers down here again. 

132
00:09:34,000 --> 00:09:38,000
And now, we're ready to isolate the next image

133
00:09:38,000 --> 00:09:42,000
and that's going to be this background here. 

134
00:09:42,000 --> 00:09:51,000
Now, what we're going to do is we're going to grab a slice or a column

135
00:09:51,000 --> 00:09:53,000
out of this background. 

136
00:09:53,000 --> 00:09:57,000
What we need to do is make sure that this is wide enough,

137
00:09:57,000 --> 00:10:02,000
that we get enough of a sample of these flecks of paper

138
00:10:02,000 --> 00:10:05,000
to make sure that it doesn't look like a repeating background

139
00:10:05,000 --> 00:10:08,000
even though that's exactly what it is: a repeating background.

140
00:10:08,000 --> 00:10:15,000
Now, normally, using this technique, you would just keep the column 1 pixel wide

141
00:10:15,000 --> 00:10:20,000
and that would be used for things like gradients before CSS3 gradients, of course, 

142
00:10:20,000 --> 00:10:25,000
but we need to make sure this is wide enough that it doesn't look like it's repeating.

143
00:10:25,000 --> 00:10:28,000
So I'm going to just grab a sample of this,

144
00:10:28,000 --> 00:10:39,000
maybe move it over a little bit more here,

145
00:10:39,000 --> 00:10:41,000
and I think that's pretty good. 

146
00:10:41,000 --> 00:10:45,000
I don't think it's going to be obvious that this is a repeating background 

147
00:10:45,000 --> 00:10:48,000
if we get enough there. 

148
00:10:48,000 --> 00:10:51,000
So let's move that up

149
00:10:51,000 --> 00:11:01,000
and we're going to go pretty far down the page here.

150
00:11:01,000 --> 00:11:06,000
I think that's probably pretty safe for our gradient. 

151
00:11:06,000 --> 00:11:11,000
In fact, I think it stops up there, but it'll be good just to get a little bit more.

152
00:11:11,000 --> 00:11:18,000
So now, we're going to go ahead and flatten the image again

153
00:11:18,000 --> 00:11:23,000
and I'm going to crop this.

154
00:11:23,000 --> 00:11:28,000
And once again, I'm going to save this out. 

155
00:11:28,000 --> 00:11:31,000
So PNG-8 looks pretty good.

156
00:11:31,000 --> 00:11:34,000
We don't have a tremendous number of colors here,

157
00:11:34,000 --> 00:11:38,000
but  we do want to make sure that we're picking up all of the subtlety here

158
00:11:38,000 --> 00:11:42,000
that we've been so careful to preserve so far.

159
00:11:42,000 --> 00:11:46,000
We'll go ahead and save this out, and again, we're already in our Layout folder

160
00:11:46,000 --> 00:11:51,000
inside of the Images directory, which is inside the Public directory in our project

161
00:11:51,000 --> 00:11:57,000
and I'm going to call this bg for background.

162
00:11:57,000 --> 00:12:00,000
So we'll save that out,

163
00:12:00,000 --> 00:12:06,000
step back in time here again, and let's see where we're at. 

164
00:12:06,000 --> 00:12:10,000
So far we have our logo and we have our background,

165
00:12:10,000 --> 00:12:18,000
so now, I think we're ready to go ahead and grab the content area.

166
00:12:18,000 --> 00:12:26,000
So I'm going to get rid of everything else because all we really need here

167
00:12:26,000 --> 00:12:28,000
is this noise image. 

168
00:12:28,000 --> 00:12:32,000
We don't need the gradient because we're going to add that in with CSS.

169
00:12:32,000 --> 00:12:42,000
So let's try to remove everything else except for this noise, 

170
00:12:42,000 --> 00:12:47,000
and we're going to go into the Paper directory here and actually remove the element itself.

171
00:12:47,000 --> 00:12:52,000
And right now, it doesn't look like there's anything on the page, 

172
00:12:52,000 --> 00:12:55,000
but if we go ahead and add in the background again, 

173
00:12:55,000 --> 00:13:01,000
we can see where that noise begins and where there's no noise.

174
00:13:01,000 --> 00:13:06,000
Now, this is a very subtle effect, so we don't need a tremendous amount of noise.

175
00:13:06,000 --> 00:13:12,000
I'm going to go ahead and just grab a sample of it here in a square box

176
00:13:12,000 --> 00:13:19,000
and I'm going to make this 128x128.

177
00:13:19,000 --> 00:13:23,000
I'm going to get rid of this white background and now we have nothing there.

178
00:13:23,000 --> 00:13:26,000
And I'm not going to flatten this image 

179
00:13:26,000 --> 00:13:28,000
because that will actually add in a white background again.

180
00:13:28,000 --> 00:13:31,000
This time, I'm just going to crop it, which is fine

181
00:13:31,000 --> 00:13:34,000
because we don't have any visible layer styles

182
00:13:34,000 --> 00:13:43,000
and I'm going to save this for web and I want to save it as a transparent PNG here.

183
00:13:43,000 --> 00:13:50,000
And I'm going to save this as Noise,

184
00:13:50,000 --> 00:13:56,000
and now we can go ahead and go back here.

185
00:13:56,000 --> 00:13:59,000
And we'll turn all of our layers back on 

186
00:13:59,000 --> 00:14:04,000
just to see where we're at. 

187
00:14:04,000 --> 00:14:07,000
And I think that's just about it. 

188
00:14:07,000 --> 00:14:10,000
That's probably all the images that we're going to need;

189
00:14:10,000 --> 00:14:13,000
sans this paperclip here which we can eventually come back to,

190
00:14:13,000 --> 00:14:17,000
should we decide we still want it. 

191
00:14:17,000 --> 00:14:21,000
There is one more image that I think we should grab just to be safe;

192
00:14:21,000 --> 00:14:27,000
we may not end up needing it, and that is some noise down here 

193
00:14:27,000 --> 00:14:30,000
at the bottom of this gradient. 

194
00:14:30,000 --> 00:14:35,000
Now, remember, this is going to be a repeating background that will repeat 

195
00:14:35,000 --> 00:14:40,000
along the Y axis; however, it does have a height limitation.

196
00:14:40,000 --> 00:14:43,000
We we get down to the bottom, there needs to be a solid color

197
00:14:43,000 --> 00:14:48,000
or gradient or some kind of other background image. 

198
00:14:48,000 --> 00:14:52,000
Now, we can go ahead and add in a noise image down here

199
00:14:52,000 --> 00:14:57,000
using multiple backgrounds in CSS3, so we'll go ahead and grab that noise.

200
00:14:57,000 --> 00:15:02,000
And again, just like the content area, we don't need a tremendous amount,

201
00:15:02,000 --> 00:15:06,000
so we'll go ahead and try to meter ourselves a little bit here

202
00:15:06,000 --> 00:15:10,000
and just keep it to like 128 pixels. 

203
00:15:10,000 --> 00:15:14,000
That's pretty good. 

204
00:15:14,000 --> 00:15:18,000
And there are layer styles on this shape, so we do need to make sure

205
00:15:18,000 --> 00:15:23,000
that we flatten the image so the image is now flattened. 

206
00:15:23,000 --> 00:15:26,000
We're going to crop it 

207
00:15:26,000 --> 00:15:31,000
and then save it for web, and there's not a lot of detail at all here. 

208
00:15:31,000 --> 00:15:36,000
In fact, we're all the way up at 256 colors on a PNG-8

209
00:15:36,000 --> 00:15:39,000
and it's hardly using any of the color table; 

210
00:15:39,000 --> 00:15:43,000
in fact, it's all the way down to 25 colors in the palette.

211
00:15:43,000 --> 00:15:46,000
So that's really all we need

212
00:15:46,000 --> 00:15:50,000
and we'll go ahead and save it out.

213
00:15:50,000 --> 00:15:59,000
And we're going to call this image folder noise, or we could call it manila folder noise

214
00:15:59,000 --> 00:16:02,000
or something similar.

215
00:16:02,000 --> 00:16:06,000
And I'm just going to go back in time here again

216
00:16:06,000 --> 00:16:11,000
and turn on all of our layers and take one last look at this Photoshop document,

217
00:16:11,000 --> 00:16:15,000
but I think that should about do it for images, 

218
00:16:15,000 --> 00:16:18,000
and now we're ready to move on to the CSS.