Acorn Acorn 4

Smart Layer Export



Smart layer export is an alternative to traditional slicing found in image editors.  Name your layers or layer groups like you would a normal image file, and then export them out of Acorn without any cumbersome tricks.  You can even tell Acorn to export your images every time you save.  


This tutorial will use the example of smart layer export being used on an image of 'submit' buttons.  You can download the sample image here: FancySubmitButtonSmartExport.acorn.  This is what the sample image looks like:

17b56433-7be4-42ac-8556-f25388a8f6bd.png

The sample image file has two buttons meant for a website.  They are different sizes so the smaller one can be shown on regular screens, and the larger one for Retina class devices (such as an iPhone 4, iPad 3, or a Retina MacBook Pro).


If you were to use the File ▸ Exportmenu item to save the image as a PNG, you would still have to slice up the image into two different parts- and you'd have to save the image again.  Wouldn't it be great if you could tell Acorn that you would like to save out a layer as a specific file name?  This is where smart layer export comes in handy.



Smart Layer Export Steps:


  • Simply name your layer or layer groups with the name of the file you would like to save it as.  You'll have to use one of the following file extensions on the file name: .png, .jpeg/jpg, .tiff/tif, or .gif.
  • Optionally create a layer at the bottom of each group and name it "@frame" or "@bounds".  The layer doesn't need to be visible.  This layer tells Acorn exactly which part of the image you want written out.  In this example the @frame is a shape layer with a single rectangle object defining the area of the group to be exported.  You could also use a bitmap layer, in which case the opaque areas of the bitmap layer would define the frame of the area to be exported.  If no @frame or @bounds layer is added, then Acorn will default to the size of the canvas for the export size.
  • Choose the File ▸ Smart Layer Export… menu item.
  • That's it!


To see how this is done, take a look at the layers list of the example image:



28cd8586-6894-42c9-9093-1bf0ea8d42ca.png



There are a total of 11 layers.  You'll notice that two layer groups are named as files.  When you use smart layer export, Acorn will use the layers which are part of the group (and only that group) to make a brand new image.  Since the "Background" layer is outside of both groups, it will not be used when exporting.  However, if you renamed "Background" to "Background.png", there would be 3 files exported out instead of 2.


Here's another image, showing the original button image, along with the two images created from the smart layer export:


3a9ecbb2-8459-43c0-a66d-146a93de1286-3a9ecbb2-8459-43c0-a66d-146a93de1286-3a9ecbb2-8459-43c0-a66d-146a93de1286-3a9ecbb2-8459-43c0-a66d-146a93de1286-Pasted Graphic.tiff