1 00:00:00,270 --> 00:00:04,590 We're going to draw three curvy lines to represent the red, green, and 2 00:00:04,590 --> 00:00:05,910 blue channels. 3 00:00:05,910 --> 00:00:07,910 These will be what are called color curves. 4 00:00:07,910 --> 00:00:10,360 That in the finished application, 5 00:00:10,360 --> 00:00:15,820 the user would be able to adjust to increase or decrease each of the red, 6 00:00:15,820 --> 00:00:19,790 green, and blue channels at specific points along the histogram. 7 00:00:19,790 --> 00:00:22,860 For example, they might be able to bump up the blues for 8 00:00:22,860 --> 00:00:27,990 dark pixels, or decrease the greens and reds on brighter pixels. 9 00:00:27,990 --> 00:00:31,280 This is basically how filters on apps like Instagram work. 10 00:00:33,170 --> 00:00:38,520 Using the pen tool, and I'm going to switch over by hitting the P key, 11 00:00:38,520 --> 00:00:45,840 we're going to drop a point in the bottom left corner of this editing screen. 12 00:00:45,840 --> 00:00:47,990 So I'm going to come down here and 13 00:00:47,990 --> 00:00:52,090 just slightly outside of the mask, drop one point. 14 00:00:53,110 --> 00:00:59,618 And then I'm going to come toward the middle and click and drag. 15 00:00:59,618 --> 00:01:03,750 And this will create a curved line. 16 00:01:04,870 --> 00:01:08,820 Now, you'll notice that the next point I drop 17 00:01:08,820 --> 00:01:12,990 is also going to follow the handles of this curve. 18 00:01:12,990 --> 00:01:18,920 So if I put it over here, down here, It's still this nice, curved line. 19 00:01:18,920 --> 00:01:22,970 So let's just go a little higher here and drop it right there. 20 00:01:24,580 --> 00:01:27,660 And then, to stop drawing a shape like this and 21 00:01:27,660 --> 00:01:32,680 just leave this line here, hit the Enter key on your keyboard. 22 00:01:34,420 --> 00:01:36,556 Then, do the same thing. 23 00:01:36,556 --> 00:01:41,638 Hit the P key to select the pen tool and draw two more of these. 24 00:01:41,638 --> 00:01:45,153 So I'm going to click over on the left, 25 00:01:45,153 --> 00:01:50,584 then the middle point I'll drag out a nice big curve there and 26 00:01:50,584 --> 00:01:54,120 then drop the last point and hit Enter. 27 00:01:54,120 --> 00:01:59,857 And then one more time, select the pen tool And 28 00:01:59,857 --> 00:02:01,884 let's say this curve is going down here. 29 00:02:04,385 --> 00:02:08,700 And maybe it's going down to the bottom right. 30 00:02:08,700 --> 00:02:11,650 Hit Enter, there we go. 31 00:02:11,650 --> 00:02:17,520 Now, let's apply a stroke weight to each one of these new lines. 32 00:02:17,520 --> 00:02:22,080 In the layer palettes, select all three of these by clicking the first one, 33 00:02:22,080 --> 00:02:25,086 holding Shift, and then selecting the last one. 34 00:02:25,086 --> 00:02:27,240 This will multi-select the layers. 35 00:02:27,240 --> 00:02:31,835 And any changes we make in the inspector on the right will be applied 36 00:02:31,835 --> 00:02:34,130 to all three layers. 37 00:02:34,130 --> 00:02:38,880 This way we can quickly set the stroke weight on all three at once. 38 00:02:39,950 --> 00:02:42,505 So down here where it says stroke, 39 00:02:42,505 --> 00:02:47,110 we'll set the weight to something like three and hit Enter. 40 00:02:49,140 --> 00:02:53,710 And that will make the stroke and all three of these a little bit thicker. 41 00:02:53,710 --> 00:02:55,410 We'll set the color of this in a moment. 42 00:02:56,700 --> 00:03:01,540 Next, let's draw some circles that will represent the touch controls for 43 00:03:01,540 --> 00:03:03,020 these curves. 44 00:03:03,020 --> 00:03:10,210 In the Toolbar, select the drop-down arrow next to this Rectangle Tool. 45 00:03:12,310 --> 00:03:14,995 And instead, select the Ellipse Tool. 46 00:03:17,124 --> 00:03:22,600 Then, move your cursor so it's right on top of one of these lines. 47 00:03:22,600 --> 00:03:28,030 Click and drag while holding down the Shift key to make a perfect circle. 48 00:03:29,290 --> 00:03:36,805 And then we'll just move that into place, Using arrow keys for fine adjustments. 49 00:03:38,150 --> 00:03:40,600 And then we'll just copy and paste this. 50 00:03:40,600 --> 00:03:46,192 So I'll hit CMD+C on a Mac or CTRL+C on Windows, 51 00:03:46,192 --> 00:03:50,700 and then CMD+V or CTRL+C to paste. 52 00:03:50,700 --> 00:03:53,630 And it will paste it in the exact same spot. 53 00:03:53,630 --> 00:03:57,000 And we'll move this one over here and then paste one more time. 54 00:03:57,000 --> 00:03:59,520 And we'll move this one maybe down here. 55 00:04:00,570 --> 00:04:05,808 Zoom in on this a bit and actually think these circles are a little bit too large 56 00:04:05,808 --> 00:04:11,057 so let's multi-select them by holding down Shift and clicking on each one. 57 00:04:11,057 --> 00:04:16,450 And then we'll make these all smaller and it will scale all of these together. 58 00:04:16,450 --> 00:04:19,560 So we need to actually move these back in place again. 59 00:04:19,560 --> 00:04:26,060 So we'll just move them, kinda like so, doesn't have to be exact, there we go. 60 00:04:27,870 --> 00:04:30,210 So now, let's hit the 1 key to zoom back out. 61 00:04:32,040 --> 00:04:35,850 In the layer palette, select the three Ellipse shapes. 62 00:04:37,330 --> 00:04:40,380 And then add a stroke in the Inspector. 63 00:04:40,380 --> 00:04:43,730 Right now there's no stroke, so click the + button, add a stroke to them. 64 00:04:45,530 --> 00:04:49,895 And let's give it a stroke weight of 3. 65 00:04:51,820 --> 00:04:53,760 And then add a fill. 66 00:04:53,760 --> 00:04:54,875 Set to white. 67 00:04:57,800 --> 00:05:03,750 And now, let's group each one of these ellipse together with its curve. 68 00:05:03,750 --> 00:05:08,470 So in the canvas, not in the layer palette, 69 00:05:08,470 --> 00:05:10,870 let's select each one of these together. 70 00:05:10,870 --> 00:05:17,151 So we'll select this first circle and then hold down Shift to multi-select its curve. 71 00:05:18,970 --> 00:05:22,520 And then we'll group them together by hitting CMD+G. 72 00:05:25,355 --> 00:05:26,890 Do the same thing for the next one. 73 00:05:28,960 --> 00:05:30,720 And then, let's group this together. 74 00:05:32,500 --> 00:05:38,970 Now, we need to settle this so that this strokes have the right colors. 75 00:05:38,970 --> 00:05:41,970 So let's select this first group here. 76 00:05:43,958 --> 00:05:48,440 And we'll actually select the Ellipse and Vector inside of it. 77 00:05:49,880 --> 00:05:51,170 And in the inspector, 78 00:05:51,170 --> 00:05:56,090 once both of those are selected, go to the Stroke and let's set it to red. 79 00:05:58,060 --> 00:06:03,048 Then let's select the next group and we'll set its 80 00:06:03,048 --> 00:06:07,998 stroke, To green. 81 00:06:10,187 --> 00:06:17,262 And then finally, let's select the last two, And we will set them to blue. 82 00:06:20,354 --> 00:06:25,076 Now, let's name each one of these groups appropriately in the layers palette, so 83 00:06:25,076 --> 00:06:26,430 this is the blue group. 84 00:06:28,670 --> 00:06:30,540 This one is green. 85 00:06:30,540 --> 00:06:32,429 And this one is red. 86 00:06:32,429 --> 00:06:35,500 Now let's collapse all of these. 87 00:06:37,550 --> 00:06:41,240 And finally, let's move them into the App group, so 88 00:06:41,240 --> 00:06:43,930 that they are just above the histogram. 89 00:06:45,100 --> 00:06:51,010 So now if we deselect, we have some nice touch controls in the histogram so 90 00:06:51,010 --> 00:06:56,460 that users can see how their adjustments are affecting each group of pixels. 91 00:06:56,460 --> 00:06:58,470 This isn't at all accurate. 92 00:06:58,470 --> 00:06:59,430 The histogram and 93 00:06:59,430 --> 00:07:04,565 color curves are completely made up and don't fit this image necessarily. 94 00:07:04,565 --> 00:07:07,535 But that's fine for the purposes of this mock-up. 95 00:07:07,535 --> 00:07:11,445 It only needs to show that there will be controls there and 96 00:07:11,445 --> 00:07:12,395 what they might look like.