コンテンツのトップページへ プロが教える
写真レタッチ講座
第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で拡大

Clickで拡大
画面
7-2
背景画像をコピーする
Clickで拡大

Clickで拡大
画面
7-3
背景画像を閉じる
Clickで拡大

Clickで拡大
画面
7-4
[ レイヤー ] の順序を変更する
Clickで拡大

Clickで拡大
画面
7-5
フェラーリが表示された
Clickで拡大

次は、以前作った背景画像を開いてみよう。

ビルと海の写真を合成した画像ね。

その背景画像を開いて [ レイヤーパレット ] を見ると、複数の [ レイヤー ] で構成されているのがわかるよね。
このままだと都合が悪いので、全ての [ レイヤー ] をひとつの [ レイヤー ] に統合してしまおう。

え〜。せっかく作った画像なのに [ レイヤー ] を統合しちゃったら、次に編集したいときにできなくなっちゃうじゃない。

大丈夫だよ。結合した画像をフェラーリの画像の方にコピーしたら、背景画像のファイルの変更内容は破棄して、ファイルは保存しないで閉じちゃうからね。つまり、背景画像のファイルは何も変更されないことになるわけだ。

そういうことなの。でも、なんで [ レイヤー ] を統合しないと別ファイルにコピーできないの?

いや、コピーできないわけじゃない。複数の [ レイヤー ] を [ レイヤーセット ] にまとめてからなら、簡単にコピーできるよ。[ レイヤーセット ] を使わないと、 [ レイヤー ] をひとつひとつコピーしなければならいので、 [ レイヤー ] の重なりが崩れてしまうからね。でも、この背景画像はかなり大きいし、複数の [ レイヤー ] をコピーすると、フェラーリの画像ファイルがかなり巨大になっちゃうから、統合させているんだ。

●背景画像のコピー

[ レイヤー ] が統合できたら、背景画像をフェラーリの画像にドラッグ&ドロップしてごらん。

あれ、フェラーリの写真が隠れちゃった。以前にもこの方法で画像をコピーしたけど、そのときも写真が隠れちゃったわね。

それは、コピーした背景画像の [ レイヤー ] がフェラーリの [ レイヤー ] の上に乗っかっちゃっただけだよ。そういう場合は、[ レイヤー ] の順序を変更すればOK。

なるほどね。

 

  ■背景画像とフェラーリの画像の光の方向を同じにする ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
背景画像を水平方向に反転させる

●光の当たる方向が変?

Clickで拡大
画面
8-1
選択した [ レイヤー ] だけを水平方向に反転させる
Clickで拡大

Clickで拡大
画面
8-2
光の当たる方向が同じになった
Clickで拡大

さて、フェラーリの画像と背景画像がとりあえず合成されたわけだけど、ねぇ留美さん。この画像全体を見てなんか不自然なのを感じない?

ん…。あっ、手前の写真と背景の写真で光の当たっている方向が逆だわ。

だよね。いくら現実にはありえない絵を作るとは言っても、これじゃ不自然極まりない。そこで、背景画像の左右を反転させることにしようか。

●左右は水平

左右の反転ってどうやるの?

背景画像の [ レイヤー ] を選んで、水平方向に反転させるんだ。

水平方向……。ねぇ、なんで Photoshop ってわかりづらい用語を使うのかしら。左右って言えばいいじゃない。普通、水平方向に反転なんて言わないわ。

確かに感覚的には「左右」の方がわかりやすいけど…。正確には「水平方向」だよね。たとえばさ、透明な板に描かれた一枚の絵を手に持っていたとして、それを水平方向に裏返したことを考えてみてよ。以前、 [ レイヤー ] って透明な板だって説明したよね。 [ レイヤー ] ってそういうものなんだよね。

どうでもいいわ、そんなこと。

 

  背景画像のサイズを変更する ひとつ前のページに戻るこのページのトップへ  

紹介しているTIPS
アクティブ画像領域を広げる
背景画像のサイズを 80% に縮小する
背景画像の移動

●背景画像ってこんなに小さかったっけ?

Clickで拡大
画面
9-1
背景画像のリサイズ
Clickで拡大

Clickで拡大
画面
9-2
背景画像を 80 % に縮小する
Clickで拡大

Clickで拡大
画面
9-3
背景画像を移動する
Clickで拡大

ねぇねぇ薮田さん、そういえば、背景画像ってこんなに小さかった?なんだか変よ。

よく気がついたねぇ〜。そうなんだよ。フェラーリの写真の [ カンバスサイズ ] よりも、背景画像の [ カンバスサイズ ] の方が大きいんだよ。だから、背景画像の全てが見えていない状態なんだよね。

そんなんじゃ、大きな画像を作った意味がないじゃな〜い。

意味はある。この画像で重要なのはフェラーリと佑紀ちゃんであって、背景画像は飾りみたいなものだから。ある程度は無駄な領域ができちゃうことは覚悟して作っているんだよね。でも、これじゃ確かに背景画像とフェラーリの画像がバランス悪いよね。

どうすんのよ。

背景画像を 「 80% 」 程度に小さくするとバランスが取れると思うよ。

どうやって!

●見えない部分もちゃんと存在する

まず、[ アクティブ画像領域 ] を広げるんだ。

またそうやって難しい用語使う〜。

今、作業している画像ウインドウのことを「アクティブ画像領域」っていうんだよ。 で、[ バウンディングボックス ] を表示するにチェックを付けると、ほら、見えない画像の部分が四角い枠で表示されたでしょ?

えっ?見えない部分って、もう削除されちゃったのかと思ってた。つまりその、トリミングされちゃったんじゃないかと…。

お〜!留美さんが専門用語使ってる〜。すっご〜い。

ちゃかすな!

はいはいごめんなさい。でね、Photoshop の画像ファイルには [ カンバスサイズ ] ってのがあるわけなんだけど、その [ カンバスサイズ ] よりも大きなサイズの [ レイヤー ] をコピーしてきても、ちゃんと元のサイズは保存されているんだ。ただ見えないだけ。でもでも、その画像ファイルを Photoshop 形式の 「 PSD や EPS 」 ファイル以外で保存すると、 [ レイヤー ] 構造そのものがなくなってしまうから気をつけてね。たとえば JPEG 形式とかね。

ふ〜ん。で、この [ バウンディングボックス ] が表示されたら、 [ オプションツールバー ] を見ながら背景画像のサイズを 80 %に縮小するのね。わかったわ。

やけにものわかりがいいなぁ。さてはもう飽きたな。

●とりあえず合成できた!

Clickで拡大
画面
10-1
今回はここまで
Clickで拡大

だって今回も長いんですもの〜。

後悔してるよ俺だって。なんでこんな題材選んじゃったのかな〜ってね。

で、結局、この題材はいつ終わるのよ!読者の皆さんも気が気じゃないはずよ。

もしかして6月いっぱいかかるかも…。

な、なんですってぇ〜。

 

<< 読者離れを恐れながら気が気じゃなく次回へ! >>

 

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

     
 
 

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