Preview
Video Player
00:00
00:00
Export Elements for your App
17:20Now it's time to export all the design assets we've create in Sketch. That way, we're able to use them in the apps and websites we're building.
Exporting assets is something that
typically comes at the end of the design
0:00
process, as we want to save off images and
artwork created in Sketch so
0:04
we can use them in the things we'll be
building, such as apps and websites.
0:08
As our project is an iOS app, I'll show
you the things we need to export for
0:13
our developer, as well as the methods and
0:17
workflow that I personally use at this
stage of the process.
0:19
If we take a look at our document, there's
a lot of things that look like they need
0:24
to be exported to use in our app.
0:28
There's all these icons in the timeline
and in the tap bar, the add icon on
0:31
the top, colored cells, background images,
the map, and a user photo.
0:36
But not all of these things are needed.
0:42
In Sketch, you can draw slices over your
document, and make layers exportable, but
0:45
I personally like to take advantage of
Sketch's pages feature, and
0:50
have all my artwork I want to export on
there.
0:53
In the app, we can see the current page
we're working on here, but
0:57
we'll want to add another.
1:00
So press the add icon.
1:02
[BLANK_AUDIO]
1:03
A new page will be created.
1:07
So, let's rename it to Assets.
1:09
[BLANK_AUDIO]
1:11
Go back to the page you are working on as
we will need to send over some of these
1:16
layers.
1:20
On the today artboard,
1:22
expand the check in group using the small
arrow to the left of the folder icon.
1:24
Now click on the check in coffee cup icon
in the layer list.
1:32
And hold Cmd to click on the colored
circle layer underneath, so
1:35
both layers are selected.
1:39
And press the create symbol button in the
toolbar.
1:41
You'll be then prompted to give this
symbol a name in the inspector.
1:47
Let's call it Check in.
1:51
Creating a symbol will group these two
layers,
1:58
which is denoted with a purple folder
icon.
2:00
And Sketch will remember this group so
2:03
you can insert this into the canvas
whenever you need to use it again.
2:05
As opposed to simply duplicating this
group,
2:10
if you duplicate any of its contents it
will also update the symbol
2:12
throughout the canvas which is something
that is incredibly useful.
2:16
Say I changed this coffee icon in my
mock-up.
2:21
I always have to make sure that I updated
the same layer on the other pages too, so
2:24
it matches.
2:29
But if I had to use this same layer nine
times,
2:30
I'd have to make this change to each of
the nine layers.
2:33
By converting this group into a symbol, I
only have to change this once and
2:36
not have to worry about updating the other
layers too.
2:41
We will want to convert the other markers
in the timeline to symbols too.
2:44
So let's select the two layers needed for
each, and create them one by one.
2:49
[SOUND].
2:53
When that's done, select the assets page
and click insert,
3:20
then symbol, and select the check in
symbol from the fly out menu.
3:24
[BLANK_AUDIO]
3:28
The group will be inserted in the canvas
already selected for you to move around.
3:35
Insert the other symbols the same way.
3:40
Don't worry about their positioning, as
that doesn't really matter.
3:44
[BLANK_AUDIO]
3:46
Then select all these layers, and
4:00
then press Make Exportable at the bottom
of the Inspector.
4:03
We are designing this for the iPhone.
4:11
So we'll need to make a couple of changes
in the panel that has appeared.
4:13
In the size field select 2x from the drop
down and add end 2x into the suffix field.
4:17
This will export the image at double the
size for the iPhone's retina display.
4:25
With the iPhone 6 Plus, we'll also need to
add a 3x scale,
4:36
to make images three times their original
size.
4:41
Add it using the plus icon in this pane
and edit the size.
4:44
[SOUND] Let's go back to the page with our
design on.
4:48
There's a shortcut for changing pages too.
4:55
And that's pressing the function or fn key
and the up down arrow buttons.
4:57
While pressing page up and page down on
larger keyboards.
5:03
From this page, we'll also want to copy
over the icons in the tab bar.
5:08
We don't need to worry about exporting the
map image
5:13
because the application will draw the map
in from code.
5:15
So it won't be a static image like this
one.
5:19
We also don't need to export the plus icon
in the title bar because this is something
5:22
the developer can enable when they built
the app.
5:27
[BLANK_AUDIO]
5:30
Before we paste these layers in the assets
page,
5:36
we'll need to draw a dark background here
first.
5:39
Just so we can see the white icons against
the white background.
5:43
A dark rectangle will do just fine.
5:47
[SOUND] We'll want to make
5:49
a duplicate of these icons,
5:53
as we need to export two different states.
5:58
The normal and the active ones, press
Cmd+D, and move them below the original.
6:06
[SOUND] Now we'll need to update the
styles so
6:12
the top row of icons are using the normal
style and
6:16
the bottom the selected style.
6:21
[SOUND].
6:24
The settings icon isn't using the shared
style as it has a border and not a fill.
6:43
So just update the opacity of this layer.
6:50
[BLANK_AUDIO]
6:52
We are going to want to draw some slices
on top of these layers so let's do that.
6:56
First of all, let me just hide layers from
the list, showing only slices.
7:02
As you can see, these four timeline icons
remain into their list
7:09
as they have exportable properties.
7:13
Let's zoom into our icon a little bit and
press the S key to enable our slice tool.
7:15
I'll draw around the My Profile icon so
the size of my slice is 29 by 29 pixels.
7:24
[BLANK_AUDIO]
7:31
After you draw a slice, you're prompted to
name this layer.
7:45
This matters, as it will end up being a
file's name, once you export.
7:49
So let's call this one, Profile.
7:54
[BLANK_AUDIO]
7:56
Then, I'll draw around the rest of the
icons in the top row, naming them as I go.
8:02
[SOUND] The calendar icon for
8:06
today is a little bit
8:13
smaller than the other icons.
8:18
But still make this 29 by 29 giving it an
even spacing around the icon.
8:26
[BLANK_AUDIO]
8:32
Once you have five slices, select them all
in the Layer list and
8:42
press the Layers icon next to the filter
field to show the layers.
8:46
[BLANK_AUDIO]
8:49
We'll want to then drag them into the
folder our icons are in.
8:55
[BLANK_AUDIO]
8:59
Over in the inspector change the scales of
these slices to 2x and 3x, like before.
9:02
[BLANK_AUDIO]
9:09
And then click the Export Group Contents
Only check box,
9:19
to make sure we don't export our dark
background, just a transparent one.
9:23
We will then want to duplicate these
slices, and
9:30
have them sit over the selected tab bar
icons.
9:32
So, do that by pressing Cmd+D.
9:36
And drag the copies over to the other
folder.
9:39
[BLANK_AUDIO]
9:41
Let's rename our groups as well, normal
and selected.
9:48
[BLANK_AUDIO]
9:52
Open up the selected folder and select all
five slices.
10:02
With the arrow keys, to ensure you don't
accidentally deselect any of the layers,
10:07
match the dashed outlines of the slices.
10:12
So they sit over the icons in the group.
10:15
[BLANK_AUDIO]
10:17
Last thing to do here will be to rename
the layers of these copies.
10:25
Remove the two and add underscore active
to the end of their names.
10:29
[BLANK_AUDIO]
10:33
Double click the topmost slice and change
its name.
10:39
Then select with your cursor the
underscore active part of the text and
10:42
press Cmd+C to copy it.
10:47
If you press the tab key.
10:53
You can rename the layer underneath.
10:55
So remove the space and the 2 and paste in
the underscore active suffix.
10:57
[BLANK_AUDIO]
11:02
Do this until all five of the slices in
this group are renamed.
11:06
[NOISE] Going back to our main page I'm
11:09
looking at the my profile artboard.
11:14
We can see a few images in here.
11:19
Our user's avatar and a background image.
11:21
These, like the map, don't need to be
exported.
11:25
But the colored cells do.
11:28
Holding down Cmd.
11:31
Click on the red bike ride cell on the
canvas and then,
11:32
whilst still holding that key, also press
Shift so we can select multiple layers.
11:36
[BLANK_AUDIO]
11:42
Now we can click on the other three cells
so all four of them are selected.
11:47
When done, copy these layers.
11:51
Move over to our assets page, and paste
them in.
11:58
Once pasted, just move them off to the
side here.
12:06
[BLANK_AUDIO]
12:08
We could just draw a bunch of slices
around each of these layers and
12:15
we'd be done, right?
12:19
Well not quite.
12:21
These images are quite large.
12:22
And we'll want to make them as small as
possible so
12:25
their file size doesn't make the finished
app bigger than it needs to be.
12:27
The iPhone screen is also available at
different widths,
12:32
meaning that exporting at this fixed size
would mean this cell appears
12:36
the right size on one iPhone but too long
and too short on the others.
12:41
So with all of these cells selected.
12:46
Resize to width using the middle handle on
the writer side.
12:49
It will snap when it comes near a width of
29 pixels to match the size of
12:53
our slices for our tab bar icons.
12:58
[BLANK_AUDIO]
13:00
With these layers still selected, I'll
just make them all a little
13:05
narrower giving them a width of 22 pixels
in the inspector.
13:09
With these images the developer can
stretch the width of these out so
13:15
they can fit on any iPhone without
affecting our corner radius.
13:20
Once they're in the app,
13:25
you should never be able to tell that
these images are quite so narrow.
13:26
With these layers selected, I'll make them
exportable and
13:31
give them the same scales we've been
giving the other layers.
13:35
[SOUND].
13:38
[BLANK_AUDIO]
13:42
Then, rename the layers just now, so we
don't have to edit the file name later.
13:45
[BLANK_AUDIO]
13:50
Now that's all the assets we need from our
two screens prepped for export.
14:15
In the top right side of the toolbar is
the export button that will allow
14:20
us to save all our assets outside of
Sketch.
14:25
It can select or
14:32
deselect all slices by toggling this
checkmark at the bottom left of the sheet.
14:33
I'll click on the individual assets to
tell Sketch whether you want
14:39
to export them or not.
14:42
What's missing from this list of items to
export are our artboards
14:46
on the other page so our developer can see
what the app will look like.
14:50
So let's cancel this sheet.
14:54
[NOISE] Back to the original page you can
click on
14:56
the artboard's name in the layer list or
canvas to select it.
15:01
You can then see an export option in the
inspector.
15:07
So let's press the add button and the
change the size to 2X.
15:10
Don't worry about adding the suffix to the
file name, or a 3x size,
15:15
as it's not necessary to do so.
15:19
[BLANK_AUDIO]
15:21
We don't have to go back to the assets
page to click on export again.
15:30
You can press it no matter what page
you're on, and
15:34
all the slices across all the pages will
appear.
15:37
Once you're sure that everything is
selected, press Export.
15:40
[SOUND] Choose your location to save them
onto the Mac.
15:47
I'll add them all into a new folder and
call it Assets.
15:53
[BLANK_AUDIO]
15:57
Once created, press Export again.
16:02
If I hide Sketch and view that folder, you
can see all my assets are there and
16:07
at different sizes, too.
16:12
And, that just about covers everything.
16:15
This treehouse course has now sadly,
reached its end.
16:17
But, a huge well done to all of you who
have come this far.
16:21
With two screens of our fictional
application completed, you can go on and
16:24
design the other views for some of the
other tabs.
16:29
Like, Friends, History and
16:31
Settings continuing with the styles you've
already used.
16:33
Maybe instead you might fancy creating a
website for
16:37
the fictional application using the
screens on the web page.
16:40
For more information about Sketch,
16:42
you can always visit the community page on
our website following the link below.
16:45
Here, you can find some great links
created by our users to sites containing
16:50
articles and tutorials, as well as
resources and plugins for you to download.
16:54
On this page, you can also sign up to our
newsletter
16:59
as well as links to follow us on Twitter
@sketchat and
17:02
to join our Sketch Facebook group for news
and support.
17:06
If you have any questions about anything
covered in this course or
17:10
about Sketch in general then get in touch
with me on the Treehouse forums.
17:13
Thanks for watching
17:18