デザインをもっと楽しく!WEBデザイナーの皆様にとって役に立つ情報をお届けいたします! おしゃれなボタンの作り方やテクスチャの使い方、制作関連のおすすめサイトなどの情報が満載! | フォトショッパーフォトショッパー

ベジェ曲線をマスターして、IllustratorやPhotoshopを使いこなそう!


ベジェ曲線を楽しく学んでみよう!

こんにちは、おぎしおです!
今日はイラストレーターやフォトショップなどを学習するときに避けては通れない「ベジェ曲線」について記事を書いていきたいと思います。

ベジェ曲線ってなに??

ベジェ曲線とは、IllustratorやPhotoshopのペンツールにも使われている、滑らかな曲線のことです。
初めてこれらのソフトを使うとき、一番最初にこの「ベジェ曲線」がうまく使えず悩む方も多いのではないでしょうか?
下記の図はPhotoshopで実際にペンツールを使ってハートを描いたときのスクリーンショットです。

001

ベジェ曲線は「アンカーポイント」という点と、「ハンドル」という二本の線と、「セグメント」というハンドルとハンドルをつなぐ線で構成されています。

001_01

「アンカーポイント」と「アンカーポイント」をつなぐ「セグメント」は、「ハンドル」を伸ばした分だけ滑らかに湾曲していきます。最初はこの「ハンドル」をどうやって伸ばしたら想像通りに図形が描けるのかがわからずに、苦労しました。

1,ゲーム感覚でベジェ曲線を覚えよう!〜The Bézier Game〜

では実際にベジェ曲線を操作してみましょう。実はこのベジェ曲線、IllustratorやPhotoshopを購入しなくても、勉強することができるサイトがあるのです!
それが今回ご紹介するThe Bézier Gameというサイトです。

003

「Get Started」ボタンを押すと、ゲームが始まります。最初は「ハンドル」を伸ばさず、「アンカーポイント」と「アンカーポイント」を単純につなぐと完成するような図形が出現します。最初に流れるデモを見たあと画面上のヒントをもとに、丸い点をポチっとクリックしながら図形を作っていきます。

004

いくつかステージをクリアしていくと、「ハンドル」を伸ばすような図形が出現します!
「ハンドル」は「アンカーポイント」を打つときにクリックしながらマウスをドラッグすると出現します。お手本の「ハンドル」が画面上に現れるので、それを参考にしながらハンドルを伸ばしていきます。

005

さらにステージが進むと、今度は2本の「ハンドル」の片側を固定し、それぞれ別の方向に伸ばしていくような図形が出現します。片側のハンドルを固定するにはドラッグしながら『alt』を押すことで実現します。

006

実際にaltで固定すると……

007

ハンドルを自由に動かすことができます!

まとめ

初めてドローソフトを使うときにつまずくであろう「ベジェ曲線」ですが、ゲーム感覚で簡単にコツが掴めるのがこのサイトの素敵なところです。
ぜひノンデザイナーの方もこのThe Bézier Gameさんで気軽にベジェ曲線を学んでみてくださいね!


Comment

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

新着