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

パスファインダーの機能を使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ここでは、シンプルな図形を組み合わせてより複雑な図形にしていく、パスファインダーの機能について解説します。またoptionキーを押しながら作業することによって、後から編集できる状態にすることも学びましょう。
講師:
07:39

字幕

このレッスンでは シンプルな図形を組み合わせて より複雑な図形を 作成していく為の方法として パスファインダーという機能を 利用する方法についてみていきましょう 今 サンプルとして“ロボットを描く.ai” というドキュメントを開いています このドキュメントで使うために まずはパスファインダーの パネルを開きましょう メニューバーの「ウィンドウ」から 「パスファインダー」を選択します パスファインダーのパネルが出てきましたら 上の濃いグレーのところを掴んで 少しずらしておいても構いません このパスファインダーパネルの中には いくつかのアイコンが 予め入っていますけれども 今はこの中で左上の2つ「合体」と 「全面オブジェクトで型抜き」を 使いたいと思います 「合体」の方は複数の図形を 足した形を作る 「全面オブジェクトで型抜き」は 2つの重なったオブジェクトがあったときに 前にあるオブジェクトで 後ろにあるオブジェクトを 型を抜くという機能です では早速 始めていきたいと思います 一番最初はこの首に3つの 角丸長方形がありますけれども こちらを合体したいと思います 選択ツールを使って首のパーツを選択します この時 普通にパスファインダーの 「合体」を押しても構いません このように3つの形が連なった 合体された形になりました ただし この状態ですと 後から編集したいときに もうこの3つの重なりを直すことができません そこで一度 Command+Z か Ctrl+Z で戻ってみまして この3つのオブジェクトを選んだあとに 「合体」のアイコンを押すとき option もしくは Alt キーを押しながら クリックしてみて下さい そうしますと選択をしていないときは この様に合体した形になりますけれども それぞれマウスカーソルを合わせてみると 内部のパスが残っていることがわかります このパスをダブルクリックして 「グループ編集モード」と呼ばれるモードに入り これをひとつひとつ 例えば このように上下に動かして 調整をすることができます グループ編集モードから抜けたい場合は 何もないところをダブルクリックします 今 ご紹介したように パスファインダーのアイコンを使うときは option を押しながらクリックすることで 後から編集できる状態で 合体や型抜きができるということを 覚えておいて下さい では次に口と この口の部分と 輪郭の部分を使って 全面オブジェクトで型抜きを したいと思います 選択ツールで口と輪郭の長方形を選んで 全面オブジェクトで型抜きをする際は Alt もしくは option キーを 押しながら実行します 今 型抜きをしたことで レイヤーの重なり順が 変わってしまいました これを変更するためには 「レイヤーパネル」を開いて 縦に伸ばしておきます そして今 この青いマークが付いている この複合パスが型抜きをした シェイプですけれども これを後ろの方に動かすことで たくさんの図形の中で一番後ろに 持って行くことができます レイヤーパネルの中の重なり順が下である程 作業領域の中での重なり順が奥になる という関係性になっています では この顔と口 型抜きが終了しましたので 次はこの頭のアンテナと耳 Shift キーを押しながら 耳のパーツ それから今 型抜きをした輪郭 こちらを1つのオブジェクトに 合体してみたいと思います option キーもしくは Alt キーを 押しながら合体をします レイヤーの重なり順が手前の方に 動いてしまいましたので こちらを一番下に持っていきます 何もない所をクリックして 一度選択を解除すると アンテナ 耳 輪郭の部分が 合体した状態になっていますけれども マウスカーソルを重ねると まだそれぞれのパーツのパスが 生きていることがわかります これで少し 例えばこのアンテナの根本の 丸を動かしたいなというような 調整をすることができます 調整をし終わったら 何もない所をダブルクリックして グループ編集モードを抜けることができます では最後に目の部分を 全面オブジェクトで型抜き してみたいと思います 外側の大きな丸をクリックして Shift キーを押しながら 内側の小さい丸も同時に選択します option キーを押しながら 全面オブジェクトで型抜きします 反対側も同じようにします 今 大きい丸を小さい丸で 型抜きをしましたので リングの状態でオブジェクトが 残っていることになります 実際に色を付けて試してみましょう レイヤーパネルは今 使いませんので ワークスペースをリセットして 元に戻しておきます ではロボットの胴体から 色を付けたいと思います 胴体を選択して塗りのところに オレンジ色を付けます 線はなしの状態にします 首 首は3つのオブジェクトが 合体した状態になっています 線をなくして塗りを スウォッチからグレーにします 次にこのアンテナと輪郭の部分です どこでもいいので合体したオブジェクトの中を クリックして選んだ後に 線をなくして塗りを 薄いグレーにしたいと思います スウォッチから薄いグレーを選択します 一度選択を解除します 最後にこの目のリングの部分です リングになっている所をクリックして 線はなし 塗りは濃いグレー 反対側も同様にします 線はなし 塗りをスウォッチから 濃いグレーにしました いかがでしょう? このようにシンプルな形を いくつか組み合わせていくことによって どんどん複雑な図形を作っていくことができます さらに option を押しながら パスファインダーを使うということを 覚えていただくと 後から再編集が可能な形で 図形を合体したり 型抜きしたりすることができます あなたのアイディア次第で どんどん手の込んだイラスト グラフィックを描いていただければと思います

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

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

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

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

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

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