search

davidderaedt / Illustrator-Layer-Exporter

A panel for Illustrator to easily export all layers
287 stars 39 forks source link

readme

Layer Exporter for Adobe Illustrator

image

Layer Exporter lets you automatically export Illustrator layers to SVG, JPG or PNG files, along with coordinates data and HTML CSS files, with a single click. Think of it as a modest equivalent of Photoshop Asset Generator for Illustrator, with full HTML & CSS export.

It's a free & open source extension panel for Adobe Illustrator CC, made with the creative cloud extensiblity helpers.

Install

CC extensions can either be installed via the built-in Adobe Exchange Panel (preferred method), or via a ZXP package executed in Extension Manager CC (which you must install first via the Creative Cloud Desktop application).

Open Illustrator and choose Window > extensions > Adobe Echange to open the exchange panel, look for "Layer exporter" and you should find it directly.

image

Alternatively, you can download and install the current production ZXP (stable) or the development ZXP (use with caution) for use with Extension Manager CC from the bin folder.

Exporting Images

This panel uses naming conventions to create the JPG, PNG or SVG files from your artwork. For instance, to export the content of your "Logo" layer, simply rename it to "Logo.png", and your Logo.png file will be created in your destination folder.

image

Once you click the Export button, it will parse both layers and individual art items contained in those layers. All layers or items suffixed with a supported image file format will be created, unless it was made invisible. However, please note that only top level layers will be used, as sub-layers will be ignored.

The Options panel will let you specify globally image format options such as JPG quality, or whether or not SVG should outline text. Contrary to Photoshop Generator, you cannot set those options for individual image files.

image

Exporting Layers

If you have a big file with many layers, renaming all those layers can be somewhat tedious. To help you with that renaming step, you can use the Tools panel to automatically rename all your layers so that they get exported to the appropriate file format.

Choosing None will simply remove all suffixes from layer names

image

Exporting art items

All art items (such as paths, texts and groups) inside layers can also be suffixed to be exported to image files, even if its parent layer has itself been renamed to be exported as an image file.

You can automatically set the destination format for the items you selected by clicking the appropriate button in the Tools panel.

You can also use the Move selected items options to automatically create top level layers from those items. Choose One Layer to gather all selected items to the same new Layer. Alternatively, choose Multiple Layers to create as many layers as the selected items, each being located in its own layer.

Exporting composition data

If you want to use exported image files somewhere (say, in a webpage or a native app), chances are you're going to need to get the coordinates of those elements in order to recreate the original composition.

There several options to help you with that.

Exporting to HTML (static)

If you want to export your whole composition to HTML, choose the corresponding option to generate an HTML file in the parent folder of destination folder for the images.

You can choose to have CSS styles declared inside a <style> tag in the <head> of this HTML page, or to create a separate CSS file.

Layer Exporter will then use HTML tags to describe the composition, starting with a top level div named after the Illustrator file. Inside this div, all exported Layers will be converted to img tags.

Any layer that is not suffixed with a supported image file will be considered as a child div of the main div. All art items inside this layer suffixed with a supported image file format will be considered as a child img tag of the parent div.

image

Here's what a typical HTML output could look like (go to the samples folder for more details).

image

Exporting to HTML (dynamic)

Alternatively, if you don't want to statically generate HTML and CSS code, you can choose to interpret the JSON file at runtime using javascript. You'll find sample code to help you do that in the utils folder of this repo, and a sample lanscape project in the samples folder.

Experimental HTML features

We're working on some additional features to help with HTML export. Since those features are experimental, they are likely to change in the future. Also, things will break.

For a full example of all those features, you can jump to the samples folder.

Edge Animate project

Layer Exporter has (limited) support for Adobe's Edge Animate Projects.

Since Edge Animate supports HTML as input, you could simply open it inside the tool, but you'd then be missing a few capabilities, such as the ability to group or create symbol.

The Import to Edge Animate option lets you choose an existing .an file and will overwrite it with the corresponding data. A typical workflow would then consist of first creating a empty .an project, importing the illustrator composition via the Import to Edge Animate option, and then updating artwork as needed from Illustrator.

You'll find an empty Edge Animate project in the utils folder.

Exporting to other contexts

Alternatively, you can choose to create a dump of the raw data of the composition so that you, a developer, or a 3rd party tool can interpret the data . Choose the Create JSON data file to create a JSON representation of the composition inside the image destination folder.

image

Release notes

v 2.1.0 - May 28th 2014

V 2.0.1 - April 7th 2014

WARNING: this release has major functional differences with previous builds. You may have to reorganize your art to conform to the new model.

V 1.5.0 - March 11th 2014

V 1.0 - June 2013

Known issues

FAQ

Why do I need Illustrator CC / 17.0+?

Sorry, CC apps have a new engine for extensions which lets you create panels using nothing but web standards. This is what this panel uses. You can still port it by yourself, of course.

How can I convert my rectangles to simple divs?

Because it would be stupid to use image files for simple rectangles when you could use div, you can simply use a non-suffixed layer with a rectangle inside. Using the (experimental) background element feature, this layer will be converted to a div and the underlying rectangle will be use to set the CSS for the size and the color.

Can I inline SVG code in HTML rather than use img?

Unfortunately, no. Illustrator's API does not expose the generated SVG code, it only allows to automate file export.

Hey, the exported SVG code sucks!

While it does the job, the Illustrator SVG export engine is not so great in the first place. I highly recommend using SVGO for optimization.

Why doesn't it work with my appearances?

Sorry, appearances are not supported at this stage.

Does it support symbols?

Yes and no. Symbols instances will all be treated as separated image files.

What about sublayers?

Not supported, amigos.

About the source code

This repository is the source for the panel. The underlying logic, written in ExtendScript, is located in the CSscript repository.

Special thanks to