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]