Adobe Illustratorでアプリアイコンを書き出す

はじめに

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のアイコンサイズに対応しています。

AppIcons.jsx

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を起動するとスクリプトが追加されていることがわかります。

実行

AppIconsをクリックするとフォルダの選択画面が表示されます。
保存するフォルダを選択します。

次にファイル名を入力します。

ファイルが書き出されました。