Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn about fill, fill types, and how to use them.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up