Export Illustrator Layers and/or Artboards as PNGs and PDFs

Over the last year or so, I’ve cobbled together a couple Illustrator scripts that export multiple artboards in an Illustrator document as PNG files, and export multiple layers as PNG files. (See my previous blog posts here and here.) I’d been meaning to merge them into one script, but had never quite gotten around to it until Khoi tweeted that he was looking for a script that did just that, but to PDF format.

So, a couple train rides later, I’ve finally combined the two scripts into a single one with a couple more added features: you can choose to export as PDFs in addition to PNGs, and you can also export the product of artboards and layers.

To use the script, download MultiExporter.jsx and put in your Illustrator scripts folder (usually in Applications/Adobe Illustrator/Presets/Scripts/). Restart Illustrator, and run the script by going to “File > Scripts > MultiExporter”.

A few notes:

  • You can choose whether you want to export all the artboards in the document with the currently visible layers showing, or if you want to export files for each of the layers in a document on the currently active artboard, or if you want to export a combination of all the artboards multiplied by all the layers.
  • Files are named based on their layer name. It only exports layers where their name has been changed from the default “Layer 1″, “Layer 2″ or “Artboard 1″, “Artboard 2″, etc.
  • If you put a minus sign (-) in front of a layer name or artboard name, it will skip that layer or artboard. (Useful for when you no longer decide you like a particular mockup, but don’t want to delete it from the master Illustrator document.)
  • For layers only: If you put a plus sign (+) in front of a layer name, that layer will always be visible. Useful for if you want to have a layer that always appears in the background of each exported image.
  • It stores its settings in a nonvisible, nonprinting layer named “nyt_exporter_info”
  • It has an option for transparency, and lets you choose between PNG8, PNG24 and PDF.

You can try it out on the sample file artboard-layer-test.ai.

The sample file contains artwork for buttons on three artboards — “Red”, “Blue” and “-Green” — and has seven layers.

  • If you run the script and choose “Export Artboards (with currently visible layers)” it will generate two files: Red.png and Blue.png that include whatever layers are currently showing at the time you run the script. (It skips the “-Green” artboard because the artboard name begins with a minus sign.
  • If you chose “Export Layers (on currently selected artboard)” it will generate two files: Play.png and Pause.png. The “+Button” and “+Gradient” layers will appear in the background of both exported files, and it will skip the “-Pause 2″ and “Layer 5″ layers.
  • And if you choose the “Artboard + Layers”, it will do a combination of the two other options and generate four files: Red-Play.png, Red-Pause.png, Blue-Play.png and Blue-Pause.png.

Try it out, and leave a note in the comments if you have any problems or suggestions.

25 Responses to “Export Illustrator Layers and/or Artboards as PNGs and PDFs”

  1. Rick Moore says:

    Maybe I am missing something extra, but you can also do this without the script. Select “File –> Save As…” and choose PDF as the file type and you can choose which artboards you’d like to save as PDF. Alternatively, choosing “File–>Export” will let you export any combo or all artboards to JPG, PNG, or other various file formats.

  2. Michael says:

    This script would’ve helped me over the last month produce, quite literally hundreds of PNG files we were producing as template layers for a Flash-based UI.

    Can it be modified to work with CS4?

  3. mericson says:

    @Rick: I wanted to have a script where I had more control over exactly which set of artboards got exported — I’ll often have an Illustrator document with mockups of dozens of artboards for a particular project, including a number of variations of the same page. As I narrow in on final designs, I want to be able to flag which artboards shouldn’t be exported — which you can do by putting a “-” in front of the artboard name — so that I could export a complete set of just those PNGs to a folder that I can then put on one of our internal Web servers.

    If I use the built in export, each time I have to sort through which PNGs I want to share with the rest of the world and delete those files, plus all the blank artboard files. Plus, I wanted to have a little more control over the file naming — the Illustrator export does a combination of document name plus artboard name.

  4. Kyle Ridolfo says:

    Nicely done, this worked well and is easy to use.

  5. LGFN says:

    Wow! Just what i was looking for! Thanks sooo much, Matthew!

    May I add my two cents? Is it possible to add an option to have all layers exported as one PDF in separate pages, instead of separate PDFs?

    Whatever the case, this is a true time saver, I solute you!

  6. gn says:

    Thanks! I second LFGN’s request – but it’s pretty useful as it is…

  7. Rick Moore says:

    “I wanted to have a script where I had more control over exactly which set of artboards got exported”…

    I work the same way. You can do this in the export dialog by specifying which artboards you want exported. For example, If I had a doc with 25 artboards and I only wanted certain sets exported, I’d just put something like, “2-5,8,11-12,21-24″ (with no spaces between the commas) in the range input. It’ll skip all the others.

    You do have a good thing on the filename control, though. I usually just give the doc a concise name and name my artboards really well. Seems to work fine for my brain.

    Thanks for contributing to the Illustrator community! We need more designers to share how they make AI work for them rather than the other way around. :^)

  8. Rick says:

    I’m trying to find a script that will turn each artboard into a symbol (to bring into flash). Could I make a script request – unfortunately, this code/script side of things is like chinese to me.

    Thanks!

  9. Hey there,

    This script is awesome. However, I’ve used this and a few others like it to slice up images for a iOS app we’re building at my company, and every script includes these random artifacts in the slices– they’re small lines running through separate layers and I can’t for the life of me figure out what’s up.

    I would greatly, greatly appreciate it if you would shoot me an email and maybe talk through this issue with me. I’ve got a a few hundred complex Illustrator files to use this script on in the next year or so and if this issue could get fixed, that would save me so much time.

    gderossett@gmail.com
    garrettderossett.com
    archetypebrands.com

  10. ksimply says:

    hi to every one..the script is too good but i m looking something else

    when i export the Art board i need to keep the same name wht it is the name of the art board …but its not like that its saving as the file name plz help how to keep the name art board or the Linked images names to saving as Jpacks or PNGs somethings….plz

    example
    file name is Trackbacks
    Art Board name is Kh1 or Kh 2 or Kh3
    Linked Images Name is Pic 1 or Pic2 or Pic 3

    i wanted to save the same ART BOARD NAME or
    LINKED IMAGE name which is in the file.
    who is the expert please help….send me at Ksimply@gmail.com
    Thanks in advance…

  11. Martin Ley says:

    I wanted to export artboards as separate SVG files. I think I’ll need to do this in two steps (export to separate AI files, then export those to SVG).

    Just found the way to export as separate AI files:

    http://help.adobe.com/en_US/Illustrator/14.0/WS714a382cdf7d304e7e07d0100196cbc5f-655fa.html

    Martin

  12. Ageman20XX says:

    Hi there. I just wanted to say a really big THANK YOU for making this script. You just saved me staying at work late for several hours manually splitting PDFs into separate files. It’s programmers like you that make the world a better place. :)

    Regards,
    - Adrian

  13. Egon says:

    Oh, what a nice stuff!
    How many hours I spent with the stupid Export panel, with the dumb Artboard-set-back-radio-button. Eight years ago…

    Many thanks!

    Egon

  14. Marco says:

    Hi. I came across this script and think it’s great!

    I have one request.

    I am creating UI elements for an android device and have come across the need to output png’s at different resolutions for different screen sizes. All of my assets are on multiple artboards with unique names in one file. If I use the current “Export” and then select png, I am able to select the ppi and it will save my file as the desired ppi. The only downside is that the png’s aren’t unique names. If I could have the ability to export artboards with unique names at different ppi’s that would be killer.

    Thanks!

  15. TomoMajca says:

    Hi. First of all I want to say thank you! It is really great to be to find out that someone took his knowladge and time to help others in creating what is needed ;)

    I would just like to control the settings of the PDFs that are being created. How do I do that?

    Thanks

    T

  16. Arizona says:

    Hi, quick question. Should this script work for CS3? When I try and run the script I get:

    Error 21: undefined is not an object
    Line: 41
    -> this.num_artboards = docRef.artboards.length;

    I’m assuming this is because CS3 doesn’t support artboards? Is there anyway I could change the code to ignore art boards since I only want to export each layer to a PNG?

    Thanks!

  17. Sam says:

    Awsome, works very well!!!!!!

  18. Tess says:

    It would be fantastic if we had control over the actual settings for the different file types before exporting. But otherwise, really useful script!

  19. Tess says:

    Also, would be nice if it only exported the visible layer to each file. Instead of having all the layers in each file….

  20. Matt says:

    Really awesome script … just have one Q. What is the quality of the exported pdf and can it be changed? Is the exported pdf ready for print?

  21. val says:

    Hello
    I don’t understand what I am doing wrong, but no matter how I use this plugin it is always “exporting 0 of xx Layers” I am selecting my artwork, not selecting my artwork… and it I can not get it to export…

  22. Matthew says:

    May I just humbly add my heaps of praise and cascades of thanks. This saved me tons of manual slogging.

  23. tiziana says:

    this is awesome: thank you. I only wish you would be able to export multiple layers together based on visibility. Let’s say layer 4, 6 and 8 but not the rest on the same artboard. I was not able to do so. Not a big deal. I am very grateful for the script. I will make sure to pass it along. (-:

  24. Ged says:

    Very pleased to have found this. Worked very well. Many thanks.

  25. Kieran says:

    I appreciate this. It has made a very inefficient process extinct.

Trackbacks

Leave a Reply