Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Sketch Basics!
You have completed Sketch Basics!
Preview
Slices are special layers that allow us to export areas on the canvas to files.
You can view more features at the Bohemian Coding Features Page
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
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
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