そんなことで悩んでた時、ある人にペンツールできれいな曲線を描くコツを教えてもらいました！記事タイトルには私流とはなっていますが、その人に教えてもらったので本当は私流じゃないです X( でも、それ以来、自分でもびっくりするくらいきれいな曲線が描けるようになりました！
まずいろんな本や Webサイトでも、きれいなパスを描けるようになるには訓練が必要で、おすすめされてる練習方法として、トレース（なぞる）が紹介されてますよね。私もまずは簡単な形、ハート、スペード、クラブで練習しました。
コツだけ伝えるのがなかなか難しいので、一連の流れの中にコツが散りばめられています。また、もっとこういう風にした方がいいよーというのがあったら教えてくれるとうれしいです！
ペンツールのコツ 目次
1. ベジェ曲線、パスって何？
ベジェ曲線やパスって、聞き慣れない人には何それ？ですよね。普通の感覚だと、Photoshop のブラシツールみたいに、マウスでドラッグしたところに線が引けると思っちゃいます。でもベジェ曲線、パスというのは、それとはまったく違った感覚です。言葉だと難しいので画像で説明しますね。
まず、ブラシで描いたハートとパスで描いたハート …。ブラシ 
だとマウスの軌跡がそのまま線になるので、へたっぴーな私は線がぶるぶる震えています X(
ブラシツールとペンツール
注意 – Photoshop にもペンツールはありますし、Illustrator にもブラシツールはあります！
それに対して、ペンツールで描いたハート 
は、曲線もきれいだし、震えてもいません！これがペンツール、ベジェ曲線の威力です！ではどうやって描いているのかというと、こんな風な構成になっています。
パスの構成図
言葉にしちゃうと、
アンカーポイントという点と点を、セグメント 
と呼ばれる線で結んでいます。アンカーポイントには 
ハンドル（ひげとも言うらしい …）がついていて（必ずではないですが …）、それを左右に振ると線が曲がります。
なのでマウスをドラッグして描くのではなくて、アンカー（いかり）ポイントをクリックして打っていき、点と点を結ぶ線を、ハンドル操作で曲げていくという … そうやって描かれた線をベジェ曲線と呼んで、アンカーとかハンドルとかも全部含めてパスって呼んでいます。
こうやって描く曲線はとてもきれいで、Illustrator ではイラストを描いたり、Photoshop では写真の切り抜きをしたりと、いろんなところで使うことが多いです。ここではアンカー、ハンドル、ベジェ、パスという言葉を覚えておきましょう。Photoshop でも Illustratorでも、パスはペンツールで描くことができます。
2. ペンツールでパスを描くための基本的な操作方法
まず文中に、いろいろなツールの名前が出てくるので、説明用に先に書いときますね。今は分からなくても大丈夫。後半でやりながら説明しますね！
2.1. ペンツール関連
1. ペンツール
まずはペンツール。今回の主役です。ツールバーからこのアイコンを探してクリックして使います。
またはショートカットキー P でいつでもペンツールになります。Penの P なので、簡単に覚えられますね！とってもよく使うショーットカットです。
2. アンカーポイントの追加ツール
パスの上にアンカーポイントを追加します。ペンツールに + のマークが目印です。ペンツールの時にパス上にマウスを持っていくと、勝手に切り替わります。
+ 
ショートカットはあまり使わないかもしれませんが、 shift + + キーです（Illustratorの場合です）。
3. アンカーポイントの削除ツール
すでに打ってあるアンカーポイントを削除します。ペンツールの状態でアンカーの上にマウスを持っていくと、勝手に切り替わります。
これもあんまり使わないかもしれないけれど、ショートカットキーは - キーです（Illustratorの場合）。
4. アンカーポイントの切り替えツール
まだペンツールをあんまり使ってない人は、アンカーポイントの切り替えって何？っていう感じだと思いますが、あとで詳しく説明しますね。今はアンカーポイントの切り替えという言葉だけ覚えておけばOKです！
+ 
ショートカットキーは shift + C です。
2.2. 選択ツール関連
選択ツールは大きく分けてふたつ、
ただの選択ツールと、
ダイレクト選択ツールです。その中でもよく使うのは白い矢印の方、ダイレクト選択ツールです。
5. ダイレクト選択ツール
これはアンカーポイントだけを選択したり、一部分のパスだけ選択したり、ハンドルを選択したりと、とってもよく使います。
ショーットカットは A です（Illustratorの場合）。またペンツール選択時には、 command キー（Windows は Ctrl キーかな？）を押してる間は選択ツールに切り替わります。
人それぞれやり方はあると思いますが、主にこの5つを使ってパスを描いていきます。
3. 実際にパスを描いてみよう
Illutrator、Photoshop では、若干ショートカットなどが違いますが、基本的なパスの作り方は同じです。以下の例は Illustrator で作っていますので、Photoshop で試す人はちょっと操作方法を変えてみてくださいね。
3.1. 直線を描いてみよう
まずは一番簡単な直線の書き方です。何も難しくありません。クリックでアンカーを打って、もう一カ所アンカーを打てば直線のできあがりです。この時のアンカーにはハンドルもありません。
3.2. 曲線を描いてみよう
今度は普通の曲線を描いてみましょう。さっきはクリックでアンカーを打ちましたが、曲線の場合はクリック + ドラッグします。するとアンカーポイントからにょきっとハンドルが2本出ると思います。このハンドルを操作して好きなように曲線を作ります。
そのためにはダイレクト選択ツール（白い矢印）を使ってハンドルを動かします。ダイレクト選択ツールはショートカット A キーですが、ペンツール時は command キーを押してる間は、ダイレクト選択ツール、または選択ツールになります。これは直前に使った方の選択ツールになるので、注意してくださいね。
3.3. 折り返し線を描いてみよう
線にはいろんな線がありますよね。直線と曲線だけでいいかもしれないですが、場合によっては折り返す線を描かなくちゃいけません。言葉だと難しいので画像を見てください。
カモメみたいに線が折り返されてますよね。こういう風にするにはアンカーポイントの切り替えツール（三角のやつ）を使って、ハンドルを下から上にドラッグします。アンカーポイント切り替えツールはショートカットキー shift + C ですが、ペンツールのときは optionキーを押してる間（Windows は Alt キー）は切り替えツールになります。
3.4. 直線 + 曲線を描いてみよう
今度は直線の後に曲線が続くパターンを描いてみましょう。直線を描くのはクリックするだけでした。でも続けて曲線を描く場合には、一回クリックした後でそのままドラッグします。すると片方にだけハンドルがにょきっとでます。
3.5. 曲線 + 直線を描いてみよう
今度はさっきの逆、曲線の後に直線を描く場合です。曲線を描いた後にはハンドルが両方にでちゃいますよね。その片一方だけ消すためには、次のアンカーを打つ前にさっき打ったアンカーを一回クリックします。すると片方のハンドルが消えるので、次のアンカーを打てば直線になります。
3.6. 直線 + 緩やかな曲線を描いてみよう
今までは直線と曲線の境目がはっきりしていました。今度は直線から自然で緩やかな曲線を描いてみましょう。ハンドルと直線を一直線にすると自然で緩やかに流れる曲線を描くことができます。
4. まずは簡単な図形からトレースしてみよう
Illustrator や Photoshop の色んな本や Webサイトを見ると、パスの一番最初の練習方法として、トレースがすすめられています。実際私も、はじめは簡単な形からトレースしてパスの練習をしました。よくやってたのがトランプのシンボルです。
トランプのシンボルは、ペンツールの一連の操作を覚えるのにはもってこいの形かもしれませんね！スペードやクラブの一番下を直線にしてしまえば、曲線と直線の組み合わせの練習もできます。
4.1. どこにアンカーを打てばいいの？
さぁ、いざハートをトレースしてみよう！って思って、ペンツールを選択して初心者の頃に思ったのは、「で、どこにアンカーを打てばいいの？」でした …。ハートの場合、ちょうど真ん中の上、または下が尖った部分があるので、一番始めにアンカーを打つのに迷うことはありません。でも 2番目のアンカーはどこに打てばいいのでしょう？特に考えもなくハートをトレースすると、こんな風になる人もいるかもしれません。
パスの書き方に、どれが正解というのはないかもしれないけれど、アンカーポイントが多いですよね。でも初心者の頃は、どこにアンカーを打っていいか分からない …。とりあえずアンカーを打って、アンカーとアンカーをつないで、なんとかトレースするって感じだったような気がします。つまり、アンカーで線を描くっていう感じだと思います。でもこれがきれいな曲線を描けない原因のひとつです。できるだけアンカーは少なくするのがきれいなパス、曲線を描くコツのひとつです。
4.2. 点と線の関係 … あくまでハンドルで描く
初心者の頃は、とにかくアンカーとアンカーをつなげるって感じでパスを描いてしまいがちです。点と点をつなぐっていうイメージが強いと思うんです。でもあくまでベジェ曲線はハンドルで描きます。ハンドルで曲線を描き、どうしても思うような曲線にならない（例えば途中で R が変わるとか）ときに、アンカーが必要になるんですよね。
そんな風に描けば、自然とアンカーを打つ数は減ってきて、きれいなパスを描けるようになってきます。あくまでハンドルでベジェ曲線を描く … ということを忘れないでください。
4.3. きれいなカーブに注目して、そこにはアンカーを打たない
例えばハートの中で美しいカーブってどこでしょう。ハートの場合は全部カーブなので、どこっていうこともないんですけど、美しいカーブほどアンカーを打たないで描いてみましょう。
一筆で描くのが理想ですけど、ハートはふたつの違う R の曲線でできてるので、一筆というわけにはいかないですね。でも美しいなーと思うカーブには、できるだけアンカーを打たずに、ハンドルを駆使して描こうとすればするほど、自然と打つべきアンカーの場所が決まってきます。
5. フォントのトレースに挑戦してみよう
簡単な図形でペンツールの操作感を覚えたら、こんどはフォントのトレースに挑戦してみましょう。できるだけ直線の少ないのを選んでみてくださいね。フォントは複雑な曲線が使われてるスクリプト（筆記体）の太いので練習するといいと思います。曲線の R が単純じゃなくて、きれいな曲線を描くいい練習になります。
今回は、Creampuff というフォントを使ってみます！
今回はこの中から「D」を選んでトレースしてみました。ハートみたいに尖った部分がなく、全部曲線でできてます。また美しい曲線を持っているので、そこはできる限りアンカーを打たないように心がけます。
5.1. 曲線ばかりで、どこからアンカーを打っていいか分からない
ハートのときは、一番最初にどこにアンカーを打てばいいのか一目瞭然でしたよね。でも今回の「D」みたいに全部曲線だと、どこからアンカーを打ち始めればいいのかわからないって思うかもしれません。でもやっぱり必ずアンカーを打たないといけない部分があるので、そこから打ち始めるといいかもしれませんね。そこはどこかというと、小さな R のところ …。ちょっと見にくいので拡大してみますね。
小さな R の部分
このようなパスの書き方は、Illustratorのツールボックスの角丸長方形ツールで描かれたバスがとても参考になります。下の画像は角丸長方形ツールで描いた角丸です。
角丸長方形ツールのパス
角丸の半径とハンドルの長さがいいヒントになると思います。
5.2. 曲線が歪んでしまう
初心者の頃には、誰もがこうなっちゃった経験があると思いますが、曲線がきれいなカーブを描かずに歪んでしまっています。ちょっと極端ですけど、歪んでいるのが分かると思います。
歪んだ曲線
でもどうして歪んじゃうんでしょう …。それはハンドルの長さや角度が適切じゃないからなんです。ちょっと下の画像を見てください。
ハンドルを延長した線から、もう片方のハンドルがはみ出してる
片一方のハンドルを延長した線から、もう片方のハンドルがはみ出してるのが分かると思います。こうなると曲線は歪みます。無理しちゃってる感じです。こうならないように、両方のハンドルの長さや向きを調整します。必要ならアンカーポイントの位置もずらします。
延長線からはみ出さないように！
上の画像のようにハンドルを延長した線から、どっちのハンドルもはみ出してない状態がいい感じです。もちろんこうなっていても曲線が歪んじゃう場合があります。その場合は、適切な位置からアンカーポイントがずれてる感じです。
S字カーブの場合は上の例には当てはまりませんが、普通のカーブはこれを注意するだけできれいな曲線を描けるようになります。
6. まとめ：きれいな曲線を書くためのコツ
パスの書き方には正解がないって教えられました。でもこういうコツを知っていれば、今よりもっときれいな曲線が描けるようになると思います。振り返ってまとめてみると、
- アンカーで描くのではなく、ハンドルで描く。
- アンカーポイントは少なくする。
- 美しいカーブに注目して少ないアンカーで描く。
- ハンドルを延長した線から、もう片方のハンドルがはみ出ないようにする。
私もまだまだペンツールを使いこなせてませんが、こればっかりは訓練だなーと思っています。毎日少しずつでも練習して、きれいな曲線を描けるようになりたいですね！また、こんな風にやるともっときれいに描けるよー！というコツがあったら、教えていただけるとうれしいです！
Comments
Thank you for the comment.