コンテンツのトップページへ プロが教える
写真レタッチ講座
第25回 素敵な壁紙を作ろう <3>
〜 ペンツールの使い方 〜 2004/05/12
 
「パスオブジェクト」を構成する各部名称
【基本】 直線で図形を描く
【基本】 直線と曲線が混在した図形を描く
【基本】 曲線の曲がり具合を調整する
【基本】 直線のセグメントを曲線にする
【応用】 ハート型のパスオブジェクトを描く
【基本】 パスの保存と選択範囲への変換
【基本】 パスの中マドを描くには

写真レタッチの
テクニックを磨くなら
プロが教える写真レタッチ講座
フォトショップの
小技を覚えるなら
Photoshop Tips & Manual
Clickで拡大
 
  ■「パスオブジェクト」を構成する各部名称 ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
「パスオブジェクト」の各部名称
[ ペンツール ] で「パス」を描く準備

●やっぱり基本は大切

Clickで拡大
準備1 パスオブジェクトの各部名称
Clickで拡大
Clickで拡大
準備2 [ ペンツール ] で「パス」を描く準備  Clickで拡大
さぁて、今回からフェラーリと佑紀ちゃんのレタッチだぁ〜、と行きたいところなんだけど、その前に、今後のレタッチの肝となる「パスオブジェクト」の基礎知識と基本テクニックを勉強しよう。

え゛〜〜〜〜、私、勉強って嫌い〜。勉強って文字見ただけで頭痛がするわ!それに、今回はフェラーリだって告知してたじゃない。嘘ついたのお!

なにを小学生みたいなことを言ってるのさ。俺みたいな学歴のないオヤジでも覚えたんだから大丈夫だって。それから、今回のテクニックを完全にマスターしないとフェラーリの切抜きはできないよ。まずはね、これから使う「パスオブジェクト」の各部名称を頭に叩き込んでよ。

各部名称を覚えると、なにかいいことあるの?

覚えないと、この先の基本テクニックの説明がチンプンカンプンになっちゃうの。まぁ、今ここで無理やり覚えなくてもいいけどね。この先、基本テクニックの紹介を読むときにわからない用語が出てきたら、ここに戻って「パスオブジェクト」の各部名称を参照すればいいよ。

はじめからそういいなさいよ。

うっるさいなぁ…。それじゃぁ、次にその「パスオブジェクト」を描くために必要な準備をしよう。Photoshopを起動して、 [ ペンツール ] で「パス」を描く準備を参考にしながら手順どおりやってみて。

 

  ■【基本】 直線で図形を描く ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
三角形のパスオブジェクトを描く

●三角形を描いてみよう

Clickで拡大
基本1 直線を使って簡単なパスオブジェクトを描く
Clickで拡大
準備ができたら、まず最初に「三角形」を描いてみよう。ご存知のように、三角形は3つの頂点と3つの辺で構成されているよね?

なんだか算数の時間みたい〜。いやだわ。

これくらい我慢して聞いてよ。 んでね、パスオブジェクトの場合だと、「頂点」が「アンカーポイント」、「辺」が「セグメント」になるわけだ。意味がわからないときは、「パスオブジェクト」の各部名称をもう一度読んでね。

「頂点」と「辺」でいいじゃない!わっざわざカタカナ用語使わなくたって!

いいから覚えろ! じゃぁ、まず「基本1」を参考にして三角形を描いてみて。簡単だから。 [ ペンツール ] でクリックするだけだから。
ポイントは、始点と終点を重ねて、「パス」を閉じること。始点にマウスポインタを重ねると、マウスポインタの右下に「。」が表示されるんだけど、この状態なら無条件に「パス」が閉じられるよ。「。」が表示されていないときにクリックすると、一見すると閉じられた「パスオブジェクト」なんだけど、実は開かれた「パスオブジェクト」だったりするから気をつけてね。

なんなのよ「閉じる」とか「開く」とか。

端点、つまり始点と終点が別々の場所にあるパスオブジェクトは「開いている」、端点がない、つまり始点と終点を重ねてあるパスオブジェクトは「閉じられている」というわけさ。「」のようなパスオブジェクトは「閉じている」、「」のようなパスオブジェクトは「開いている」。わかった?

だからそれがなんのためになるのかって聞いているのよ。

これから俺たちやろうとしているのは、一枚の写真からフェラーリと佑紀ちゃんを切り抜こうとしているわけだよね。つまり被写体だけを「範囲選択」して切り抜くんだ。で、人物や車など、複雑な輪郭を範囲選択するときに便利なのが [ ペンツール ] というわけ。範囲選択ってのは必ずグルッと囲むわけだから、閉じられたパスオブジェクトを描かなければならないんだよ。そのためにここで「閉じられたパスオブジェクト」の作り方を説明しているわけだ。

わかるようなわからないような説明よね。

いいから早く三角形を描け!

 

  ■【基本】 直線と曲線が混在した図形を描く ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
半円形のパスオブジェクトを描く

●半円を描いてみよう

Clickで拡大
基本2 直線と曲線の混ざった
パスオブジェクトを描く
Clickで拡大
じゃぁお次は「曲線」と「直線」が混在したパスオブジェクトを描いてみよう。最初は簡単な「かまぼこ型」だよ。

これも簡単そうね。

ふふん、そうかな。 [ ペンツール ] が初めての人には、これでも結構難しかったりするんだよ。じゃぁとりあえず基本2を参考にして描いてみてよ。

……。な、なによこの「方向線」ってのは!こんなことして曲線を描くの〜。直感的じゃないわ!ダメよこんなの。

ダメだって言われてもなぁ…。確かに実際のペンで描くような直感的な描画方法じゃないけど、数学的に正確な曲線を描くにはもってこいの方法なんだよ。で、この曲線を「ベジェ曲線」って呼ぶんだ。「アンカーポイント」から引き出す「方向線」の長さと角度によって、「セグメント」の曲がり具合が変化するのがわかるでしょ?

  ■【基本】 曲線の曲がり具合を調整する ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
隠れたツールを表示させるには
曲線の曲がり具合を変える
「セグメント」を直接ドラッグして変化させる
「アンカーポイント」を移動して曲線を変化させる

●隠れたツールを表示させるには

Clickで拡大
基本3 [ パス選択ツール ] の準備
Clickで拡大

Clickで拡大
基本4 曲線の曲がり具合を変える
Clickで拡大

Clickで拡大
基本5 「セグメント」を直接ドラッグして曲線を変化させる
Clickで拡大

Clickで拡大
基本6 「アンカーポイント」の移動
Clickで拡大
あ〜ん、変な半円形になっちゃった。

大丈夫。 [ ペンツール ] のいいところは、後から何度でも形を変えることができる点にあるんだよね。じゃぁ [ パス選択ツール ] を用意してみて。[ツールボックス]にあるよ。

ないわよ。[パスコンポーネント選択ツール]ならあるわ。

[パスコンポーネント選択ツール]の場所で基本3のようにマウスボタンを長押しすると表示されるよ。[ツールボックス]で▲が表示されているツールは、基本3のようにして非表示のツールを表示させるんだ。

●曲線の曲がり具合を変える

さて、それでは [ パス選択ツール ] を使って、曲線の曲がり具合を調整してみようよ。基本4を参考にして「方向線」を表示させ、「ハンドル」をドラッグしてみて。

だからあ、「方向線」なんてわけわかんないもので曲線を変えるってのが馴染まないのよ〜。

「セグメント」を直接ドラッグして変化させることもできるからやってみて。

あら、こっちの方がわかりやすいわ。でも「アンカーポイント」は動かないのね。

よく気がついたね。この方法だと「アンカーポイント」だけじゃなくて、「方向線」の角度も変化しないんだ。

●アンカーポイントの移動

じゃあ今度は「アンカーポイント」を [ パス選択ツール ] でドラッグして移動してみて。

[パスコンポーネント選択ツール]じゃだめなのね。

[パスコンポーネント選択ツール]だと「パスオブジェクト」全体が移動されるんだ。

へぇ…。これって、上部の「アンカーポイント」を移動させても曲線が変化するのね。

そうなんだよね。「セグメント」の曲がり具合は、その「セグメント」を構成する2つの「アンカーポイント」の位置によっても変化するってことなんだよね。あっ、もちろん、直線の「セグメント」は「アンカーポイント」の位置を変えても曲線にはならないよ。

 

  ■【基本】 直線のセグメントを曲線にする ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
[アンカーポイント切り替えツール]の準備
直線を曲線にする
曲線を直線にする

●[アンカーポイント切り替えツール]を使う

Clickで拡大
基本7 [アンカーポイント切り替えツール]の準備
Clickで拡大

Clickで拡大
基本8 直線を曲線にする
Clickで拡大
まだまだいくよ。今度は直線を曲線にするテクニック。

そういえば、直線の「アンカーポイント」には「方向線」がないわね。「方向線」がないってことは曲線にできないってことじゃないの?

そのために、[アンカーポイント切り替えツール」ってのがあるんだよ。[アンカーポイント切り替えツール」を使うと、「アンカーポイント」から「方向線」を引き出すことができるんだよ。まずは、[アンカーポイント切り替えツール」を選択してみよう。

●「方向線」を引き出して曲線にする

まずはね、三角形を描いたときの方法を参考にして、一本の直線パスを描くんだ。

一本の直線だから「アンカーポイント」を2つ作ればいいってことね。

そうそう。そのとき、ひとつめの「アンカーポイント」を作った後に、 Shift キー を押しながらふたつめをクリックすると、水平、または垂直、さらに45度の角度で直線が引けるよ。どの直線になるかはふたつめのクリックをどこでするかによるんだ。

とりあえず水平に引いておくわね。

後は手順通りにやってみて。

あらら、なんで両方のハンドルを同じ下方向にドラッグすると「S字型」の曲線になるの?「弓形」の曲線になると思ったのに。

なんで「S字型」になるのかは、「セグメント」が一本しかないパスだとわかりにくいから、4つのアンカーポイントがある四角形で試してごらんよ。ちなみに直線を「弓形」にするには、片方の「アンカーポイント」とは逆の方向にドラッグして「方向線」を引き出せばいいんだよ。

……。なんだかわかりにくいなぁ…。

これは慣れるしかないなぁ。

●逆に曲線を直線にするには

Clickで拡大
基本9 曲線を直線にする
Clickで拡大
今度は曲線を直線にする方法。きわめて簡単だからやってごらん。

[アンカーポイント切り替えツール]で「アンカーポイント」をクリックしていくだけなんだぁ。

簡単でしょ?

でも、こんなことやってて、いつになったらフェラーリに辿りつくのよ〜。

もうちょっと我慢して。

 

  ■【応用】 ハート型のパスオブジェクトを描く ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
「ハート型」を描く
形を調整する

●まずは直線で描いて後から調整

Clickで拡大
応用1 「ハート型」を描く
Clickで拡大

Clickで拡大
応用2 形を調整する
Clickで拡大
いよいよ応用編だよ。さぁここで留美さんの大好きな「ハート型」を描いてみよう。

いきなり「ハート型」なんて難しいわよ!

確かに難しく感じるよね。でもコツをつかむと意外に簡単なんだよ。とにかく応用1の方法でやってみて。

ん?えっ?直線でハートを描くの?

そうなんだ。まずは直線だけでハート型の原型を描く。しかもきわめて大雑把にね。ハート型の場合は、6個の「アンカーポイント」で描けるんだよ。直線だけでハート型の原型ができたら、[アンカーポイント切り替えツール]で「方向線」を引き出すんだ。

なるほど、基本8の応用ね。でも、なんだか形が変よ。

確かにね。だからお次は基本4の応用で、「方向線」の角度と長さを変えて形を整える(応用2)んだ。

きゃ〜。ハートができたわハートが!

このテクニックを使えば、ベジェ曲線に慣れていなくても、どんな複雑な形も比較的簡単に描くことができるんだ。ポイントは「アンカーポイント」の数をできるだけ少なくすること。だいたい初心者が陥るのが、むやみに「アンカーポイント」を増やし過ぎて、ぎこちない形にしてしまうことなんだ。たとえば「円形」なら2つの「アンカーポイント」でできるんだ。「真円」なら4つ使った方が楽だけどね。

でも、どこに「アンカーポイント」を打ったらいいのかわからないわ。

やっぱり [ ペンツール ] でいろんな形を描いてみて、慣れる必要があるよね。でもそのときに、形をよく見て「アンカーポイント」の場所をイメージすることが重要なんだよ。

  ■【基本】 パスの保存と選択範囲への変換 ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
パスの保存場所
パスの保存方法
選択範囲への変換

●パスは無色透明?

Clickで拡大
基本10 「ハート型」を描く
Clickで拡大
さて、せっかく描いたパスオブジェクトだけど、そのままにしておくとなくなってしまうことがあるんだ。

ことがあるってなによ。

たとえば、さっき描いたハート型を[ファイル]メニュー→[保存]でファイル名を付けて保存してから閉じてごらん。それで、もう一度そのファイルを[ファイル]メニュー→[開く]で開いてごらん。

あら? ハートがなくなったわ!なによ!

実はなくなったんじゃなくて、見えなくなっただけなんだ。パスは描いたり選択しているときは暫定的に表示されているけど、実は無色透明な線で構成されているんだ。だから、パスの選択が解除されちゃうと見えなくなっちゃうのさ。

じゃぁ本当はどこにあるのよ。

基本10を見てごらん。[パス]パレットに保存されているから。

ああよかった。

でも安心してると本当になくなることがあるから注意して。

もう!上げたり下げたりしないでよ。なくならない方法を教えてよ。

●パスは[パス]パレットに保存

Clickで拡大
基本11 パスの保存方法
Clickで拡大
描いたばかりの「パス」は「作業用パス」という名前で一時的に保存されるんだよね。この作業用パスが選択されている状態なら、新しいパスを描いても「追加」という状態になるんだけど、もし作業用パスが選択解除されていたら、新しいパスを作成すると以前の作業用パスは消えてしまうんだ。

だから保存しておけってことなのね。

そう。で、その保存の仕方は、基本11を参照してね。そうそう、保存するときに必ず名前を付けておく習慣をよろしくね。ちなみに、パスは、フォトショップファイル(psd、epsなど)かTIFFファイル以外で保存するとなくなってしまうから気をつけてね。JPEGで保存してもパスは消えちゃうからね。

●パスを [ 選択範囲 ] に変換

Clickで拡大
基本12 選択範囲への変換
Clickで拡大
さて、作成したパスを選択範囲へ変換する方法を紹介するよ。

そうか、ここまでやってきたことって、選択範囲を作るためのことだったのよね。

その通り。Photoshopのパスってのは選択範囲のためにあるようなものだからね。

根本的なことなんだけどね、パスで選択範囲を作成するのって、なんのメリットがあるの?

いい質問だね。応用2でやってるように、パスは描いてから何度でも修正できるでしょ?これは他の選択範囲のツールにはないメリットなんだよね。そのために、複雑な形を範囲選択するのに向いているんだ。

なるほどねぇ。

 

  ■【基本】 パスの中マドを描くには ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
パスの中マドと合体の違い

●パスの中マドって?

Clickで拡大
基本13 パスの中マドと合体の違い
Clickで拡大
最後は「中マド」について紹介するよ。

やっと終わるのね…。ところで何よ、その「中マド」って。

一部が抜けているパスオブジェクトのことだよ。たとえば留美さんは「M」の文字をパスで描ける?

馬鹿にしないでよ。基本1のテクニックだけで描けるじゃない。

その通り!つまり、「M」は輪郭だけなぞるようにして描いていけば描けちゃうんだよね。
じゃぁさ、「A」は?

同じでしょ?輪郭を描いた後に、中を描けばいいんでしょ?

その通りなんだけど注意しなければならないことがあるんだ。まず基本13の「中マドと合体の違い」を見て。

つまり、 [ ペンツール ] を使うとき、 [ オプションツールバー ] のどこにチェックが入っているかによって描かれ方が異なるというわけね。それで、パスを [ 選択範囲 ] に変換したときに違いが出てくるんだ!

そうなんだ。中マドにしなければならないようなパスを描くときは、必ず[パスが重なる領域を中マド]にチェック付けておかなければならないんだ。

わかったわ〜。でも、これがこれからどう役に立つのかはまったくわかんないけど〜。

 << いつになったらフェラーリに進むのか…。読者のため息が聞こえつつ次回へ! >>

 
初出:2004/05/12
  このページのトップへ
 
space space space
space
space
space space space

     
 
 

     
リンクについて
著作権について
プライバシーポリシー