たまに、素材は Illustrator で作っているんですか？ という質問を頂きますが、素材は Photoshop や GIMP で作成しています。なぜ Illustrator だと聞かれるのかと思っていたら、どうも皆さんベジェ曲線を使っていないようなんですね。ベジェ曲線はイラストレーターの専売特許ではなく、Photoshop や GIMP でも使えます。しかも、パソコンで綺麗な自由曲線を描くのに一番いい方法だと思うので、使わない手はないでしょう。
ネットサーフィンしていても、ベジェ曲線の使い方を教えているページってほとんどないことに気が付いたので、ここではベジェ曲線の使い方を簡単に説明していきたいと思います。 Photoshop のテクニック集なんかはたくさんあるので、ここで説明はしません。しかも、他のページのほうがレベル高いですから。
これから説明していくのに用語を知らないと難しいかもしれないので、解説しておきます。ベジェ曲線は Photoshop ではパスと呼ばれ、アンカーポイントというものと、それを結ぶセグメントと呼ばれるもので出来ています。そしてその曲線を自由に変化できるようにハンドルと呼ばれるものがあります。今出てきた用語は重要ですので順番に説明していきます。
アンカーポイントは図を見てもらうと分かりますが、セグメントと呼ばれる線の両端にできる正方形の点のことをいいます。つまり、アンカーポイントは、ベジェ曲線がどの位置を通っていくのかを示しているわけです。正確には、コーナーポイントやスムーズポイントと呼ばれるものもあるのですが、ここでは分かりやすく説明するために、アンカーポイントで統一します。
セグメントは、2つの間のアンカーポイントの間に引かれる線のことをいいます。セグメントはアンカーポイントなどを直線で結ぶだけではなく、下で説明しているハンドルを使うことによって自由に曲げることが出来ます。セグメントがベジェ曲線の実際の線になります。
真ん中のアンカーポイントから先端が丸い線が延びていますよね。これをハンドルといいます。これを動かすことによって自由にセグメントを曲げることができるようになります。美しいベジェ曲線を描くには、ハンドルを理解しないといけません。
上の例は簡単な線ですが、ベジェ曲線を使う場合は、上で説明した３つを組み合わせて複雑な線を描いていくことになります。
面倒な用語の解説はさっさと切り上げて、実際にベジェ曲線を描いてみましょう。まず、ツールパレットからペンツールを選択します。ペンツールは右の図の丸で囲まれている部分です。
次に画面の好きなところ2箇所をクリックしてみてください。クリックしたところ2箇所にアンカーポイントが表示され、それを結ぶ直線（セグメント）が表示されたと思います。このセグメントがベジェ曲線の実線になります。そのままどんどん画面をクリックしていくと、そのたび直線が一筆書きのように描かれていくはずです。
大体こんな感じになります。以上、ベジェ曲線での直線の描き方でした。
今度はベジェ曲線での曲線の書き方を説明します。直線を引いたときは、線の始まりと終わりの部分をクリックしましたが、ドラッグで指定することで曲線を書くことが出来ます。
まず、線を始めたい所でクリックではなくドラッグします。するとアンカーポイントからハンドルが伸びてくると思います。とりあえず、適当なところでドラッグを離しましょう。次に線の終わりの部分で同じくドラッグします。ここでもハンドルが出てきますので適当なところで離してください。
多分、自分が引きたい線とは違う曲線になったと思います。これを自分の好きなように直してみましょう。この作業がベジェ曲線の基本になると思います。
ツールパレットのペンツールの場所でドラッグしてみてください。横に何種類かのアイコンが出てきたと思います。その中から、右の図にあるようなやつを選んでください。これは、選択ツールと呼ばれるもので、アンカーポイントやハンドルを動かすことが出来ます。
早速動かしてみましょう。ハンドルの丸い部分や、アンカーポイントをいろいろ動かしてみてください。しばらく動かしてみるとどんな風にベジェ曲線が変わるかが分かってくると思います。
慣れてくれば、円を描いたり、もっと複雑なものもかけるようになると思いますよ。左の図では、円を描いてみました。
まずはベジェ曲線で円を描くことから始めてみてください。
どうでしょう。自由にベジェ曲線が描けるようになったでしょうか。きっと色々描いてみようとして、「どうやって線を終わらせればいいんだろう」と困ったと思います。どんどん一筆書きのように繋がっていくために、そのままではパスを終わらせることが出来ません。
パスを終わらせるには、パス以外のところで Ctrl キーを押しながらクリックします。どうですか？ これでちゃんとパスを区切れるようになったと思います。
直線として描いたけど、ここは曲線にしたほうがいいという場合があったりしますが、ベジェ曲線の場合は、簡単に変更できます。
左の図では、直線だけの組み合わせで描いています。この真ん中の部分を曲線に直したいとします。その時はペンツールを使って、アンカーポイントでCtrlキーを押しながらドラッグします。ハンドルが出てくるので好きなところでドラッグを離してください。
多分、次のような感じになったと思います。
ベジェ曲線を自由に操れないという人は、はじめに直線を描いてから、曲線に変更するというやり方をすると、簡単かもしれませんね。実際、私もよく使ってます。
また、曲線を直線に直すのも簡単に出来ます。今、曲線になっているセグメントのアンカーポイントで、もう一度 Ctrl キーを押しながらクリックしてみてください。これで、直線に戻ったと思います。
色々描いていくと、後から修正したいと思うことも多いはずです。ここにアンカーポイントを入れたい、このアンカーポイントはいらない、ということもあると思います。これも簡単に修正することが出来ます。この簡単さが、ベジェ曲線を便利にしています。
まず、例として四角を描いてみます。このうち1つのアンカーポイントがいらない場合は、「ペンツール」でいらないアンカーポイントをクリックすると、そのアンカーポイントが消えて、前後のアンカーポイントを繋いだセグメントが表示されます。
こんな感じになると思います。
また、アンカーポイントを追加したい場合も簡単です。同じく「ペンツール」でセグメントの追加したい部分をクリックするだけです。
左の図は、右側のセグメントでアンカーポイントを追加して、選択ツールでハンドルを動かしたものです。
これを工夫すれば、ベジェ曲線でいろいろな形が作れるようになりますね。
ベジェ曲線を使って、綺麗な線を描くときにはできるだけ、アンカーポイントを少なくすることが大事になります。例えば左の例では、３箇所にポイントがあるだけです。
わざとアンカーポイントを多くしてますが、次が悪い例です。
かなり根性を入れない限りは綺麗なベジェ曲線は引けないはずです。できる限り少ないアンカーポイントで線を引くことを心がけましょう。
アンカーポイントを少なくするのは結構難しいのですが、ちょっとしたテクニックがあります。曲線から直線に繋いだり、曲線と曲線の間にとがった部分が欲しい場合なんかには、有効です。頑張ってアンカーポイントを増やして描くよりも、はるかに綺麗なベジェ曲線を引くことが出来ます。
左の例を見てみると、綺麗に曲線から直線に繋がっています。よく観察すると分かりますが、丸で囲んだ部分にハンドルがありません。これによって、直線のほうにハンドルの影響を受けることがないようにしています。
これはどうやっているかというと、丸で囲んだアンカーポイントを Ctrl キーを押しながらクリックするだけです。こうするとその部分にハンドルがつきません。こうすることで、直線と曲線を楽に繋いでいくことが出来ますよ。
また、上のテクニックを利用すると、曲線と曲線の間にとがった部分なんかを入れることも出来ます。上の例とやっていることはほとんど同じです。丸で囲んだアンカーポイントで Ctrl キーを押しながらクリックします。そして最後のアンカーポイントでドラッグしているだけです。こういう線を引くことは結構多いのですが、ベジェ曲線で描くのにはコツがいるので、これなら簡単です。
ベジェ曲線の使い方は分かりましたか？ ではさっそくベジェ曲線を使って簡単な絵を描いてみましょう。まず、アンカーポイントとハンドルを駆使してパスを作ります。今回は例なので簡単なものを使っています。
ほんとに簡単な、シャツの形ですねえ。
Photoshop を使っている人は、レイヤーを駆使して絵を描いていると思うので、これがたくさんあるレイヤーうちの一枚だと思って許してくださいね。
右の図はパスウィンドウになりますが、パスのタブを選択している状態で丸で囲んである部分をクリックすると、メニューの中に「選択範囲の作成」が出てきます。これを選択するとパスの部分が、そのまま選択範囲になります。選択範囲にしてしまえば、境界線を描くのも、塗りつぶすのも出来ますよね。Photoshop でベジェ曲線を使う場合は、パスを描いてそれを選択範囲にするのが基本になります。
メニューから「サブパスの境界線を描く」や「サブパスの塗りつぶし」を選んでもいいですが、いまいち綺麗な線が出ない気がします。
左の絵は作ったパスから選択範囲を作成して、塗りつぶしてから、境界線を描いたものです。あんまり簡単な絵なので、ベジェ曲線を使わなくても同じようなものが描けると思いますが、複雑な形になればベジェ曲線の威力を感じることができると思います。
後は実践あるのみです。頑張ってベジェ曲線を使いこなしてください。
「ベジェ曲線に挑戦」はいかがでしたか。できるだけ簡単に説明して、使えるテクニックなども盛り込んだつもりです。皆さんが「ベジェ曲線なんて簡単だ」と思える、第一歩になればいいなあと思っています。
やどりぎ@NETという名前でblogを始めました。