はじめに
Adobe Illustratorで1024px x 1024pxのアートボードからスクリプトを利用して様々なサイズのPNGファイルを書き出す方法です。
以下の環境で動作確認をしています。
- OS X El Capitan(10.11.1)
- Adobe Illustrator CC 2015(19.1.0)
スクリプト
Adobe IllustratorをJavaScriptで制御することができます。
JavaScriptファイルのことをJSXと呼び、拡張子は.jsxです。
以下のサイトを参考にスクリプトを書いていきます。
The Magic Illustrator Script – Ai to iOS & Android Create retina assets for iOS and Android in 1 click with this Illustrator Script
最終的なスクリプトは以下のとおりです。
1024px x 1024pxのアートボードが1つだけあることを想定しています。
Adobe AIR、OS X、iOS(iPhone/iPad/CarPlay/Apple Watch)、Androidのアイコンサイズに対応しています。
var folder = Folder.selectDialog();
var document = app.activeDocument;
var prefix;
if(folder && document) {
prefix = prompt("Save", "") || "";
var files = [
[1024, '1024'],
[512, '512'],
[256, '256'],
[192, '192'],
[144, '144'],
[128, '128'],
[96, '96'],
[72, '72'],
[64, '64'],
[48, '48'],
[36, '36'],
[32, '32'],
[16, '16'],
[48, '24@2x'],
[55, '27.5@2x'],
[58, '29@2x'],
[87, '29@3x'],
[88, '44@2x'],
[76, '-76'],
[152, '-76@2x'],
[172, '-86@2x'],
[196, '-98@2x'],
[40, '-Small-40'],
[57, ''],
[114, '@2x'],
[72, '-72'],
[144, '-72@2x'],
[29, '-Small'],
[58, '-Small@2x'],
[50, '-Small-50'],
[100, '-Small-50@2x'],
[120, '-60@2x'],
[80, '-Small-40@2x'],
[87, '-Small@3x'],
[120, '-Small-40@3x'],
[180, '-60@3x'],
[167, '-83.5@2x'],
];
for (var i = 0 ; i < files.length ; i++) {
var file = files[i]
scaleTo = file[0]
suffix = file[1]
exportPNG(folder, prefix, scaleTo, suffix);
}
}
function exportPNG(folder, prefix, scaleTo, suffix) {
if(!folder.exists) {
folder.create();
}
var file = new File(folder.fsName + "/" + prefix + suffix + ".png");
options = new ExportOptionsPNG24();
options.antiAliasing = true;
options.transparency = true;
options.artBoardClipping = true;
options.verticalScale = scaleTo / 1024 * 100.0;
options.horizontalScale = scaleTo / 1024 * 100.0;
document.artboards.setActiveArtboardIndex(0);
document.exportFile(file, ExportType.PNG24, options);
}
var folder = Folder.selectDialog();
で保存するフォルダを指定します。
prefix = prompt("Save", "") || "";
でプロンプトを表示して保存するファイル名を入力できるようにします。
options.verticalScale
options.horizontalScale
もとのアートボードサイズを100.0としたときのスケールを指定します。
今回のアートボードサイズは1024px x 1024px です。
例えば512px x 512pxの場合、 512 / 1024 * 100.0 = 50.0 となります。
先ほどのスクリプトをAppIcons.jsx
として以下の場所に保存します。
/Applications/Adobe Illustrator CC 2015/Presets.localized/ja_JP/スクリプト/
Adobe Illustratorを起動するとスクリプトが追加されていることがわかります。