Recursive Exporter for Adobe Illustrator
October 3rd, 2006
Whether working on my own or with a graphic designer, I believe in the holistic approach to design — you have to see how the design elements interact with each other.
Most if not all designers would agree that it is less effective to tweak a widget’s design on its own without the ability to easily gauge how the change will affect the overall look. However this is exactly what the ‘resource approach’ requires, as each design element has to be in a different file and it is only after an export, compile and run cycle that you see how it all fits together.
This is less than optimal, so you would typically follow a different flow.
To enable you to see how the design elements interact without requiring an export, you would arrange a design mockup within Photoshop with each design element as a layer (and/or sub-layers in later versions) and perform all the design work right there. This is what every graphic designer does and theoretically it is then just a matter of exporting the layers (and sublayers) to files.
Good so far, but usually this is where the trouble starts — as many times the export process involves a lot of tiny elements which all require export to different files. Usually this is done outside the build process by a 3rd party graphic artist who sends you the exported files by eMail and sometimes forgets to export one or more of the elements. Only when this is finally settled, does the result gets tested within the build… And… Guess what, there’s a problem.
*Sigh*
It was to make my life easier and to enable the graphics design to be a full (and honored!) member of the automated build cycle, that I automated this export process.
Ages ago, before Photoshop scripting I wrote a small utility called PSD Ripper that simply parsed the Photoshop 6 .PSD file and converted individual layers into individual PNG files, it also used the layer name as the basis for the PNG filename. Later versions of Photoshop made it much easier — to achieve the same result I merely had to make a tiny modification to a small script that came with Photoshop.
However, as great as Photoshop is, lately I have come to appreciate a vector-oriented approach to design and have been using Adobe Illustrator to do the design work. Therefore, I needed a script that would enable me to continue with the same workflow except with Illustrator instead of Photoshop and as none was available, I wrote one.
Thus I present “Recursive Exporter for Adobe Illustrator v1.0“, tested with Adobe Illustrator CS2 12.0.
The lay of it:
Recursive Exporter for Adobe Illustrator v1.0 (2006)
What it does?
Recursively export layers and groups from Adobe Illustrator to 24-bit PNG (with alpha/transparency) support. Does smart naming of files and the level of recursion can be limited.
Usage:
The usage is pretty simple, once you run the script it will ask you to which folder to output the results and how deep it should recurse beyond the top layers. It will then output each visible non-locked element as a 24-bit PNG anti-aliased, alpha-transparency enabled file. Then the script will recurse into the element (if it is a layer or group) and do the same for each of its components.
The name for the output file is constructed recursively, so if you have a ‘logo’ group within a ‘banner’ layer it will export the group as ‘banner-logo.png’. Note that Illustrator enforces a 31-character filename limit.
If you want to create a background matte layer that will be included in every element simply add a visible, locked layer. It will not be exported on its own but will be visible when the elements are exported and thus included in them.
Problems:
Please report any bugs or problems with this script to the comments section.
License:
The script is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License and is made available with absolutely no warranty or guarantee.
Technorati tags: photoshop, illustrator, Adobe, design, scripting, Javascript
November 8th, 2006 at 5:22 am
Hi Tal,
I love the funcionality of your script. I only wish it would export layers to AI files. I did open your script in the Adobe Extendscript Toolkit, but I am not much of a programmer so I wasn’t sure how I could change the format of PNG to AI.
Just wondering if there was a chance you would make an updated one for AI files.
Thanks so much,
Stan
November 8th, 2006 at 10:24 am
Hi Stan,
I’ll look into it, doesn’t look like it’ll be much of a problem, however, as I’m in the midst of a relocation, it’ll take a little while.
Cheers,
Tal
November 8th, 2006 at 8:44 pm
Tal,
Thanks for the quick reply. I was running into an error when running the script on certain AI files. Is there a limit to the amount of layers it will address?
Here is the error message:
Error 1280: The property was not initialized Line: 252
- > originalBounds = app.activeDocument.cropBox;
I am using Illustrator CS2 in Windows XP Pro SP2.
If you would like the source file (for debugging) let me know.
Thanks,
Stan
November 8th, 2006 at 10:45 pm
This might be a general bug with the script and not just with your version of it.
Try and set a crop region before you run the script — it seems from the error that there isn’t one defined and when the script tries to store the crop setting so it can restore it when it is finished, it fails.
November 10th, 2006 at 9:06 pm
I ended up needing to remake the file, it was in CMYK & needed to be in RGB. When I ran the script after the remake I did not have any problems.
Thanks
November 10th, 2006 at 9:51 pm
Interesting, I don’t remember having a CMYK problem! I’ll look into it. Thanks!
November 20th, 2006 at 10:58 pm
Hi Tal,
I don’t think there was anything wrong with a CMYK file, I think how the file was built had something to do with it…Cause I have exported from CMYK before with no problems.
Thanks
November 27th, 2006 at 11:34 pm
This is exactly what I was looking for!. I have one question though. Is it possible to somehow add the following functionality to the export script??
- Expoert a text document or some sort of file which records the [x,y] coordinates of each trimmed png element within a comp, as well as the dimentions of the PNG which is exported?
I am using this to export elements for a client which will be using a 3rd party proprietary DVD authoring program whic requires the manual imput of these bits of info. Short of manually selecting each layer and copying info into excel,[layer by layer], I have not found anything which can do this.
Image Ready has a batch function which sort of does this….
Thanks in advance!!
November 28th, 2006 at 6:42 pm
Hi Anthony,
Sounds like a reasonable feature request, I’ll add it to the queue! Check back here for updates about new features.
February 23rd, 2007 at 9:48 pm
this looks very cool. Unfortunately it doesn’t look like it will work with CS.
I’ll definitely use it once i upgrade.
Any other layer export scripts out there that work with CS? looking for a simple base layer to PNG or JPEG export.
February 24th, 2007 at 7:24 am
Hi Brian,
I do believe that CS comes with such a script, and you might want to try this one with CS as well as they are mostly compatible as far as scripting goes.
-Tal
March 4th, 2007 at 5:56 pm
I have been having the same problem as Stan with this scrip about the crop area. I have tried to change color modes but to no avail. I went into the Crop artwork setup on the printing dialog box….I changed to every setting with the same results.
I have CS2 on an Win XP SP2, where I work this script is vital because it already exists for photoshop, but there is nothing out the for illustrator. Do you have any other solutions or script or updates that may address this bug?
Jorge
March 4th, 2007 at 6:35 pm
thanks for the quick response. I don’t see any layer based scripts in the CS folder (I see scripts for export as flash, save docs as pdf, etc.)
I also can’t get CS to recognize any of the .jsx files that i have found. Could it be because I’m still using 10.3.9?
Not familiar with using scripts, I could be overlooking something basic.
thanks again
March 5th, 2007 at 1:12 am
Hi Jorge,
I’d like to be able to debug this problem, however at my current setup I do not have CS2, and it may take some time until I am able to Install it (as you might see on my blog, I recently relocated from another country).
I believe that Stan solved this problem by copying layers into a new RGB illustrator file (rather than simply changing the color mode) and then attempting the export.
Sorry I can’t help further,
Tal
March 5th, 2007 at 1:17 am
Brian,
Take this with a grain of salt as I can’t test it – I believe that in CS1 you have to change the extension to .js (rather than .jsx) and place it in the Adobe Illustrator CS\Presets\Scripts directory.
In Mac OS X, you might also need to change the file type manually to JavaScript (I’m not sure how you do it though)
-Tal
March 5th, 2007 at 6:09 pm
That was the ticket. Just had to change .jsx to .js
thanks Tal!
March 6th, 2007 at 1:07 am
Glad I could help Brian!
March 21st, 2008 at 4:30 am
Hi, this recursive exporter is insanely powerful for one of my workflows. quick question. I actually need to export my images at a higher res than for web (low..72dpi) . I’m very new to scripts. is there somethign I could tweak to allow higher res exports? also, if I wanted to export jpgs instead, how hard would that be? thanks a ton
-Mike
March 21st, 2008 at 11:37 am
Hi Mike,
For CS2, I couldn’t find where you’d set the export DPI from the script, so it might use the default DPI for the Illustrator file, so if you illustrate in 300dpi, it should export as such — but this is just a guess.
Exporting to JPG would require changing the script slightly, the lines:
var exportOptions = new ExportOptionsPNG24();
var type = ExportType.PNG24;
var fileSpec = new File(filename);
exportOptions.antiAliasing = true;
exportOptions.transparency = true;
exportOptions.saveAsHTML = false;
app.activeDocument.exportFile(fileSpec, type, exportOptions );
Should change to something like (this is untested):
var exportOptions = new ExportOptionsJPEG();
var type = ExportType.JPEG;
var fileSpec = new File(filename);
exportOptions.antiAliasing = true;
exportOptions.saveAsHTML = false;
app.activeDocument.exportFile(fileSpec, type, exportOptions );
YMMV and HTH,
Tal
September 19th, 2008 at 4:21 am
Great script, works as expected, thanks a lot!!!
September 21st, 2008 at 2:34 am
Hello Tal, I tweaked the script to get it worked with CS3 and works fine. My issue, do you have any idea how to do a select all n the items in the cropped area, and paste to new EPS file? I have it actually working, but if copys any grouped items, and sometimes my items are not that clean, and the script breaks down. Your part runs just fine, cropping each icon in my file.
Typically my file will have 50 icons, and I am trying to say, ok the icon thats in the cropped area, select that, and paste into new file. This is were my script is having issues. You ever try this?
September 23rd, 2008 at 11:03 am
Hey Michael, I’m sorry but I haven’t tried that before.
September 24th, 2008 at 6:35 am
Hello,
To export the layers to separate PDF files, just replace the lines 212 to 219 of the script with the following code:
var file = new File(targetFolder.toString() + "/" + name);
var saveOptions = new PDFSaveOptions();
saveOptions.compatibility = PDFCompatibility.ACROBAT5;
saveOptions.generateThumbnails = true;
saveOptions.preserveEditability = false;
app.activeDocument.saveAs(file, saveOptions);
PS: I don’t think that, even with scripting, it is possible to automatically export each Illustrator layer to a separate page of a single PDF file. You’ll have to group all the exported PDF files by hand into one PDF file using for instance Adobe Acrobat Pro.
[Save your file before! See below for an important message from Gabriel regarding this script. -Tal]
[Modified comment to use code formatting to avoid reverse double quote syntax errors. -Tal]
October 9th, 2008 at 8:32 pm
Just wanted to tell you to take care about the PDF export version of my previous message: it will discard your unsaved changes!
SO IMPERATIVELY SAVE YOUR FILE BEFORE EXPORTING AS PDF !!!
The solution would be to add a save instruction before the export, but I currently don’t have the time to do this…
October 15th, 2008 at 3:45 am
How can I modify this script to set the resolution property of the exported PNGs? (I’m on XP using CS3.)
I’m importing the PNGs into PowerPoint. PowerPoint uses the pixels per inch setting in the PNG file to determine the size of the image (in inches). I see how to change the dimensions of the PNGs themselves (thanks to this example ). But I can’t figure out how to set the ppi property of the exported PNGs.
October 15th, 2008 at 8:39 am
In CS2 the output DPI resolution of the outputted PNGs was forced to the DPI of the originating Photoshop document so setting it would affect the PNGs. Not sure if this is still the case in CS3.
November 4th, 2008 at 8:08 am
On running the script, it seems to be “missing” several pieces of the layers I’m trying to export to PNG. For example, several grouped compound items are only being exported halfway. One of the groups items will be exported, while the other is nowhere to be found. Changing the depth doesn’t seem to affect this problem. Any idea what’s going on here?
November 5th, 2008 at 8:48 am
Hey Caitlin,
Try and see what happens when you try to manually export just that layer which is giving you problems (by making all other layers invisible and using File | Export. Let me know, and I’ll see if I can figure out your problem.
Cheers,
Tal
November 5th, 2008 at 7:47 pm
Hello Caitlin,
Just to make sure you tried it correctly: the layers you want to be exported all need to have their visibility turned on.
November 6th, 2008 at 1:10 am
Hey Gabriel,
I definitely tried it correctly. The vast majority of the layers work properly, but this one little issue remains.
Tal,
Thanks for the quick response! I exported it manually, and it works just fine. Still having issues with your script, however. Here’s the issue in images for more clarity:
http://www.flickr.com/photos/mlle_cait/3004820989/
Thanks!
November 6th, 2008 at 10:09 am
Hey Caitlin,
From the image of the issue you sent I have an educated guess where the problem lies — function getAllItems(obj) in the script probably doesn’t return the right sub-items for a group containing compound items.
Because of current work obligations I don’t have access (again!) to Illustrator CS2/3 for the next couple of weeks. I’d be really glad for anyone monitoring the comment feed on this entry to try and assist.
Cheers,
Tal
November 6th, 2008 at 10:20 am
Thanks for your response! I’ve gotta sort out these niggling details by hand, but I appreciate you taking the time to look at it anyway.
April 24th, 2009 at 10:28 am
Tal -
I love this script! Can you help me make it export each layer to an illustrator eps?
I would also like to adjust it to export out a higher resoulution JPEG file.
Thanks for your help!
Matt
December 8th, 2009 at 7:49 am
Excited to see the pdf version above from Gabriel Walt.
Unfortunately, I’m getting this error when I try to use it.
“Error 8: Syntax Error
Line: 212
- > var file = new File(targetFolder.toString() + “/” + name);
Any Ideas?
This script has become an integral part of my daily workflow. Thanks Again.
December 8th, 2009 at 8:23 am
Hi Brian!
The syntax error is most likely caused by the inverse double-quotes, they should both be normal double-quotes:
Line 212 should be:
var file = new File(targetFolder.toString() + "/" + name);WordPress attempts to style the comments and a copy-and-paste from the comment would have retained the inverse quote.
Cheers & HTH,
Tal
December 8th, 2009 at 11:14 am
That was it. Thanks!
November 29th, 2010 at 1:30 am
Tal, Thanks for the script! Exactly what I was looking for.
I found that it tended to cut away about 1 pixel on the right and bottom, did some searching & found that it was a known illustrator error (at least in CS3). I solved this by editing the lines just after “if (obj.visibleBounds != null)” to:
bounds[0] = obj.visibleBounds[0] -1
bounds[1] = obj.visibleBounds[1] +1
bounds[2] = obj.visibleBounds[2] +1
bounds[3] = obj.visibleBounds[3] -1
return bounds;
Thanks again!
November 29th, 2010 at 7:47 am
Thanks John! Appreciated!