Edited at

イラレで作ったアイコンをアートボードごとにSVGで書き出す

More than 3 years have passed since last update.


経緯

過去の投稿、

と、

を経て、一定の法則で書き出されたPNG, PNG(2x), SVGの3種類の画像を用意して、Compassでスマートにコーディングすることが出来ました。

最後に積み残し課題となっていた、


大量のアイコンデータをイラレで作成して、PNG、SVGで書き出し・素材管理したい場合のベストソリューションを知りたい。 → 自分でスクリプト書く?


についてです。

Illustrator用のプラグインがありました。

$9.00ですが、さっそく試してみました。


インストール

Adobeのサイトで購入して、AdobeのAddo-on配布の仕組みがわからず、自動的にインストールされるのかわからなかったので、こちらからzxpファイルをダウンロードして、Extention Manager経由でインストールしました。

Illustrator CC 2015だと正しくインストール出来なかったので、Illustrator CC 2014を使用しました。


使用

書き出したい素材毎にアートボードを用意して (座標に小数点が入らないように注意)、ファイル > スクリプト > Smart Layer Export を実行。

Screen Shot 2015-12-06 at 8.59.36 PM.png

左のパネルで、



  • Export Artboard Images にチェック

  • 書き出したいアートボードを選択

  • レイヤーは選択を外す


  • ignore layers out of artboard にチェック

右のパネルで



  • Fonts -> Outlines を選択


  • Trim Edges のチェックを外す (PNGでも同様にチェック外す)

  • 書き出し先を選ぶ

  • Add FormatでPNGも書き出す。(50%とか200%サイズも指定可)

SVGの More Optionsでは

Screen Shot 2015-12-06 at 9.00.09 PM.png



  • Precisions -> 3 (小数点以下の桁数。Sketchで書き出すと7桁なので大きくても良い)


  • Document Encoding -> ASCII (SketchはUTF-8なので、UTF-8でも良いかも)


  • DTD Version -> SVG 1.1 (初期値のまま)

  • 以下も初期値のままで

Exportを実行すればアートボード名がSVGやPNGが書き出されます。


aiファイルの四角形からアートボード変換のコツ

それと、aiファイル内でガイドになっている四角形をアートボードに変換する際は、 「線の位置」「内側」 にしてから実行すると、線幅の影響などを受けずに、整数値のアートボードサイズになると思います。

Screen Shot 2015-12-06 at 11.03.26 PM.png