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?

Answer 1

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.

Answer 2

You can batch-export your icons using the Export dialogue. And additionally you can set the resolution there. So if you are using multiple sizes (like x2, x4) you can simply re-export with different resolution.

If you need smaller sizes from your source icons I would suggest a photoshop action to duplicate and resize the iconset.

Answer 3

I like to place the source file in a Photoshop file multiple times as a linked smart object and scale it to the resolutions needed (sort of like a sprite sheet). Then you can create slices for each instance. Saving for web will then give you a folder with the icon in all the different resolutions. You can even set the file names of the export files by naming the slices. If you change your source file, you just need to refresh the linked smart objects in Photoshop and save for web.

Answer 4

Edited answer given by Paweł Audionysos for my own uses so they all save to the same folder, and it's easier to edit the image sizes:

    /**
* Edited by Justin Golden (justingolden21.github.io)
* https://graphicdesign.stackexchange.com/questions/53177/export-an-image-from-illustrator-with-multiple-sizes-at-once
* 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);
    var sizes = [16,32,64,128];
    for (var i = 0; i < sizes.length; i++) {
        saveToRes(sizes[i]);
    }
}

function saveToRes(scaleTo) {
    var num = scaleTo;

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

    var i, layer, file, options;

    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(folder.fsName+ "/" + layer.name + "-" + num + ".png");
            $.writeln(folder.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;
        }
    }
}