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

2
00:00:02,000 --> 00:00:06,000
[Master Class Designer and Developer Workflow: Second Sprint Details]

3
00:00:06,000 --> 00:00:11,000
[Nick Pettit] So now that we have our logo for Easy Jobs!

4
00:00:11,000 --> 00:00:15,000
and we have the basic visual look or background of the site,

5
00:00:15,000 --> 00:00:19,000
we can go ahead and keep going with this layout.

6
00:00:19,000 --> 00:00:22,000
First, I'm going to go ahead and rearrange some of these layers

7
00:00:22,000 --> 00:00:25,000
just so we don't get confused later on.

8
00:00:25,000 --> 00:00:30,000
First, I'm going to move the grid up to the top

9
00:00:30,000 --> 00:00:34,000
and I'll go ahead and get rid of the background in there

10
00:00:34,000 --> 00:00:37,000
because we don't really need it. 

11
00:00:37,000 --> 00:00:43,000
Actually, I'm just going to go ahead and fade the opacity on that

12
00:00:43,000 --> 00:00:47,000
so that we can bring up the grid, should we need it.

13
00:00:47,000 --> 00:00:52,000
But for now, I don't think we really do, and if we need to align something with the grid,

14
00:00:52,000 --> 00:00:55,000
we can just go ahead and bring up our guides like this.

15
00:00:55,000 --> 00:00:58,000
So we'll turn those off

16
00:00:58,000 --> 00:01:02,000
and next, I'll go ahead and label this secondary noise layer,

17
00:01:02,000 --> 00:01:11,000
and I'll call it Paper Noise, and I'll group all of these together 

18
00:01:11,000 --> 00:01:16,000
into a folder called Folder.

19
00:01:16,000 --> 00:01:20,000
And even though we just have one layer here that says Easy Jobs,

20
00:01:20,000 --> 00:01:28,000
I'll go ahead and put that into a folder as well, and we'll call that Logo.

21
00:01:28,000 --> 00:01:33,000
Now, I'm going to create another folder

22
00:01:33,000 --> 00:01:39,000
and I'm going to call this one Content Area

23
00:01:39,000 --> 00:01:44,000
because now, we need to design what the actual page is going to look like

24
00:01:44,000 --> 00:01:46,000
and where our information is going to go.

25
00:01:46,000 --> 00:01:50,000
You can sort of think of this as maybe a secondary background.

26
00:01:50,000 --> 00:01:57,000
So I'm going to go ahead and create what looks like a piece of paper

27
00:01:57,000 --> 00:02:01,000
and that will be inside of this folder, so I'm going to go ahead and turn on my guides

28
00:02:01,000 --> 00:02:05,000
and I think I'm going to start a few columns in here.

29
00:02:05,000 --> 00:02:10,000
So we're starting 2 columns in on the left, so we'll do the same on the right side

30
00:02:10,000 --> 00:02:16,000
and we'll just drag this all the way down to the bottom of the page.

31
00:02:16,000 --> 00:02:20,000
That looks pretty good. 

32
00:02:20,000 --> 00:02:32,000
And I'm going to go ahead and actually move this up a bit, just like that. 

33
00:02:32,000 --> 00:02:37,000
And now, let's go ahead and make this look more like a piece of paper.

34
00:02:37,000 --> 00:02:42,000
So we'll go ahead and jump into the layer style here, 

35
00:02:42,000 --> 00:02:48,000
and let's first add a gradient overlay

36
00:02:48,000 --> 00:02:53,000
and this will be pretty close to white.

37
00:02:53,000 --> 00:03:00,000
We'll just make this slightly off-white, just to give this a little bit of variation.

38
00:03:00,000 --> 00:03:04,000
So if we zoom out here, that's what our page is starting to look like,

39
00:03:04,000 --> 00:03:11,000
and subtle gradients like this--oftentimes, you won't even really notice, but that's okay. 

40
00:03:11,000 --> 00:03:14,000
When you add subtle little things like this to the page, 

41
00:03:14,000 --> 00:03:21,000
they all add up to an overall visual effect and give it some really nice depth and variation.

42
00:03:21,000 --> 00:03:24,000
So we'll go ahead and hold onto that change, 

43
00:03:24,000 --> 00:03:27,000
and actually, I am going to move this back down.

44
00:03:27,000 --> 00:03:30,000
I think it's a little bit too high up on the page.

45
00:03:30,000 --> 00:03:35,000
We'll keep it there for now and see what we think in a few minutes.

46
00:03:35,000 --> 00:03:55,000
So next, I'm going to go ahead and add a drop-shadow to this piece of paper.

47
00:03:55,000 --> 00:04:00,000
I think that looks pretty good; it gives it some lift off the page.

48
00:04:00,000 --> 00:04:03,000
I'm going to decrease that just a little bit.

49
00:04:03,000 --> 00:04:06,000
It's a little bit too much--there we go.

50
00:04:06,000 --> 00:04:08,000
That looks good. 

51
00:04:08,000 --> 00:04:11,000
And now, just like the gradient for the manila folder, 

52
00:04:11,000 --> 00:04:15,000
we need to go ahead and add some texture to this piece of paper,

53
00:04:15,000 --> 00:04:21,000
and this is supposed to be a piece of printer paper, so it's a little bit more fine

54
00:04:21,000 --> 00:04:28,000
than the rough manila folder, so we'll just go ahead and add just a little bit of texture here.

55
00:04:28,000 --> 00:04:32,000
So again, we're going to create a new layer,

56
00:04:32,000 --> 00:04:34,000
fill it in, 

57
00:04:34,000 --> 00:04:36,000
add some noise, 

58
00:04:36,000 --> 00:04:43,000
and we'll go ahead and adjust the blending mode here to multiply,

59
00:04:43,000 --> 00:04:51,000
and we'll be decrease the opacity to about 5 percent.

60
00:04:51,000 --> 00:04:55,000
That looks good. 

61
00:04:55,000 --> 00:05:01,000
And on this layer, we need to go ahead and add the same vector mask

62
00:05:01,000 --> 00:05:05,000
as we have on the piece of paper

63
00:05:05,000 --> 00:05:08,000
so we'll go ahead and call this Paper and we'll call this Noise,

64
00:05:08,000 --> 00:05:20,000
and we'll group them together in a folder called Paper.

65
00:05:20,000 --> 00:05:24,000
The visual weight over on the left here is a little bit heavy 

66
00:05:24,000 --> 00:05:27,000
and I feel like we should add something over on the right.

67
00:05:27,000 --> 00:05:31,000
Of course, we will add other sidebar elements, but up at the top,

68
00:05:31,000 --> 00:05:37,000
this logo still seems a bit heavy, so I'm going to add a little bit of visual flair over here

69
00:05:37,000 --> 00:05:41,000
and I think I'm going to go ahead and put in a paperclip.

70
00:05:41,000 --> 00:05:44,000
I'm not really sure what that's going to do, but in a future iteration,

71
00:05:44,000 --> 00:05:50,000
we might be able to actually attach additional information to this piece of paper

72
00:05:50,000 --> 00:05:54,000
and a good place to put it would be right under the paperclip.

73
00:05:54,000 --> 00:05:57,000
So let's go ahead and go to our custom shape tool

74
00:05:57,000 --> 00:06:05,000
and I actually already have a paperclip here

75
00:06:05,000 --> 00:06:09,000
and I'll just go ahead and drag this out.

76
00:06:09,000 --> 00:06:15,000
I don't want it to be too terribly large.

77
00:06:15,000 --> 00:06:17,000
That looks pretty good. 

78
00:06:17,000 --> 00:06:25,000
I'm going to make that a little bit smaller.

79
00:06:25,000 --> 00:06:27,000
There we go. 

80
00:06:27,000 --> 00:06:31,000
Now, let's zoom in on this and start to get detailed.

81
00:06:31,000 --> 00:06:40,000
First, I'm going to go ahead and offset this paperclip a little bit to the right,

82
00:06:40,000 --> 00:06:44,000
just like that, 

83
00:06:44,000 --> 00:06:51,000
and I want part of this paperclip to appear behind the paper,

84
00:06:51,000 --> 00:06:57,000
and to do that, very simply, I am actually just going to go ahead and edit the shape

85
00:06:57,000 --> 00:07:00,000
and just cut part of it off.

86
00:07:00,000 --> 00:07:05,000
So I'm going to go ahead and use my direct selection tool

87
00:07:05,000 --> 00:07:09,000
and let's just see what this shape looks like. 

88
00:07:09,000 --> 00:07:13,000
So it looks like we need to add a few vector points here 

89
00:07:13,000 --> 00:07:16,000
if we actually want this to cut off with the paper.

90
00:07:16,000 --> 00:07:19,000
So let's first line everything up,

91
00:07:19,000 --> 00:07:27,000
so we'll move our paper up so it lines up perfectly with that gridline there,

92
00:07:27,000 --> 00:07:34,000
and now, we'll select our Add Anchor Point tool 

93
00:07:34,000 --> 00:07:39,000
and on this paperclip, I'm just going to add an anchor point there

94
00:07:39,000 --> 00:07:41,000
and there, just like that.

95
00:07:41,000 --> 00:07:49,000
So now we can go ahead and feel free to delete all of these other anchor points that we don't need.

96
00:07:49,000 --> 00:07:53,000
So I'll go ahead and select them 

97
00:07:53,000 --> 00:07:58,000
and there's a few more down here; we just need to follow this edge

98
00:07:58,000 --> 00:08:03,000
and I think that's all of them, so we can go ahead and delete that.

99
00:08:03,000 --> 00:08:10,000
And now, just as a formality, let's go ahead and close this shape

100
00:08:10,000 --> 00:08:14,000
and then we'll convert these points so they're not Bézier curves,

101
00:08:14,000 --> 00:08:17,000
just so that they're straight.

102
00:08:17,000 --> 00:08:23,000
And now, we can remove our guides and zoom out 

103
00:08:23,000 --> 00:08:27,000
and we have a pretty decent-looking paperclip.

104
00:08:27,000 --> 00:08:39,000
Actually, I'm going to make that a little bit larger

105
00:08:39,000 --> 00:08:43,000
and then we'll go ahead and move it

106
00:08:43,000 --> 00:08:47,000
so that it cuts off with the paper properly,

107
00:08:47,000 --> 00:08:50,000
just like that. 

108
00:08:50,000 --> 00:08:52,000
Now if we zoom out, 

109
00:08:52,000 --> 00:08:57,000
I think that's a pretty good size relative to the other elements on the page

110
00:08:57,000 --> 00:09:01,000
and I think it balances out the logo very nicely.

111
00:09:01,000 --> 00:09:07,000
So now, let's go ahead and add some layer styles to this paperclip.

112
00:09:07,000 --> 00:09:13,000
First, I'm going to go ahead and add an inner shadow,

113
00:09:13,000 --> 00:09:19,000
and this is going to be very light because all I really want this inner shadow to do

114
00:09:19,000 --> 00:09:24,000
is to give some definition and 3-D shape to the paperclip

115
00:09:24,000 --> 00:09:29,000
so that the wire here actually feels like it's round.

116
00:09:29,000 --> 00:09:34,000
So we'll adjust the size here as needed.

117
00:09:34,000 --> 00:09:39,000
I think that's pretty good, and that looks a little bit sharp,

118
00:09:39,000 --> 00:09:46,000
so I'm going to adjust the opacity, and I think that's good.

119
00:09:46,000 --> 00:09:50,000
We'll increase the size by 1,

120
00:09:50,000 --> 00:09:53,000
just make a few fine-tuned adjustments here, 

121
00:09:53,000 --> 00:09:55,000
and that looks pretty good.

122
00:09:55,000 --> 00:09:58,000
I think that paperclip looks pretty round, 

123
00:09:58,000 --> 00:10:02,000
and now we can go ahead and make it look a lot more metallic

124
00:10:02,000 --> 00:10:04,000
by adding a gradient. 

125
00:10:04,000 --> 00:10:17,000
So we'll go ahead and pick a nice metallic gray color here.

126
00:10:17,000 --> 00:10:19,000
I think that's pretty good.

127
00:10:19,000 --> 00:10:23,000
We'll duplicate that color 

128
00:10:23,000 --> 00:10:29,000
so that it's on the other side of the gradient

129
00:10:29,000 --> 00:10:35,000
and then we have this shiny white area that we can play with in the middle,

130
00:10:35,000 --> 00:10:37,000
and I think it's a little bit too bright. 

131
00:10:37,000 --> 00:10:47,000
We should make the shininess of this paperclip a little bit lower.

132
00:10:47,000 --> 00:10:49,000
I think that looks good.

133
00:10:49,000 --> 00:10:52,000
Maybe it should be a little brighter. 

134
00:10:52,000 --> 00:10:54,000
There we go.

135
00:10:54,000 --> 00:10:59,000
And now, we can adjust the angle of the light

136
00:10:59,000 --> 00:11:02,000
so that it looks a bit more realistic, 

137
00:11:02,000 --> 00:11:07,000
and I sort of like that angle there

138
00:11:07,000 --> 00:11:09,000
and I think that looks good.

139
00:11:09,000 --> 00:11:14,000
We'll go ahead and accept those changes.

140
00:11:14,000 --> 00:11:17,000
Now, this paperclip does have a gradient on it

141
00:11:17,000 --> 00:11:22,000
and I know I said earlier that you should add noise to nearly all gradients,

142
00:11:22,000 --> 00:11:26,000
but because there's such a small amount of surface area here, 

143
00:11:26,000 --> 00:11:35,000
we really don't need to add any noise because this is already visually varied enough.

144
00:11:35,000 --> 00:11:39,000
So if we zoom out here, we can start to get a sense

145
00:11:39,000 --> 00:11:42,000
of what our page is ultimately going to look like.

146
00:11:42,000 --> 00:11:46,000
I think this is looking pretty good so far.