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 the best way to make your layers ready for export.
Find more features at the Bohemian Coding Features Page
Export Options
-
Size relates to the scale of the slice, makes for designing for multi-resolution displays easier
-
Suffix field allows you to add a unique identifier to each size you export
-
Format relates to the filetype you can export images as
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
Now we've covered the Slice tool and
0:00
understand how it works, it's time to take
a look at exportable layers.
0:01
Let's select the cloud layer on the
canvas.
0:06
If we look at the bottom of the inspector,
0:10
we can see a small plus button with the
text Make Exportable.
0:13
If I click that, the layer can now be
saved off, and this is signified
0:17
with a little slice icon next to the layer
preview in the layer list.
0:21
You can press the Export icon in the
toolbar and
0:26
export this layer, along with the slices
we drew before.
0:29
This image will have a transparent
background, and
0:33
will trim to the layer's height and width,
which is super convenient.
0:35
And we don't have to worry about creating
a slice, and
0:39
resizing it, if you later resize the
shape.
0:42
As we can see in the inspector, the height
and width of the selected layer, and
0:45
therefore, exported image, is 32 pixels
wide, and 22 pixels high.
0:49
So, what should I do if I want this to be
32 pixels high like the rest of my slices?
0:55
Well, it's possible to convert an
exportable layer to the slice by pressing
1:02
the grey slice icon in the bottom part of
the inspector next to the plus.
1:06
The slice we've just created is now the
selected layer, so we can go ahead and
1:14
change its size,
1:18
position, and remove that background that
we don't want.
1:22
You'll perhaps have noticed the export
options in both the exportable layers and
1:32
slice layers that come under the guise of
size, suffix and format.
1:37
Format relates to the file type you can
export images as.
1:43
The default is PNG,
1:47
which allows you to have high quality
images with transparency.
1:49
JPEG files,
1:53
which are most commonly associated with
photographs can't store transparency.
1:54
So a white background will be applied.
1:59
These are the bitmap file types, meaning
they can't scale up or
2:02
down very well after they've been exported
without looking pixely or blurry.
2:05
PDF, EVS, and SVG are quite similar to
each other, and are vector file types.
2:11
Meaning they can be scaled infinitely, and
2:18
can even be edited in applications like
Sketch.
2:21
Size relates to the scale of a slice, and
makes designing for
2:25
multi-resolution displays easier.
2:29
If we select an option from the drop-down
like 2x,
2:33
you can see the preview of the slice
become sharper,
2:35
as this will scale with the slice to 200%
of its size.
2:43
If I typed in 1.5x,
2:48
this upscale tool to 150%, and you can
even enter a value,
2:52
like 128w to export the image at 128
pixels wide.
2:56
The suffix field allows you to add a
unique identifier to each size
3:03
you export at the end of the layers name
as you can export multiple scales at once.
3:08
Press the Add button to add more sizes and
tweak them to however you like.
3:14
[SOUND] A use case for
3:19
this would be exporting
3:25
assets for an iOS app.
3:32
You might want to 1x export at its
original size along with a 2x
3:39
one with at 2x as its suffix for res in
the displays.
3:44
And then 3x with a, at 3x suffix for the
I-frame 6 plus.
3:48
I'll quickly apply slices to the rest of
these icons.
3:54
This plane on the right is 32 by 32
pixels.
3:58
So, I'll make this an exportable layer.
4:01
I'll then do the same for the hamburger.
4:06
Before converting, resizing and checking
export group contents only.
4:08
[SOUND] It exported into toolbar and
4:15
I can now see all five of my icons I want
to
4:19
export here in the list with @2x and
4:24
@3x under the Cloud icon's name,
4:28
showing that three sizes of this icon will
be exported.
4:32
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