"Interactive Web Pages with JavaScript" was retired on March 17, 2017. You are now viewing the recommended replacement.
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
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