1 00:00:00,810 --> 00:00:04,693 The pen or vector tool allows you to draw shapes by placing and 2 00:00:04,693 --> 00:00:07,460 adjusting vector points on the canvas. 3 00:00:07,460 --> 00:00:12,600 Using this method gives you far more control in creating complex shapes. 4 00:00:12,600 --> 00:00:15,690 The vector tool can be selected via the Insert menu or 5 00:00:15,690 --> 00:00:17,710 by pressing V on your keyboard. 6 00:00:18,850 --> 00:00:21,350 Click anywhere on the canvas to begin drawing. 7 00:00:22,540 --> 00:00:25,950 As you move your cursor, the line from the starting point 8 00:00:25,950 --> 00:00:30,340 will follow your cursor until you place your next point by clicking on the canvas. 9 00:00:31,610 --> 00:00:34,210 If you click and drag to create a new point, 10 00:00:34,210 --> 00:00:38,150 you'll see this extra line appear with dots on the end called handles. 11 00:00:39,290 --> 00:00:43,740 These are used to create curved lines as opposed to straight ones. 12 00:00:43,740 --> 00:00:53,230 And if you click and drag a handle, you can adjust the arc over curve. 13 00:00:53,230 --> 00:00:58,330 If you look in the Inspector, you can see the four point types that Sketch supports. 14 00:00:58,330 --> 00:01:02,130 Right now with this point, you can see it is on the default Mirrored type 15 00:01:02,130 --> 00:01:03,820 Sketch gives you when you create a curve. 16 00:01:05,020 --> 00:01:12,000 If we create a new point without dragging it to form a curve, it will be straight. 17 00:01:12,000 --> 00:01:14,110 But this is something you can alter. 18 00:01:14,110 --> 00:01:16,166 So let's change this point to Mirrored too. 19 00:01:16,166 --> 00:01:21,306 [BLANK_AUDIO] 20 00:01:21,306 --> 00:01:22,912 When the setting is Mirrored, 21 00:01:22,912 --> 00:01:25,700 the two handles are an equal distance from the point. 22 00:01:27,520 --> 00:01:32,653 If we change the type to Asymmetric, both handles will move as you adjust the angle. 23 00:01:32,653 --> 00:01:39,413 [BLANK_AUDIO] 24 00:01:39,413 --> 00:01:42,081 But you can now make the distance of the handles from 25 00:01:42,081 --> 00:01:44,140 the points independent to each other. 26 00:01:46,900 --> 00:01:51,033 To adjust them completely, select Disconnected and drag a handle. 27 00:01:51,033 --> 00:01:54,933 [BLANK_AUDIO] 28 00:01:54,933 --> 00:02:00,800 As a result, the path could look quite sharp rather than being a perfect curve. 29 00:02:00,800 --> 00:02:07,020 But this can be useful for certain things, like creating the shark fin-looking shape. 30 00:02:07,020 --> 00:02:09,170 Selecting the last point to be placed and 31 00:02:09,170 --> 00:02:13,520 then moving our cursor will make the next point we place curved as well, 32 00:02:13,520 --> 00:02:16,600 because of the Asymmetric point site that this point has. 33 00:02:17,710 --> 00:02:22,200 But when I place it, it will create a straight point unless I click and 34 00:02:22,200 --> 00:02:23,890 drag to make another Mirrored point. 35 00:02:24,950 --> 00:02:27,460 It is not something that is required. 36 00:02:27,460 --> 00:02:32,760 But it can be useful to close the path by clicking on the first point or 37 00:02:32,760 --> 00:02:35,640 selecting Close Path at the top of the Inspector. 38 00:02:36,800 --> 00:02:40,570 You need to do this if you wish to perform a bullion operation on this shape. 39 00:02:41,700 --> 00:02:44,110 At any point during the drawing process, 40 00:02:44,110 --> 00:02:46,550 you can add new points by clicking on the path. 41 00:02:49,110 --> 00:02:52,290 Or delete a point, by selecting it and pressing Backspace. 42 00:02:53,670 --> 00:02:55,810 And you can also move points by clicking and dragging. 43 00:02:57,380 --> 00:03:01,790 Once you want to leave the editing mode, press Enter or select Finish Editing. 44 00:03:04,400 --> 00:03:08,936 It can also edit vectors of existing shapes, like rectangles, 45 00:03:08,936 --> 00:03:13,813 by pressing Enter or Edit in the tool bar when this shape is selected. 46 00:03:13,813 --> 00:03:18,006 Here you can also add or remove points, change points types, or 47 00:03:18,006 --> 00:03:21,200 completely adjust the shape to something else. 48 00:03:22,380 --> 00:03:24,820 Let me move this out of the way and draw a rectangle. 49 00:03:30,170 --> 00:03:32,770 As well as editing the individual points of a shape, 50 00:03:32,770 --> 00:03:36,070 you can edit the layer as a whole using Transform in the toolbar. 51 00:03:37,690 --> 00:03:40,105 You can apply perspective to a layer by clicking and 52 00:03:40,105 --> 00:03:42,534 dragging one of the circular handles that appear. 53 00:03:42,534 --> 00:03:46,713 [BLANK_AUDIO] 54 00:03:46,713 --> 00:03:51,373 You can easily change this rectangle into a trapezium just by applying a simple 55 00:03:51,373 --> 00:03:52,160 transform. 56 00:03:54,370 --> 00:03:58,340 Pressing Rotate in the tool bar will allow you to rotate your layer by clicking and 57 00:03:58,340 --> 00:04:00,050 dragging one of the corners. 58 00:04:00,050 --> 00:04:04,240 You can keep track and adjust the angle in the Inspector under the Height and 59 00:04:04,240 --> 00:04:05,115 Width fields. 60 00:04:06,270 --> 00:04:09,800 By default the layer will rotate from the center, but 61 00:04:09,800 --> 00:04:13,450 you can adjust the rotation origin by moving the cross haired marker in 62 00:04:13,450 --> 00:04:16,480 the middle to anywhere inside or outside the layer. 63 00:04:23,300 --> 00:04:25,910 Finally we can flip the layer vertically, 64 00:04:25,910 --> 00:04:30,150 horizontally by these two buttons next to the Rotate field. 65 00:04:30,150 --> 00:04:33,280 I typically use this after I've duplicated a layer 66 00:04:33,280 --> 00:04:35,110 if I want to make something look symmetrical. 67 00:04:39,600 --> 00:04:43,490 Masking is also something you can do with layers in Sketch. 68 00:04:43,490 --> 00:04:46,250 There's a couple of different ways you can do this, but 69 00:04:46,250 --> 00:04:48,700 we'll create a mask via the toolbar item. 70 00:04:49,740 --> 00:04:54,020 To mask something, we need to have two or more layers that overlap each other. 71 00:04:55,070 --> 00:04:57,092 So let's take an oval shape and a rectangle. 72 00:04:57,092 --> 00:05:06,192 [BLANK_AUDIO] 73 00:05:06,192 --> 00:05:08,965 If we change the rectangle's color and 74 00:05:08,965 --> 00:05:13,260 have it lie on top of the oval, we select both and press Mask. 75 00:05:15,550 --> 00:05:16,700 As if by magic, 76 00:05:16,700 --> 00:05:21,790 the side of the rectangle will inherit the rounded edge of the oval underneath. 77 00:05:21,790 --> 00:05:26,480 This isn't destructive at all, and you can edit both layers however you like. 78 00:05:26,480 --> 00:05:29,633 Move them around and unmask them to how they were before. 79 00:05:29,633 --> 00:05:36,639 [BLANK_AUDIO]