Preview
Video Player
00:00
00:00
Working with Slices
4:32Slices are special layers that allow us to export areas on the canvas to files.
After you've created your designs in
Sketch,
0:01
you will want to export them, so you can
hand them over to a developer,
0:07
add them to your website, or use them in
another manner.
0:10
There's a couple of ways we can export
assets in Sketch.
0:13
But first of all, we'll be looking at
slices and the slice tool.
0:16
Here's a document that I made earlier,
0:21
containing some icons I would like to
export.
0:23
To tell Sketch that I would like to export
a specific area of a document,
0:26
I'll have to create a slice.
0:30
This can be found under Insert, so let's
select it from the list.
0:33
With the tool selected, click and
0:39
drag the box over the area of canvas you
want to export.
0:41
I'll hold down Shift to make sure it's
perfectly square.
0:44
The slice will also appear in the layer
list, and it's asking us to name it.
0:50
So I'll just call this coffee.
0:55
And hit Enter.
0:59
Whilst we still have this slice selected,
1:01
let me just make sure the size in the
inspector is 32 by 32 pixels.
1:04
And I'll nudge its positioning with my
arrow keys to make sure the cup is in
1:09
the center of the slice.
1:13
[BLANK_AUDIO]
1:15
There we go.
1:20
We can see the preview of our slice in the
inspector.
1:21
And this is what the exported image will
look like.
1:24
We can see the icon has an orange
background.
1:27
But this isn't something we want the
exported image to have.
1:30
So we would like it to have a transparent
background instead.
1:34
The option we want to enable here is
Export Group Content Only,
1:38
which we can see in the inspector.
1:43
However, it isn't enabled as the slice
isn't inside a group.
1:46
So let's pick the layer off the list and
1:50
drag it inside the group, just above the
coffee cup layer.
1:53
With slices it doesnt matter if they're
sitting above or
1:58
below the layer you want to export.
2:01
Anything inside the slice area on the
canvas will be ready to export.
2:04
So now the slice is inside the group,
let's check the enabled option we want,
2:09
and we can see the background has
disappeared showing the white canvas
2:14
color, which is also transparent.
2:17
Next, I'll export this heart-shaped icon
using a slightly different method.
2:20
I'll press the S key, which is the
shortcut for the Slice tool,
2:26
then hover over the icon.
2:29
[BLANK_AUDIO]
2:31
When the little knife cursor appears,
click the shape,
2:34
and it'll automatically draw a slice
around the shape for you.
2:37
So you don't have to measure it out.
2:40
As a bonus, the slice will be inserted
inside the group the layer is in, so
2:43
it is ready for you to export the group's
contents only.
2:48
I'll adjust the heights to make sure it's
32 pixels and
2:53
make sure the heart is in the middle of
the slice.
2:59
If we unselect the slice,
3:03
you can see the slices on the canvas have
a light gray dashed outline.
3:05
If you hover over them, they can be
selected easily to edit, but if you
3:10
don't want these to appear on the canvas
making your design look messy, you can
3:15
hide them by clicking in the blue slice
icon at the bottom of the layer list.
3:19
This will hide all the slices from the
layer list and
3:26
canvas showing you just your design.
3:29
The detail number next to the icon shows
you how
3:32
many slices there are in your document.
3:34
If you press the icon that looks like two
squares next to the slice icon.
3:38
This will hide the layers and only show
the slices in the layer list,
3:43
making it easier to find them if your
document is quite large or complex.
3:48
Now let's click it again to turn it back
to how it was.
3:53
With slices created that you're happy
with, it's time to export them.
3:58
You may remember the Export button on the
far right of the tool bar.
4:02
Click that and
4:07
a sheet will appear that shows off all the
slices as files sketch will export.
4:08
Check the boxes for what files you would
like to export and then confirm.
4:15
[SOUND] You'll get a prompt asking you,
why you would like to save your files,
4:19
and once you confirm your assets are
exported onto your computer.
4:25
[BLANK_AUDIO]
4:29