Webデザインを学ぶなら「カルチャーアカデミア広島」カルアカブログアクセスお問い合わせお知らせMENUCategoryイラストレーターカルアカブログペンツールでベジェ曲線を描くコツはアンカーポイントの打ち方にあり!2016.07.14こんにちは、デザイナーのTantanです。ホームページ制作のために、ロゴやイラストを自分で作れたらいいですよね。IllustratorやPhotoshopの初心者の方は「ベジェ曲線」でつまづきがちではないでしょうか。イラレでイラストを描こうとして、いざペンツールを持って”ぐりっ”と描くと。「イラストレーターっていうくせに全然イラスト描けんじゃないかー!」と投げ出してしまいたくなります。ベジェ曲線が最適なんです!フリーハンドで描かれたちょっと歪んだ社名ロゴとか、嫌ですよね!「ベジェ曲線はひたすらトレースやって慣れればいい」というのはよく言われる練習方法ですが、その前にちょっとしたコツを知っておけば楽に上達できると思います。アンカーポイントの打ち方さて、アンカーポイントについて問題です。(「アンカーポイント」という言葉がわからない初心者の方は、この先で説明しますので先に進んでください。)Q:下のようなカーブを描くとしたらどのようにアンカーポイントを打ちますか。アンカーポイントを何箇所打って、ハンドルの長さはどうなるでしょう。このようにイメージしたでしょうか。確かにこれでもできます。前者はアンカーポイントが3つ、後者は2つで構成されています。シンプルなカーブは、アンカーポイントが少ないほうがコントロールしやすいのでおすすめです。これがひとつめのコツです。この他にもいくつかコツがあるのですが、その前にまず基本から。※ショートカットの表記はMac用で記載しています。Winの方は、適宜脳内変換でご対応ください。英数入力モードにして「P」キーを押すとペンツールになります。クリックすると点が現れます。これがアンカーポイントです。(アンカーとは、船のイカリのことです。この場所で線を縫い留めておく、というイメージです。)位置をずらしてもう一回クリックすると、2点の間に直線が引けます。「shift」を押しながらクリックすると、垂直・水平・45度の線が引けます。2.ドラッグで曲線ドラッグすると、前後にニュッとでてくるのがハンドルです。ハンドルが始点と終点の両側から支えることでカーブが形作られます。接線ってわかりますかね。わからない人は無理に理解しなくて大丈夫です。接線について一応余談として説明すると、カーブに接する線のことです。接していて、交わらない線です。曲線の一点を通る交わらない線、これがハンドルの角度のイメージです。描きたいカーブをイメージして、どっちにも交わらない角度を意識してドラッグするといいと思います。カーブの強さについては、ちょっと角丸長方形のハンドルを見てみましょう。このぐらいの長さのハンドルで両側から90度にひっぱることで、きれいな角丸ができるんだなーと覚えておくといいと思います。ハンドルの角度と長さの感覚は、こちらの記事でもご紹介しています。始点に戻ればパスを閉じることができますが、パスを閉じないでオープンパスのまま終了するには、いくつかやり方があります。便利なショートカットパスを描くときは、パスツールを持ったままショートカットを駆使すると便利です。shiftで水平垂直optionでアンカーポイントツールにして直線曲線をコントロールcommandで一時的にダイレクト選択ツールにしてハンドルやアンカーポイントの微調整command+optionでグループ選択ツールにしてパス全体を選択(command+shift+option押せば水平垂直移動コピーもできます。そこまでやると指が大変です。「A」キーを押していったんダイレクト選択ツールに持ち替えたほうがいいかもしれません)アンカーポイントの打ちどころ間隔の見定め唐突ですが、問題です。Q:円はアンカーポイントいくつで描きますか円ツールで描くと4つですね。実は、3つでも描けます。言いたいところですが、微妙に描けません。このことから、曲線をコントールしやすいのは120°くらいが妥当と思われます。180°になると、もう一個アンカーポイントを増やしたほうがいいでしょう。「120°を超えるヘアピンカーブにはアンカーポイントを追加。」これがふたつめのコツです。角度の説明のために3点でも描けると言いましたが、普段はそんなことする必要ないのでどうぞ円は円ツールで描いてください。SVG形式などでファイルサイズを気にするようなイラストでは、2点で円を表現することもあるようです。正円でなくなってもアンカーポイントを減らすのを優先する特殊な場合ですね。場所の見定めではこのような図形、アンカーポイントをどう打ちましょう。角丸四角形に似た角丸三角形なので、わかりやすいと思います。アンカーポイントの打ちどころは、「形の変わり目」です。直線から曲線に変わるところが変わり目です。角が取れた下のような形はどうでしょう。河原の石ころみたいです。さっきの角丸三角形と同じで大丈夫です。ゆるいカーブときついカーブの変わり目を見分けましょう。「形の変わり目」がつかめそうですか。応用すれば色々な形に対して最適な位置にアンカーポイントが打てるようになるはずです。ピンクで示したような、形が大きく変わるカーブの始点と終点にアンカーポイントを置きましょう。「ゆるいカーブときついカーブの変わり目にアンカーポイントを打つ」これが三つ目のコツです。思った通りの形を描くには、大体形をとったあとに微調整して決めていきます。最初はざっくり→大きく修正→細かく修正の流れをたどります。パスを整えていく過程を動画にしてみました。よかったらご覧ください。描く形をイメージしながらペンツールでアンカーポイントを置いていきます。形のイメージができないときは、一度リアルにそこらへんの裏紙にボールペンで描いてみるといいと思います。スキャンしてトレースまでしなくても、ただ描いてみるだけでかなり楽になります。描くと、こんなふうに歪んでいます。達人なら一発で決めるのかもしれませんが、普通は無理です。そんなものなので大丈夫です。大きく修正アンカーポイントを移動したり回転したりして、全体のフォルムを整えます。アンカーポイントをまとめていくつか選択する→矢印キーで移動または回転ツールで回転。全体のバランスが大事なので、頭を直したらしっぽを直して、首をやってまた頭に戻って、というように一箇所に集中せず全体を少しずつ固めていく感じです。(車のタイヤ修理みたいと言われました。ペーパードライバーにはピンときませんが、対角線ごとに締めるんだそうです。)細かく修正フォルムが決まったら、細かい歪みを直します。かわいくなーれ、かわいくなーれ、と念じながらポチポチ細かい作業です。(この時は、「表示」メニューの「グリッドにスナップ」「ポイントにスナップ」のチェックを外しておくと、イラっとしません)はじめは不安定でつかみ所のなかった形が、手を加えるごとに安定していく過程がおわかりいただけたでしょうか。まとめカーブは始点ドラッグ+終点ドラッグで描く180°近いヘアピンカーブにはアンカーポイントを追加ゆるいカーブときついカーブの変わり目にアンカーポイントを打つ最初はざっくり→大きく修正→細かく修正いかがでしょうか、ぜひベジェ曲線と仲良くなってロゴやイラストを作ってみてください。