Update: I’ve got a much improved version of the script that also exports layers and adds a PDFs option. Get the improved version.

We just upgraded to Illustrator CS5 at work — we’d been stuck on CS3 — and one of the great new features is its ability to have multiple artboards in a single document. For the first time, this lets me mock up multiple pages of a Web site in a single Illustrator document in a sensible way.

For example, I’ve spent the last couple weeks working on designs of all our election result pages for the general election in November, which has something on the order of a dozen or two different types of pages to design. In the past, I would have resorted to separate Illustrator docs for each type of page, or kept different page mockups on different layers in a single document, which quickly devolves into layer management madness.

But with CS5, I’ve now got a gigantic Illustrator document with 60 artboards, each sized to the width and height of one of our web pages, so I can easily keep a bunch of mockups next to each other. And since you can name each artboard, so it’s easy to keep track of what’s where in the document.

But the one hitch is that Illustrator doesn’t come with a great way to export the artboards — Save for Web and Devices only exports a single artboard at a time, while Exporting as PNG doesn’t give you a lot of options — it appends the artboard name or number to the file name when you save, and you can’t easily select which particular artboards you want to export. And if you’ve created a file with a bunch of blank artboards, but only have artwork on a few, you don’t want to export all the artboards all the time.

So, I cobbled together a little Javascript script that loops through all the artboards in the document and exports only ones where you’ve changed named the artboard — it’ll skip anything with default names like “Artboard 1”, “Artboard 2” and so on. And it also will skip any artboards whose names begin with dashes — so once you’ve decided that you don’t like a particular version of design, just put a dash in front of its artboard name and it won’t get exported.

To use the script, download Export-Named-Artboards-as-PNG.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 > Export Named Artboards as PNG”.

Choose the directory that you want to export files to and if you want to add a prefix to the file names. Click export, and watch it run. Since most mockups here get uploaded to an internal Web server for others to look at, the script makes the filename a bit more web friendly, downcasing and replacing spaces with dashes: “Senate Map 1” will be exported as “senate-map-1.png”

The script also stories its settings in a text block on a nonprinting, nonvisible layer of the document named “nyt_png_info”, so don’t delete that from the document if you want it to remember what directory you last saved your files in.