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