読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

描画

描画(描く)

基本的に、すべてを「ペンツール」で描きます。
いわゆる「鉛筆」などのメタファーではなく、力学の理論構造で線が描画されます。

ドラッグをして描く

  • 長方形も楕円形も手の軌跡は同じです。
クリックして描く

  • ドラッグしたときと同様、基準点から右下方向に形ができる。
描いたものをすべて選択する

  • Deleteキーで削除する。

ペンツールで線を描くということ

  • Illustrator」が描く線を「ベジェ曲線(Bezier curve)」と呼びます。
  • ピエール・E・ベジェ(Pierre E.Bezier)というフランスの研究者が考案。
  • クリックは座標点(アンカーポイント)をつなぐ。

   ※クリックされた位置を直線でつなぐようにプログラムされています。
   ※アンカー(anchor):錨(いかり), 力となるもの

  • 描かれたデータを「ベクトルデータ」と呼びます。
「ベクトル」の意味。
  1. 「ベクトル」とは、座標点に加わった「力の大きさと方向」です。
  2. 線が描かれる方向にマウスをドラッグする操作は、この「ベクトル」を作っています。
  3. ベクトルには「作用・反作用」と呼ばれる、同じ物体にはたらく「つり合いの関係」があります。

 《反作用は、同じ大きさで向きは反対、一直線上ではたらく》

【例】

1本の棒を曲げようとすれば、力を加えて曲げようとします。
Illustrator」で曲線を描くという操作は、この棒を曲げる行為にあたります。


パスの概念

パスとは

Illustratorで描かれたものは、すべて「パス」から成り立っています。
「パス」とは、2点間をつないだ線のことです。

アンカーポイントとセグメント

本来、2点間をつないだ線のことは「セグメント」と呼びます。
※いわゆる「ワンセグ」は、ワンセグメントのことです。


「パス」は描画された後の呼び方です。

  


オープンパス
  • 起点と終点が閉じられていない状態を「オープンパス」と呼びます。


塗りが設定されている場合、自動的に直線的に結ばれた面ができます。
   


クローズドパス
  • 起点が終点として閉じられた状態を「クローズドパス」と呼びます。


塗りが設定されていてもいなくても、線で結ばれた一筆書きの状態ができます。
   


直線を描く

ペンツール



ペンツールで直線を描く

クリックする度にその点と、前にクリックした点が直線で繋がるようにプログラムされています。

ペンツール

※塗りなし、線幅を若干太く


 

  1. 画面上の任意の位置にクリックします。
  2. 次の点を少し離れた位置にクリックします。
  3. 以上の繰り返しで、繋がった直線が描きあがります。

※[Shift]キーを押しながら描くと、水平・垂直・45°に制限される。

   


《重要なポイント》


描き終わるときには[Ctrl]キーを押しながら、マウスを選択ツールに変更し空白の位置をクリックする。


Macintoshは「コマンド+クリック」
※どのツールを選択しているときでも[Ctrl]キーを押すことにより
 一時的に「選択ツール」に持ちかえることができます。
 そのことにより、そのままペンツールで描き続けることができます。

直線の練習

以下の図のように、順にクリックしていく練習をしましょう。



曲線を描く

ペンツールで曲線を描く

ペンツールの操作の中でもっとも難しいと感じることが、この曲線を描くことです。


作業自体は、順序通りにドラッグをしていくだけなのですが、どの方向にどれだけドラッグすればよいかがわかりにくいのです。


   


テキストには「ドラッグ」と書いてありますが、正確には「プレス+ドラッグ」です。
マウスを押しながらドラッグすることが重要です。


プレス+ドラッグの意味

Illustratorは、直線でつなぐプログラムです。
曲線を描くという作業は曲線を描くことではなく、直線を曲げる作業のことです。
その曲げる作業が「プレス+ドラッグ」です。


直線を曲げる

直線を曲げるためには、アンカーポイントに力を加えます。
「力」は「ベクトル」と呼ばれ「大きさ」と「方向」の情報をもっています。


力の決め方


  • 方向線はベクトル
  • ベクトルには、力の大きさと方向がある
  • 方向は円の1点に接する接線
  • 大きさは4分の1の円を描く程度の大きさ


このように接線をつないでいくと考えると、どんな曲線も画けるようになります。

ペンツールで線を効率よく描く準備

環境設定を練習のための設定にする

グリッドを表示して練習をすると、初心者にとっては「アンカーポイント」を決めやすくなります。


 


「グリッド:10mm」「分割数:5」にすると、2mmずつのグリッドができます。
 


[表示]メニュー → [グリッドを表示]
 

 


カラーパレットの設定

カラーの設定

 

  • カラー:塗りを前面に選択しておきます。
  • カラーパレット 塗り:なし 線色:自由

 ※「塗り:なし」:赤い斜線の四角をクリックする。

 

線種の設定

 

  • ペンツールを選択しておきます。
  • 線幅:1mm (下絵に対して見やすい線幅を設定する)

基本練習

◆直線の練習
 


◆曲線の練習
 

 ※垂直・水平・45°の方向は、Shiftキーを押しながらクリックする。
 ※最後は空白部を「Ctrl+クリック」して描き終わる。


描画途中の選択解除の方法

  • returnキーを押す。
  • Ctrl+shift+Aを押す。
  • Ctrl+余白をクリックする。

直線と曲線を連続して描く

直線からスムーズにつながる曲線を描く
  1. 最初の点をクリックして、次の点をクリックする。
  2. 2点目から曲線のだしたいほうへ、マウスを押しながらドラッグする。そのとき直線の向かう方向にマウスを押しながらドラッグする。
  3. 3点目の位置を、マウスを押しながら曲線の流れる方向にドラッグする。
  4. 最後に[Ctrl]+クリックして描き終わる。
曲線からスムーズにつながる直線を描く
  1. 最初の点をマウスを押しながらドラッグする。
  2. 2点目から曲線のだしたいほうへ、マウスを押しながらドラッグする。
  3. 曲線の向かう方向に3点目の位置を決めてクリックする。
  4. 最後に[Ctrl]+クリックして描き終わる。
曲線からコーナーそして続く直線を描く
  1. 最初の点をマウスを押しながらドラッグする。
  2. 2点目から曲線のだしたいほうへ、マウスを押しながらドラッグする。
  3. 2点目のアンカーポイントをクリックする。
  4. 3点目の位置を、[Shift]+クリックする。
  5. 最後に[Ctrl]+クリックして描き終わる。
曲線からコーナーそして続く曲線を描く
  1. 最初の点をマウスを押しながらドラッグする。
  2. 2点目から曲線のだしたいほうへ、マウスを押しながらドラッグする。
  3. 2点目のアンカーポイントを[Alt]を押しながら曲線のだしたいほうへ、マウスを押しながらドラッグする。
  4. 曲線の向かう方向に3点目の位置を、マウスを押しながらドラッグする。
  5. 最後に[Ctrl]+クリックして描き終わる。
波線を描く
  1. 最初の点をマウスを押しながらドラッグする。
  2. 2点目から1点目の方向と平行に、マウスを押しながらドラッグする。
  3. 最後に[Ctrl]+クリックして描き終わる。


  • 直線も曲線も、線が描かれていく方向にクリック(又はドラッグ)します。
  • 曲線は「力の大きさ」が「方向線の長さ」「力の方向」が「方向線の向き」

  ※方向線の作用・反作用の一直線は、円上の1点の「接線」。

  • 曲線が途中から違う方向に続く曲線は、円が2つ重なるときにできる4つの交点の場合にのみ使用されます。

  ※[Alt]を押しながら方向線を違う方向にだしなおす操作。


広告を非表示にする