1
00:00:00,400 --> 00:00:03,670
We now know how to draw layers on the
canvas and how to resize and

2
00:00:03,670 --> 00:00:04,870
move them around.

3
00:00:04,870 --> 00:00:07,760
But they don't look very colorful or
special, so

4
00:00:07,760 --> 00:00:09,560
let's take a look at styling layers.

5
00:00:11,190 --> 00:00:16,750
To change the color or style of a layer,
we need to look at the Inspector sidebar.

6
00:00:16,750 --> 00:00:21,400
You should notice the colored button under
the Fills title.

7
00:00:21,400 --> 00:00:23,550
Click that and a popover will appear.

8
00:00:26,600 --> 00:00:30,060
If you click anywhere in this large area,
or click and drag,

9
00:00:30,060 --> 00:00:34,840
you can make the color more or less
vibrant by moving the marker left and

10
00:00:34,840 --> 00:00:38,820
right, or brighter and darker by moving it
up and down.

11
00:00:41,860 --> 00:00:47,930
I think this is a nice red color for now,
but what else is there in this popover.

12
00:00:47,930 --> 00:00:52,610
These icons along the top are the tabs for
the different field types.

13
00:00:52,610 --> 00:00:56,190
Right now the default option is a solid
colored fill,

14
00:00:56,190 --> 00:00:57,750
which is a single flat color.

15
00:00:59,570 --> 00:01:04,120
Next we have a linear gradient which is a
transition from one color to another.

16
00:01:07,130 --> 00:01:12,980
You can change the color of these points,
add more of them,

17
00:01:12,980 --> 00:01:20,819
and even pick them up in the canvas to
move them around, to change its position.

18
00:01:20,819 --> 00:01:24,155
[BLANK_AUDIO]

19
00:01:24,155 --> 00:01:27,613
Next, we have radial and angular
gradients,

20
00:01:27,613 --> 00:01:30,280
which can create this cool effect.

21
00:01:31,630 --> 00:01:35,232
These points can also be moved around the
canvas to manipulate them.

22
00:01:35,232 --> 00:01:45,075
[BLANK_AUDIO]

23
00:01:45,075 --> 00:01:49,555
Finally we have a pattern fill where you
can import your own images to fill

24
00:01:49,555 --> 00:01:50,151
a layer.

25
00:01:51,600 --> 00:01:56,370
And noise fill which can be used for
adding a grainy texture to your designs.

26
00:01:57,780 --> 00:02:00,820
But let's go back to the solid colored
fill on the left.

27
00:02:02,740 --> 00:02:07,130
Underneath the main color we were playing
around with are two sliders.

28
00:02:07,130 --> 00:02:10,150
The top one adjusts the hue or tone of the
color.

29
00:02:11,240 --> 00:02:14,371
Click and drag it around to see the color
you have picked change.

30
00:02:14,371 --> 00:02:18,442
[BLANK_AUDIO]

31
00:02:18,442 --> 00:02:23,017
The slider below adjusts the opacity of a
color, making it more transparent or

32
00:02:23,017 --> 00:02:23,580
opaque.

33
00:02:29,850 --> 00:02:34,370
We can always see the results of our fill
in the preview box to the right of

34
00:02:34,370 --> 00:02:37,870
the sliders, with the checkered background
indicating transparency.

35
00:02:39,050 --> 00:02:40,730
On the left, is a color picker.

36
00:02:42,180 --> 00:02:45,520
Click the button, and you can now sample
any color on your screen.

37
00:02:47,230 --> 00:02:49,230
It doesn't even have to be in the Sketch
window.

38
00:02:53,550 --> 00:02:57,960
These text fields below store the selected
color as a value computers will

39
00:02:57,960 --> 00:03:01,510
recognize if you're going to be coding a
website, or application.

40
00:03:02,760 --> 00:03:07,850
Hex stands for hexadecimal value whilst R,
G,

41
00:03:07,850 --> 00:03:14,480
B and A represent the red, green, blue and
alpha values of a color.

42
00:03:14,480 --> 00:03:18,030
Common colors will populate these boxes
below, and

43
00:03:18,030 --> 00:03:20,680
they are the most frequently used colors
in your document.

44
00:03:22,080 --> 00:03:25,760
Colors in the sketch don't just come under
the form of fields.

45
00:03:25,760 --> 00:03:29,430
You can apply colors to other styles, such
as borders and shadows.

46
00:03:33,160 --> 00:03:37,400
The Borders option is found under Fills in
the Inspector.

47
00:03:37,400 --> 00:03:38,823
Here, you can apply a color.

48
00:03:38,823 --> 00:03:43,695
[BLANK_AUDIO]

49
00:03:43,695 --> 00:03:45,996
As well as adjusting the thickness.

50
00:03:45,996 --> 00:03:50,535
[BLANK_AUDIO]

51
00:03:50,535 --> 00:03:55,039
Or defining whether the border should sit
on the inside, center, or

52
00:03:55,039 --> 00:03:56,370
outside of a shape.

53
00:03:58,260 --> 00:04:01,889
If you press this cog icon above the
Thickness field,

54
00:04:01,889 --> 00:04:07,385
you can view some advanced options for
borders, such as changing the join type.

55
00:04:07,385 --> 00:04:09,320
[BLANK_AUDIO]

56
00:04:09,320 --> 00:04:11,455
And enabling a dashed border.

57
00:04:11,455 --> 00:04:15,525
[BLANK_AUDIO]

58
00:04:15,525 --> 00:04:21,160
Shadows, both outer and inner, are also
incredibly easy to apply.

59
00:04:21,160 --> 00:04:23,990
Just press the add icon on the right of
the cell.

60
00:04:26,430 --> 00:04:29,662
Along with changing the color, you can
adjust its X and

61
00:04:29,662 --> 00:04:32,332
Y offset, the blur radius, and the spread,

62
00:04:32,332 --> 00:04:36,280
which can be used to grow the size of the
object casting the shadow.

63
00:04:36,280 --> 00:04:44,888
[BLANK_AUDIO]

64
00:04:44,888 --> 00:04:50,000
With Sketch, you can add as many fills,
borders, and shadows as you like.

65
00:04:51,260 --> 00:04:54,890
They can each be added by pressing the
respective add icon.

66
00:04:55,918 --> 00:05:00,030
Creating multiple fills, borders or
shadows is a great way for

67
00:05:00,030 --> 00:05:02,190
getting unique effects.

68
00:05:02,190 --> 00:05:04,262
Let me update some of these values so

69
00:05:04,262 --> 00:05:07,378
I can create a typical button you may see
in a website.

70
00:05:07,378 --> 00:05:17,378
[BLANK_AUDIO]

71
00:05:27,531 --> 00:05:30,620
Now, I've just tweaked some of these
values.

72
00:05:30,620 --> 00:05:34,759
So feel free to pause the video at this
point and style your own button,

73
00:05:34,759 --> 00:05:38,280
playing around and experimenting with some
of the styles.

74
00:05:39,540 --> 00:05:43,500
With the layer as a whole, you can edit
and alter its opacity

75
00:05:43,500 --> 00:05:47,530
which we saw with the solid fill type as
well as changing the layer's blend weight.

76
00:05:52,790 --> 00:05:57,810
Blend modes are used in digital design to
to mix layers or colors into each other.

77
00:05:59,020 --> 00:06:00,870
Adjusting the master blend mode for

78
00:06:00,870 --> 00:06:04,790
a layer will only work when there's two or
more layers

79
00:06:04,790 --> 00:06:08,390
with one of those being underneath the
layer whose mode you're adjusting.

80
00:06:09,990 --> 00:06:14,046
Let me draw a rectangle and give it a
black to white gradient and

81
00:06:14,046 --> 00:06:16,547
place it partially above our button.

82
00:06:16,547 --> 00:06:23,321
[BLANK_AUDIO]

83
00:06:23,321 --> 00:06:26,649
By default a layers blend mode will be set
to Normal,

84
00:06:26,649 --> 00:06:30,680
meaning you can't see any of the layer
below it.

85
00:06:30,680 --> 00:06:34,630
But by altering the blend mode, parts of
the layer underneath

86
00:06:34,630 --> 00:06:37,090
will show through depending on the mode it
is set to.

87
00:06:38,350 --> 00:06:41,920
For example, all the lighter parts will
disappear from this layer

88
00:06:41,920 --> 00:06:44,770
if it set to multiply, even the darker
colors.

89
00:06:48,090 --> 00:06:52,178
The opposite effect will happen if you set
the blend mode to Screen.

90
00:06:52,178 --> 00:06:55,419
[BLANK_AUDIO]

91
00:06:55,419 --> 00:07:00,038
Blend mode can also be applied to
individual colors for fills, borders, and

92
00:07:00,038 --> 00:07:03,390
shadows, as well as adjusting it for the
entire layer.

93
00:07:04,650 --> 00:07:09,830
If you are designing a website, you can
also output your layer styles in CSS too.

94
00:07:09,830 --> 00:07:13,540
Just right-click a layer, and select Copy
CSS Attributes.

95
00:07:13,540 --> 00:07:17,641
[BLANK_AUDIO]

96
00:07:17,641 --> 00:07:23,120
Everything such as corners, borders,
shadows and gradients will be copied.

97
00:07:23,120 --> 00:07:26,510
So your site elements will look just as
they do in Sketch,

98
00:07:26,510 --> 00:07:27,900
without using any images.

99
00:07:28,930 --> 00:07:32,230
Just paste the code into your HTML or CSS
document.

100
00:07:35,390 --> 00:07:36,626
Save and preview.

101
00:07:36,626 --> 00:07:37,126
[BLANK_AUDIO]