montblan9.net

デザインと、趣味と、ときどきアダルト。

2015.03.06 / 

イラレWEBデザインの強力な味方になるのか?「Layer Exporter」を使ってみた。

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]でツールを開くことが出来ます。

スクリーンショット 2015-03-06 21.54.22

「JPG」「PNG」「SVG」を指定することができます。

スクリーンショット 2015-03-06 22.08.53

各サイトでは[レイヤー名も英文字で任意のファイル名に変更]→[変換した画像の拡張子のボタンを押す]→[Export]で画像が作成できますが、
上の画像のようにレイヤー名に直接拡張子を指定して[Export]で画像を書き出すこともできます。

スクリーンショット 2015-03-06 22.06.59
こんな感じ。

まだまだ課題点もある

ちょこちょこ使って課題として出たのがこれ

・ドロップシャドウなどがうまく書き出せない
  └ドロップシャドウやぼかしが切れてしまう
・クリッピングマスクなどを使うと、ネイティブの画像を基準に画像を書き出してしまう
  └まわりにイヤーな余白ができる
・オブジェクトには指定できない(拡張子つけてもダメ)

上記については今後のバージョンアップに期待ですが、
影やアピアランスを多用しない、フラットデザインとかでは良い感じに使えそうですね。

参考:
Layer Exporter
Layer Exporterを使って、IllustratorのアートワークをSVG/PNG/JPEG書き出しする
Illustratorでスライスが不要になるかも。Layer Exporterの使い方

Tweet about this on TwitterShare on FacebookEmail this to someoneShare on TumblrPin on PinterestShare on LinkedInDigg this
AdobeIllustratorLayer Exporterrevine-oldWEBデザインスライス切り出し自動化

MontBlanc. • 2015/03/06


Previous Post

Next Post

montblan9.netの情報をプッシュ通知で受け取る

montblan9.netの最新情報やイチオシ情報をプッシュ通知で受け取ることができます。>>詳しくはこちら

コメントを残す

Your email address will not be published / Required fields are marked *