S8(エスハチ)

エスハチ|仕事のことを中心に、幅広いトピックスを取り上げていく情報サイト

Illustratorでスライスが不要になるかも。Layer Exporterの使い方

      2016/10/08

普段からIllustratorをベースにしてWebサイトの制作をしているわけですが、マークアップ担当のひととのやりとりで「イラレはスライス機能がねえ。。。」と言われることが非常に多いです。でも、Illustratorは僕にとって使い慣れたペンのようなもの。できれば使いたい。だけど後工程の人のことを考えると。。。などといった逡巡がありました。

そこでLayer Exporterが良さそうだったので試してみることにしました。

結論としては、万能ではないもののそれなりに使えるのではないか、といったものでした。

一度業務に導入してみて、使い勝手を見てみる価値はありそうです。

動作条件

Layer Exporterが動作する条件は、Mac or WindowsCC,CC2014とあります。CS6以前の人は使えません。そしてなんと無料のエクステンションとなります。

余談ですが、僕のお客さまやパートナーにも未だCS6以前の方が多いのですが、アピアランスの描画の面でCS5とCS6には大きな壁があります。早めの導入をおすすめします。

使い方

まずはダウンロードしてインストール

Layer Exporterのサイトに行って「Available on Adobe Add-ons」をクリックし、Adobe Add-onsのページで「無料」をクリックします。

www.dehats.com illustrator layer exporter

スクリーンショット 2014-12-22 20.47.59

そうするとMacの場合CreativeCloudのメッセージウインドウが出るので、クリックして進めます。

インストールされたかどうかはCreativeCloud appHOME > アクティビティストリームに表示されていますし、Illustratorのウインドウ > エクステンションでも確認できます。

スクリーンショット 2014-12-22 14.19.21スクリーンショット 2014-12-22 14.23.09

実際に使ってみる

さて、インストールが済んだら実際に使ってみます。

まず、書き出したいオブジェクトを書き出したい範囲でグループ化させます。例えばロゴマークとロゴタイプをグループ化、という感じです。

スクリーンショット 2014-12-22 15.10.37

その後それぞれグループ化されたオブジェクトを選択した状態で、Layer ExporterMultiple Layersを押し、それぞれ個別のLayerに分けます。これ非常に便利ですね。

スクリーンショット 2014-12-22 15.10.48

その後分けられたレイヤーを開き、第一階層にあるアイテムの名前を任意で変更します。

そして対象となるオブジェクトを選択した状態でSet selected items to:から任意のファイル形式をクリックします。すると、アイテム名の末尾に拡張子が入ります。

スクリーンショット 2014-12-22 15.17.26

ここまで来たら、書き出したくないレイヤーを非表示にした状態でExportを押します。

そうすると任意のディレクトリに画像やsvgファイルが書きだされます。

スクリーンショット 2014-12-22 15.12.57
※書きだした画像の形式が違いますが、ちゃんと指定したファイルで書きだされます

感想と注意点

使ってみた感想としては、ちょっと制約はあるものの、慣れればかなり使えるな~というものでした。何よりレイヤー毎に書き出してくれるから、背景を消さなくてOKってことかな。次回の案件の時に導入してみようと思います。

注意点としては以下が挙げられます。

  • アピアランス(ドロップシャドウ)を含んだ領域で書き出してはくれない
  • svgで書きだす際にパターンが当たらず、透明のパスファイルとなる。これは画像パターンはもとより、ベクターのパターンでもそうなります。

追記

どうもマスクをかけた画像を書き出すと、隠れている領域を含めて書きだされる模様。これでは使えないなあ。。。。

冒頭の画像はLayer Exporterをキャプチャしました。


気に入っていただけたらシェアしていただけますと、とても嬉しいですm(_ _)m

 - イラストレーター