Drawing Curved Lines7:13 with Nick Pettit
Using some more advanced pen tool techniques, it's possible to draw curved lines.
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 up