Preview
Video Player
00:00
00:00
Styling Your Layers
7:43Learn about fill, fill types, and how to use them.
We now know how to draw layers on the
canvas and how to resize and
0:00
move them around.
0:03
But they don't look very colorful or
special, so
0:04
let's take a look at styling layers.
0:07
To change the color or style of a layer,
we need to look at the Inspector sidebar.
0:11
You should notice the colored button under
the Fills title.
0:16
Click that and a popover will appear.
0:21
If you click anywhere in this large area,
or click and drag,
0:26
you can make the color more or less
vibrant by moving the marker left and
0:30
right, or brighter and darker by moving it
up and down.
0:34
I think this is a nice red color for now,
but what else is there in this popover.
0:41
These icons along the top are the tabs for
the different field types.
0:47
Right now the default option is a solid
colored fill,
0:52
which is a single flat color.
0:56
Next we have a linear gradient which is a
transition from one color to another.
0:59
You can change the color of these points,
add more of them,
1:07
and even pick them up in the canvas to
move them around, to change its position.
1:12
[BLANK_AUDIO]
1:20
Next, we have radial and angular
gradients,
1:24
which can create this cool effect.
1:27
These points can also be moved around the
canvas to manipulate them.
1:31
[BLANK_AUDIO]
1:35
Finally we have a pattern fill where you
can import your own images to fill
1:45
a layer.
1:49
And noise fill which can be used for
adding a grainy texture to your designs.
1:51
But let's go back to the solid colored
fill on the left.
1:57
Underneath the main color we were playing
around with are two sliders.
2:02
The top one adjusts the hue or tone of the
color.
2:07
Click and drag it around to see the color
you have picked change.
2:11
[BLANK_AUDIO]
2:14
The slider below adjusts the opacity of a
color, making it more transparent or
2:18
opaque.
2:23
We can always see the results of our fill
in the preview box to the right of
2:29
the sliders, with the checkered background
indicating transparency.
2:34
On the left, is a color picker.
2:39
Click the button, and you can now sample
any color on your screen.
2:42
It doesn't even have to be in the Sketch
window.
2:47
These text fields below store the selected
color as a value computers will
2:53
recognize if you're going to be coding a
website, or application.
2:57
Hex stands for hexadecimal value whilst R,
G,
3:02
B and A represent the red, green, blue and
alpha values of a color.
3:07
Common colors will populate these boxes
below, and
3:14
they are the most frequently used colors
in your document.
3:18
Colors in the sketch don't just come under
the form of fields.
3:22
You can apply colors to other styles, such
as borders and shadows.
3:25
The Borders option is found under Fills in
the Inspector.
3:33
Here, you can apply a color.
3:37
[BLANK_AUDIO]
3:38
As well as adjusting the thickness.
3:43
[BLANK_AUDIO]
3:45
Or defining whether the border should sit
on the inside, center, or
3:50
outside of a shape.
3:55
If you press this cog icon above the
Thickness field,
3:58
you can view some advanced options for
borders, such as changing the join type.
4:01
[BLANK_AUDIO]
4:07
And enabling a dashed border.
4:09
[BLANK_AUDIO]
4:11
Shadows, both outer and inner, are also
incredibly easy to apply.
4:15
Just press the add icon on the right of
the cell.
4:21
Along with changing the color, you can
adjust its X and
4:26
Y offset, the blur radius, and the spread,
4:29
which can be used to grow the size of the
object casting the shadow.
4:32
[BLANK_AUDIO]
4:36
With Sketch, you can add as many fills,
borders, and shadows as you like.
4:44
They can each be added by pressing the
respective add icon.
4:51
Creating multiple fills, borders or
shadows is a great way for
4:55
getting unique effects.
5:00
Let me update some of these values so
5:02
I can create a typical button you may see
in a website.
5:04
[BLANK_AUDIO]
5:07
Now, I've just tweaked some of these
values.
5:27
So feel free to pause the video at this
point and style your own button,
5:30
playing around and experimenting with some
of the styles.
5:34
With the layer as a whole, you can edit
and alter its opacity
5:39
which we saw with the solid fill type as
well as changing the layer's blend weight.
5:43
Blend modes are used in digital design to
to mix layers or colors into each other.
5:52
Adjusting the master blend mode for
5:59
a layer will only work when there's two or
more layers
6:00
with one of those being underneath the
layer whose mode you're adjusting.
6:04
Let me draw a rectangle and give it a
black to white gradient and
6:09
place it partially above our button.
6:14
[BLANK_AUDIO]
6:16
By default a layers blend mode will be set
to Normal,
6:23
meaning you can't see any of the layer
below it.
6:26
But by altering the blend mode, parts of
the layer underneath
6:30
will show through depending on the mode it
is set to.
6:34
For example, all the lighter parts will
disappear from this layer
6:38
if it set to multiply, even the darker
colors.
6:41
The opposite effect will happen if you set
the blend mode to Screen.
6:48
[BLANK_AUDIO]
6:52
Blend mode can also be applied to
individual colors for fills, borders, and
6:55
shadows, as well as adjusting it for the
entire layer.
7:00
If you are designing a website, you can
also output your layer styles in CSS too.
7:04
Just right-click a layer, and select Copy
CSS Attributes.
7:09
[BLANK_AUDIO]
7:13
Everything such as corners, borders,
shadows and gradients will be copied.
7:17
So your site elements will look just as
they do in Sketch,
7:23
without using any images.
7:26
Just paste the code into your HTML or CSS
document.
7:28
Save and preview.
7:35
[BLANK_AUDIO]
7:36