1
00:00:01,870 --> 00:00:07,080
After you've created your designs in
Sketch,

2
00:00:07,080 --> 00:00:10,510
you will want to export them, so you can
hand them over to a developer,

3
00:00:10,510 --> 00:00:12,870
add them to your website, or use them in
another manner.

4
00:00:13,930 --> 00:00:16,750
There's a couple of ways we can export
assets in Sketch.

5
00:00:16,750 --> 00:00:20,000
But first of all, we'll be looking at
slices and the slice tool.

6
00:00:21,580 --> 00:00:23,730
Here's a document that I made earlier,

7
00:00:23,730 --> 00:00:26,660
containing some icons I would like to
export.

8
00:00:26,660 --> 00:00:30,900
To tell Sketch that I would like to export
a specific area of a document,

9
00:00:30,900 --> 00:00:33,090
I'll have to create a slice.

10
00:00:33,090 --> 00:00:36,560
This can be found under Insert, so let's
select it from the list.

11
00:00:39,710 --> 00:00:41,190
With the tool selected, click and

12
00:00:41,190 --> 00:00:44,990
drag the box over the area of canvas you
want to export.

13
00:00:44,990 --> 00:00:47,620
I'll hold down Shift to make sure it's
perfectly square.

14
00:00:50,780 --> 00:00:55,010
The slice will also appear in the layer
list, and it's asking us to name it.

15
00:00:55,010 --> 00:00:56,690
So I'll just call this coffee.

16
00:00:59,790 --> 00:01:00,360
And hit Enter.

17
00:01:01,720 --> 00:01:04,150
Whilst we still have this slice selected,

18
00:01:04,150 --> 00:01:08,850
let me just make sure the size in the
inspector is 32 by 32 pixels.

19
00:01:09,860 --> 00:01:13,935
And I'll nudge its positioning with my
arrow keys to make sure the cup is in

20
00:01:13,935 --> 00:01:15,328
the center of the slice.

21
00:01:15,328 --> 00:01:20,028
[BLANK_AUDIO]

22
00:01:20,028 --> 00:01:21,260
There we go.

23
00:01:21,260 --> 00:01:24,900
We can see the preview of our slice in the
inspector.

24
00:01:24,900 --> 00:01:27,720
And this is what the exported image will
look like.

25
00:01:27,720 --> 00:01:30,970
We can see the icon has an orange
background.

26
00:01:30,970 --> 00:01:34,500
But this isn't something we want the
exported image to have.

27
00:01:34,500 --> 00:01:37,530
So we would like it to have a transparent
background instead.

28
00:01:38,780 --> 00:01:43,770
The option we want to enable here is
Export Group Content Only,

29
00:01:43,770 --> 00:01:46,140
which we can see in the inspector.

30
00:01:46,140 --> 00:01:49,900
However, it isn't enabled as the slice
isn't inside a group.

31
00:01:50,930 --> 00:01:53,130
So let's pick the layer off the list and

32
00:01:53,130 --> 00:01:55,880
drag it inside the group, just above the
coffee cup layer.

33
00:01:58,520 --> 00:02:01,600
With slices it doesnt matter if they're
sitting above or

34
00:02:01,600 --> 00:02:04,310
below the layer you want to export.

35
00:02:04,310 --> 00:02:08,120
Anything inside the slice area on the
canvas will be ready to export.

36
00:02:09,240 --> 00:02:14,100
So now the slice is inside the group,
let's check the enabled option we want,

37
00:02:14,100 --> 00:02:17,365
and we can see the background has
disappeared showing the white canvas

38
00:02:17,365 --> 00:02:19,220
color, which is also transparent.

39
00:02:20,980 --> 00:02:26,040
Next, I'll export this heart-shaped icon
using a slightly different method.

40
00:02:26,040 --> 00:02:29,719
I'll press the S key, which is the
shortcut for the Slice tool,

41
00:02:29,719 --> 00:02:31,228
then hover over the icon.

42
00:02:31,228 --> 00:02:34,148
[BLANK_AUDIO]

43
00:02:34,148 --> 00:02:37,076
When the little knife cursor appears,
click the shape,

44
00:02:37,076 --> 00:02:40,890
and it'll automatically draw a slice
around the shape for you.

45
00:02:40,890 --> 00:02:43,170
So you don't have to measure it out.

46
00:02:43,170 --> 00:02:48,030
As a bonus, the slice will be inserted
inside the group the layer is in, so

47
00:02:48,030 --> 00:02:50,410
it is ready for you to export the group's
contents only.

48
00:02:53,640 --> 00:02:59,210
I'll adjust the heights to make sure it's
32 pixels and

49
00:02:59,210 --> 00:03:02,039
make sure the heart is in the middle of
the slice.

50
00:03:03,480 --> 00:03:05,140
If we unselect the slice,

51
00:03:05,140 --> 00:03:09,510
you can see the slices on the canvas have
a light gray dashed outline.

52
00:03:10,900 --> 00:03:15,830
If you hover over them, they can be
selected easily to edit, but if you

53
00:03:15,830 --> 00:03:19,540
don't want these to appear on the canvas
making your design look messy, you can

54
00:03:19,540 --> 00:03:23,640
hide them by clicking in the blue slice
icon at the bottom of the layer list.

55
00:03:26,330 --> 00:03:29,110
This will hide all the slices from the
layer list and

56
00:03:29,110 --> 00:03:32,120
canvas showing you just your design.

57
00:03:32,120 --> 00:03:34,630
The detail number next to the icon shows
you how

58
00:03:34,630 --> 00:03:36,720
many slices there are in your document.

59
00:03:38,080 --> 00:03:43,110
If you press the icon that looks like two
squares next to the slice icon.

60
00:03:43,110 --> 00:03:46,820
This will hide the layers and only show
the slices in the layer list,

61
00:03:48,300 --> 00:03:52,290
making it easier to find them if your
document is quite large or complex.

62
00:03:53,890 --> 00:03:56,230
Now let's click it again to turn it back
to how it was.

63
00:03:58,230 --> 00:04:01,870
With slices created that you're happy
with, it's time to export them.

64
00:04:02,912 --> 00:04:06,070
You may remember the Export button on the
far right of the tool bar.

65
00:04:07,240 --> 00:04:08,080
Click that and

66
00:04:08,080 --> 00:04:12,690
a sheet will appear that shows off all the
slices as files sketch will export.

67
00:04:15,100 --> 00:04:19,340
Check the boxes for what files you would
like to export and then confirm.

68
00:04:19,340 --> 00:04:25,037
[SOUND] You'll get a prompt asking you,
why you would like to save your files,

69
00:04:25,037 --> 00:04:29,958
and once you confirm your assets are
exported onto your computer.

70
00:04:29,958 --> 00:04:32,509
[BLANK_AUDIO]