MontBlanc.です。
僕はWEBデザインをIllustratorで制作することが多いのですが、
イラレWEBデザイナーの強い味方になりそうな「Layer Exporter」について紹介したいと思います。
イラレでWEBデザインをしている時に困ること
以前ではWEBデザインといえばPhotoshopという流れがありましたが、
最近ではIllustratorでもスライス引きやアートボートを使ってWEBデザインを容易に行えるようになってきました。
ただそれでも困ってしまうのが画像の書き出しです。
スライス
└オブジェクトにスライスを指定出来るが名前を設定したりが少々面倒
└良い感じに切り出せないことがある
アートボードで切り出し
└少ないオブジェクトなら良いがデータや処理が重くなりがち
これらの問題を解決できるのが「Layer Exporter」です。
導入方法
1. サイトへアクセス。
2. サイト下部の[Available on Adobe Add-ons]にアクセスするとAdobe IDログインをお願いされるのでログイン。
3. 無料ボタンを押すとインストールが開始され、完了するとAdobe Creative Cloudの更新情報に完了しましたと表示されます。
※導入するには「Illustrator CC」以降である必要があります。
使い方
[ウィンドウ]→[エクステンション]→[Layer Exporter]でツールを開くことが出来ます。
「JPG」「PNG」「SVG」を指定することができます。
各サイトでは[レイヤー名も英文字で任意のファイル名に変更]→[変換した画像の拡張子のボタンを押す]→[Export]で画像が作成できますが、
上の画像のようにレイヤー名に直接拡張子を指定して[Export]で画像を書き出すこともできます。
こんな感じ。
まだまだ課題点もある
ちょこちょこ使って課題として出たのがこれ
・ドロップシャドウなどがうまく書き出せない
└ドロップシャドウやぼかしが切れてしまう
・クリッピングマスクなどを使うと、ネイティブの画像を基準に画像を書き出してしまう
└まわりにイヤーな余白ができる
・オブジェクトには指定できない（拡張子つけてもダメ）
上記については今後のバージョンアップに期待ですが、
影やアピアランスを多用しない、フラットデザインとかでは良い感じに使えそうですね。
参考：
Layer Exporter
Layer Exporterを使って、IllustratorのアートワークをSVG/PNG/JPEG書き出しする
Illustratorでスライスが不要になるかも。Layer Exporterの使い方