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

シンプルな図形を描く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、すべての複雑な図形の基礎となるシンプルな図形を、簡単かつ正確に描いていく方法についてお話ししていきます。
講師:
10:14

字幕

このレッスンではすべての複雑な 図形の基礎となるシンプルな図形を 簡単かつ正確に描いて行く方法について お話ししていきます まず始めに作業をしやすくする ティップスをご紹介します 長方形ツール 楕円ツール 角丸長方形ツール等 こちらの基本的な図形のツールは ツールパネルの中の1つの場所に 格納されていますので 選択をし直す時はこのように押して 選択を変えていく必要があります この操作が少し不便ですので もっとツールにアクセスしやすくするために カスタムツールパネルというものを 作ってみましょう メニューバーの「ウインドウ」から「ツール」 そしてツールの中の 「新規ツールパネル」を選びます カスタムツールパネルには 名前をつける必要がありますので “基本図形”と 名前をつけてOKをします 空のカスタムツールパネルができました このカスタムツールパネルの中には ツールパネルの中からお好きな物を いくつでも好きな順番に入れておいて 保存しておくことができます ここでは長方形ツールと 角丸長方形ツール 楕円形ツール そして選択ツールを 入れておきたいと思います そしてわきの方に寄せておきます 次に複数の図形をすばやく 整列しながら描くために スマートガイドの機能をオンにしておきましょう メニューバーの「表示」から 「スマートガイド」に チェックが付いている状態にしてください チェックが付いている方は このままで結構です では準備ができましたので まずはカスタムツールパネルから 長方形ツールを選択して ドラッグではなくてクリックします もしドラッグしてしまうと なかなかこのように正確な数値を 描くことが難しい状態です たとえば今でしたら幅338.46 高さ127.69というように 中途半端な数字で描かれてしまいます 今 描いた物を消して 今度は長方形ツールで クリックをして描きます 幅の欄に半角英数で“700” 高さの欄に“200”と数値を入れます 単位のpxはIllustratorが 自動的に補完してくれますので 数字だけをいれれば結構です OKをクリックします このように指定した サイズの長方形が描かれました 変形パネルが自動的に アクティブになっていると思いますので 変形パネルのところを見ると きちんと幅 高さが指定した数値に なっていることが見えます もう一度 長方形ツールで 今度は先程 描いた長方形の ちょうど左下のあたりに マウスカーソルを合わせてください そうしますと左側の 辺に寄って来た時に 緑色のラインが出てくる所があります これがスマートガイドの機能で 辺を自動的にそろえて 描画してくれるというものです この緑の線が出ている状態でクリックをして 今度は幅340 高さは200のままで 長方形を1つ描いてみます 左側がそろった状態で描かれました では今度は選択ツールに持ち替えて この二番目に描いた長方形を複製してみます 選択ツールを持った状態から キーボードのオプション またはAltキーを押します マウスカーソルの形が黒と白の 双子の三角形に変わりました この状態はオブジェクトを コピーできるよ という印です これで右側に引っ張っていくと コピーされた長方形が移動してきます さらにここでキーボードの シフトキーを足しますと 水平方向に移動方向が 制限されて動いていきます そして少し右の方に動かしていくと 一番最初に描いた 700x200の長方形の右側の辺と 複製してきた長方形の右側の辺が そろう部分があります スマートガイドのグリーンの線が出てきて そろっていることが分かります ここまでできましたらマウスを放して その後にキーボードを放します この操作で700x200の長方形の 左にそろった340x200の長方形 右にそろった同じ大きさの 長方形ができてますので 計算をするとこの間が ちょうど20pxになっています こういった長方形を描くことができました では次に楕円形ツールに持ち替えて 画面の右上の方に行ってみます 右上の方に来ると一番最初に描いた 長方形の上の辺にそろった部分で スマートガイドが出てきます ここで一度クリックをして “200x200”という数値でOKを押してみます 上辺がちょうどそろった状態で 正円を描くことができました では今度 この正円に合わせて 角丸長方形を描いてみます 角丸長方形ツールに持ち替えて 正円の左側 このラインの所にスマートガイドの 機能を使って合わせて さらに この340x200の長方形の 上辺とも合う場所で クリックをします 幅を“200” 高さを“50” そして角丸の半径を 10pxと指定してみます OKを押すと正円と左側がそろっていて 下の長方形と上辺がそろっている状態の 角丸長方形が描けます 角丸長方形を描くにあたり もちろん角丸長方形ツールを 使ってもいいのですけれども たとえば最初に長方形ツールで描いた長方形を 後から角丸にしたくなるという ケースもありうると思います Illustrator CC以降ではそのような操作が 非常に簡単にできるようになりました 試しにやってみます 長方形ツールに持ち替えて 先程 描いた一番最後の図形の 左側にそろう所で 一度クリックしてみます 幅と高さは先程と同じ数値でOKをします ズームツールで少し拡大してみます そうしますと 上は角丸長方形 下は普通の長方形になっています 選択ツールに持ち替えた後 この普通の長方形を選んでみてください 角の内側に目玉のようなマークがついています これはIllustrator CCの途中から アップデートされた機能で ライブコーナーウィジェットといいます これをドラッグして角丸を作ることもできますが 正確な数値にならないので 変形パネルから数値を指定する ライブシェイプの機能を使ってみましょう ライブシェイプという名前は Illustrator CC 2014から 使われるようになりました 変形パネルの下の方に 0pxという入力欄が4つあります これが長方形の角を数値入力で 指定することができる欄です この4つの0pxという値は それぞれ長方形の 左上 右上 左下 右下の 数値を表しています 真ん中の鎖アイコンがへこんだ状態ですと 4つの数値が連動して規制されることになります 試しに“10px”と1つの欄に入力をすると 連動していますので すべて10pxの数値に変わります この鎖のアイコンを外すとそれぞれの角の角丸の数値を自由に変えることができます またこの10pxと一度指定した状態でも たとえば少し角丸を減らしたいなと言う時に 5pxですとか減らして 指定をし直すことも もしくは やはり角丸をやめて普通の 角が直角な長方形にしたい 戻したいとなった時にも 0pxに変えることで 元に戻すことができます ここでは10pxを 指定した状態にしておきましょう 手のひらツールをダブルクリックして アートボード全体表示に戻します ここまで このレッスンでは 正確かつシンプルな図形を 簡単に描く方法をご紹介しました この方法を覚えますとワイヤーフレームの作成が ぐっと楽になるかと思いますので 是非 練習してみてください

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

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

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

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

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

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