Android Action Bar Icon Pack の Illustraotr形式ファイル(*.ai)から画像を書き出す - Illustrator

Android Action Bar Icon Pack の Illustraotr形式ファイル(*.ai)から画像を書き出す方法を紹介します。

手順

Android Action Bar Icon Pack の Illustraotr形式ファイルを書き出す場合は、 Action Bar Icon Packに付属している"Action_Bar_Icons_Export.jsx"スクリプトファイルを用います。


Android Action Bar Icon Pack の Illustraotr形式ファイルを開きます。


[ファイル]メニューの[スクリプト]メニューのサブメニュー[その他のスクリプト...]を選択します。


ファイル選択大ログが表示されます。先ほどの"Action_Bar_Icons_Export.jsx"スクリプトファイルを選択します。


書き出し処理が実行されます。

結果確認

ファイルはAction_Bar_Icons.aiファイルのあるディレクトリに"out"ディレクトリが作成され、その中に書き出されます。


"holo_dark","holo_light"の2テーマが書き出されます。


各解像度のファイルも書き出されます。


PNG形式でファイルの書き出しができています。

コード (Action_Bar_Icons_Export.jsx)

Action_Bar_Icons_Export.jsxのコードです。
// Docs: http://www.adobe.com/devnet/illustrator/scripting.html

// Script that exports action bar icons from Illustrator

var DPIS = {
  'xxhdpi': 3,
   'xhdpi': 2,
    'hdpi': 1.5,
    'mdpi': 1
};

var STYLES = {
  'holo_dark': {
    'color': '#ffffff',
    'opacity': 80
  },
  'holo_light': {
    'color': '#333333',
    'opacity': 60
  }
};

// Hide all layers
walkLayers(activeDocument.layers, function(layer) {
  layer.visible = false;
});

// Look through leaf nodes
walkLayers(activeDocument.layers, function(layer) {
  if (layer.layers && layer.layers.length) {
    return; // not a leaf node
  }
  if (layer.locked) {
    return; // not a leaf node
  }

  var category = '';

  var anc = ancestors(layer);
  for (var i = 0; i < anc.length; i++) {
    if (anc[i].typename == 'Layer') {
      anc[i].visible = true;
      if (category.length) {
        category += '_';
      }
      category += anc[i].name.replace(/\s/g, '_');
    }
  }

  var name = layer.name.replace(/\s/g, '_');

  s += name + "\n";

  layer.visible = true;

  for (var stylename in STYLES) {
    var style = STYLES[stylename];
    var color = hexColor(style.color);
    layer.opacity = style.opacity;

    // Color the layer contents
    walkPathItems(layer, function(pathItem) {
      pathItem.fillColor = color;
    });

    // Output the icon in all densities
    for (var dpiname in DPIS) {
      var destFile = new File(activeDocument.path
          + '/out/' + stylename + '/' + category + '_' + name + '/drawable' + '-' + dpiname
          + '/ic_action_' + name + '.png');
      mkdirs(destFile.parent);

      // Create PNG export
      var opts = new ExportOptionsPNG24();
      opts.artBoardClipping = true;
      opts.horizontalScale = opts.verticalScale = 100 * DPIS[dpiname];
      activeDocument.exportFile(destFile, ExportType.PNG24, opts);
    }
  }

  // Reset state
  if (!layer.locked) {
    layer.opacity = 100;
  }
  layer.visible = false;

  for (var i = 0; i < anc.length; i++) {
    if ('visible' in anc[i]) anc[i].visible = false;
  }
});

// Show all layers
walkLayers(activeDocument.layers, function(layer) {
  layer.visible = true;
});


// Helper methods

function hexColor(s) {
  s = s.replace(/#/, '');
  if (s.length == 3) {
    s = s.substring(0,1) + s.substring(0,1)
      + s.substring(1,2) + s.substring(1,2)
      + s.substring(2,3) + s.substring(2,3);
  }

  if (s.length != 6) {
    return new RGBColor();
  }

  var color = new RGBColor();
  color.red = parseInt(s.substring(0, 2), 16);
  color.green = parseInt(s.substring(2, 4), 16);
  color.blue = parseInt(s.substring(4, 6), 16);
  return color;
}

function ancestors(obj) {
  var anc = [];
  var parent = obj.parent;
  while (parent) {
    anc.push(parent);
    parent = parent.parent;
  }
  return anc;
}

function walkPathItems(container, fn) {
  fn = fn || function(){};
  container = container || {};
  if ('pathItems' in container) {
    for (var i = 0; i < container.pathItems.length; i++) {
      fn(container.pathItems[i]);
    }
  }
  if ('compoundPathItems' in container) {
    for (var i = 0; i < container.compoundPathItems.length; i++) {
      walkPathItems(container.compoundPathItems[i], fn);
    }
  }
  if ('groupItems' in container) {
    for (var i = 0; i < container.groupItems.length; i++) {
      walkPathItems(container.groupItems[i], fn);
    }
  }
}

function walkLayers(layers, fn) {
  fn = fn || function(){};
  layers = layers || [];
  for (var i = 0; i < layers.length; i++) {
    fn(layers[i]);
    walkLayers(layers[i].layers, fn);
  }
}

function repr(obj) {
  if (obj == null) {
    return 'null';
  }
  var s = '';
  var n = 0;
  for (var k in obj) {
    ++n;
    try {
      s += n + ". " + k + " = " + obj[k] + "\n";
    } catch(e) {
      s += n + '. ' + k + ' = <ERROR>';
    }
  }
  return (n + " properties\n" + s);
}

function mkdirs(folder) {
  if (folder && !folder.exists && folder.create()) {
    mkdirs(folder.parent);
  }
}
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2018-11-14
作成日: 2014-02-20
iPentec all rights reserverd.