Working with Slices4:32 with Christopher Downer
Slices are special layers that allow us to export areas on the canvas to files.
After you've created your designs in Sketch, 0:01 you will want to export them, so you can hand them over to a developer, 0:07 add them to your website, or use them in another manner. 0:10 There's a couple of ways we can export assets in Sketch. 0:13 But first of all, we'll be looking at slices and the slice tool. 0:16 Here's a document that I made earlier, 0:21 containing some icons I would like to export. 0:23 To tell Sketch that I would like to export a specific area of a document, 0:26 I'll have to create a slice. 0:30 This can be found under Insert, so let's select it from the list. 0:33 With the tool selected, click and 0:39 drag the box over the area of canvas you want to export. 0:41 I'll hold down Shift to make sure it's perfectly square. 0:44 The slice will also appear in the layer list, and it's asking us to name it. 0:50 So I'll just call this coffee. 0:55 And hit Enter. 0:59 Whilst we still have this slice selected, 1:01 let me just make sure the size in the inspector is 32 by 32 pixels. 1:04 And I'll nudge its positioning with my arrow keys to make sure the cup is in 1:09 the center of the slice. 1:13 [BLANK_AUDIO] 1:15 There we go. 1:20 We can see the preview of our slice in the inspector. 1:21 And this is what the exported image will look like. 1:24 We can see the icon has an orange background. 1:27 But this isn't something we want the exported image to have. 1:30 So we would like it to have a transparent background instead. 1:34 The option we want to enable here is Export Group Content Only, 1:38 which we can see in the inspector. 1:43 However, it isn't enabled as the slice isn't inside a group. 1:46 So let's pick the layer off the list and 1:50 drag it inside the group, just above the coffee cup layer. 1:53 With slices it doesnt matter if they're sitting above or 1:58 below the layer you want to export. 2:01 Anything inside the slice area on the canvas will be ready to export. 2:04 So now the slice is inside the group, let's check the enabled option we want, 2:09 and we can see the background has disappeared showing the white canvas 2:14 color, which is also transparent. 2:17 Next, I'll export this heart-shaped icon using a slightly different method. 2:20 I'll press the S key, which is the shortcut for the Slice tool, 2:26 then hover over the icon. 2:29 [BLANK_AUDIO] 2:31 When the little knife cursor appears, click the shape, 2:34 and it'll automatically draw a slice around the shape for you. 2:37 So you don't have to measure it out. 2:40 As a bonus, the slice will be inserted inside the group the layer is in, so 2:43 it is ready for you to export the group's contents only. 2:48 I'll adjust the heights to make sure it's 32 pixels and 2:53 make sure the heart is in the middle of the slice. 2:59 If we unselect the slice, 3:03 you can see the slices on the canvas have a light gray dashed outline. 3:05 If you hover over them, they can be selected easily to edit, but if you 3:10 don't want these to appear on the canvas making your design look messy, you can 3:15 hide them by clicking in the blue slice icon at the bottom of the layer list. 3:19 This will hide all the slices from the layer list and 3:26 canvas showing you just your design. 3:29 The detail number next to the icon shows you how 3:32 many slices there are in your document. 3:34 If you press the icon that looks like two squares next to the slice icon. 3:38 This will hide the layers and only show the slices in the layer list, 3:43 making it easier to find them if your document is quite large or complex. 3:48 Now let's click it again to turn it back to how it was. 3:53 With slices created that you're happy with, it's time to export them. 3:58 You may remember the Export button on the far right of the tool bar. 4:02 Click that and 4:07 a sheet will appear that shows off all the slices as files sketch will export. 4:08 Check the boxes for what files you would like to export and then confirm. 4:15 [SOUND] You'll get a prompt asking you, why you would like to save your files, 4:19 and once you confirm your assets are exported onto your computer. 4:25 [BLANK_AUDIO] 4:29
You need to sign up for Treehouse in order to download course files.Sign up