【WinOL】特価パソコンソフト情報局╮(╯_╰)╭

『Microsoft,Apple,Office,Windows,Adobe,Autodesk』格安ダウンロード版パソコンソフト速報

カテゴリ:イラストレーター > PS やAI のペンツール (Mac版)

Illustrator や Photoshop のペンツール。 初心者の頃は、きれいな曲線が描けなくて悩んだものでした。そんなペンツール、パスの初心者さんのための、ペンツールできれいなベジェ曲線を描くコツを、一連の操作方法とともにまとめてみました。 ペンツールに挫折しちゃった人も、もう一回チャレンジしてみるきっかけになればうれしいです! ペンツール初心者さんが対象の記事です。

ベジェ曲線、パスって何?
ペンツールでパスを描くための基本的な操作方法
実際にパスを描いてみよう
まずは簡単な図形からトレースしてみよう
フォントのトレースに挑戦してみよう
まとめ:きれいな曲線を書くためのコツ

パスの書き方には正解がないって教えられました。でもこういうコツを知っていれば、今よりもっときれいな曲線が描けるようになると思います。振り返ってまとめてみると、

  1. アンカーで描くのではなく、ハンドルで描く。
  2. アンカーポイントは少なくする。
  3. 美しいカーブに注目して少ないアンカーで描く。
  4. ハンドルを延長した線から、もう片方のハンドルがはみ出ないようにする。

私もまだまだペンツールを使いこなせてませんが、こればっかりは訓練だなーと思っています。毎日少しずつでも練習して、きれいな曲線を描けるようになりたいですね!また、こんな風にやるともっときれいに描けるよー!というコツがあったら、教えていただけるとうれしいです!

簡単な図形でペンツールの操作感を覚えたら、こんどはフォントのトレースに挑戦してみましょう。できるだけ直線の少ないのを選んでみてくださいね。フォントは複雑な曲線が使われてるスクリプト(筆記体)の太いので練習するといいと思います。曲線の R が単純じゃなくて、きれいな曲線を描くいい練習になります。

フォント Creampuff

今回は、Creampuff というフォントを使ってみます!


今回はこの中から「D」を選んでトレースしてみました。ハートみたいに尖った部分がなく、全部曲線でできてます。また美しい曲線を持っているので、そこはできる限りアンカーを打たないように心がけます。

Dをトレース

5.1. 曲線ばかりで、どこからアンカーを打っていいか分からない

ハートのときは、一番最初にどこにアンカーを打てばいいのか一目瞭然でしたよね。でも今回の「D」みたいに全部曲線だと、どこからアンカーを打ち始めればいいのかわからないって思うかもしれません。でもやっぱり必ずアンカーを打たないといけない部分があるので、そこから打ち始めるといいかもしれませんね。そこはどこかというと、小さな R のところ …。ちょっと見にくいので拡大してみますね。

小さな R の部分

拡大図

このようなパスの書き方は、Illustratorのツールボックスの角丸長方形ツールで描かれたバスがとても参考になります。下の画像は角丸長方形ツールで描いた角丸です。

角丸長方形ツールのパス

角丸長方形ツールで描いた曲線

角丸の半径とハンドルの長さがいいヒントになると思います。

5.2. 曲線が歪んでしまう

初心者の頃には、誰もがこうなっちゃった経験があると思いますが、曲線がきれいなカーブを描かずに歪んでしまっています。ちょっと極端ですけど、歪んでいるのが分かると思います。

歪んだ曲線

歪んだ曲線

でもどうして歪んじゃうんでしょう …。それはハンドルの長さや角度が適切じゃないからなんです。ちょっと下の画像を見てください。

ハンドルを延長した線から、もう片方のハンドルがはみ出してる

ハンドルを延長した線とハンドルがクロスしてる

片一方のハンドルを延長した線から、もう片方のハンドルがはみ出してるのが分かると思います。こうなると曲線は歪みます。無理しちゃってる感じです。こうならないように、両方のハンドルの長さや向きを調整します。必要ならアンカーポイントの位置もずらします。

延長線からはみ出さないように!

ハンドルを延長した線から、ハンドル自身がはみ出ないようにする

上の画像のようにハンドルを延長した線から、どっちのハンドルもはみ出してない状態がいい感じです。もちろんこうなっていても曲線が歪んじゃう場合があります。その場合は、適切な位置からアンカーポイントがずれてる感じです。


S字カーブの場合は上の例には当てはまりませんが、普通のカーブはこれを注意するだけできれいな曲線を描けるようになります。

Illustrator や Photoshop の色んな本や Webサイトを見ると、パスの一番最初の練習方法として、トレースがすすめられています。実際私も、はじめは簡単な形からトレースしてパスの練習をしました。よくやってたのがトランプのシンボルです。

トランプのシンボル

トランプのシンボルは、ペンツールの一連の操作を覚えるのにはもってこいの形かもしれませんね!スペードやクラブの一番下を直線にしてしまえば、曲線と直線の組み合わせの練習もできます。

4.1. どこにアンカーを打てばいいの?

さぁ、いざハートをトレースしてみよう!って思って、ペンツールを選択して初心者の頃に思ったのは、「で、どこにアンカーを打てばいいの?」でした …。ハートの場合、ちょうど真ん中の上、または下が尖った部分があるので、一番始めにアンカーを打つのに迷うことはありません。でも 2番目のアンカーはどこに打てばいいのでしょう?特に考えもなくハートをトレースすると、こんな風になる人もいるかもしれません。

ハートのアンカーポイント

パスの書き方に、どれが正解というのはないかもしれないけれど、アンカーポイントが多いですよね。でも初心者の頃は、どこにアンカーを打っていいか分からない …。とりあえずアンカーを打って、アンカーとアンカーをつないで、なんとかトレースするって感じだったような気がします。つまり、アンカーで線を描くっていう感じだと思います。でもこれがきれいな曲線を描けない原因のひとつです。できるだけアンカーは少なくするのがきれいなパス、曲線を描くコツのひとつです。

4.2. 点と線の関係 … あくまでハンドルで描く

初心者の頃は、とにかくアンカーとアンカーをつなげるって感じでパスを描いてしまいがちです。点と点をつなぐっていうイメージが強いと思うんです。でもあくまでベジェ曲線はハンドルで描きます。ハンドルで曲線を描き、どうしても思うような曲線にならない(例えば途中で R が変わるとか)ときに、アンカーが必要になるんですよね。


そんな風に描けば、自然とアンカーを打つ数は減ってきて、きれいなパスを描けるようになってきます。あくまでハンドルでベジェ曲線を描く … ということを忘れないでください。

4.3. きれいなカーブに注目して、そこにはアンカーを打たない

例えばハートの中で美しいカーブってどこでしょう。ハートの場合は全部カーブなので、どこっていうこともないんですけど、美しいカーブほどアンカーを打たないで描いてみましょう。

ハートのカーブ

一筆で描くのが理想ですけど、ハートはふたつの違う R の曲線でできてるので、一筆というわけにはいかないですね。でも美しいなーと思うカーブには、できるだけアンカーを打たずに、ハンドルを駆使して描こうとすればするほど、自然と打つべきアンカーの場所が決まってきます

アンカーポイントは4つでも描ける

Illutrator、Photoshop では、若干ショートカットなどが違いますが、基本的なパスの作り方は同じです。以下の例は Illustrator で作っていますので、Photoshop で試す人はちょっと操作方法を変えてみてくださいね。

3.1. 直線を描いてみよう

まずは一番簡単な直線の書き方です。何も難しくありません。クリックでアンカーを打って、もう一カ所アンカーを打てば直線のできあがりです。この時のアンカーにはハンドルもありません。

直線の描き方

3.2. 曲線を描いてみよう

今度は普通の曲線を描いてみましょう。さっきはクリックでアンカーを打ちましたが、曲線の場合はクリック + ドラッグします。するとアンカーポイントからにょきっとハンドルが2本出ると思います。このハンドルを操作して好きなように曲線を作ります。

曲線の描き方

そのためにはダイレクト選択ツール(白い矢印)を使ってハンドルを動かします。ダイレクト選択ツールはショートカット A キーですが、ペンツール時は command キーを押してる間は、ダイレクト選択ツール、または選択ツールになります。これは直前に使った方の選択ツールになるので、注意してくださいね。

3.3. 折り返し線を描いてみよう

線にはいろんな線がありますよね。直線と曲線だけでいいかもしれないですが、場合によっては折り返す線を描かなくちゃいけません。言葉だと難しいので画像を見てください。

折り返し線の描き方

カモメみたいに線が折り返されてますよね。こういう風にするにはアンカーポイントの切り替えツール(三角のやつ)を使って、ハンドルを下から上にドラッグします。アンカーポイント切り替えツールはショートカットキー shift + C ですが、ペンツールのときは optionキーを押してる間(Windows は Alt キー)は切り替えツールになります。

3.4. 直線 + 曲線を描いてみよう

今度は直線の後に曲線が続くパターンを描いてみましょう。直線を描くのはクリックするだけでした。でも続けて曲線を描く場合には、一回クリックした後でそのままドラッグします。すると片方にだけハンドルがにょきっとでます。

直線から曲線の描き方

3.5. 曲線 + 直線を描いてみよう

今度はさっきの逆、曲線の後に直線を描く場合です。曲線を描いた後にはハンドルが両方にでちゃいますよね。その片一方だけ消すためには、次のアンカーを打つ前にさっき打ったアンカーを一回クリックします。すると片方のハンドルが消えるので、次のアンカーを打てば直線になります。

曲線から直線の描き方

3.6. 直線 + 緩やかな曲線を描いてみよう

今までは直線と曲線の境目がはっきりしていました。今度は直線から自然で緩やかな曲線を描いてみましょう。ハンドルと直線を一直線にすると自然で緩やかに流れる曲線を描くことができます。

緩やかな曲線の描き方

このページのトップヘ