Exporting assets is something that typically comes at the end of the design

process, as we want to save off images and artwork created in Sketch so

we can use them in the things we'll be building, such as apps and websites.

As our project is an iOS app, I'll show you the things we need to export for

our developer, as well as the methods and

workflow that I personally use at this stage of the process.

If we take a look at our document, there's a lot of things that look like they need

to be exported to use in our app.

There's all these icons in the timeline and in the tap bar, the add icon on

the top, colored cells, background images, the map, and a user photo.

But not all of these things are needed.

In Sketch, you can draw slices over your document, and make layers exportable, but

I personally like to take advantage of Sketch's pages feature, and

have all my artwork I want to export on there.

In the app, we can see the current page we're working on here, but

we'll want to add another.

So press the add icon.

[BLANK_AUDIO]

A new page will be created.

So, let's rename it to Assets.

[BLANK_AUDIO]

Go back to the page you are working on as we will need to send over some of these

layers.

On the today artboard,

expand the check in group using the small arrow to the left of the folder icon.

Now click on the check in coffee cup icon in the layer list.

And hold Cmd to click on the colored circle layer underneath, so

both layers are selected.

And press the create symbol button in the toolbar.

You'll be then prompted to give this symbol a name in the inspector.

Let's call it Check in.

Creating a symbol will group these two layers,

which is denoted with a purple folder icon.

And Sketch will remember this group so

you can insert this into the canvas whenever you need to use it again.

As opposed to simply duplicating this group,

if you duplicate any of its contents it will also update the symbol

throughout the canvas which is something that is incredibly useful.

Say I changed this coffee icon in my mock-up.

I always have to make sure that I updated the same layer on the other pages too, so

it matches.

But if I had to use this same layer nine times,

I'd have to make this change to each of the nine layers.

By converting this group into a symbol, I only have to change this once and

not have to worry about updating the other layers too.

We will want to convert the other markers in the timeline to symbols too.

So let's select the two layers needed for each, and create them one by one.

[SOUND].

When that's done, select the assets page and click insert,

then symbol, and select the check in symbol from the fly out menu.

[BLANK_AUDIO]

The group will be inserted in the canvas already selected for you to move around.

Insert the other symbols the same way.

Don't worry about their positioning, as that doesn't really matter.

[BLANK_AUDIO]

Then select all these layers, and

then press Make Exportable at the bottom of the Inspector.

We are designing this for the iPhone.

So we'll need to make a couple of changes in the panel that has appeared.

In the size field select 2x from the drop down and add end 2x into the suffix field.

This will export the image at double the size for the iPhone's retina display.

With the iPhone 6 Plus, we'll also need to add a 3x scale,

to make images three times their original size.

Add it using the plus icon in this pane and edit the size.

[SOUND] Let's go back to the page with our design on.

There's a shortcut for changing pages too.

And that's pressing the function or fn key and the up down arrow buttons.

While pressing page up and page down on larger keyboards.

From this page, we'll also want to copy over the icons in the tab bar.

We don't need to worry about exporting the map image

because the application will draw the map in from code.

So it won't be a static image like this one.

We also don't need to export the plus icon in the title bar because this is something

the developer can enable when they built the app.

[BLANK_AUDIO]

Before we paste these layers in the assets page,

we'll need to draw a dark background here first.

Just so we can see the white icons against the white background.

A dark rectangle will do just fine.

[SOUND] We'll want to make

a duplicate of these icons,

as we need to export two different states.

The normal and the active ones, press Cmd+D, and move them below the original.

[SOUND] Now we'll need to update the styles so

the top row of icons are using the normal style and

the bottom the selected style.

[SOUND].

The settings icon isn't using the shared style as it has a border and not a fill.

So just update the opacity of this layer.

[BLANK_AUDIO]

We are going to want to draw some slices on top of these layers so let's do that.

First of all, let me just hide layers from the list, showing only slices.

As you can see, these four timeline icons remain into their list

as they have exportable properties.

Let's zoom into our icon a little bit and press the S key to enable our slice tool.

I'll draw around the My Profile icon so the size of my slice is 29 by 29 pixels.

[BLANK_AUDIO]

After you draw a slice, you're prompted to name this layer.

This matters, as it will end up being a file's name, once you export.

So let's call this one, Profile.

[BLANK_AUDIO]

Then, I'll draw around the rest of the icons in the top row, naming them as I go.

[SOUND] The calendar icon for

today is a little bit

smaller than the other icons.

But still make this 29 by 29 giving it an even spacing around the icon.

[BLANK_AUDIO]

Once you have five slices, select them all in the Layer list and

press the Layers icon next to the filter field to show the layers.

[BLANK_AUDIO]

We'll want to then drag them into the folder our icons are in.

[BLANK_AUDIO]

Over in the inspector change the scales of these slices to 2x and 3x, like before.

[BLANK_AUDIO]

And then click the Export Group Contents Only check box,

to make sure we don't export our dark background, just a transparent one.

We will then want to duplicate these slices, and

have them sit over the selected tab bar icons.

So, do that by pressing Cmd+D.

And drag the copies over to the other folder.

[BLANK_AUDIO]

Let's rename our groups as well, normal and selected.

[BLANK_AUDIO]

Open up the selected folder and select all five slices.

With the arrow keys, to ensure you don't accidentally deselect any of the layers,

match the dashed outlines of the slices.

So they sit over the icons in the group.

[BLANK_AUDIO]

Last thing to do here will be to rename the layers of these copies.

Remove the two and add underscore active to the end of their names.

[BLANK_AUDIO]

Double click the topmost slice and change its name.

Then select with your cursor the underscore active part of the text and

press Cmd+C to copy it.

If you press the tab key.

You can rename the layer underneath.

So remove the space and the 2 and paste in the underscore active suffix.

[BLANK_AUDIO]

Do this until all five of the slices in this group are renamed.

[NOISE] Going back to our main page I'm

looking at the my profile artboard.

We can see a few images in here.

Our user's avatar and a background image.

These, like the map, don't need to be exported.

But the colored cells do.

Holding down Cmd.

Click on the red bike ride cell on the canvas and then,

whilst still holding that key, also press Shift so we can select multiple layers.

[BLANK_AUDIO]

Now we can click on the other three cells so all four of them are selected.

When done, copy these layers.

Move over to our assets page, and paste them in.

Once pasted, just move them off to the side here.

[BLANK_AUDIO]

We could just draw a bunch of slices around each of these layers and

we'd be done, right?

Well not quite.

These images are quite large.

And we'll want to make them as small as possible so

their file size doesn't make the finished app bigger than it needs to be.

The iPhone screen is also available at different widths,

meaning that exporting at this fixed size would mean this cell appears

the right size on one iPhone but too long and too short on the others.

So with all of these cells selected.

Resize to width using the middle handle on the writer side.

It will snap when it comes near a width of 29 pixels to match the size of

our slices for our tab bar icons.

[BLANK_AUDIO]

With these layers still selected, I'll just make them all a little

narrower giving them a width of 22 pixels in the inspector.

With these images the developer can stretch the width of these out so

they can fit on any iPhone without affecting our corner radius.

Once they're in the app,

you should never be able to tell that these images are quite so narrow.

With these layers selected, I'll make them exportable and

give them the same scales we've been giving the other layers.

[SOUND].

[BLANK_AUDIO]

Then, rename the layers just now, so we don't have to edit the file name later.

[BLANK_AUDIO]

Now that's all the assets we need from our two screens prepped for export.

In the top right side of the toolbar is the export button that will allow

us to save all our assets outside of Sketch.

It can select or

deselect all slices by toggling this checkmark at the bottom left of the sheet.

I'll click on the individual assets to tell Sketch whether you want

to export them or not.

What's missing from this list of items to export are our artboards

on the other page so our developer can see what the app will look like.

So let's cancel this sheet.

[NOISE] Back to the original page you can click on

the artboard's name in the layer list or canvas to select it.

You can then see an export option in the inspector.

So let's press the add button and the change the size to 2X.

Don't worry about adding the suffix to the file name, or a 3x size,

as it's not necessary to do so.

[BLANK_AUDIO]

We don't have to go back to the assets page to click on export again.

You can press it no matter what page you're on, and

all the slices across all the pages will appear.

Once you're sure that everything is selected, press Export.

[SOUND] Choose your location to save them onto the Mac.

I'll add them all into a new folder and call it Assets.

[BLANK_AUDIO]

Once created, press Export again.

If I hide Sketch and view that folder, you can see all my assets are there and

at different sizes, too.

And, that just about covers everything.

This treehouse course has now sadly, reached its end.

But, a huge well done to all of you who have come this far.

With two screens of our fictional application completed, you can go on and

design the other views for some of the other tabs.

Like, Friends, History and

Settings continuing with the styles you've already used.

Maybe instead you might fancy creating a website for

the fictional application using the screens on the web page.

For more information about Sketch,

you can always visit the community page on our website following the link below.

Here, you can find some great links created by our users to sites containing

articles and tutorials, as well as resources and plugins for you to download.

On this page, you can also sign up to our newsletter

as well as links to follow us on Twitter @sketchat and

to join our Sketch Facebook group for news and support.

If you have any questions about anything covered in this course or

about Sketch in general then get in touch with me on the Treehouse forums.

Thanks for watching