Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Using some more advanced pen tool techniques, it's possible to draw curved lines.
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
We're going to draw three curvy lines
to represent the red, green, and
0:00
blue channels.
0:04
These will be what
are called color curves.
0:05
That in the finished application,
0:07
the user would be able to adjust to
increase or decrease each of the red,
0:10
green, and blue channels at specific
points along the histogram.
0:15
For example, they might be
able to bump up the blues for
0:19
dark pixels, or decrease the greens and
reds on brighter pixels.
0:22
This is basically how filters
on apps like Instagram work.
0:27
Using the pen tool, and I'm going to
switch over by hitting the P key,
0:33
we're going to drop a point in the bottom
left corner of this editing screen.
0:38
So I'm going to come down here and
0:45
just slightly outside of the mask,
drop one point.
0:47
And then I'm going to come toward
the middle and click and drag.
0:53
And this will create a curved line.
0:59
Now, you'll notice that
the next point I drop
1:04
is also going to follow
the handles of this curve.
1:08
So if I put it over here, down here,
It's still this nice, curved line.
1:12
So let's just go a little higher here and
drop it right there.
1:18
And then,
to stop drawing a shape like this and
1:24
just leave this line here,
hit the Enter key on your keyboard.
1:27
Then, do the same thing.
1:34
Hit the P key to select the pen tool and
draw two more of these.
1:36
So I'm going to click over on the left,
1:41
then the middle point I'll drag
out a nice big curve there and
1:45
then drop the last point and hit Enter.
1:50
And then one more time,
select the pen tool And
1:54
let's say this curve is going down here.
1:59
And maybe it's going
down to the bottom right.
2:04
Hit Enter, there we go.
2:08
Now, let's apply a stroke weight
to each one of these new lines.
2:11
In the layer palettes, select all three
of these by clicking the first one,
2:17
holding Shift, and
then selecting the last one.
2:22
This will multi-select the layers.
2:25
And any changes we make in the inspector
on the right will be applied
2:27
to all three layers.
2:31
This way we can quickly set the stroke
weight on all three at once.
2:34
So down here where it says stroke,
2:39
we'll set the weight to something
like three and hit Enter.
2:42
And that will make the stroke and
all three of these a little bit thicker.
2:49
We'll set the color of this in a moment.
2:53
Next, let's draw some circles that
will represent the touch controls for
2:56
these curves.
3:01
In the Toolbar, select the drop-down
arrow next to this Rectangle Tool.
3:03
And instead, select the Ellipse Tool.
3:12
Then, move your cursor so
it's right on top of one of these lines.
3:17
Click and drag while holding down
the Shift key to make a perfect circle.
3:22
And then we'll just move that into place,
Using arrow keys for fine adjustments.
3:29
And then we'll just copy and paste this.
3:38
So I'll hit CMD+C on a Mac or
CTRL+C on Windows,
3:40
and then CMD+V or CTRL+C to paste.
3:46
And it will paste it in
the exact same spot.
3:50
And we'll move this one over here and
then paste one more time.
3:53
And we'll move this one maybe down here.
3:57
Zoom in on this a bit and actually think
these circles are a little bit too large
4:00
so let's multi-select them by holding
down Shift and clicking on each one.
4:05
And then we'll make these all smaller and
it will scale all of these together.
4:11
So we need to actually move
these back in place again.
4:16
So we'll just move them, kinda like so,
doesn't have to be exact, there we go.
4:19
So now,
let's hit the 1 key to zoom back out.
4:27
In the layer palette,
select the three Ellipse shapes.
4:32
And then add a stroke in the Inspector.
4:37
Right now there's no stroke, so
click the + button, add a stroke to them.
4:40
And let's give it a stroke weight of 3.
4:45
And then add a fill.
4:51
Set to white.
4:53
And now, let's group each one of these
ellipse together with its curve.
4:57
So in the canvas,
not in the layer palette,
5:03
let's select each one of these together.
5:08
So we'll select this first circle and then
hold down Shift to multi-select its curve.
5:10
And then we'll group them
together by hitting CMD+G.
5:18
Do the same thing for the next one.
5:25
And then, let's group this together.
5:28
Now, we need to settle this so
that this strokes have the right colors.
5:32
So let's select this first group here.
5:38
And we'll actually select the Ellipse and
Vector inside of it.
5:43
And in the inspector,
5:49
once both of those are selected,
go to the Stroke and let's set it to red.
5:51
Then let's select the next group and
we'll set its
5:58
stroke, To green.
6:03
And then finally, let's select the last
two, And we will set them to blue.
6:10
Now, let's name each one of these groups
appropriately in the layers palette, so
6:20
this is the blue group.
6:25
This one is green.
6:28
And this one is red.
6:30
Now let's collapse all of these.
6:32
And finally,
let's move them into the App group, so
6:37
that they are just above the histogram.
6:41
So now if we deselect, we have some
nice touch controls in the histogram so
6:45
that users can see how their adjustments
are affecting each group of pixels.
6:51
This isn't at all accurate.
6:56
The histogram and
6:58
color curves are completely made up and
don't fit this image necessarily.
6:59
But that's fine for
the purposes of this mock-up.
7:04
It only needs to show that there
will be controls there and
7:07
what they might look like.
7:11
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