Advertisement


Export an image from Illustrator with multiple sizes at once?


Question

In addition to this question - How can I export an image from Illustrator image at multiple sizes?

Is there a way I can do this at once? I wish to define few different sizes and export couple of images with one click of a button. Can I even create image size presets? As far as I can see there is only such option for output file format but i don't need to touch it...

More precisely my case is:

I have document with bunch of icons on different layers. I want to export each icon with those few different sizes to use it in my android app. Right now, each time I want to export an icon i have to

  1. Open "Save for web..."
  2. Select "Image Size" tab
  3. Type size.
  4. Hit "Apply".
  5. Click "Save".
  6. Change file name.
  7. Hit "Save".
  8. Jump to step 3 (times number of sizes).
  9. "Done".
  10. Choose next layer.
  11. Jump to step 1.

Is there any good solution to avoid this nightmare?

1
4
4/13/2017 12:46:00 PM

Sorry I forgot I posted here. batch-export is better but i still can't record all actions i wish. Involving Photoshop here is another overkill.

I found the best way to export it with this simple script:

/**
* Remixer: @herkulano (http://www.herkulano.com)
* Thanks to: Niels Bosma ([email protected])
*/

var folder = Folder.selectDialog();
var document = app.activeDocument;

if (document && folder) {
$.writeln(document.width);
saveToRes (16, "ldpi");
saveToRes(32, "mdpi");
saveToRes(64, "hdpi");
saveToRes(128, "xhdpi");
//saveToRes(300, "xxhdpi");
//saveToRes(400, "xxxhdpi");
}

function saveToRes(scaleTo, resFolderName) {


    scaleTo = scaleTo/document.width*100.0;
     $.writeln(scaleTo);
     $.writeln((scaleTo*document.width)/100.0);
    //return;

var i, layer, 
    file, options,
    resFolder;

resFolder = new Folder(folder.fsName + "/drawable-" + resFolderName);

if (!resFolder.exists) {
    resFolder.create();
}

for (i = document.layers.length - 1; i >= 0; i--) {
    layer = document.layers[i];
    if (!layer.locked && layer.name.indexOf("!") === -1) {
        hideAllLayers();
        layer.visible = true;

        file = new File(resFolder.fsName+ "/" + layer.name + ".png");
        $.writeln(resFolder.fsName);
        $.writeln(file.fsName);
        $.writeln(layer.name);

        options = new ExportOptionsPNG24();
        options.antiAliasing = true;
        options.transparency = true;
        options.artBoardClipping = true;
        options.verticalScale = scaleTo;
        options.horizontalScale = scaleTo;

        document.exportFile(file, ExportType.PNG24, options);
    }
}
}

function hideAllLayers() {
var i, layer;

for (i = document.layers.length - 1; i >= 0; i--) {
    layer = document.layers[i];
    if (!layer.locked && layer.name.indexOf("!") === -1) {
        layer.visible = false;
    }
}
}

I've found it somewhere and just modified sizes to define them in pixels. Simply create text file, paste this code, save as .jsx and place the file in illustrator's "scripts" folder. Then run it throught File>Scripts>...

It will do all the job i mentioned in a single action, setting files names from layers names and place them to appropriate folders. You can exclude certain layers by hiding and locking them.

5
6/6/2015 2:40:00 AM