1
00:00:00,250 --> 00:00:01,870
Now we've covered the Slice tool and

2
00:00:01,870 --> 00:00:06,480
understand how it works, it's time to take
a look at exportable layers.

3
00:00:06,480 --> 00:00:09,090
Let's select the cloud layer on the
canvas.

4
00:00:10,880 --> 00:00:13,090
If we look at the bottom of the inspector,

5
00:00:13,090 --> 00:00:16,640
we can see a small plus button with the
text Make Exportable.

6
00:00:17,700 --> 00:00:21,930
If I click that, the layer can now be
saved off, and this is signified

7
00:00:21,930 --> 00:00:26,910
with a little slice icon next to the layer
preview in the layer list.

8
00:00:26,910 --> 00:00:29,370
You can press the Export icon in the
toolbar and

9
00:00:29,370 --> 00:00:32,410
export this layer, along with the slices
we drew before.

10
00:00:33,450 --> 00:00:35,920
This image will have a transparent
background, and

11
00:00:35,920 --> 00:00:39,940
will trim to the layer's height and width,
which is super convenient.

12
00:00:39,940 --> 00:00:42,320
And we don't have to worry about creating
a slice, and

13
00:00:42,320 --> 00:00:44,780
resizing it, if you later resize the
shape.

14
00:00:45,830 --> 00:00:49,640
As we can see in the inspector, the height
and width of the selected layer, and

15
00:00:49,640 --> 00:00:54,660
therefore, exported image, is 32 pixels
wide, and 22 pixels high.

16
00:00:55,740 --> 00:01:01,460
So, what should I do if I want this to be
32 pixels high like the rest of my slices?

17
00:01:02,710 --> 00:01:06,880
Well, it's possible to convert an
exportable layer to the slice by pressing

18
00:01:06,880 --> 00:01:11,450
the grey slice icon in the bottom part of
the inspector next to the plus.

19
00:01:14,280 --> 00:01:18,860
The slice we've just created is now the
selected layer, so we can go ahead and

20
00:01:18,860 --> 00:01:22,642
change its size,

21
00:01:22,642 --> 00:01:31,460
position, and remove that background that
we don't want.

22
00:01:32,760 --> 00:01:37,280
You'll perhaps have noticed the export
options in both the exportable layers and

23
00:01:37,280 --> 00:01:42,400
slice layers that come under the guise of
size, suffix and format.

24
00:01:43,410 --> 00:01:47,380
Format relates to the file type you can
export images as.

25
00:01:47,380 --> 00:01:49,240
The default is PNG,

26
00:01:49,240 --> 00:01:52,400
which allows you to have high quality
images with transparency.

27
00:01:53,480 --> 00:01:54,580
JPEG files,

28
00:01:54,580 --> 00:01:59,700
which are most commonly associated with
photographs can't store transparency.

29
00:01:59,700 --> 00:02:01,460
So a white background will be applied.

30
00:02:02,490 --> 00:02:05,990
These are the bitmap file types, meaning
they can't scale up or

31
00:02:05,990 --> 00:02:10,510
down very well after they've been exported
without looking pixely or blurry.

32
00:02:11,560 --> 00:02:18,750
PDF, EVS, and SVG are quite similar to
each other, and are vector file types.

33
00:02:18,750 --> 00:02:21,540
Meaning they can be scaled infinitely, and

34
00:02:21,540 --> 00:02:24,190
can even be edited in applications like
Sketch.

35
00:02:25,810 --> 00:02:29,484
Size relates to the scale of a slice, and
makes designing for

36
00:02:29,484 --> 00:02:31,870
multi-resolution displays easier.

37
00:02:33,010 --> 00:02:35,960
If we select an option from the drop-down
like 2x,

38
00:02:35,960 --> 00:02:43,110
you can see the preview of the slice
become sharper,

39
00:02:43,110 --> 00:02:46,860
as this will scale with the slice to 200%
of its size.

40
00:02:48,020 --> 00:02:52,080
If I typed in 1.5x,

41
00:02:52,080 --> 00:02:56,590
this upscale tool to 150%, and you can
even enter a value,

42
00:02:56,590 --> 00:03:03,530
like 128w to export the image at 128
pixels wide.

43
00:03:03,530 --> 00:03:08,577
The suffix field allows you to add a
unique identifier to each size

44
00:03:08,577 --> 00:03:14,842
you export at the end of the layers name
as you can export multiple scales at once.

45
00:03:14,842 --> 00:03:19,481
Press the Add button to add more sizes and
tweak them to however you like.

46
00:03:19,481 --> 00:03:25,273
[SOUND] A use case for

47
00:03:25,273 --> 00:03:32,514
this would be exporting

48
00:03:32,514 --> 00:03:39,401
assets for an iOS app.

49
00:03:39,401 --> 00:03:44,237
You might want to 1x export at its
original size along with a 2x

50
00:03:44,237 --> 00:03:48,270
one with at 2x as its suffix for res in
the displays.

51
00:03:48,270 --> 00:03:54,470
And then 3x with a, at 3x suffix for the
I-frame 6 plus.

52
00:03:54,470 --> 00:03:58,070
I'll quickly apply slices to the rest of
these icons.

53
00:03:58,070 --> 00:04:01,360
This plane on the right is 32 by 32
pixels.

54
00:04:01,360 --> 00:04:03,910
So, I'll make this an exportable layer.

55
00:04:06,090 --> 00:04:08,731
I'll then do the same for the hamburger.

56
00:04:08,731 --> 00:04:15,950
Before converting, resizing and checking
export group contents only.

57
00:04:15,950 --> 00:04:19,928
[SOUND] It exported into toolbar and

58
00:04:19,928 --> 00:04:24,452
I can now see all five of my icons I want
to

59
00:04:24,452 --> 00:04:28,704
export here in the list with @2x and

60
00:04:28,704 --> 00:04:32,956
@3x under the Cloud icon's name,

61
00:04:32,956 --> 00:04:39,425
showing that three sizes of this icon will
be exported.