Export Illustrator Layers and/or Artboards as PNGs and PDFs

194 Comments

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.

194 comments on “Export Illustrator Layers and/or Artboards as PNGs and PDFs”

  2. Dim

    This script is fantastic!

    I have a request to make it magical : Could it be possible to add an option to choose to crop the layers before export?

    That would allow to create a complete interface for a website, game, etc and to export all pieces at the needed size. A bit like the slicing, but in much more convenient.

    Thanks!

  3. Randy Van Nostrand

    I am using Adobe Illustrator CS6. I followed your directions as to how to place the script in the scripts folder but I can’t get it to initialize. Does it work with CS6? I have a map done in Illustrator that has boundaries around borders. Each area is a filled shape. I want to make a PPT presentation that uses each area as a button linked to other pages with information on them. Can you help me make this happen?

  4. Roey

    I can’t seem to get the script to work.
    I get “Will export 0 of 3 artboards”.

    I am using Illustrator CS6 on a Win7 OS.

    Does anyone know what could be the problem?

  5. mericson Post author

    Hi Roey,

    Have you named your artboards something other than the default Artboard 1, Artboard 2, Artboard 3? The script skips artboards that haven’t been renamed?

  7. Jen

    This just saved me some serious and much needed time—I’m exporting layers for a brand presentation tomorrow. Thanks for the useful script!

  8. Nikolaj

    Great and useful script!

    However I’m missing a command that includes PDF-profiles, such as adding bleeds, custom compression etc..

    Are there any way around this problem?

  10. Carson

    Hello!

    I’m so excited to use this script but I’m not sure why it’s not working for me. My layers are visible and unlocked, and my artboard has been renamed. When I go to run the script it says “Will export 2 of 244 layers on artboard “Buoy””. Cant figure out why if won’t export all of my layers.

    Thoughts?

    Thanks!

  11. Lisa

    Matthew – you are superman! This saved my sanity on my project. May jillions of good things come to you! Thank you!!!!!!!!!

  13. Sascha

    Hi.

    It would be useful, if there was an option to decide wether to use “Art optimized”, “Type optimized” or “None” for antialiasing. It´s always exported to “Art optimized”, so fonts look really bad.

    Sascha

  14. mericson Post author

    @Carson: Have your layers been renamed, too? It skips layers that still have the “Layer 1”, “Layer 2”, etc names.

  15. mericson Post author

    @Sascha: That would be useful. Unfortunately, Adobe didn’t make that option accessible to scripts — you can only specify whether you want antialiasing or not, but not what method — so there’s no way for a script to change it, as far as I know.

  18. Philipp

    Hey Matthew,

    Thanks a lot for tat script.
    It saved me quite a headache and hours of absolute boring tasks.
    You made my day!

    With kind regards from Austria,

    Philipp

  19. Tim

    You mention script can turn antialiasing on or off what is it set to currently? If it is off what would have to be added to turn it on? Thanks for the great script.

  22. mericson Post author

    @Sean: Illustrator’s Save for Web function changes spaces into dashes when you save. I’ll keep that request in mind for a future version — it might be possible to work around.

  23. Philip Trumble

    Thank you very much, that is perfect. Out of interest, which PDF preset (PDF settings) is used when using the PDF option? Thanks.

  24. PMacMaster

    Sean,

    I get an error ” Error 8: Syntax error.
    Line: 1
    -> bplist00—_webMainResource’

    Can I just delete line 1? – I get the error when I try to access the scrip within illustrator.
    Thank you.

  25. James

    It’d be great to be able to use the artboard # in the name. It’s helpful for sequences. UI Flows and Storyboards.

  27. Michael

    i am getting this error when running script.

    Error 8: Syntax error.
    Line:1
    -> bplist00-_WebMainResource’

  29. Brandon

    This probably worked at one time but for those interested: this method no longer works in Adobe Illustrator CS6 (PC).

  30. mericson Post author

    Hi @Brandon,

    It works for me in Illustrator CS6 on a Mac … what error are you getting? And have you tried restarting Illustrator?

    -Matt

  31. Michael

    Mericson —

    i am getting this error when running script.

    Error 8: Syntax error.
    Line:1
    -> bplist00-_WebMainResource’

    I don’t see a reply for a possible fix for this. Anything for me?

  32. Carrie

    Thank you so much for your script! I got it to work in CS6 but, I was wondering if there was a way to export the PNG as 300ppi instead of 72? I need the PNGs for print.

    Thank you!

  33. Jaqui

    When I click on your link it takes me to a text filled web page? Any alternative way to download your jsx file?

  35. mericson Post author

    Unfortunately, you can’t set the DPI of the exported PNG file from an Illustrator script, so you’re stuck with 72 dpi. However, if you change “Scaling” from 100% to 417%, it will export it with the correct number of pixels for 300 dpi. Then you could use a batch process in Photoshop to change the DPI from 72 to 300.

  36. Marie Goodart

    I have the same question as Philip Trumble “… which PDF preset (PDF settings) is used when using the PDF option? Thanks”

    I’m looking to specify dpi resolutions in the pdf settings. Would be great if I could specify PNG resolutions. Is there a place in the script I can make this modification for resolution? I have no trouble modifying this beautifully written and well commented code.

    Second question: What are your legal rights to images created with this script? It’s copyrighted 🙂 but I don’t know what the legal implications of using a script, for personal or commercial use.

  37. reb

    Great Script, Bro!!!! Works exactly as described with several export options. Thanks-a-Million for sharing!

  38. Geoff Beatty

    Wonderful script. I nearly wept when I saw how well it worked. Like a previous commenter, I did want the layers trimmed, but what I did was bring all the png’s into Photoshop and set an action to trim and save. Still, much faster than the alternative.

  39. Pingback: Tom Byrne » Export Illustrator Layers to SVG files

  41. Will B

    Matthew – awesome script for exporting artboards to pdfs. I then use an online merge tool to merge certain pages together into one doc. One thing that is still a problem for me is that there is no option to turn off editable layers so that the pdf file size can be reduced right down. Am I missing something?

  43. Leigh

    This is almost what I need. I have an AI file that has 24 layers, each layer is a part of an animation. Some layers are a stand alone frame of the animation. Some layers will be turned off and on within the animation over a stand alone frame. The layers are labeled 1, 1, 2, 3, 1, 2, 3, 1, 2, 3, 4, 5, etc. But it only exports 11 of the layers, randomly it seems. I’d like to have each layer exported to I can import them to Photoshop and turn each off and on to create the animation. Do I need to label each layer differently? Does this question make sense? I’ve so frustrated that CS6 got rid of the saving layers option in Save for Web that CS5 had. I recently upgraded and now wish I never did. I can’t find anything that works the same way.

  44. Joey

    How can I boost the resolution of the JPG exports, I exported a 256 px icon and the JPG came out really grainy. Thank you for the script, it is very helpful.

  45. Holly

    Hi Matthew,
    Just wanted to drop you a line to say thank you for making this script.
    I’ve just been making a library of icons and I was able to have one artboard the exact size I wanted, one base artwork layer (with + sign) and then all my separate layers with the icon artwork and export all the files showing the base layer with each individual icon on top. Truly magical!

  46. David Levy

    I have been searching all over for a script that exports each layer of a illustrator file WITH a base layer always active. EG when making social icons button having the button itself be at the bottom while all 300+ social logo layers are output with an illustrator script while the bottom layer is kept in tact in all other layers that are output by the script. Is there any chance that you could add this or give advice on how to do this? Thank you!

  48. Ade

    This can’t be true!
    I spent hours today exporting two .ai Files with about 200 artboards to
    seperate pdfs – searching, trying, crying…at the end I exported each artboard to a
    seperate .ai file and converted it manually to a pdf flle 😀
    (each other way resulted in pdfs which just showed one artboard however
    had each artboard in it -> huge file size and difficult to handle)

    This script is great and next time instead of hours it will take me only
    a few minutes – thanks to you 🙂

    Thank you!

  49. Number Six

    This script is really nice.
    It’s exactly what I was looking for.

    But I’m geting huge pdfs (16mo) despite the fact that my layers are only vectors.
    When I open them in Illustrator and save them again with “smallest file size” pdf settings (perfect for vectors only images), the final sizes are exactly what I expected in the first place (15 to 25ko).

    Am I the only one whith this issue ?
    Is there another way arround it ?

Leave a Reply

Your email address will not be published. Required fields are marked *