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

レイヤーパネルについて理解する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レイヤーの機能は、グラフィック関係のアプリケーションにはとても重要なものですが、AdobeIllustratorを使ってWebデザインをする際にも、とても利用価値があります。このレッスンでは、そのレイヤー機能について、詳しくみていきましょう。
講師:
07:08

字幕

レイヤーの機能は グラフィック関係のアプリケーションに とても重要なものですけれども Adobe Illustrator を使って ウェブデザインの作業をする際にも とても利用価値があります このレッスンでは そのレイヤー機能について 詳しく見ていきましょう さっそくレイヤーパネルを チェックしてみます 今ご覧いただいている画面では 右側の一番下のところに レイヤーパネルが開かれています もしレイヤーパネルが 表示されていない方は メニューバーの「ウィンドウ」から 「レイヤー」を選択していただくか もしくはキーボードで F7 のキーを押しても レイヤーパネルがすぐに開きます さて 今 画面に映っている サンプルファイル 「レイヤー.ai」で レイヤーパネルをチェックしてみると 含まれているレイヤーは 「Background」という名前の 1つだけです まだ複数のレイヤーを作る 作業はしておらず 1つのレイヤーだけが 存在している状態です しかしこの「Background」 レイヤーの左側にある 三角形をクリックして開くと 中にたくさんのサブレイヤーが 入っていることが分かります このようにレイヤーに名前を付けておくと 管理が楽になります 日本語で名前を付けても 良いのですけれども 後々エクステンションなどを使って 画像を書き出すときに このレイヤー名をファイル名として 利用することがあります ということで ウェブデザインの作業では 後でファイル名にしても問題ないような 半角英数字でスペースを入れずに 命名しておくと便利かなと思います そして他のデザイナーやエンジニアと ファイルを共有しても混乱が起きないように 命名とレイヤーの規則は 分かりやすくエレガントに 誰が見てもこのレイヤーの 目的が何かということが 分かるように整理しておいた方が 良いかなと思います さて 各レイヤー左側の 小さな目玉のアイコンは レイヤーの表示/非表示を切り替えるものです 一度クリックすると そのレイヤーが非表示になって もう一度クリックをすると元に戻ります レイヤーを一時的に 非表示にするだけですので 中身を捨ててしまうわけではありません そこはご安心ください 次にレイヤーパネルの下を見ると アイコンが5つ並んでいます 一番左から 「オブジェクトの位置」 「クリッピングマスクを作成解除」 「新規サブレイヤーを作成」 「新規レイヤーを作成」 「選択項目を削除」というアイコンです 今はレイヤーを1つも 選択していないので アイコンはほとんどグレーアウトして 薄い色になって 使えない状態になっています レイヤーを何か選択をすると 状況に応じて このアイコンを使うことができます さて次にレイヤーパネルではなく 他のパネルでも同じですけれども このように掴んで 切り離すことができます そして右下の部分を掴んで 縦に伸ばすことができます レイヤーの数が増えてきて 一覧しづらくなった時は このように伸ばすと便利かもしれません そしてこの各レイヤーそれぞれの右側に 丸い印がついています これはこのレイヤーに「アピアランス」が 指定されているかどうか またはターゲットとして 指定されているかどうか という状態を表すアイコンです このターゲットアイコンについては また別のレッスンで詳しく解説します 次にご紹介するのは レイヤーパネル右上にある 「レイヤーパネルメニュー」 このドロップダウンメニューです これを開いて上から5行目 「Background のオプション」という所を 選んでください この「Background」という言葉は 自分がつけたレイヤー名に 変化します これを選ぶとレイヤーオプションの ダイアログボックスが出てきます レイヤーの名前をここから変更したり 「カラー」 レイヤーに付ける印の色を 変更することもできます この下にチェックボックスが いくつか並んでいまして たとえばこのレイヤーを テンプレートとして使うか ロックをかけるか といったことを 細かくチェックすることができます 一度キャンセルしてみます 今はこの右上の レイヤーパネルメニューから オプションのダイアログボックスを 開きましたけれども このレイヤーから直接開くこともできます レイヤー名の右側の この空白のところを ダブルクリックすると レイヤーオプションの ダイアログボックスが開きます このとき名前の真上をダブルクリックすると 名前を編集する― 直接編集するモードに 変わってしまいますので ダブルクリックする位置に気をつけてください またこのレイヤーオプションの ダイアログボックスは 各レイヤーでは表示されますけれども その下のサブレイヤーのときは 全項目が表示されるわけではないので そこも気をつけてください さて最後にご紹介するのは 複雑なアートワーク上で どこに目的のオブジェクトがあるのか 素早く探す方法です この作業を行うためにも それぞれのレイヤーとサブレイヤーに 秩序正しい名前を 付けておくことが重要かと思います 必要なレイヤーの一番上 ターゲットアイコンの右側 この空いた所をクリックをすると このサブレイヤー またはそのレイヤーが すぐに選択された状態になります 今は「btn-signIn」という 名前のサブレイヤーを クリックしましたので こちらが素早く表示されました また雲― 「Clouds」のレイヤーを選びたい そのときには この「Clouds」レイヤーの一番右側の 空いている所をクリックすると このようにこの雲の形が 素早く選択されます このように どのサブレイヤー どのレイヤーに何が入っているのか ということを的確に分かりやすく 名前を付けておくのが 重要だということが お分かりいただけるかと思います 今ご説明したように 計画的で分かりやすいレイヤー分けと 命名にすることよって 複雑なアートワークの中から 素早く目的のオブジェクトを探して 移動することができます ここまでレイヤーパネルの 実は奥が深い機能について 解説をしてきました もう一度繰り返しますが 効率的な作業のために レイヤーパネルの中は いつも整理整頓して ドキュメントのポテンシャルを 最大限に引き出してみてください

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

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

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

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

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

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