【無料プラグイン】早っ!イラストレーターの効率的な使い方:レイヤーから画像・HTML・CSS書き出し

【無料エクステンション】早っ!イラストレーターの効率的な使い方:レイヤーから画像・HTML・CSS書き出し
出典:Layer Exporter

「イラストレーターファイルを効率的にWebサイトへ使いたい。」
「複数あるオブジェクトを1つずつレイヤーに分けたい。」

Webデザインを行う際、みなさんはPhotoshop(フォトショップ)を使用しますか、Illustrator(イラストレーター)を使用しますか、あるいは、両方ですか?

今回は、Illustrator(イラストレーター)でWebデザインを行う場合、あるいは、印刷物と平行してWebデザインを行う場合、非常に便利な無料のエクステンション(プラグイン)をご紹介します。

イラストレーターのレイヤーから、効率的に画像・HTML・CSS書き出しする方法

イラストレーターのレイヤーから、効率的に画像・HTML・CSS書き出しする方法

Photoshop(フォトショップ)は基本、パーツごとにレイヤーが分かれて生成されますし、作業上もレイヤーごとに制作を行うと思います。しかし、Illustrator(イラストレーター)の場合、何も考えず作業を行うと、1つのレイヤー上に全てのオブジェクトが生成されていきます。

印刷物の場合は、作業途中で、ある程度レイヤー分けをしていけば、問題無いのですが、Web制作の場合、そういう訳にはいきません。PSD書き出しして、Photoshop(フォトショップ)で開くという方法もありますが、今回は便利なエクステンション(プラグイン)をご紹介します。

レイヤーを効率的に活用:Illustrator Layer Exporter

レイヤーを効率的に活用:Illustrator Layer Exporter

Illustrator Layer Exporter
非常に評価の高い、無料のIllustrator(イラストレーター)用のエクステンション(プラグイン)です。

SVG・JPG・PNGファイルを書き出し
出典:Layer Exporter

自動的にイラストレーターのレイヤーから、SVG・JPG・PNGファイルを書き出し、必要に応じて、HTML・CSSファイルも生成してくれます。イラストレーターで、Webサイトのパーツを制作する際に非常に便利です。
全てのレイヤーを対象に、あるいは、選択したアイテムを対象に、1クリックで自動書き出ししてくれます。

地味に便利な使える機能!オブジェクトごとのレイヤー生成・レイヤー統合

地味に便利な使える機能!オブジェクトごとのレイヤー生成・レイヤー統合

このエクステンション(プラグイン)の主たる機能ではないのですが、地味に便利な使える機能があります。

□One layer:
複数のオブジェクトを1つのレイヤーへ自動的にまとめてくれます。一般的なレイヤー統合と違うのは、複数レイヤー上に存在する「選択したオブジェクトだけ」を1つのレイヤーにまとめられるということです。

□Multiple layers:
複数のオブジェクトを1つずつ分け、個別レイヤーを自動生成してくれます。画像書き出しを行う前に使用する機能になります。

最後に:印刷用データを効率的にWebへ活用!

今回ご紹介した、Illustrator(イラストレーター)用のエクステンション(プラグイン)は、特に、印刷とWebの両方にまたがったプロジェクトを行う際に非常に重宝すると思います。

デザイナーのみなさん、印刷用データを効率的にWebへ活用するために、是非試してみて下さい。