Own products

  • 新規事業のアイディア創造機

Tutorial

2009
06/09

【初心者でも】PhotoshopやIllustratorでのパス(ペジェ曲線)の使い方が、5時間で上達する方法【劇的に】

この記事の読了時間:約530

  • このエントリーをはてなブックマークに追加

WEBデザイナーの皆様にはお馴染みの、ペジェ曲線。

いわゆる「パス」と呼ばれるそれは、PhotoshopIllustratorを初めて扱う際、最も戸惑うものの筆頭なのでは無いでしょうか。

慣れれば感覚的に操作できるものの、そのクセを掴みきるまでに挫折してしまったという話も良く耳にします。

多少Photoshopを使えるという方でも、パスは使わないという方も実際にいらっしゃいますが、それは何とも勿体無い。

ホント、慣れれば直感的に扱えますし、出来るコトが数段広がるというのも事実です。

本日のエントリーの内容は、実際にワタクシsmknがPhotoshop歴10日とかいう時に先輩から教えていただき、たった1日でフツーにパスを扱えるようになったという実績ある(!?)学習法です。

これからWEBデザイナーを目指すという方や、脱初心者を掲げる方の参考になれば幸いです。

パス(ペジェ曲線)の扱いを劇的に上手にする方法

「SmAP」って書く。

あ?

と思うのも分かります。自分も最初、意味分かんなかったですから。

ですが、この日本で聞き慣れた響きのアルファベットの羅列、ここにペジェ曲線のコツが全て、そう全て、That’s right全て、含まれているのです!

曲線to曲線の、「S」。

曲線から”切り替えして”曲線の、「m」。

直線to直線の、「A」。

直線から”切り替えして”曲線の、「P」。

この、たった4文字を書けるようになるだけで、どのようなパスでもサラッと書けるようになります。

まずはその下準備として、パスを扱う際に絶対に必要なショートカットを、たった4つだけなので覚えちゃってください。

パスを扱う際に絶対に必要な4大ショートカット

1.Ctrlを押しながら、パスハンドルを掴む

Ctrlを押しながら片側のパスハンドルを掴むと、反対サイドのハンドルも連動した状態で、ハンドルを動かせます。

一度書いてしまったパスのハンドルの長さや傾きを調整する場合には、このショートカットを使います。

2.Altを押しながら、パスハンドルを掴む

Altを押しながら片側のパスハンドルを掴むと、そのハンドル単体で動かせます。

後ほど詳しくご説明しますが、パスハンドルの切り替えしの際には、このショートカットを使います。

3.Ctrlを押しながら、パスポイント自体を掴む

Ctrlを押しながらパスのポイントした部分を掴むと、そのパスをグリグリと動かせます。

一度書いてしまったパスの位置を調整したい場合には、このショートカットを使います。

4.Altを押しながら、パスポイント自体を掴む

Altを押しながらパスのポイントした部分を掴むと、そのパスのハンドルを初期化出来ます。

もはや最初からやり直したいような絶望感に駆られた場合、このショートカットを使います。

それでは、これからこの魔法の言葉「SmAP」について、1文字ずつ解説していこうと思います。

「SmAP」の「S」

pass_lesson_s01pass_lesson_s02pass_lesson_s03



曲線to曲線の、「S」。

1点のパスポイントから曲線を延ばし、中間パスポイントを経由して最後のパスポイントまで曲線を繋ぐ、という流れになります。

なので、最初のポイント+中間経由ポイント+最終ポイントの、計3つのポイントを打つコトになります。

ここでの学習点は、「膨らませたい(カーブさせたい)方向にパスのハンドルを伸ばす」というトコです。

「S」という文字の場合、まずは左側に線を膨らませたいので、最初のパスポイントのハンドルを左に持っていく感じになります。

中継点では、経由して右曲がりのカーブになりますので、ハンドルは右、ですね。

で、最後のパスの部分でも気を抜かず、最後の曲線の延長線を意識しつつ、目視しながらハンドルを伸ばして出来上がりです。

「SmAP」の「m」

pass_lesson_m01pass_lesson_m02pass_lesson_m03pass_lesson_m04



続いては、曲線から”切り替えして”曲線の「m」ですが、ココは小文字の「m」なので、そこんとこお間違いなく。

さて、ココでの学習点ですが、言うまでも無く「ハンドルを切り替えす方法」です。

全体の流れとしては、先ほどの「S」と同じく、まず最初のパスのハンドルを、膨らませたい(カーブさせたい)方向に伸ばします。

そして中継点にて、伸ばしたハンドルを切り返すワケですね。

切り返し方はカンタンで、Altを押しながらハンドルの先をドラッグするだけです。

そして最後のパスポイントはこれまた先ほどの「S」と同じく、目視しながらハンドルを伸ばして完成といった感じです。

曲線部分は極端にシビアになりすぎず、おおまかに見て線に沿っていればOKですので、参考画像のように文字を書いて透明度を10%くらいにして、その上からなぞってみると分かりやすいですよ。

「SmAP」の「A」

pass_lesson_a01pass_lesson_a02pass_lesson_a03



さて、お次は直線to直線の「A」ですが、こちらは特に問題なく出来るかと思います。

ハンドルは全くいじらず、ただ淡々とポイントを打ち込んでいくだけです。

学習点は「直線の打ち方」ですので、ホントは「A」の横線部分はいらないんですが、そこはほら、SmAPという文字列の覚えやすさってのがありまして。

参考画像の方も、あえて「A」の横線部分は消してますので、練習の際もそんな感じでOKです。

「SmAP」の「P」

pass_lesson_p01pass_lesson_p02pass_lesson_p03pass_lesson_p04



そして最後、直線から”切り替えして”曲線の「P」です。

ここでの学習点は「ハンドルの切り替えしと、余計なハンドルをしまう方法」です。

ハンドルの切り替えしに関しては、先ほど「m」のトコでも学びましたが、その派生として「余計なハンドルをしまう」というコトが出来るようになります。

「m」の時は、切り替えしたハンドルを「伸ばし」ましたが、ハンドルをしまっちゃいたい場合は、切り替えしたハンドルを「パスポイントの真上に重ね」ます。

そうするとパスハンドルは実質、片方が消滅してしまい、直線to曲線という描画が可能になるのです。

あとは、この魔法の言葉「SmAP」を、ひたすら書き続けてください!

そのうち、どのくらいハンドルを伸ばすとちょうど良いか、どれくらいハンドルを傾けるとちょうど良いかが、感覚的に分かってくると思います。

いろいろ遊んでみたり試してみたりしつつ、だいたい5~8時間もやっていれば、画像の切り抜きとかアッサリ出来る位の実力になってるハズです!

どぞ、お試しあれ♪

  • このエントリーをはてなブックマークに追加

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Contact

お名前※必須

ご連絡先メールアドレス

お問い合わせ内容※必須

CAPTCHA

captcha

Blog parts

Affiliate