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

塗りと線を使って作業する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、描いたオブジェクトのパスに対して、塗りと線の機能を使って色をつけていくことについてお話しします。
講師:
07:00

字幕

ここまでのレッスンで 私たちは Adobe Illustrator での 色の扱いについて さまざまな角度から見てきました このレッスンでは 描いたオブジェクトのパスに対して 塗りと線の機能を使って 色をつけていくことについて 少しお話していきたいと思います いま開いているサンプルファイルは 「塗りと線.ai 」というファイルです このファイルを Illustrator で開いたら 「アートボード」のパネルを開いて チェックをしていきましょう このドキュメントの中には 2つのアートボードが用意されています 「アートボード2」の名前の脇を ダブルクリックすると アートボード2の方に移動してきます いま見えているのは このコースで後から利用する予定の ロゴの完成形です オレンジ色の正円と グレーの楕円が2つありますが これらのオブジェクトの色は 「塗りと線」の機能で コントロールされています グレーの楕円を 選択ツールで選択してみます この状態でツールパネルの下の 「塗りと線」のアイコンを見てみてください このオブジェクトにはグレーの線が 設定されていますけれども 塗りの情報は全くない状態になっています この赤い斜めの線が 色の情報が設定されてないよ  というサインです さて いま 線のアイコンは 塗りのアイコンの下に 隠れていますけれども 一度クリックすると手前に出てきます 塗りと線のアイコンは クリックするたびに 手前と奥に入れ替わります 手前に今出ている方がアクティブな状態 色を変更したりすることが できる状態になります では次に線の状態を もう少しコントロールするために 今度は「線」パネルをクリックして 開いてみましょう 線パネルはこの3本線の アイコンのパネルです 線パネル いま設定項目が たくさん表示されていますけれども 人によっては このように 線幅しか見えていない場合が あるかもしれません この場合は線パネルの右上の ドロップダウンメニューを開いて 「オプションを表示」 これを選ぶことで 様々な設定項目を見ることができます 線幅の左側の三角形 上下の三角形は クリックするごとに線の太さを 変更することができます もしくは右側のドロップダウンメニューで 予めいろいろな太さの線が 用意されていますので こちらを選んでもかまいません 今は8ポイントを選択しておきます また線の位置を変えることができます 線パネルの上から4行目の「線の位置」 今はパスの内側に線が付く状態に なっていますけれども デフォルトは線を中央にそろえる設定 ズームツールで拡大してみると パスを挟んで両側に 線が設定されている状態になります 線の位置を内側にすると パスの内側に線が付きます 外側に設定すると パスより外側に線が設定されます このレッスンでは 線を内側にそろえておきたいと思います そして手のひらツールをダブルクリックして 全体表示に戻します では線パネルをしまって 選択ツールに持ち替えます 今度はこの後ろのオレンジ色の正円について 見ていきましょう オレンジ色の正円をクリックすると 今度は先ほどとは違って 塗りには情報が付いていますけれども 線は指定されていないという状態です このように 線が設定されていない状態では 線パネルを開いても 全ての項目がグレーアウトしていて 何も設定できない状態になっています 塗りの色を変えたい場合は 塗りアイコンをダブルクリックして カラーピッカーから拾うこともできますし スウォッチを使って 色を変えることもできます さて ここまで見てきたところで もう一度アートボードのパネルを開きます そしてアートボード1を ダブルクリックしてみましょう アートボード1に移動してきましたけれども いま一見ここには何もないように見えます しかし選択ツールでこのように アートボードの中を横切ると 何かパスが下にあるのが見えてきます もしこれが見えない方は メニューバーの「表示」から 「スマートガイド」 こちらにチェックを付けてください スマートガイドが設定されている方は このように 選択ツールでパスの上を横切ると その下にあるパスが見えてきます ではここで 楕円に色をつけてみたいと思います 選択ツールでこの2つの クロスしている楕円だけを 選んでみます そして線パネルを手前に出してから スウォッチを使って グレーの色を指定してみましょう グレーの色が指定できましたので 今度は線パネル これで先ほどと同じように 8ポイントの太さにして 線の位置を内側に設定します このあとは 後ろの正円の色を設定しましょう 線パネルをしまって 正円 こちらの正円を選びます 塗りのアイコンをクリックして 手前に出した後で スウォッチからオレンジ色を選択します ではこの左右のロゴを見比べるために ズームツールを使って キーボードの Option キー もしくは Alt キーを押しながら 全体が見えるようにしてみます ご覧の通り左右を同じ設定に することができました ということで このレッスンでは Adobe Illustrator の塗りと線の機能で 色をコントロールする方法を練習しました 基本中の基本事項ですので よく覚えておいてください

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

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

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

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

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

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