ブログ

ペンツールでベジェ曲線を描くコツはアンカーポイントの打ち方にあり!

blog image-illustrator-pentool

こんにちは、デザイナーのTantanです。
ホームページ制作のために、ロゴやイラストを自分で作れたらいいですよね。でもIllustratorやPhotoshopの初心者の方は「ベジェ曲線」でつまづきがちではないでしょうか。

イラレでイラストを描こうとして、いざペンツールを持って”ぐりっ”と描くと。。。

bezier-curve_01
こんな謎のグニャグニャができて、
なんじゃこりゃー!」
「全然思った通りに描けん!何がペンツールじゃ!こんなのペンじゃない!!」
「イラストレーターっていうくせに全然イラスト描けんじゃないかー!」
と投げ出してしまいたくなります。

でも待って!嫌いにならないで!
商用ロゴや最近流行りのフラットデザインアイコンを描くには、 やっぱりベジェ曲線が最適なんです!
フリーハンドで描かれたちょっと歪んだ社名ロゴとか、嫌ですよね!

「ベジェ曲線はひたすらトレースやって慣れればいい」というのはよく言われる練習方法ですが、
その前にちょっとしたコツを知っておけば楽に上達できると思います。

アンカーポイントの打ち方

さて、アンカーポイントについて問題です。
(「アンカーポイント」という言葉がわからない初心者の方は、この先で説明しますので先に進んでください。)

Q:下のようなカーブを描くとしたらどのようにアンカーポイントを打ちますか。 bezier-curve_02

アンカーポイントを何箇所打って、ハンドルの長さはどうなるでしょう。

bezier-curve_03 
このようにイメージしたでしょうか。
確かにこれでもできます。でも次を見てください。

bezier-curve_04

前者はアンカーポイントが3つ、後者は2つで構成されています。
シンプルなカーブは、アンカーポイントが少ないほうがコントロールしやすいのでおすすめです。
「カーブは始点ドラッグ+終点ドラッグ!」 これがひとつめのコツです。

この他にもいくつかコツがあるのですが、その前にまず基本から。

基本

※ショートカットの表記はMac用で記載しています。Winの方は、適宜脳内変換でご対応ください。

1.クリックで直線

英数入力モードにして「P」キーを押すとペンツールになります。

クリックすると点が現れます。これがアンカーポイントです。
(アンカーとは、船のイカリのことです。この場所で線を縫い留めておく、というイメージです。)

位置をずらしてもう一回クリックすると、2点の間に直線が引けます。

「shift」を押しながらクリックすると、垂直・水平・45度の線が引けます。
bezier-curve_05

2.ドラッグで曲線

ドラッグすると、前後にニュッとでてくるのがハンドルです。 bezier-curve_06
ハンドルが始点と終点の両側から支えることでカーブが形作られます。

  • ハンドルの向き:カーブの方向を決定(カーブの接線になる)
  • ハンドルの長さ:カーブの強さを決定

接線ってわかりますかね。 数学とか得意な人にはイメージしやすい言葉だと思うので「接線」という言葉を使っていますが、 わからない人は無理に理解しなくて大丈夫です。

接線について

一応余談として説明すると、カーブに接する線のことです。接していて、交わらない線です。 bezier-curve_07

例えば、この赤点を通る線を引くと、

bezier-curve_08 曲線の一点を通る交わらない線、これがハンドルの角度のイメージです。描きたいカーブをイメージして、どっちにも交わらない角度を意識してドラッグするといいと思います。

カーブの強さについては、ちょっと角丸長方形のハンドルを見てみましょう。

bezier-curve_14
このぐらいの長さのハンドルで両側から90度にひっぱることで、きれいな角丸ができるんだなーと覚えておくといいと思います。
ハンドルの角度と長さの感覚は、こちらの記事でもご紹介しています。
bezier-curve_evecatch
ベジェ曲線とは 初心者にもわかりすいよう下敷きに例えてみた

3.曲線や直線の切換え

クリック+ドラッグで直線からの曲線

bezier-curve_09

ドラッグ+クリックで曲線からの直線

bezier-curve_10

オプションを押して曲線の切り返し

bezier-curve_11

アンカーポイントツールの使い方

bezier-curve_12bezier-curve_13

4.パスの終了

始点に戻ればパスを閉じることができますが、パスを閉じないでオープンパスのまま終了するには、いくつかやり方があります。

  • commandで選択ツールに持ち替えてクリック
  • command+shift+Aで全選択解除
  • escで描画解除

便利なショートカット

パスを描くときは、パスツールを持ったままショートカットを駆使すると便利です。

  • shiftで水平垂直
  • optionでアンカーポイントツールにして直線曲線をコントロール
  • commandで一時的にダイレクト選択ツールにしてハンドルやアンカーポイントの微調整
  • command+optionでグループ選択ツールにしてパス全体を選択

(command+shift+option押せば水平垂直移動コピーもできます。でもそこまでやると指が大変です。さすがに「A」キーを押していったんダイレクト選択ツールに持ち替えたほうがいいかもしれません)

アンカーポイントの打ちどころ

間隔の見定め

唐突ですが、問題です。

Q:円はアンカーポイントいくつで描きますか

円ツールで描くと4つですね。
bezier-curve_28
実は、3つでも描けます。
bezier-curve_29

実は、2つでも。。。と言いたいところですが、微妙に描けません。 bezier-curve_15 
このことから、曲線をコントールしやすいのは120°くらいが妥当と思われます。180°になると、もう一個アンカーポイントを増やしたほうがいいでしょう。 bezier-curve_16 
「120°を超えるヘアピンカーブにはアンカーポイントを追加。」
これがふたつめのコツです。

角度の説明のために3点でも描けると言いましたが、普段はそんなことする必要ないのでどうぞ円は円ツールで描いてください。SVG形式などでファイルサイズを気にするようなイラストでは、2点で円を表現することもあるようです。正円でなくなってもアンカーポイントを減らすのを優先する特殊な場合ですね。

場所の見定め

ではこのような図形、アンカーポイントをどう打ちましょう。 角丸四角形に似た角丸三角形なので、わかりやすいと思います。
bezier-curve_17
こんな感じですね。
bezier-curve_18
アンカーポイントの打ちどころは、「形の変わり目」です。直線から曲線に変わるところが変わり目です。 bezier-curve_19 
では、さらに角が取れた下のような形はどうでしょう。 河原の石ころみたいです。 bezier-curve_22 
さっきの角丸三角形と同じで大丈夫です。
bezier-curve_23
ゆるいカーブときついカーブの変わり目を見分けましょう。 bezier-curve_24 
「形の変わり目」がつかめそうですか。 応用すれば色々な形に対して最適な位置にアンカーポイントが打てるようになるはずです。 bezier-curve_20 
ピンクで示したような、形が大きく変わるカーブの始点と終点にアンカーポイントを置きましょう。 「ゆるいカーブときついカーブの変わり目にアンカーポイントを打つ」これが三つ目のコツです。

ゆがみの調整

思った通りの形を描くには、大体形をとったあとに微調整して決めていきます。
最初はざっくり→大きく修正→細かく修正の流れをたどります。

パスを整えていく過程を動画にしてみました。よかったらご覧ください。

ざっくり描く

形をイメージしながらペンツールでアンカーポイントを置いていきます。
形のイメージができないときは、一度リアルにそこらへんの裏紙にボールペンで描いてみるといいと思います。
スキャンしてトレースまでしなくても、ただ描いてみるだけでかなり楽になります。

ざっくり描くと、こんなふうに歪んでいます。よほどの達人なら一発で決めるのかもしれませんが、普通は無理です。そんなものなので大丈夫です。 bezier-curve_21

大きく修正

アンカーポイントを移動したり回転したりして、全体のフォルムを整えます。
アンカーポイントをまとめていくつか選択する→矢印キーで移動または回転ツールで回転。

全体のバランスが大事なので、頭を直したらしっぽを直して、首をやってまた頭に戻って、というように一箇所に集中せず全体を少しずつ固めていく感じです。(車のタイヤ修理みたいと言われました。ペーパードライバーにはピンときませんが、対角線ごとに締めるんだそうです。わかりますか。) bezier-curve_25

細かく修正

フォルムが決まったら、細かい歪みを直します。
かわいくなーれ、かわいくなーれ、と念じながらポチポチ細かい作業です。
(この時は、「表示」メニューの「グリッドにスナップ」「ポイントにスナップ」のチェックを外しておくと、イラっとしません)
bezier-curve_26
はじめは不安定でつかみ所のなかった形が、手を加えるごとに安定していく過程がおわかりいただけたでしょうか。

まとめ

  • カーブは始点ドラッグ+終点ドラッグで描く
  • 180°近いヘアピンカーブにはアンカーポイントを追加
  • ゆるいカーブときついカーブの変わり目にアンカーポイントを打つ
  • 最初はざっくり→大きく修正→細かく修正

いかがでしょうか、ぜひベジェ曲線と仲良くなってロゴやイラストを作ってみてください。

関連記事

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. blog_twitter エム・フィールド広島オフィスのランチタイム
  2. blog_twitter 東京と地方はどっちが仕事しやすい?
  3. blog_gif-01 トップページのカープ優勝バージョンで紙吹雪とともに降ってきたモノ…
  4. color-code_play02 RGBを脳内調合して札を取れ!「COLOR CODEかるた」で遊…
  5. IMG_0673 今年はきたきたにし(北北西) 恵方巻き食べました
  6. blog_twitter エム・フィールド広島オフィスのオンオフ
  7. magazine2-50 PHP Business 「THE21」3月号に掲載されました!…
  8. news_study 第94回「WEB TOUCH MEETING」に登壇予定です

最近の記事

  1. IMG_1781
  2. Hirofuro-logo-8
  3. eyecatch7-1
  4. SEO-eyecatch
  5. wtm100
PAGE TOP