BLOG

2015年2月5日/ Illustrator, テクニック, デザイン

【Illustrator】WEBデザイナー必見!Layer Exporterで楽々画像書き出し

こんにちわ、WEBデザインも少しかじっている宮本です。

 

IllustratorPhotoshopFireworksなど、WEBデザインに使えるソフトはいくつかありますが、皆様は主に何を使っているでしょうか。

私は、一昨年まではIllustratorばっかり使っていたのですが、Photoshopの画像アセットという機能を知ってからは、その画像の書き出しの楽さからPhotoshopばかり使うようになりました。

 

▼Photoshopの画像アセットについても記事を書いてますのでご覧ください!
【Photoshop】スライスを使わず画像アセットで簡単に画像保存する方法

 

と言ってもイラストは当然Illustratorです。
(※と言ってもイラストは大して書けません。)

 

しかし、最近クライアントからもらったデザインデータがIllustratorのファイルで、そこからかなりの数のパーツ画像を作らないといけない案件があり、どうにかして一度に画像書き出しできないかと調べてみると、Layer Exporterという便利なものがあるということが分かりました。

 

そこで今回はそのLayer Exporterの紹介をしたいと思います。

Layer Exporterとは

Layer Exporterは、Illustrator CCとllustrator CC 2014のエクステンション(拡張ツール。プラグインみたいなもの)です。

Layer Exporterをインストールすることにより、前述のPhotoshopの画像アセット機能のように、レイヤー毎に「.jpg」「.png」などの拡張子をつけることができ、一度に画像書き出しをすることができます。

Layer Exporterのインストール方法

Layer Exporterをインストールするには、まず事前に「Extension Manager CC」をインストールする必要があります。

Extension Manager CCは、Illustratorなど各種Adobeアプリケーションの拡張機能のインストールや削除、インストールされている拡張機能の情報検索を簡単に行うことができるアプリケーションです。

Extension Manager CCはAdobe Creative Cloudから入手できます。

 

Extension Manager CCがインストールできたら、下記リンク先よりLayer Exporterをダウンロードしてください。

Adobe Add-ons

 

ダウンロードされた「com.dehats.layerexporter_2.1.0_2a0c2e.zxp」を開くと、Extension Manager CCが開くので、メッセージに沿ってインストールを行い、Illustratorを再起動します。

 

Layer Exporterの使い方

Illustratorを起動し、「ウインドウ」メニューの「エクステンション」の「Layer exporter」をクリックすると、Layer exporterパネルが表示されます。

 

Illustratorのウインドウメニュー

Layer Expoterパネル

 

その後、画像書き出しをしたいグループ(下の例ではロゴとナビゲーション3つ)を選択し、「Set selected items as: 」の「PNG」をクリックします。

 PNGを押す

 

すると、グループ名に「.png」がつきます。

グループ名に「.png」がつく

 

あとは、「Export」ボタンを押すだけで、各グループがPNG画像として書き出されます。

各グループが画像として書き出される

 

尚、保存先は、下のようにLayer exporterパネルの「Outputs」タブにて設定できます。

保存先を指定する

 

最後に

いかがでしたでしょうか。

 

このLayer Expoterを使えば、IllustratorでWEBデザインをした後の画像書き出しを楽にすることができますので、Illustratorのスライスが面倒だな・・と悩んでいた方は是非使ってみてください。

 

ただし、通常の「WEB用に保存」やPhotoshopの画像アセットのように、書き出し時に画像サイズを変えることができませんので、事前にサイズを設定しておく必要はありますので注意してください。

Resent Posts

Category