Illustratorを使ったWebデザインのテクニック

LayerExporterを利用して画像を書き出す

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、AdobeIllustratorの標準機能ではないものの、公式で配布されている無料のエクステンション「LayerExporter」を利用して、レイヤーごとにWeb用の画像として書き出す、とても便利なテクニックをご紹介していきます。
講師:
11:44

字幕

このレッスンでは Adobe Illustrator の標準機能ではないものの 無料のエクステンションー Layer Exporter を利用して Layer ごとにweb用の 画像を落として描き出すー とても便利なテクニックをご紹介して行きます ここまでのレッスンでご説明してきたスライス もしくはアートボードを利用した web 用画像の書き出しは それぞれとても便利な特徴がありました しかし場合によっては問題点があります 最大の問題はたとえばここにあるような 背景画像の上にあるロゴマーク こういった場合 たとえば背景画像とロゴマークを 別々に切り出したいですのに 重なってデザインされている というようなシチュエーションで スライスを重ねて 作成することができないということです アートボード自体は 重ねて作成は可能ですけれども オブジェクトが重なってしまっている場合には 今の書き出しに不要な物を 一時的に非表示にしておく、などの 処理が必要になります たとえばロゴマークを不要な時には レイヤーパネルを開いて このロゴマークを非表示にする コンテントそのものを非表示にして 背景画像だけを表示させて こちらを書き出してから また必要な物を表示させて 書き出し直すといったような 手順が必要になります 切り出す点数が非常に多い場合も スライスやアートボードを利用した書き出しは とても時間がかかることがあります そういった問題を解消するために お勧めしたいのは Adobe の公式サイトから無料で 配布されている機能拡張のエクステンション Layer Exporter です オブジェクトをレイヤーに分けて 規則的に命名しておけば 一括で書き出してくれる 便利なエクステンションです では利用する際のインストール方法から ご説明して行きましょう まずLayer Exporter を利用するためには こちらの Adobe Extension Manager CCが インストールされている必要があります もしまだお持ちでない方は Adobe Extension Manager CCを検索して ダウンロードしてください こちらをクリックすると ご自分のプラットフォームに合わせて ダウンロードすることができますので インストラクションにしたがって インストールしてください こちらのインストールが終わりましたら つぎは Layer Exporter そのものを インストールします 検索サイトでIllustrator Layer Exporterと いった文字列で検索をすると こちらのサイトが表示されると思います おそらく一位か二位あたりに こちらの dehats.com さんの Layer Exporterのページが 表示されると思います このページが出てきましたら 一番下に行って左の下に Available on Adobe Add-ons というボタンが ありますので こちらをクリックします そうしますと Adobe の 公式サイトのアドオン配布ページに Illustorator Layer Exporter の Add-ons が  あるのを見つけることができます この無料と言う青いボタンをクリックすると Adobe ID を使った ログインを求められますので ログインをしてダウンロードしてください ダウンロードすると エクステンションのファイルが 落ちてきます .zxp というファイルが 落ちてくるんですけれども こちらをダブルクリックすると さきほどのインストールしておいた Adobe Extension Manager CCが 起動しますので 後は画面に従って インストールを済ませます さてこの手順で インストールが済んだ illustorator メニューバーのウインドウから エクステンションの項目を見ると Layer Exporter が見える状態に なっているはずです こちらを選択します このようにパネルが開きますので こちらを使って細かい設定をして行きます まず Layer Exporter のルールとして 最上位のレイヤーだけを1つの画像として 描き出すという決まりになっています 今作っているデザインを確認すると ヘッダーの部分はよいとして バックグラウンドもこの一枚でよいとして コンテントの部分が問題です コンテントのLayerには いろいろな要素が入っていますので 描き出したい画像毎にグループ化をしておいて 一番上位のレイヤーに配分してもらう作業を Layer Exporter にしてもらいましょう では作業をして行きます 一緒に画像を落として描き出したいものを グループ化しておきます 選択して メニューバーの 「オブジェクト」から「グループ」 こちらのメイン画像は1つで ok です ナビゲーションは もうあらかじめ グループ化されていますので ok です ロゴもグループ化されています 一番下の三枚の画像も 三枚セットでグループにしてみます このようにロゴマーク ナビゲーション メイン画像 三枚ずつのグループ 背景 と グループ分けされました このように描き出したい画像別に グループ分けをしたら こちらを全部選択します 選択しましたら Layer Exporter のパネルで 一番下の項目を見てください move selected items to multiple layers こちらをクリックします クリックすると1つのグループが 1つのレイヤーになるように 自動でレイヤー分けをしてくれました こちらを利用して画像を描き出して行きます 元のコンテントのレイヤーは 空っぽのまま残ってしまいましたので 必要なければもうこの時点で 捨ててしまって結構です 後は 今レイヤー11、10、9というように 日本語の名前になってしまったんですけれども このレイヤー名が画像名に変わりますので ここで名前をつけておきます たとえば logo レイヤー10はメイン画像ですので main-img レイヤー9 この三枚の画像ですので このようにそれぞれのレイヤーに 後ほどファイル名になる半角英数の 名前をつけました では次にすべてのレイヤーを表示にして ロックを外します そしてすべてのレイヤーを 同じ画像の形式にしてもいいですし セレクトしたものだけ別々の 画像形式にしてもかまいません たとえば set all layers as というところで PNG を選ぶとすべてのレイヤーに 拡張子 .png を自動で付けてくれます JPGにしたら すべてをJPGにしてくれます このロゴマークのところだけ SVGにしたいというような場合は 選んでから set selected items as SVG にすると こちらのロゴマークが SVGに変わるはずなんですけれども 変わらないケースがありますので そのような時は手作業で拡張子を 変えてしまってかまいません .svg にすると自動で SVGとして描き出されます 試しにこの大きな画像をPNGにして みたいと思いますけれども 変えませんので 手作業で変えてみましょう メインイメージは試しに .png の拡張子にします オプションの所で描き出しのクオリティを 設定することもできます もしくはSVGの描き出しオプションで 小数点以下の数値を何桁までにするかも こちらで決めることができます アウトプット  どのディレクトリにアウトプットするかを ここで決めることができますので デスクトップにしておきましょう ではここまで設定ができたので export ボタンを押します このようにちょっと時間がかかりますけど 描き出し処理がされます ではデスクトップを見に行ってみると 今指定をしたような形でファイル名と 拡張子がついた状態で いろいろなファイルが描き出されて いることがわかります レイヤーの整理と拡張子の名前付けさえ きちっとしておけば 一発で画像をすべて描き出して くれることができますので 非常に作業の効率化が 図れるツールかと思います 無料ということもありますので 是非インストールして試して見てください 先ほどの個別の拡張子設定とか もうひとつドロップシャドーなどの アピアランスが うまく描き出されないという ケースもありますので 少し試しながらお使いいただけると よろしいかと思います ここまでスライスの問題点を 補完してくれる無料のエクステンション Layer Exportor の便利な利用方法を ご紹介してまいりました

Illustratorを使ったWebデザインのテクニック

このコースではIllustratorを使ったWebデザインの方法を学びます。IllustratorをWebデザイン用の設定に変更するところから始め、各種端末向けのドキュメントやユーザーインターフェイスの作成ができるようになるまで順を追って説明します。このコースを見れば、整理されてエレガントなIllustratorドキュメントが制作できるようになるでしょう。

7時間03分 (52 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。