コンテンツのトップページへ プロが教える
写真レタッチ講座
第26回 素敵な壁紙を作ろう <4>
〜 フェラーリのトレース! 〜 2004/05/26
 
トレースの準備
直線でフェラーリをトレース
直線を曲線に変えて輪郭に合わせる
輪郭の中にある窓をトレースする
トレースした画像を新規 [ レイヤー ] にコピー
解像度の確認と [ カンバスサイズ ] の変更
背景画像との合成
背景画像とフェラーリの画像の光の方向を同じにする
背景画像のサイズを変更する

写真レタッチの
テクニックを磨くなら
プロが教える写真レタッチ講座
フォトショップの
小技を覚えるなら
Photoshop Tips & Manual
Clickで拡大
 
  ■トレースの準備 ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
[ トーンカーブ ] の [ 調整レイヤー ] で画像全体を明るく

●やっとフェラーリを切り抜けるぞ!

Clickで拡大
画面
1-1
トレースしやすいように
[ 調整レイヤー ] で明るくする
Clickで拡大

Clickで拡大
画面
1-2
中間調を上げる
Clickで拡大

長らくお待たせしました!今回、いよいよフェラーリと佑紀ちゃんの切り抜きやります。

…待ったわよ。本当に待ったわよ。たかが壁紙作るのに何ヶ月かける気よ!

まぁまぁそう言わずに、今回も長いから、さっさと行きましょう。

まさか、今回も中途で終わるんじゃないでしょうね。

ギクっ……。う、うん、まだ先は長い、か、もねぇ〜。

アンケートの結果を見ると、一回で完結して欲しいって声が結構あるわよねぇ〜。それなのに何回に分ければ気がすむのよ!

う〜ん。それだけヘビーな題材を選んじゃったんだよねぇ。

もういいわよ。さっさと解説しなさいよ。で、ここでは何をするの!

はい。これから佑紀ちゃんとフェラーリをトレースするんですが、その前準備をやります。

ちょっと〜、「トレース」って何よ!またカタカナ用語使っちゃって、もう!

画像を切り抜くために、画像の輪郭に沿って [ ペンツール ] でなぞることを「トレース」って言います。ハイ。

で、その準備って、いったい何をするのよ。

佑紀ちゃんとフェラーリの写真を見ればわかるけど、ちょっと暗いでしょ?輪郭が背景に溶け込んじゃってるところがあるから、まずは画面1のように一時的に [ トーンカーブ ] の [ 調整レイヤー ] で明るくしてあげるのさ。この調整レイヤーは後で捨てるんだ。

 

  ■直線でフェラーリをトレース ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
[ ペンツール ] を使って直線でトレース
[ ナビゲータパレット ] の使い方

●まずは直線だけでトレース

Clickで拡大
画面
2-1
フェラーリを直線でトレースする
Clickで拡大

Clickで拡大
画面
2-2
[ ペンツール ] 使用中の画像のスクロール方法
Clickで拡大

Clickで拡大
画面
2-3
直線だけでトレースして [ パス ] を閉じる
Clickで拡大

Clickで拡大
画面
2-4
こんな感じになる
Clickで拡大

さて、準備が済んだら早速、フェラーリと佑紀ちゃんの輪郭をトレースを開始しよう。

いよいよね。でも、佑紀ちゃんとフェラーリの輪郭って、滅茶苦茶に複雑よ!前回やったハート型の比じゃないわ!

確かに複雑だけど、前回やったハート型基本は同じだよ。
とにかく、まずは直線で輪郭を描くんだ。

フェラーリと佑紀ちゃんを?

そうだよ。ただ、どんな感じで直線で描けばいいのかがわからないのなら、しつこいようだけど、前回を復習するか、ハート型の描き方をとにかく読んで、どこに「アンカーポイント」をおけばいいのかを理解してちょうだい。

そうは言っても難しいわよ!

● [ パス ] 入り Photoshop データをあげます

ん〜。じゃぁ、オイラが描いた[ パス ] が入った Photoshop データをあげるから、それを参考にしてみて。あくまでも参考だからね。最後は自分で描かなけりゃいつまでたっても上手くならないよ〜。

 ちなみに、このデータをダウンロードするには、メールマガジンに登録(無料)してね。登録すると、IDとパスワードがメールで送られてくるから、それを使ってダウンロードページに入ってね。それから、このファイルは約5MBもあるからブロードバンド回線じゃない人は時間がかかるから気をつけてね。

メルマガ登録
メルマガ登録

ダウンロードページへ」

さすが薮田さ〜ん! 見た目どおりの太っ腹ね!

 

  ■直線を曲線に変えて輪郭に合わせる ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
「アンカーポイント」の移動
[ アンカーポイント切り替えツール ] で直線を曲線にする
[ フリンジ削除 ]
[ パスの保存 ]


● [ パス選択ツール ] と [ アンカーポイント切り替えツール ]

Clickで拡大
画面 3-1 フェラーリを直線でトレースする
Clickで拡大

Clickで拡大
画面 3-2 輪郭に沿ってアンカーポイントを移動する
Clickで拡大

Clickで拡大
画面 3-3 [ アンカーポイント切り替えツール ] で曲線化する
Clickで拡大

Clickで拡大
画面 3-4 トレースした [ パス ] を名前を付けて保存する
Clickで拡大

直線だけでフェラーリと佑紀ちゃんを一周グルッとトレースできたら、今度はその [ パス ] 上の「アンカーポイント」を [ パス選択ツール ] と [ アンカーポイント切り替えツール ] を使って微妙に調整していくんだ。 さっきのは直線だから大雑把に描けいいんだけど、今度は輪郭にちゃんと合うようにしていく。だから、画面も大きく拡大表示しておこう。

[ パス選択ツール ] で「アンカーポイント」を移動して、 [ アンカーポイント切り替えツール ] で「セグメント」を曲線にしていくのね。

そうそう。

確かに、 [ パス ] の描き方に慣れていない私にとっては、直線で描いてから、この方法で曲線化していく方が簡単かもね。

●輪郭よりも少し内側でトレース

トレースのポイントは、写真の輪郭よりも少し内側に [ パス ] がくるようにすることなんだ。

なんでよ。

写真を切り抜くときにできる「 [ フリンジ ] 」がなるべくできないようにするためだよ。

「 [ フリンジ ] 」って?

切り抜いた画像の輪郭にできる余計な画素のこと。たとえばこんなのさ。

Clickで拡大
[ フリンジ ] とは

[ フリンジ ] があるとなんでいけないの?

合成する背景によっては、切り抜いた画像の周囲の画素が浮き出てしまって、自然な感じで合成できないからさ。切り抜くときに実際の輪郭よりも少しだけ内側でトレースすると、 [ 選択範囲 ] を作るときに [ フリンジ ] ができにくくなるんだ。

Clickで拡大
[ フリンジ削除 ]
Clickで拡大

● [ フリンジ ] の除去

注意してても「 [ フリンジ ] 」ができちゃったら?

第8回で紹介した方法だけど、右の画面の手順で「 [ フリンジ ] 」が除去できるよ。このとき、[ フリンジ削除 ] ダイアログに入力するピクセル数を調整してあげれば、大きな [ フリンジ ] も削除できる。

 

  ■輪郭の中にある窓をトレースする ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
中マドの追加

●窓の向こうに写る背景を選択しないようにするには

Clickで拡大
画面
4-1
中マドの追加
Clickで拡大

Clickで拡大
画面
4-1
こんな感じに…
Clickで拡大

やったぁ、輪郭が全部トレースできたわ。

まだだよ。

ぶう!なんでよ!

留美さんがトレースしたのは佑紀ちゃんとフェラーリの輪郭、つまり外周だけだよね。ほら、フロントガラスの中に左側サイドの窓があるでしょ?外周だけのトレースだど、この窓の向こうにある背景も含まれちゃうよ。

あら本当だわ。

どうする?

あっ!わかったわ。前回やった「中マド」って方法でトレースすればいいのよ!

そ・の・とお〜り!

 

  ■トレースした画像だけを新規 [ レイヤー ] にコピー ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
[ 調整レイヤー ] の削除
[ パス ] から [ 選択範囲 ] を作成
[ 選択範囲 ] を新規 [ レイヤー ] にコピー
[ レイヤー ] の表示/非表示を切り替える

●トレースした [ パス ] から [ 選択範囲 ] を作る

Clickで拡大
画面 5-1 トレースした画像だけを新規 [ レイヤー ] にコピー
Clickで拡大

Clickで拡大
画面 5-2 [ パス ] から [ 選択範囲 ] を作成する
Clickで拡大

Clickで拡大
画面 5-3 [ 選択範囲 ] を新規 [ レイヤー ] にコピーする
Clickで拡大

Clickで拡大
画面 5-4 切り抜いた画像だけ表示する
Clickで拡大

さて、フェラーリのトレースが完成したら、 [ パス ] を保存して、今度はその [ パス ] を使って、 [ 選択範囲 ] を作るんだ。

それも前回やったわよね。

覚えてる?

保存した [ パス ] を選択して、 [ パスパレット ] のメニューで [ 選択範囲を作成 ] をクリックするのよ〜。

少しはましな生徒になってくれたようだね。

なによ〜。そういうときは褒めるものよ。

留美さんは褒めると木に登るんだもの。

ぶう!それで!次はどうするの!

● [ 選択範囲 ] を新規 [ レイヤー ] にコピー

[ パス ] の代わりに [ 選択範囲 ] を示す点線が表示されたら、 Ctrl キー + J キー を押して、 [ 選択範囲 ] を新規 [ レイヤー ] にコピーする。

押したわ。でも何にも変わらないわ。

変わらないように見えるんだよ。でも [ レイヤーパレット ] を見てごらん。

あれ?新しい [ レイヤー ] ができてる。

でしょ。じゃぁ、「背景」 [ レイヤー ] の目のマークをクリックしてごらん。ほら、こうすると「背景」 [ レイヤー ] が非表示になって、コピーした [ レイヤー ] だけが表示されるでしょ。

きゃあ〜〜〜〜〜〜〜〜〜。

な、なんだよ。

できたわ〜!私にも切り抜きができたわ〜!うれしぃ〜〜〜〜〜〜!

 
  ■解像度の確認と [ カンバスサイズ ] の変更 ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
解像度の確認
[ カンバスサイズ ] の変更

● 1600 × 1200 解像度 「 96 」 または 「 72 」

Clickで拡大
画面
6-1
解像度の確認と [ カンバスサイズ ] の変更
Clickで拡大

Clickで拡大
画面
6-2
[ カンバスサイズ ] を変更する
Clickで拡大

この画像ファイルを壁紙サイズに変更しようか。

壁紙サイズって?

壁紙のサイズさ。いわゆる留美さんが使ってるパソコンの画面のサイズに合わせればいいのさ。

私のパソコンの画面…。確か 17 インチとかって言ってたような……。

う〜ん。それはモニタディスプレイの実際の大きさのこと。ここでは画面の解像度のことなんだよね。

解像度なんてわかんないわ。

1024 × 768 とか、1600 × 1200 とか、聞いたことない?

まったく、ない!だって私、数字が大嫌いだもん!

威張って言うなよ。まぁ、ここでは 「 1600 × 1200 」 の 「 96dpi 」 で設定しておこう。それより小さな解像度の場合は、後でリサイズをかければいいからね。大きなサイズで作っておきさえすれば、後で小さくする分には画質の問題を心配しなくてすむからね。

とりあず、言われたとおりにすればいいってことね。

 

  ■背景画像との合成 ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
[ 画像の統合 ]
背景画像の別ファイルへのコピー
保存しないでファイルを閉じる
[ レイヤー ] の順序を変更

●背景画像の [ レイヤー ] を統合する

Clickで拡大
画面
7-1
背景画像との合成
Clickで拡大