I want to export my iOS App Icon in different sizes but without having to do it for each size! Is there a way with Adobe Illustrator where you can export various PNG's with different sizes all in one go?
I found an answer myself!
http://www.adobe.com/devnet/illustrator/scripting.html
As detailed in the link above; A script is a series of commands that tells Illustrator to perform one or more tasks.
So by using the following script I was able to export multiple images in different sizes as I wanted.
#target Illustrator
/**
* export multiple PNG's in different sizes
* @author Alexandros Harvey
*/
// Adapted to export an Illustrator file in various sizes by Alexandros Harvey
// based on how to export images as CSS Layers by CarlosCanto
if (app.documents.length > 0) {
main();
}
else alert('Cancelled by user');
function main() {
var document = app.activeDocument;
var afile = document.fullName;
var filename = afile.name.split('.')[0];
var folder = afile.parent.selectDlg("Export as CSS Layers (images only)...");
if(folder != null)
{
var activeABidx = document.artboards.getActiveArtboardIndex();
var activeAB = document.artboards[activeABidx]; // get active AB
var abBounds = activeAB.artboardRect;// left, top, right, bottom
var docBounds = document.visibleBounds;
activeAB.artboardRect = docBounds;
var options = new ExportOptionsPNG24();
options.antiAliasing = true;
options.transparency = true;
options.artBoardClipping = true;
var icons = [
{"name": "Icon-512@2x", "size":1024},
{"name": "Icon-512", "size":512},
{"name": "Icon-60@3x", "size":180},
{"name": "Icon-76@2x", "size":152},
{"name": "Icon-72@2x", "size":144},
{"name": "Icon-60@2x", "size":120},
{"name": "Icon-57@2x", "size":114},
{"name": "Icon-50@2x", "size":100},
{"name": "Icon-40@2x", "size":80},
{"name": "Icon-76", "size":76},
{"name": "Icon-72", "size":72},
{"name": "Icon-60", "size":60},
{"name": "Icon-29@2x", "size":58},
{"name": "Icon-57", "size":57},
{"name": "Icon-50", "size":50},
{"name": "Icon-40", "size":40},
{"name": "Icon-29", "size":29}
];
var icon, file;
for(var i = 0; i < icons.length; i++)
{
icon = icons[i];
file = new File(folder.fsName + '/' + icon.name + ".png");
// My App Icon is originally 1024x1024 so that's why I divide height and width by 1024
options.horizontalScale = 100 * (icon.size / document.width);
options.verticalScale = 100 * (icon.size / document.height);
document.exportFile(file,ExportType.PNG24,options);
}
activeAB.artboardRect = abBounds;
}
}
I hope this helps anyone else who needs something similar.
UPDATE:
With regards to different sizes; Change the icons array to use height and width instead of size e.g.
var icons = [{"name": "Icon-512@2x", "height":250, "width":125}, ...]
Then change horizontalScale to use the width and verticalScale to use height. I have also changed it so it uses the document height and width rather than a hard coded number.
options.horizontalScale = 100 * (icon.width / document.width);
options.verticalScale = 100 * (icon.height / document.height);
RUNNING THE SCRIPT: By volleybologist