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

レイヤーの名前変更とグループ化

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レイヤーやサブレイヤーの名前を変更したりまとめたりして、「秩序正しい命名方法」と「整理整頓」する考え方について、ご説明いたします。
講師:
11:05

字幕

レイヤーパネルについて ご説明したレッスンでは レイヤーの「秩序正しい命名方法」と 「整理整頓」が重要ですよ とお話ししましたが このレッスンでは 実際にそれをする方法について 一手順ずつ お見せしていきたいと思います 今 ご覧いただいている画面では レイヤーパネルは右下に映っています ここに表示されていない方は メニューバーの「ウィンドウ」から 「レイヤー」を選択するか キーボードの F7 を押して レイヤーパネルを表示させてください 今のご説明ではレイヤーパネルの中を 見ていただきやすいように 一度外に出して 縦に伸ばしておきたいと思います 今「バックグラウンド」という 名前のレイヤーが1つあります こちらを開くと 中にたくさんの サブレイヤーが入っています しかし 描いたままの状態― 何も特に処理をしていないので 名前がデフォルトのままである― 「グループ」ですとか 「パス」のままになっています もし この状態のまま このファイルを他のデザイナーや エンジニアに渡してしまったら どこに何があるのか あまりにも理解しづらくて 確認するのに無駄な時間を 使ってしまいます 他の人と共同作業をする場合でも 自分一人での開発でも いつ誰が開いても理解しやすく 整頓されたレイヤー構造に しておくことが きちんとしたデザイナーの 最低限のマナーだと思って 実際に ではファイルを 整理していってみましょう まず一番後ろ側にある この灰色がかったグリーンの背景を 名前を変更してみます 一番下にあるこの「パス」の サブレイヤーですけれども クリックをして選択をすると 一番外側の枠と同じサイズの長方形です こちらの「パス」というところを ダブルクリックして “background"と 英語で入れておきます このサブレイヤーの名前は 日本語にしても構いませんけれども 後々 このドキュメントから 画像ファイルを書き出す時に レイヤー名をファイル名として 利用するエクステンションなども ありますので レイヤー名はできるだけ半角英数で 間にスペースを空けない状態 単語と単語の間をハイフンなどで つないだ状態でつけておいた方が 利用しやすいファイルになると思います ということで 今 「background」という名前を付けました 次は この放射線状の光の部分 こちらが今 下から二番目のグループに 入っていますので こちらの名前を変えたいと思います 「グループ」のところをダブルクリックして 英語ですけれども“rays-of-lights" と付けておきます 単語と単語の間を ハイフンでつないでいます このハイフンを入れておいた方が 後で書き出す時に便利な可能性があるので 念のため このようにしておきましょう では 次です 次は ロボットの部分に取り掛かります まず下から三番目のこのパスは ロボットの顔の抜けているところの 背景の白です そしてその上がロボットの顔 その上がロボットの胴体です この3つをまとめて ひとつのレイヤーに入れたいと思います では新規のレイヤーを作りましょう レイヤーパネルの一番下にある アイコンのうち 右から二番目 「新規レイヤーを作成」 こちらをクリックします 「レイヤー2」という名前になりますので ダブルクリックして “robot”にしておきます そして先程お見せした この下から三番目 四番目 五番目 こちらの3つを Shift キーを押しながら 選択してください ひとつずつ Shift キーを押しながら 選択して 3つのサブレイヤーを選びます これをこのまま ずるずるっと ドラッグしてきて 「robot」という名前のレイヤーに 重なったところで入れます 今一番手前にこの「robot」が 出てきてしまいましたけれども 後ほど レイヤーの重なり順を 整えますので 今はこのままにしておいてください この「表示・非表示」アイコンの 右側にある空白のところ こちらをクリックすると レイヤーにロックをかけることができます このロボットは触れなくなりますので このまま一度 非表示にしておきましょう 次は この下にある 雲の部分を レイヤー分けしたいと思います 雲の部分は 今 下から三番目にあるレイヤー 四番目 五番目 この3つです こちらをまとめたいと思います また新規レイヤーを作って 「レイヤー3」ができましたけれども これを一度 上に動かしておきたいと思います レイヤー3をつかんで 「robot」のレイヤーの上に 動かします そして「レイヤー3」をダブルクリックして “clouds” にしておきましょう 雲という意味ですね こちらのレイヤーに 三番目 四番目 五番目の サブレイヤーを Shift キーを押しながら 3つとも選んで ドラッグして「clouds」という 名前のレイヤーのところに持ってきます 先程と同じように この「clouds」レイヤーの中に 3つ入ってきました こちらをまたロックをかけて 非表示にしておきます では次は上の3つの このロゴマークの部分に 取り掛かりたいと思います ロゴマークですけれども 下から四番目のロゴマークのメインの枠 そしてこの薄く見える 中身を塗りつぶしているレイヤー それが下から三番目のこのグループです こちらとそのひとつ上の この「TOY COMPANY」という白い字 こちらの3つのグループに関して レイヤーをまた作りましょう 新規レイヤーを1つ作ります この「clouds」という名前の レイヤーの上に 新規レイヤーを入れたいので 「clouds」レイヤーをクリックして 選択した後に 「新規レイヤーを作成」 アイコンをクリックします そうすると 今 選択したレイヤーの上に 新しいレイヤーが作られます 新しくできた「レイヤー4」という レイヤーをダブルクリックして 名前を“logo”にします そして先程のこの3つのレイヤーを Shift キーを押しながら選択して 「logo」レイヤーの中に入れます 「logo」レイヤーの 表示・非表示をすると ひとまとまりになったことがわかります ロックを一度かけて 非表示にしておきます 次は下にあるボタン類に 取り掛かりたいと思います ボタン類を効率よく選択するために 先程名前を変えた「background」と 「rays-of-lights」 こちらをロックを かけておきたいと思います こうしておいてから この「サインイン」と書いてある ボタンの周りを囲むように 選択をします このボタンに関係する サブレイヤーをすべて選択しました 今動かしてしまいましたので Command+Z もしくは Ctrl+Z で元に戻します この3つが選択された状態ですが こちらを新しいレイヤーに まとめたいと思います 「新規レイヤーを作成」 「レイヤー5」こちらに ボタン“btn"という省略形にして “signin" と付けておきたいと思います 「btn」と「signin」の間は ハイフンでつないでおきます そしてこの3つ 今 選択しているものを Shift キーを押しながら 上から3つ選んでおきましょう この3つをドラッグ&ドロップして 「btn-signin」という レイヤーの中に入れます ロックをかけて非表示にします 残りの「ログイン」ボタン関係 こちらのサブレイヤーも すべて選んで 「新規レイヤーを作成」 「レイヤー6」をダブルクリックして “btn-login” と名前を付けます 今選んだ3つ こちらを レイヤーパネルの中でも Shift キーを押しながら選択して 「btn-login」 こちらのレイヤーの中に ドラッグ&ドロップします ロックをかけます 残ったのは「background」の レイヤーの中に この2つですね モスグリーンの背景と その上にある光 こちらが「background」の レイヤーの中に残りました それでは動かさないように ロックをかけて すべて表示にしておきましょう 今 私がレイヤーの順番を ちょっと間違えてしまったので 「btn-login」と「btn-signin」が 下に入ってしまっています 「clouds」というレイヤーよりも 下に入ってしまっていますので このボタンの2つのレイヤーを ドラッグして 一番上に持っていきます これで重なり順が 先程スタートの時と 同じ状態になりました もう一度レイヤーパネルの中を 見直してみますと 上から「btn-signin」 「btn-login」 「logo」 「clouds」 「robot」 「background」 というように種類ごとに きちんと分けて 名前がついて まとまっている状態になっています ということで ここまでレイヤーやサブレイヤーの 名前を変更したり まとめたりする方法について ご説明してきました もしかすると 自分一人での作業なので あまりレイヤーの 整理などしなくてもよいと お考えになる方もいるかもしれませんが ドキュメント作成後に しばらく経過してから開けてみると すっかり忘れてしまっていたり するものです いつでも必ずレイヤーの 整理をする習慣をつけておいてください

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

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

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

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

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

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