Layer Exporterを使って、IllustratorのアートワークをSVG/PNG/JPEG書き出しする

この記事は鷹野雅弘によって執筆されました。
公開日:2014年9月 2日、更新日:2016年3月 5日

eef7ee41-4027-4177-a1dc-eb3fce83ecd0.png

Illustrator CC/CC 2014では、Layer Exporterを使うことで、スライスを行わずに、SVG/PNG/JPEG書き出しを行うことができます。

スライスの難点

主にWeb向けの制作フローでは、画面全体から“切り出す”領域を指定し、ファイル形式やスライス名を設定する「スライス」という作業を行ってきました。このスライスには、次のような難点がありました。

  • スライス作業そのものが面倒
  • スライスを重ねることができない
  • 背景を透過したい場合、一時的に背景のオブジェクトを隠す必要がある

Layer Exporterでできること

  • レイヤーやグループ化されたオブジェクトに拡張子を付ける(消す)
  • 複数レイヤーをひとつに統合する
  • グループ化されたオブジェクトごとに異なるレイヤーに分配する
  • 拡張子がついているレイヤー(オブジェクト)ごとにSVG/PNG/JPEGで書き出しを実行する
  • CSS書き出し

Layer Exporterの対応バージョン

スライスの難点を解消できるのが「Layer Exporter」エクステンションです(無償)。対応バージョンは、次の2つのみです。

  • Illustrator CC
  • Illustrator CC 2014

アプリケーション本体に機能を追加するには「プラグイン」、最近だと「拡張機能」などの用語が使われてきましたが、Layer Exporterは「エクステンション」と呼ばれます。

Layer Exporterのインストール

  1. ブラウザーでサイトを開き、[Illustrator Layer Exporterをダウンロード]ボタンをクリックする
  2. ダウンロードした「com.dehats.layerexporter_2.1.0_2a0c2e.zxp」をダブルクリックすると、Adobe Extension Manager CCが開くので、メッセージに従ってインストールを行い、Illustratorを再起動する
  3. Illustratorが起動したら、[ウィンドウ]メニューの[エクステンション]→[Layer exporter]をクリックすると、[Layer exporter]パネルが表示される

Layer Exporterを使った書き出し(1)

アートボード上のアートワークをひとつのオブジェクトとして書き出したいときには、次の手順で行います。アートボードサイズをフィットしておくなどの下準備は不要です。

 

  1. 書き出したいレイヤーのレイヤー名を、「logo」のように半角英数字に変更する(「レイヤー 1」のままでも書き出しを実行することができるが、「レイヤー 1」は、次の手順のときに「レイヤー-1」のように変更される)
  2. [Layer exporter]パネルの[Set all layers as]カテゴリの[PNG]ボタンをクリックする

    (「logo」レイヤーが、「logo.png」のようにリネームされる)
  3. [Layer exporter]パネルの[Export]ボタンをクリックする
  4. 書き出し先を選択すると、書き出しが実行される

Layer Exporterを使った書き出し(2)

「レイヤー1」の中に、2つのロゴが入っており、それぞれを異なる画像として書き出したい場合を考えてみましょう(今回の場合には、それぞれが別のアートボードに入っていますが、アートボードがあってもなくても)。

  1. レイヤー分けしたいオブジェクトごとにグループ化しておく
  2. グループ化したオブジェクトごとに、「logo-color」、「logo-bw」のように名前を付ける
  3. 書き出したいオブジェクトを選択して、[Layer exporter]パネルの[Set selected items as]カテゴリの[PNG]ボタンをクリックする
    (「logo-color.png」「logo-bw.png」のようにリネームされる)
  4. [Layer exporter]パネルの[Export]ボタンをクリックする
  5. 書き出し先を選択すると、書き出しが実行される

Layer Exporterを使って、グループ化されたオブジェクトごとに最上位のレイヤーに振り分ける

サブレイヤーの場合、オブジェクトを選択する手順が煩雑といえば煩雑です。次の手順で、グループ化されたオブジェクトごとに最上位のレイヤーに分けることができます。

  1. レイヤー分けしたいオブジェクトごとにグループ化しておく
  2. すべてのオブジェクトを選択して、[Layer exporter]パネルの最下部右側の[Multiple layers]をクリックする
  3. グループ化されたオブジェクトごとに最上位のレイヤーになるので、レイヤー名を設定する

空のレイヤー「レイヤー1」は残ってしまいます。

Layer Exporterの注意点

  • [Web用に保存]のように、書き出し時に大きさを指定することができないので、PNG/JPEGに書き出すときには、事前にサイズを変更しておく
  • アピアランスに非対応。ドロップシャドウなどが欠けてしまう
  • サブレイヤーは非対応

Layer Exporterの注意点(2)

Layer Exporterは、内部的に「レイヤーごとに新規ドキュメントにペースト、アートボードサイズを変更してから書き出し」という作業を行っています。

クリッピングマスクされたアートワークは、クリッピングマスクの大きさでなく、マスクされる前のビットマップ画像の大きさで書き出されてしまいます。

これは、次の仕様が原因です。

追記(2015年7月22日):Illustrator CC 2015にはMagic Exporter

Layer Exporterは、Illustrator CC 2015に非対応です。有料(25ドル、¥3,215)ですが、Magic Exporterは使えます。

  1. [レイヤー]パネルで書き出したいレイヤー名に「@」を付ける(拡張子は不要)

    アートボードでは「★レイヤー名」とともに枠で囲まれる
  2. [ファイル]メニューの[Export marked objects]をクリック
  3. 書き出しダイアログボックスが開く

アンチエイリアスの設定など、もう少しカスタマイズできるのすが、SVG書き出しには対応していないようです。

ご参考

『10倍ラクするIllustrator仕事術』(増強改訂版[CS5/CS6/CC/CC 2014対応])

2014年10月に発売。新しいバージョンを使いながらも、古いやり方のまま作業されている中級以上のユーザー向けの書籍。ツールやコマンドなどの基本的な使い方の解説はありません。

2015年3月、8月に増刷。前書(2011年版)と合算すると3万部超のロングセラーとなっています。

改訂版に関する情報

2011年に発売した書籍の改訂版です。

  • 対応バージョンは、CS5/CS5.1/CS6/CC/CC 2014
  • 178ページから78ページ増量の256ページ
  • 金額は180円(だけ)アップの2,380円(税別)

最新版への対応

2016年11月リリースのIllustrator CC 2017への対応版を、2017年2月に発売します。なお、書籍リリース後の追加情報は、サポートページにて公開しています。

全都道府県縦断セミナーツアー

2014年10月に技術評論社から発売された『10倍ラクするIllustrator仕事術』(増強改訂版)のプロモーションのために、全国47都道県にて実施。

47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』(増強改訂版)は、2011年発売の『10倍ラクするIllustrator仕事術』の改訂版。2014年に技術評論社から発売、現在5刷です。2011年版と合わせて35,000部のロングセラーとなっています。

詳しくはサポートサイトにて。

画像:『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』全都道府県縦断セミナーツアー、 47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

画像:『10倍ラクするIllustrator仕事術』改訂版

5つの「く」

画像:『10倍ラクするIllustrator仕事術』改訂版

DTP Transitのコアとなっている制作へ考え方「ムラなく、モレなく、直しに強く、手数を少なく、美しく」を5つの「く」としてまとめてみました。

オススメのスライド

お問い合わせ

メールマガジン

サイトの新着情報などを、月1回程度、メールマガジンでも配信しています(まぐまぐから配信。無料です)

オススメ記事

Illustrator

InDesign

Photoshop

その他

 

リンク

このページの上部に戻る