コンテンツのトップページへ プロが教える
写真レタッチ講座
第31回 素敵な壁紙を作ろう Part 2 <3>
〜 Photoshop で海と空を作ってみよう 後編 〜 2006/04/26
 
リアルな海も「雲」から作る?
[ 海の波紋] フィルタ
[ 描画モード ] の [ 輝度 ] で合成
[ トーンカーブ ] で手前の海の色を深くする
水平線の霞を演出
次回予告

写真レタッチの
テクニックを磨くなら
プロが教える写真レタッチ講座
フォトショップの
小技を覚えるなら
Photoshop Tips & Manual
Clickで拡大
 
■リアルな海も「雲」から作る?
ひとつ前のページに戻るこのページのトップへ
紹介しているTIPS
[ 描画色の設定 ]
[ 新規レイヤーを作成 ]
[ レイヤーの表示/非表示 ]
[ 雲模様 ]
[ 変形 ]
[ 遠近法 ]
[ 切り抜きツール ]

●今回の作業の流れ

   さて、前回の続きです。今回のテーマは 「 背景画像の海をよりリアルにする 」 です。で、どんな風にリアルにするかといいますと、こんな感じです。
 

 

 
Clickで拡大
   
   作業の流れを大まかに解説すると、新たに [ 雲模様 ] フィルタで作成したレイヤーに [ 海の波紋 ] フィルタをかけて、それを [ 遠近法 ] で変形させて、前回作成した 「 海 」 レイヤーと、[ 輝度 ] 描画モードで合成します。後は、水平線の辺りに霞を設けて完成です。


●完成後のデータをダウンロード

   で、今回は完成後のフォトショップデータをダウンロードするサービス付きです。前回と今回の作業を手順に沿って実際にやってみて、私が作った背景画像と比べてみてください。手順通りに操作すれば、誰もが同じような画像ができるはずです。ただ、[ 雲模様 ] フィルタはランダムで模様を描きますので、雲や海の模様がまったく同じになることはありません。


 
ダウンロード

完成した背景画像を
ダウンロードする

※ 完成した背景画像をダウンロードするには、メルマガ登録で送られてくる ID とパスワードが必要です。
画像ダウンロードはメルマガ登録後に
メルマガ登録はこちら
メルマガ登録
メルマガに登録(無料)すると、
即時返信されるメールで、
IDとパスワードが入手できます。
すでに登録されている方は、
お持ちのIDとパスワードを
お使いください。


●前回のテクニックの復習

 

 前置きが長くなってしまいましたが、ここで行なっている操作は、[ 描画色の設定 ] 、[ 雲模様 ] フィルタ、[ 変形 ] コマンド、[ 遠近法 ] コマンド、[ 切り抜きツール ] と、前回紹介したのテクニックばかりです。前回の復習のつもりで、トライしてみてください。[ 変形 ] コマンド、[ 遠近法 ] コマンド、[ 切り抜きツール ] は、アクティブウインドウを画像表示領域より大きく広げておくことがコツです。操作 6-36-4 の画面のように、画像を縮小表示しておけば、作業もやりやすいでしょう。

 ここで作成する画像は、前回作成した「海」レイヤーと [ 描画モード ] の [ 輝度 ] を使って合成するものです。 操作 6-36-4 で大きく変形させることで画質が劣化することはありますが、あまり気にすることはありません。

 
 
▼操作
6-1
海の波紋を作る準備
- [ 描画色の設定 ]
Clickで拡大
▼操作
6-2
海の波紋を作る準備 - [ 雲模様 ]
Clickで拡大
▼操作
6-3
海の波紋を作る準備 - [ 変形 ]
Clickで拡大
▼操作
6-4
海の波紋を作る準備 - [ 遠近法 ]
Clickで拡大
  
 

●画像を変形させると画質が劣化する?

    操作 6-36-4 では、作成した画像を大きく伸ばしたり変形させたりしていますが、こうすることで画質が劣化するんじゃないかと心配する方もいることでしょう。確かに劣化します。もちろん、Photoshop に限らず、どんな画像編集ソフトであっても、画像は編集するたびに少しずつ画質が劣化します。ここで行なっているような大きな変形でなくても画質は劣化するものなのです。ですから、編集作業は最小限に抑えることが重要で、編集結果が気に入らないときは、Photoshop の [ ヒストリー ] 機能を使って元に戻してから再トライするようにしましょう。

 操作 6-36-4 のような変形操作をしているときに、画像が極度に劣化して表示されることがありますが、これは、一時的なものであって、画像そのものが劣化したわけではありませんのでご心配なく。また、変形を確定するまでは、バウンディングボックスを使って何度変形させても、必要以上に画質が劣化することはありません



■ [ 海の波紋 ] フィルタ
ひとつ前のページに戻るこのページのトップへ
紹介しているTIPS
[ 海の波紋 ] フィルタ

●名前の通りそのまんまのフィルタ

 

 海の波紋の準備ができたら、今度はそのレイヤーに、その名の通りのフィルタ、[ 海の波紋 ] フィルタをかけてみましょう。

 [ 海の波紋 ] フィルタは、画像の表面に波紋をランダムに加えて、真上から水面下にある画像を見ているような効果を演出するフィルタです。

   
 
Clickで拡大
   
   上の画面は、[ 海の波紋 ] フィルタをかける前とかけた後のものを比べたものです。 [ 海の波紋 ] フィルタで注意すべきなのは、あまり大きな画像では効果が少ないという点です。というのは、[ 海の波紋 ] フィルタのふたつしかないパラメータ(媒介変数。ここでは設定項目のこと)(操作7-1 画面の [ 波紋の振幅数 ] と [ 波紋の大きさ ] ) が、ピクセル(画素)の絶対的な大きさに依存しているからなのです。例えば縦横 500 × 500 ピクセルほどの小さな画像であれば、 [ 波紋の振幅数 ] と [ 波紋の大きさ ] のパラメータの最大値まで使いきることなく、ふたつの組み合わせで様々な効果を与えることができますが、縦横が 2000 ピクセルを超えるような画像になると、パラメータを最大値に設定しても、小さな画像のときほど効果が期待できないのです。今回作成する画像は 1600 × 1200 と、ちょっと大き目の画像ですが、背景となる 「 海 」 の雰囲気を出すために使うので、あまり大きな効果は必要ありませんし、次の操作で画像を拡大しているので、気にする必要はありません。
 
 
▼操作
7-1
[ 海の波紋 ] フィルタで
海の波紋を作る
Clickで拡大
  
 

●Photoshop 7.0 でも同じ

    操作 7-1 は Photoshop CS2 のものですが、[ 海の波紋 ] フィルタそのものは、Photoshop CS、また、7.0 でも同じです。設定するパラメータ(媒介変数。ここでは設定項目のこと)も同じですので、画面の数値通りに設定してみてください。



●フィルタはすべて平面的?

   [ 海の波紋 ] フィルタに限らず、ほとんどのフィルタで同じことが言えるのですが、フィルタの効果というのは画像に平面的にかかります。平面的で問題のないテクスチャ画像などを作るときならこれで充分なのですが、ここで作ろうとしている海の風景は、水平線に向かって続いている遠近感のある画像です。操作 7-1 で [ 海の波紋 ] を適用した画像のままではまるでリアリティがありませんよね。

 [ 雲模様 ] フィルタもそうでしたが、遠近感を出すにはどうしたらいいでしょうか? そうです。[ 遠近法 ] コマンドで変形させるのです。
 



 


●解説の手を抜いているわけじゃ……

 

 [ 遠近法 ] コマンドは、もう何度も操作しているので細かな解説は必要ありませんよね。操作 8-1 の画面でも詳細は解説していませんので、もう一度詳しく知りたい方は、「 第30回 素敵な壁紙を作ろう Part 2 <2> 〜 Photoshop で海と空を作ってみよう 前編 〜 」 の 「 曇り空を作ろう 」 で解説している操作 3-2操作 3-3 を参照してください。

 また、[ 遠近法 ] コマンドで画像を非表示領域まで拡大していますから、変形が完了したら、 [ 切り抜きツール ] で不必要な部分を削除することも忘れずに。 [ 切り抜きツール ] の詳細は、「 第30回 素敵な壁紙を作ろう Part 2 <2> 〜 Photoshop で海と空を作ってみよう 前編 〜 」 の 「 空が映った海を作る 」 で解説している操作 4-3 を参照してください。



●「 海 」 レイヤーとサイズを同じにする

 

 海の波紋を適用したレイヤーの変形が完了したら、その画像を 「 海 」 レイヤーと同じサイズになるよう、縦方向のみ 60%に縮小します。この詳細も、「 第30回 素敵な壁紙を作ろう Part 2 <2> 〜 Photoshop で海と空を作ってみよう 前編 〜 」 の 「 空が映った海を作る 」 で解説している操作 4-4 以降を参照してください。 ( あ〜楽だ… )

 


▼操作
8-1
海の波紋に遠近感を持たせる
Clickで拡大
▼操作
8-2
「レイヤー1」レイヤーを
「海」レイヤーと同じ大きさにする
Clickで拡大

■[ 描画モード ] の [ 輝度 ] で合成
ひとつ前のページに戻るこのページのトップへ
紹介しているTIPS
[ 描画モード ] - [ 輝度 ]
[ 不透明度 ]
[ 下のレイヤーと結合 ]

● [ 描画モード ] で合成

 

 本講座でも何度か登場した [ 描画モード ] ですが、Photoshop を使って画像合成をしていく上で、最も強力な機能のひとつが、この [ 描画モード ] だと思います。 ( [ 描画モード ] の詳しくは、「 Photoshop Manual の [ 描画モード ] とは 」 をご覧ください )

  この [ 描画モード ] 、Photoshop に慣れないうちは 「 なんのこっちゃい 」 という感じのする機能なのですが、使いこなせるようになるととっても便利で、いつも新しい発見のある機能だともいえます。 [ 描画モード ] を使いこなせるようになるコツは、その性質上、とにもかくにも 「 習うより慣れろ 」 に尽きます。ここでは一応、理屈で解説しますが、重要なのは実験と感覚なんです。私自身、Photoshop のマニュアルや解説本はほとんど読んだことがありません。このサイトでこの講座をやるようになってから、理屈で解説するために、ときどき Photoshopp のオンラインマニュアルを参照するくらいですから、皆さんも [ 描画モード ] をいろいろいじって実験してみてください。ふたつ以上のレイヤーを作って、そこに画像を置いて、いろんな [ 描画モード ] で合成してみてください。



● [ 輝度 ] とは?

 

  [ 描画モード ] の [ 輝度 ] は、基本色の色相と彩度をそのままにして、合成色の輝度を使用して、結果色を作成します。

  なにやら難しい説明ですが、この [ 輝度 ] については 「 Photoshop Tips & Manual 」 で詳しく解説する予定ですので、そのときまた…。 (逃げたんじゃないですよ〜)

 で、この [ 描画モード ] の [ 輝度 ] ですが、上記した通り、合成色の 「 輝度 」 しか使わないということはですよ、合成色には実は色はまったく必要ないってことなんですよ。つまり、合成色はグレースケールで構わないってことなんです。ということはどういうことなのかと言いますと、このページの操作 6 でやってる色付けはまったく意味がないってことなんですね……。いやぁ〜、こりゃまいった! あはははは……。すっ、す、すみません。実は、当初、別の [ 描画モード ] で合成しようと思っていたので、この手順を作っていたんですけど、画像を作っているうちに 「 あれ、これは [ 輝度 ] の方がいいじゃん 」 ってことになりましてね、でも、もう画面をキャプチャ ( 手順画面を保存すること ) しちゃったし、修正するの面倒だなぁってことで、そのままにしてたんですよ…………。まっ、いいじゃないっすか。硬いこといいっこなしっ! 練習だと思ってやってください!

 思いっきり言い訳しちゃいましたけど、まっ、作品の結果には影響ないので、なかったことにしてください。

 
 
▼操作
9-1
「レイヤー1」の [ 描画モード ] を
[ 輝度 ] に設定する
Clickで拡大
▼操作
9-2
[ 不透明度 ] を「70%」に下げて
「海」レイヤーと結合
Clickで拡大
  
 

●[ 輝度 ] で波頭の雰囲気を演出

   さて、ではなぜ、[ 描画モード ] の [ 輝度 ] を使ったのかといいますと、 前述したように [ 輝度 ] は合成色の 「 輝度 」 しか使わないということで、[ 海の波紋 ] フィルタで作った 「 波紋 」 のハイライト部分が、下の 「 海 」 レイヤーの画像と上手く合成できるからなんですね。もちろん、Photoshop では 「 これしか方法はない!」 ってことはほとんどなくて、いろんな方法で同じような結果を得ることができます。ですので、「 こっちの方が海っぽいじゃん 」 っていう方法を見つけた方は、本編集部までメールください。本サイトで紹介したいと思います。

 で、蛇足ですが、 [ 描画モード ] の [ 輝度 ] のすぐ上に [ カラー ] というモードがありますが、これは、基本色の輝度をそのままにして、合成色の色相および彩度を使って結果色を作成する [ 描画モード ] です。モノクロ画像のカラー化なんかに使ったりする [ 描画モード ] ですが、これって、[ 輝度 ] とまったく逆のことをやっているんですね。試しに 操作 9-1 で [ カラー ] と [ 輝度 ] を比べてみてください。逆の効果が理解できると思いま………、そうか! これをやってもらうために操作 6 の色付けの手順が必要だったわけですよ! [ カラー ] を試すには、合成色に色が必要ですからね! いやぁ、無駄じゃなかった、よかったよかった。


●[ 不透明度 ] で波紋を調節

    操作 9-2 で、[ 輝度 ] を設定したレイヤーの [ 不透明度 ] を下げていますが、ここは好みで調節してください。もっと波頭がはっきりした方がいいと思うときは、 [ 不透明度 ] を下げる必要はありません。
■ [ トーンカーブ ] で手前の海の色を深くする
ひとつ前のページに戻るこのページのトップへ
紹介しているTIPS
[ クイックマスク ]でグラデーションを使う
[ 選択範囲を反転 ]
[ トーンカーブ ] の [ 調整レイヤー ]

●海の色を調整する

 

 さてさて、とりあえず 「 海 」 ができましたが、なんだかまだ平面的だなぁと感じませんか? そうですよね。海の色ってのは近いほど濃く深い青で…、おっと、海の場合は 「 碧 」 を使いましょうか。そう、近いほど碧いんです。で、遠いほど、水平線に近づくほど、明るくなります。リアリティのある海を作るのが今回のテーマですから、ここはそんな感じの修正を施してみましょう。

   

●徐々に明るさが変わる調整方法って?

 

 近くが濃くて遠くが明るい色を演出するにはどうしたらよいでしょうか? うだうだ講釈を書き立てるのが面倒になってきたので、いきなり答えを出します。 徐々に色の明るさが変化するような効果を出すには、 [ クイックマスクモード ] でグラデーションを使って [ 選択範囲 ] を作成し、 [ トーンカーブ ] の [ 調整レイヤー ] で明るさをコントロールします。「 何をわけわかめなこと言ってんだお前は!」 という怒りのメールが来ないように、ひとつひとつ解説しましょう。

   

●[ クイックマスク ] でグラデーションを使う

 

 まず [ クイックマスクモード ] というのは、ブラシで色を塗る感覚で [ 選択範囲 ] を作る便利な機能です。 ですから、[ クイックマスクモード ] で、ぼかしのあるブラシを使って色を塗ると、ぼかしのある [ 選択範囲 ] が作れるというわけです。当然、徐々に透明になるグラデーションで色を塗ると、そのグラデーションの感じで [ 選択範囲 ] が作れます。では、グラデーションで [ 選択範囲 ] を作ると何ができるのかといいますと、ここで行なっているような、 [ トーンカーブ ] の [ 調整レイヤー ] で明るさやコントラストを調整するときに、その効果を適用する範囲をグラデーション感覚で調整できるというわけです。まっ、論より証拠、習うより慣れろってことで、操作 10-1 以降の操作をやってみてください。

  どうですか? グラデーションによる [ 選択範囲 ] を作って [ トーンカーブ ] の [ 調整レイヤー ] でコントラストを変えると、手前が暗くて遠くが明るい海ができるでしょ? 

   

●なぜ [ 選択範囲 ] を反転させるのか

 

 せっかく作った [ 選択範囲 ] を操作 10-2 で [ 選択範囲を反転 ] で反転させています。この理由は、[ クイックマスクモード ] では、色を付けた部分以外が、つまり、色が付いていない部分が [ 選択範囲 ] として選択されるからなのです。「 なら、最初から空の部分をグラデーションで塗ればよかったじゃないか!」 と言わないでくださいね。確かにその通りなんですけど、 人間の感覚としては、選択したい部分を塗りつぶしたくなるものだと思いませんか? グラデーションはともかく、ブラシを使うときなんか特にそう思うはずです。ですから、実際の手順として、 [ 選択範囲を反転 ] を覚えてもらいたいと思ったわけです。( 筆者ってやさしー!)

   

● [ トーンカーブ ] って?

 

 画像の明るさやコントラスト、色味などを調節できる、とても便利な機能が [ トーンカーブ ] です。ここでは詳しくは解説しませんが、操作 10-4 のようなカーブを描くと、画像のコントラストが強くなるなど、画像の微妙なコントロールができます。 [ トーンカーブ ] は、画像全体のコントロールの他、R、G、B といった 各チャンネルごとに設定することもできます。この講座の 「 第1回 レタッチとは時分だけの作品を創ること!」 の 「 明るすぎる写真を見やすく補正する 」 で、 [ トーンカーブ ] の紹介をしているので、参照してみてください。

 
 
▼操作
10-1
手前の海の色を深くする - [ グラデーション ] で [ クイックマスク ]
Clickで拡大
▼操作
10-2
[ 選択範囲を反転 ]
Clickで拡大
▼操作
10-3
反転させた [ 選択範囲 ] で
[ トーンカーブ ] を設定
Clickで拡大
▼操作
10-4
[ トーンカーブ ] で
コントラストを高くする
Clickで拡大
  
 

●[ 調整レイヤー ] って?

    [ 調整レイヤー ] というのは、画像のあるレイヤーを直接編集せずに、見かけ上の調整を行なう、調整用の特別なレイヤーのことです。たとえば [ トーンカーブ ] を使って画像を編集するとき、そのレイヤーに直接 [ トーンカーブ ] をかけることもできますが、それだと後から [ トーンカーブ ] の微調整をやり直すことができません。もちろん、編集直後なら [ ヒストリー ] や [ 元に戻す ] を使って戻せますが、いったんファイルを保存して閉じてしまった後だと、もう間に合いません。そんなときに便利なのが [ 調整レイヤー ] なのです。 [ 調整レイヤー ] は基の画像自体を編集していませんので、 [ 調整レイヤー ] を削除すれば、いつでも元の画像に戻せます。また、 [ 調整レイヤー ] の [ レイヤーサムネール ] ( レイヤーの左端にある四角い部分 ) をダブルクリックすれば、何度でも [ トーンカーブ ] を調整できます。

  このセクションで紹介している、[ クイックマスクモード ] 、[ グラデーション ] 、 [ トーンカーブ ] 、 [ 調整レイヤー ] の機能は、本講座で頻繁に使っている機能です。よければ、本講座の第1回目から読み進めてみてください。そしてこれらの機能に習熟すれば、Photoshop の中級者、いや、上級者と言っても過言じゃありませんよ。

■水平線の霞を演出
ひとつ前のページに戻るこのページのトップへ
紹介しているTIPS
グラデーションの作り方
[ 反射形グラデーション ]
[ グラデーションを編集 ]- [ グラデーションエディタ ]
[ カラーの分岐点 ]
[ 不透明度の分岐点 ]
[ 新規グラデーション ] -[ グラデーション名 ]

●さらにリアリティを極める

 

 さてさてさて、いよいよ背景画像の仕上げに入りましょう。前の操作で、海に波模様を作って、かなりリアルな画像になってはきましたが、それでもまだ何か足りない。そう、水平線がはっきりしすぎているんですよね。実際の水平線というものは、霞んでぼやけているものです。そこで、最後の仕上げは、この 「 水平線の霞 」 を演出してみましょう。 その演出には、独自のグラデーションを作って、新規レイヤーに塗ることで実現させます。

 前回の 「 海の色を碧くする 」 で、[ グラデーションエディタ ] なるものを簡単に紹介していますが、今度は、この [ グラデーションエディタ ] をもっと深く使いこなしてみましょう。そうです。時分で新規にグラデーションを作ってみるのです。

   

●どんなグラデーションを作るのか

 

 ここで作りたいグラデーションは、以下の感じです。中央が暗くて、上下方向に行くほど透明になっていくグラデーションです。つまり、中央の暗い部分が水平線で、上が空の霞、下が海の霞になるわけです。

   
 
Clickで拡大
   
   このような上下対象のグラデーションを作るときは、全部を作らずに、中央から半分だけを作ります。半分だけでも、[ 反射形グラデーション ] のオプションを選択して描画すれば、 一度に上のようなグラデーションが描画できます。
   

●[ グラデーションエディタ ] を使いこなす

 

 それでは、操作 11-1 の手順でグラデーションの準備をしてから、[ グラデーションエディタ ] を起動してください。作りたいグラデーションは、徐々に透明になっていくタイプなので、まずは、[ プリセット ] から [ 描画色から透明に ] のグラデーションを選びます。次に、 操作 11-2 の手順 59 のように、[ カラー分岐点 ] をクリックして選択します。この [ カラー分岐点 ] は、その名の通り、色の分岐を指定するポイントです。 [ カラー分岐点 ] を選択してから、[ カラー ] のボックスをクリックすると、[ カラーピッカー ] が起動して、色を指定できます。ここでは、黒ではない黒っぽい色を選びます。次に、 操作 11-3 の手順 60 の手順で、新しい [ カラー分岐点 ] を作り、操作 11-4 の手順 61 の手順で、作成した新規 [ カラー分岐点 ] の色と位置を指定します。[ 位置 ] は百分率で指定し、グラデーションバーの左端が 「 0 」、右端が 「 100 」 に該当します。 新しい [ カラー分岐点 ] を追加したことで、左端の [ カラー分岐点 ] から、新しい [ カラー分岐点 ] までのグラデーションが変化したのがわかると思います。次は、新しく作った [ カラー分岐点 ] の [ 不透明度 ] を指定します。( 操作 11-4 の手順 62 ) この手順で作成した分岐点を [ 不透明度の分岐点 ] と呼び、不透明度を百分率で指定できます。新しく作った [ 不透明度の分岐点 ] も、操作 11-5 の手順 63 の手順で、[ 位置 ] が指定できますので、 先ほど作った [ カラー分岐点 ] と同じ、「 20% 」に設定します。すると、左端の [ 不透明度の分岐点 ] から、新しい [ 不透明度の分岐点 ] までのグラデーションの透明度が変化したのがわかると思います。最後は、操作 11-5 の手順 64 と操作 11-6 の手順 65の手順で、右端の [ カラー分岐点 ] の [ カラー ] と [ 位置 ] を指定します。これで、オリジナルのグラデーションが作成できました。

   

●グラデーションに名前を付けて保存

 

 作成したグラデーションは、操作 11-6 の手順 66 の手順で、名前を付けて保存できます。こうして保存しておくと、[ グラデーションエディタ ] の [ プリセット ] からいつでも呼び出して使うこtができます。

  後は、作成したグラデーションを使って、 操作 11-7 の手順で水平線の霞を描画してみましょう。

   
 
▼操作
11-1
「水平線の霞」を
[ グラデーション ] で作る準備
Clickで拡大
▼操作
11-2
[ グラデーションエディタ ] で
グラデーションを編集
Clickで拡大
▼操作
11-3
[ カラー分岐点 ] を追加する
Clickで拡大
▼操作
11-4
[ カラー分岐点 ] の
[ カラー ] と [ 位置 ] を設定する
Clickで拡大
▼操作
11-5
[ 不透明度の分岐点 ] の [ 不透明度 ] と [ 位置 ] を設定する
Clickで拡大
▼操作
11-6
[ グラデーション名 ] を付けて保存
Clickで拡大
▼操作
11-7
新しく作成した [ グラデーション ] で水平線の霞を描画する
Clickで拡大
  
■次回予告
ひとつ前のページに戻るこのページのトップへ
●いよいよ彩ちゃんとの合成です

 

 次回は、いよいよ背景画像と人物との合成です。以前のフェラーリの壁紙のときよりも、簡単な制作工程になるはずなので、どうぞチャレンジしてみてください。今回は、ペンツールによる切り抜きもありません。なぜなら、あらかじめ切り抜いた画像ファイルを用意するからです。それではお楽しみに。

   
 
妖精の水沢彩ちゃんを作る
Clickで拡大

 
 
初出:2006/04/26
  このページのトップへ
 
space space space
space
space
space space space

     
 
 

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