Creating Exportable Layers4:40 with Christopher Downer
Learn the best way to make your layers ready for export.
Find more features at the Bohemian Coding Features Page
Size relates to the scale of the slice, makes for designing for multi-resolution displays easier
Suffix field allows you to add a unique identifier to each size you export
Format relates to the filetype you can export images as
Now we've covered the Slice tool and 0:00 understand how it works, it's time to take a look at exportable layers. 0:01 Let's select the cloud layer on the canvas. 0:06 If we look at the bottom of the inspector, 0:10 we can see a small plus button with the text Make Exportable. 0:13 If I click that, the layer can now be saved off, and this is signified 0:17 with a little slice icon next to the layer preview in the layer list. 0:21 You can press the Export icon in the toolbar and 0:26 export this layer, along with the slices we drew before. 0:29 This image will have a transparent background, and 0:33 will trim to the layer's height and width, which is super convenient. 0:35 And we don't have to worry about creating a slice, and 0:39 resizing it, if you later resize the shape. 0:42 As we can see in the inspector, the height and width of the selected layer, and 0:45 therefore, exported image, is 32 pixels wide, and 22 pixels high. 0:49 So, what should I do if I want this to be 32 pixels high like the rest of my slices? 0:55 Well, it's possible to convert an exportable layer to the slice by pressing 1:02 the grey slice icon in the bottom part of the inspector next to the plus. 1:06 The slice we've just created is now the selected layer, so we can go ahead and 1:14 change its size, 1:18 position, and remove that background that we don't want. 1:22 You'll perhaps have noticed the export options in both the exportable layers and 1:32 slice layers that come under the guise of size, suffix and format. 1:37 Format relates to the file type you can export images as. 1:43 The default is PNG, 1:47 which allows you to have high quality images with transparency. 1:49 JPEG files, 1:53 which are most commonly associated with photographs can't store transparency. 1:54 So a white background will be applied. 1:59 These are the bitmap file types, meaning they can't scale up or 2:02 down very well after they've been exported without looking pixely or blurry. 2:05 PDF, EVS, and SVG are quite similar to each other, and are vector file types. 2:11 Meaning they can be scaled infinitely, and 2:18 can even be edited in applications like Sketch. 2:21 Size relates to the scale of a slice, and makes designing for 2:25 multi-resolution displays easier. 2:29 If we select an option from the drop-down like 2x, 2:33 you can see the preview of the slice become sharper, 2:35 as this will scale with the slice to 200% of its size. 2:43 If I typed in 1.5x, 2:48 this upscale tool to 150%, and you can even enter a value, 2:52 like 128w to export the image at 128 pixels wide. 2:56 The suffix field allows you to add a unique identifier to each size 3:03 you export at the end of the layers name as you can export multiple scales at once. 3:08 Press the Add button to add more sizes and tweak them to however you like. 3:14 [SOUND] A use case for 3:19 this would be exporting 3:25 assets for an iOS app. 3:32 You might want to 1x export at its original size along with a 2x 3:39 one with at 2x as its suffix for res in the displays. 3:44 And then 3x with a, at 3x suffix for the I-frame 6 plus. 3:48 I'll quickly apply slices to the rest of these icons. 3:54 This plane on the right is 32 by 32 pixels. 3:58 So, I'll make this an exportable layer. 4:01 I'll then do the same for the hamburger. 4:06 Before converting, resizing and checking export group contents only. 4:08 [SOUND] It exported into toolbar and 4:15 I can now see all five of my icons I want to 4:19 export here in the list with @2x and 4:24 @3x under the Cloud icon's name, 4:28 showing that three sizes of this icon will be exported. 4:32
You need to sign up for Treehouse in order to download course files.Sign up