1
00:00:00,420 --> 00:00:04,050
Exporting assets is something that
typically comes at the end of the design

2
00:00:04,050 --> 00:00:08,570
process, as we want to save off images and
artwork created in Sketch so

3
00:00:08,570 --> 00:00:13,290
we can use them in the things we'll be
building, such as apps and websites.

4
00:00:13,290 --> 00:00:17,030
As our project is an iOS app, I'll show
you the things we need to export for

5
00:00:17,030 --> 00:00:19,320
our developer, as well as the methods and

6
00:00:19,320 --> 00:00:22,640
workflow that I personally use at this
stage of the process.

7
00:00:24,330 --> 00:00:28,220
If we take a look at our document, there's
a lot of things that look like they need

8
00:00:28,220 --> 00:00:30,240
to be exported to use in our app.

9
00:00:31,250 --> 00:00:36,455
There's all these icons in the timeline
and in the tap bar, the add icon on

10
00:00:36,455 --> 00:00:42,530
the top, colored cells, background images,
the map, and a user photo.

11
00:00:42,530 --> 00:00:45,000
But not all of these things are needed.

12
00:00:45,000 --> 00:00:50,130
In Sketch, you can draw slices over your
document, and make layers exportable, but

13
00:00:50,130 --> 00:00:53,930
I personally like to take advantage of
Sketch's pages feature, and

14
00:00:53,930 --> 00:00:57,210
have all my artwork I want to export on
there.

15
00:00:57,210 --> 00:01:00,660
In the app, we can see the current page
we're working on here, but

16
00:01:00,660 --> 00:01:02,680
we'll want to add another.

17
00:01:02,680 --> 00:01:03,653
So press the add icon.

18
00:01:03,653 --> 00:01:07,313
[BLANK_AUDIO]

19
00:01:07,313 --> 00:01:09,273
A new page will be created.

20
00:01:09,273 --> 00:01:11,813
So, let's rename it to Assets.

21
00:01:11,813 --> 00:01:16,853
[BLANK_AUDIO]

22
00:01:16,853 --> 00:01:20,823
Go back to the page you are working on as
we will need to send over some of these

23
00:01:20,823 --> 00:01:21,340
layers.

24
00:01:22,690 --> 00:01:24,060
On the today artboard,

25
00:01:24,060 --> 00:01:28,230
expand the check in group using the small
arrow to the left of the folder icon.

26
00:01:32,720 --> 00:01:35,968
Now click on the check in coffee cup icon
in the layer list.

27
00:01:35,968 --> 00:01:39,490
And hold Cmd to click on the colored
circle layer underneath, so

28
00:01:39,490 --> 00:01:40,540
both layers are selected.

29
00:01:41,660 --> 00:01:44,250
And press the create symbol button in the
toolbar.

30
00:01:47,540 --> 00:01:51,120
You'll be then prompted to give this
symbol a name in the inspector.

31
00:01:51,120 --> 00:01:52,610
Let's call it Check in.

32
00:01:58,000 --> 00:02:00,550
Creating a symbol will group these two
layers,

33
00:02:00,550 --> 00:02:03,700
which is denoted with a purple folder
icon.

34
00:02:03,700 --> 00:02:05,980
And Sketch will remember this group so

35
00:02:05,980 --> 00:02:10,260
you can insert this into the canvas
whenever you need to use it again.

36
00:02:10,260 --> 00:02:12,780
As opposed to simply duplicating this
group,

37
00:02:12,780 --> 00:02:16,620
if you duplicate any of its contents it
will also update the symbol

38
00:02:16,620 --> 00:02:20,140
throughout the canvas which is something
that is incredibly useful.

39
00:02:21,340 --> 00:02:24,480
Say I changed this coffee icon in my
mock-up.

40
00:02:24,480 --> 00:02:29,130
I always have to make sure that I updated
the same layer on the other pages too, so

41
00:02:29,130 --> 00:02:30,480
it matches.

42
00:02:30,480 --> 00:02:33,450
But if I had to use this same layer nine
times,

43
00:02:33,450 --> 00:02:36,850
I'd have to make this change to each of
the nine layers.

44
00:02:36,850 --> 00:02:41,290
By converting this group into a symbol, I
only have to change this once and

45
00:02:41,290 --> 00:02:43,640
not have to worry about updating the other
layers too.

46
00:02:44,730 --> 00:02:49,010
We will want to convert the other markers
in the timeline to symbols too.

47
00:02:49,010 --> 00:02:53,508
So let's select the two layers needed for
each, and create them one by one.

48
00:02:53,508 --> 00:03:03,508
[SOUND].

49
00:03:20,764 --> 00:03:24,668
When that's done, select the assets page
and click insert,

50
00:03:24,668 --> 00:03:28,884
then symbol, and select the check in
symbol from the fly out menu.

51
00:03:28,884 --> 00:03:35,344
[BLANK_AUDIO]

52
00:03:35,344 --> 00:03:40,960
The group will be inserted in the canvas
already selected for you to move around.

53
00:03:40,960 --> 00:03:44,060
Insert the other symbols the same way.

54
00:03:44,060 --> 00:03:46,785
Don't worry about their positioning, as
that doesn't really matter.

55
00:03:46,785 --> 00:03:56,785
[BLANK_AUDIO]

56
00:04:00,885 --> 00:04:03,156
Then select all these layers, and

57
00:04:03,156 --> 00:04:07,080
then press Make Exportable at the bottom
of the Inspector.

58
00:04:11,090 --> 00:04:13,270
We are designing this for the iPhone.

59
00:04:13,270 --> 00:04:17,340
So we'll need to make a couple of changes
in the panel that has appeared.

60
00:04:17,340 --> 00:04:24,600
In the size field select 2x from the drop
down and add end 2x into the suffix field.

61
00:04:25,710 --> 00:04:29,890
This will export the image at double the
size for the iPhone's retina display.

62
00:04:36,220 --> 00:04:41,010
With the iPhone 6 Plus, we'll also need to
add a 3x scale,

63
00:04:41,010 --> 00:04:44,780
to make images three times their original
size.

64
00:04:44,780 --> 00:04:48,490
Add it using the plus icon in this pane
and edit the size.

65
00:04:48,490 --> 00:04:55,245
[SOUND] Let's go back to the page with our
design on.

66
00:04:55,245 --> 00:04:57,905
There's a shortcut for changing pages too.

67
00:04:57,905 --> 00:05:03,410
And that's pressing the function or fn key
and the up down arrow buttons.

68
00:05:03,410 --> 00:05:07,150
While pressing page up and page down on
larger keyboards.

69
00:05:08,400 --> 00:05:13,030
From this page, we'll also want to copy
over the icons in the tab bar.

70
00:05:13,030 --> 00:05:15,980
We don't need to worry about exporting the
map image

71
00:05:15,980 --> 00:05:19,690
because the application will draw the map
in from code.

72
00:05:19,690 --> 00:05:22,930
So it won't be a static image like this
one.

73
00:05:22,930 --> 00:05:27,772
We also don't need to export the plus icon
in the title bar because this is something

74
00:05:27,772 --> 00:05:30,690
the developer can enable when they built
the app.

75
00:05:30,690 --> 00:05:36,911
[BLANK_AUDIO]

76
00:05:36,911 --> 00:05:39,582
Before we paste these layers in the assets
page,

77
00:05:39,582 --> 00:05:43,010
we'll need to draw a dark background here
first.

78
00:05:43,010 --> 00:05:47,070
Just so we can see the white icons against
the white background.

79
00:05:47,070 --> 00:05:49,155
A dark rectangle will do just fine.

80
00:05:49,155 --> 00:05:53,685
[SOUND] We'll want to make

81
00:05:53,685 --> 00:05:58,862
a duplicate of these icons,

82
00:05:58,862 --> 00:06:06,635
as we need to export two different states.

83
00:06:06,635 --> 00:06:12,816
The normal and the active ones, press
Cmd+D, and move them below the original.

84
00:06:12,816 --> 00:06:16,984
[SOUND] Now we'll need to update the
styles so

85
00:06:16,984 --> 00:06:21,602
the top row of icons are using the normal
style and

86
00:06:21,602 --> 00:06:24,656
the bottom the selected style.

87
00:06:24,656 --> 00:06:34,656
[SOUND].

88
00:06:43,576 --> 00:06:49,065
The settings icon isn't using the shared
style as it has a border and not a fill.

89
00:06:50,155 --> 00:06:52,387
So just update the opacity of this layer.

90
00:06:52,387 --> 00:06:56,968
[BLANK_AUDIO]

91
00:06:56,968 --> 00:07:02,040
We are going to want to draw some slices
on top of these layers so let's do that.

92
00:07:02,040 --> 00:07:06,750
First of all, let me just hide layers from
the list, showing only slices.

93
00:07:09,110 --> 00:07:13,270
As you can see, these four timeline icons
remain into their list

94
00:07:13,270 --> 00:07:15,915
as they have exportable properties.

95
00:07:15,915 --> 00:07:20,915
Let's zoom into our icon a little bit and
press the S key to enable our slice tool.

96
00:07:24,865 --> 00:07:31,047
I'll draw around the My Profile icon so
the size of my slice is 29 by 29 pixels.

97
00:07:31,047 --> 00:07:41,047
[BLANK_AUDIO]

98
00:07:45,627 --> 00:07:49,840
After you draw a slice, you're prompted to
name this layer.

99
00:07:49,840 --> 00:07:54,580
This matters, as it will end up being a
file's name, once you export.

100
00:07:54,580 --> 00:07:56,187
So let's call this one, Profile.

101
00:07:56,187 --> 00:08:02,207
[BLANK_AUDIO]

102
00:08:02,207 --> 00:08:06,787
Then, I'll draw around the rest of the
icons in the top row, naming them as I go.

103
00:08:06,787 --> 00:08:13,733
[SOUND] The calendar icon for

104
00:08:13,733 --> 00:08:18,867
today is a little bit

105
00:08:18,867 --> 00:08:26,727
smaller than the other icons.

106
00:08:26,727 --> 00:08:32,688
But still make this 29 by 29 giving it an
even spacing around the icon.

107
00:08:32,688 --> 00:08:42,229
[BLANK_AUDIO]

108
00:08:42,229 --> 00:08:46,031
Once you have five slices, select them all
in the Layer list and

109
00:08:46,031 --> 00:08:49,989
press the Layers icon next to the filter
field to show the layers.

110
00:08:49,989 --> 00:08:55,739
[BLANK_AUDIO]

111
00:08:55,739 --> 00:08:59,499
We'll want to then drag them into the
folder our icons are in.

112
00:08:59,499 --> 00:09:02,989
[BLANK_AUDIO]

113
00:09:02,989 --> 00:09:09,269
Over in the inspector change the scales of
these slices to 2x and 3x, like before.

114
00:09:09,269 --> 00:09:19,890
[BLANK_AUDIO]

115
00:09:19,890 --> 00:09:23,554
And then click the Export Group Contents
Only check box,

116
00:09:23,554 --> 00:09:28,450
to make sure we don't export our dark
background, just a transparent one.

117
00:09:30,090 --> 00:09:32,770
We will then want to duplicate these
slices, and

118
00:09:32,770 --> 00:09:36,480
have them sit over the selected tab bar
icons.

119
00:09:36,480 --> 00:09:39,270
So, do that by pressing Cmd+D.

120
00:09:39,270 --> 00:09:41,400
And drag the copies over to the other
folder.

121
00:09:41,400 --> 00:09:48,620
[BLANK_AUDIO]

122
00:09:48,620 --> 00:09:52,740
Let's rename our groups as well, normal
and selected.

123
00:09:52,740 --> 00:10:02,730
[BLANK_AUDIO]

124
00:10:02,730 --> 00:10:07,130
Open up the selected folder and select all
five slices.

125
00:10:07,130 --> 00:10:12,036
With the arrow keys, to ensure you don't
accidentally deselect any of the layers,

126
00:10:12,036 --> 00:10:15,130
match the dashed outlines of the slices.

127
00:10:15,130 --> 00:10:17,361
So they sit over the icons in the group.

128
00:10:17,361 --> 00:10:25,171
[BLANK_AUDIO]

129
00:10:25,171 --> 00:10:29,321
Last thing to do here will be to rename
the layers of these copies.

130
00:10:29,321 --> 00:10:33,851
Remove the two and add underscore active
to the end of their names.

131
00:10:33,851 --> 00:10:39,101
[BLANK_AUDIO]

132
00:10:39,101 --> 00:10:42,561
Double click the topmost slice and change
its name.

133
00:10:42,561 --> 00:10:47,562
Then select with your cursor the
underscore active part of the text and

134
00:10:47,562 --> 00:10:49,350
press Cmd+C to copy it.

135
00:10:53,280 --> 00:10:55,090
If you press the tab key.

136
00:10:55,090 --> 00:10:57,480
You can rename the layer underneath.

137
00:10:57,480 --> 00:11:02,543
So remove the space and the 2 and paste in
the underscore active suffix.

138
00:11:02,543 --> 00:11:06,223
[BLANK_AUDIO]

139
00:11:06,223 --> 00:11:09,883
Do this until all five of the slices in
this group are renamed.

140
00:11:09,883 --> 00:11:14,649
[NOISE] Going back to our main page I'm

141
00:11:14,649 --> 00:11:19,424
looking at the my profile artboard.

142
00:11:19,424 --> 00:11:21,243
We can see a few images in here.

143
00:11:21,243 --> 00:11:25,380
Our user's avatar and a background image.

144
00:11:25,380 --> 00:11:28,790
These, like the map, don't need to be
exported.

145
00:11:28,790 --> 00:11:30,040
But the colored cells do.

146
00:11:31,100 --> 00:11:32,680
Holding down Cmd.

147
00:11:32,680 --> 00:11:36,486
Click on the red bike ride cell on the
canvas and then,

148
00:11:36,486 --> 00:11:42,422
whilst still holding that key, also press
Shift so we can select multiple layers.

149
00:11:42,422 --> 00:11:47,062
[BLANK_AUDIO]

150
00:11:47,062 --> 00:11:51,980
Now we can click on the other three cells
so all four of them are selected.

151
00:11:51,980 --> 00:11:53,950
When done, copy these layers.

152
00:11:58,660 --> 00:12:01,690
Move over to our assets page, and paste
them in.

153
00:12:06,490 --> 00:12:08,942
Once pasted, just move them off to the
side here.

154
00:12:08,942 --> 00:12:15,942
[BLANK_AUDIO]

155
00:12:15,942 --> 00:12:19,270
We could just draw a bunch of slices
around each of these layers and

156
00:12:19,270 --> 00:12:21,210
we'd be done, right?

157
00:12:21,210 --> 00:12:22,990
Well not quite.

158
00:12:22,990 --> 00:12:25,100
These images are quite large.

159
00:12:25,100 --> 00:12:27,690
And we'll want to make them as small as
possible so

160
00:12:27,690 --> 00:12:31,340
their file size doesn't make the finished
app bigger than it needs to be.

161
00:12:32,510 --> 00:12:36,620
The iPhone screen is also available at
different widths,

162
00:12:36,620 --> 00:12:41,220
meaning that exporting at this fixed size
would mean this cell appears

163
00:12:41,220 --> 00:12:46,360
the right size on one iPhone but too long
and too short on the others.

164
00:12:46,360 --> 00:12:49,045
So with all of these cells selected.

165
00:12:49,045 --> 00:12:53,380
Resize to width using the middle handle on
the writer side.

166
00:12:53,380 --> 00:12:58,336
It will snap when it comes near a width of
29 pixels to match the size of

167
00:12:58,336 --> 00:13:00,697
our slices for our tab bar icons.

168
00:13:00,697 --> 00:13:05,257
[BLANK_AUDIO]

169
00:13:05,257 --> 00:13:09,288
With these layers still selected, I'll
just make them all a little

170
00:13:09,288 --> 00:13:12,975
narrower giving them a width of 22 pixels
in the inspector.

171
00:13:15,465 --> 00:13:20,385
With these images the developer can
stretch the width of these out so

172
00:13:20,385 --> 00:13:25,500
they can fit on any iPhone without
affecting our corner radius.

173
00:13:25,500 --> 00:13:26,850
Once they're in the app,

174
00:13:26,850 --> 00:13:30,510
you should never be able to tell that
these images are quite so narrow.

175
00:13:31,680 --> 00:13:35,220
With these layers selected, I'll make them
exportable and

176
00:13:35,220 --> 00:13:38,155
give them the same scales we've been
giving the other layers.

177
00:13:38,155 --> 00:13:42,452
[SOUND].

178
00:13:42,452 --> 00:13:45,282
[BLANK_AUDIO]

179
00:13:45,282 --> 00:13:50,623
Then, rename the layers just now, so we
don't have to edit the file name later.

180
00:13:50,623 --> 00:14:00,623
[BLANK_AUDIO]

181
00:14:15,925 --> 00:14:20,885
Now that's all the assets we need from our
two screens prepped for export.

182
00:14:20,885 --> 00:14:25,884
In the top right side of the toolbar is
the export button that will allow

183
00:14:25,884 --> 00:14:29,030
us to save all our assets outside of
Sketch.

184
00:14:32,130 --> 00:14:33,350
It can select or

185
00:14:33,350 --> 00:14:39,000
deselect all slices by toggling this
checkmark at the bottom left of the sheet.

186
00:14:39,000 --> 00:14:42,810
I'll click on the individual assets to
tell Sketch whether you want

187
00:14:42,810 --> 00:14:44,510
to export them or not.

188
00:14:46,030 --> 00:14:50,240
What's missing from this list of items to
export are our artboards

189
00:14:50,240 --> 00:14:54,590
on the other page so our developer can see
what the app will look like.

190
00:14:54,590 --> 00:14:56,790
So let's cancel this sheet.

191
00:14:56,790 --> 00:15:01,278
[NOISE] Back to the original page you can
click on

192
00:15:01,278 --> 00:15:07,275
the artboard's name in the layer list or
canvas to select it.

193
00:15:07,275 --> 00:15:10,735
You can then see an export option in the
inspector.

194
00:15:10,735 --> 00:15:15,770
So let's press the add button and the
change the size to 2X.

195
00:15:15,770 --> 00:15:19,656
Don't worry about adding the suffix to the
file name, or a 3x size,

196
00:15:19,656 --> 00:15:21,466
as it's not necessary to do so.

197
00:15:21,466 --> 00:15:30,926
[BLANK_AUDIO]

198
00:15:30,926 --> 00:15:34,886
We don't have to go back to the assets
page to click on export again.

199
00:15:34,886 --> 00:15:37,583
You can press it no matter what page
you're on, and

200
00:15:37,583 --> 00:15:40,820
all the slices across all the pages will
appear.

201
00:15:40,820 --> 00:15:47,020
Once you're sure that everything is
selected, press Export.

202
00:15:47,020 --> 00:15:53,256
[SOUND] Choose your location to save them
onto the Mac.

203
00:15:53,256 --> 00:15:57,016
I'll add them all into a new folder and
call it Assets.

204
00:15:57,016 --> 00:16:02,437
[BLANK_AUDIO]

205
00:16:02,437 --> 00:16:07,895
Once created, press Export again.

206
00:16:07,895 --> 00:16:12,522
If I hide Sketch and view that folder, you
can see all my assets are there and

207
00:16:12,522 --> 00:16:14,230
at different sizes, too.

208
00:16:15,810 --> 00:16:17,750
And, that just about covers everything.

209
00:16:17,750 --> 00:16:21,250
This treehouse course has now sadly,
reached its end.

210
00:16:21,250 --> 00:16:23,850
But, a huge well done to all of you who
have come this far.

211
00:16:24,960 --> 00:16:29,050
With two screens of our fictional
application completed, you can go on and

212
00:16:29,050 --> 00:16:31,880
design the other views for some of the
other tabs.

213
00:16:31,880 --> 00:16:33,400
Like, Friends, History and

214
00:16:33,400 --> 00:16:36,500
Settings continuing with the styles you've
already used.

215
00:16:37,950 --> 00:16:40,109
Maybe instead you might fancy creating a
website for

216
00:16:40,109 --> 00:16:42,670
the fictional application using the
screens on the web page.

217
00:16:42,670 --> 00:16:45,850
For more information about Sketch,

218
00:16:45,850 --> 00:16:50,580
you can always visit the community page on
our website following the link below.

219
00:16:50,580 --> 00:16:54,690
Here, you can find some great links
created by our users to sites containing

220
00:16:54,690 --> 00:16:58,630
articles and tutorials, as well as
resources and plugins for you to download.

221
00:16:59,900 --> 00:17:02,820
On this page, you can also sign up to our
newsletter

222
00:17:02,820 --> 00:17:06,290
as well as links to follow us on Twitter
@sketchat and

223
00:17:06,290 --> 00:17:09,430
to join our Sketch Facebook group for news
and support.

224
00:17:10,860 --> 00:17:13,690
If you have any questions about anything
covered in this course or

225
00:17:13,690 --> 00:17:18,620
about Sketch in general then get in touch
with me on the Treehouse forums.

226
00:17:18,620 --> 00:17:19,300
Thanks for watching