Photoshop 画像合成

デザイン五輪書

Photoshopで画像合成を行う際のテクニックとポイント

読了までの目安時間:約 25分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

Photoshopで画像合成を行う際のテクニックとポイント

Photoshopで画像合成を行う際の考え方

レイヤーと言う概念

今回は、Photoshopで画像合成を行う際のテクニックやポイントについてご紹介したいと思います。
Photoshopを使用する上で、画像合成を行う機会はとても多いです。
ぜひ、テクニックを身に付けましょう。

Photoshopで画像合成を行う際は、レイヤーと言う構造を理解する事が最も重要になって来ます。
レイヤーの構造のイメージとしては、部分的に画像が描き込まれている透明なフィルムを何枚も重ねて、一枚の画像を作ると言う発想を持つと分かりやすいと思います。

レイヤーの概念

上の画像で言うと、「草むらの背景」に、「きのこのヘタのレイヤー」と「きのこの傘のレイヤー」を重ね合わせ、草むらに生えたきのこの画像を合成しています。
画像合成を行う際は、こう言う発想を持って下さい。

▲もくじへ戻る

Photoshopで合成を行う画像を準備する

PAKUTASOで画像をダウンロードする

まずは、合成する画像がないと話になりません。
今回は、「PAKUTASO」と言うフリー画像サイトを利用しましょう。

作例で使用する画像は、「セパレート」と「究極生物と戦うビジネスマン」と「仮想敵機!!(アグレッサー)新田原基地 飛行教導隊」です。
画像を見比べれば、大体、どのような合成画像ができるかは想像できると思いますが、まぁ、やってみましょう。

それぞれのサイトにアクセスし、画像をダウンロードしましょう。
写真のダウンロード方法ですが、サイトを開き、「写真のダウンロードはこちら」をクリックします。

写真のダウンロードはこちら

PAKUTASOの利用規約に同意ができれば、画像のサイズを選び、クリックします。
作例では、ショートサイズを選びました。

ショートサイズの画像をダウンロード

▲もくじへ戻る

Photoshopで合成する画像の読み込みと並び替え

画像合成に必要なファイルをPhotoshopに読み込む

Photoshopを起動します。

「メニューバー」の「ファイル」をクリックし、表示されたメニューの中にある「スクリプト」にマウスポインタを合わせます。
表示されたサブメニューの中から、「ファイルをレイヤーとして読み込み」を選択します。

ファイルをレイヤーとして読み込み

「レイヤーを読み込む」ダイアログが表示されます。
「参照」をクリックして下さい。

レイヤーを読み込むダイアログ

「開く」ダイアログが表示されますので、先ほどダウンロードした三枚の画像を選択して下さい。
複数のファイルを選択する際は、一枚目のファイルをクリックした後、キーボードの「Shift」を入力しながら、最後のファイルをクリックすると良いです。

複数のファイルを選択

離れた場所にあるファイルを選択する場合は、キーボードの「Ctrl」を入力しながらファイルをクリックします。

「OK」をクリックすると、「開く」ダイアログが閉じられます。

「レイヤーを読み込む」ダイアログに、先ほど選択したファイル名が一覧表示されます。
間違いなければ、「OK」をクリックします。

「レイヤーを読み込む」ダイアログが閉じられ、選択したファイルがレイヤー別に読み込まれます。

▲もくじへ戻る

レイヤーの順番を並び替える

「レイヤーパネル」を確認すると、画像のサイズの大きさの順番にレイヤーが並べられています。
ですので、ファイルを正しい順番に並べ替えましょう。

まず、セパレートの画像は背景になりますので、再背面に移動します。
「レイヤーパネル」で「セパレート」の画像レイヤー(以下、空レイヤー)を選択して下さい。

レイヤーパネルでセパレート画像を選択

「メニューバー」の中の「レイヤー」をクリックします。
表示されたメニューの中にある「重ね順」にマウスポインタを合わせます。
すると、サブメニューが表示されますので、「最背面へ」をクリックします。

重ね順を最背面へ

同様の手順で、「仮想敵機!!(アグレッサー)新田原基地 飛行教導隊」レイヤー(以下、戦闘機レイヤー)を最前面へ移動して下さい。
サブメニューで選択する際、今度は「最前面へ」をクリックして下さい。

「レイヤーパネル」上では、「戦闘機」レイヤー、「究極生物と戦うビジネスマン」レイヤー(以下、人物レイヤー)、「空」レイヤーの順番にレイヤーが並べられました。

レイヤーの順番

▲もくじへ戻る

画像の不必要な部分を取り除く

レイヤーマスク

次は、レイヤーに並べられた、各画像の背景部分を切り抜きます。
この切り抜きが下手くそだと、画像合成が残念な仕上がりになってしまいます。
ですので、丁寧に行いましょう。

画像の切り抜きと聞くと、「消しゴムツール」や、選択して「Delete」を入力する方法を考える方もいるかもしれませんが、それは、素人が行う手法です。
一度消してしまった部分のデータの復旧は難しいので、後から微調整ができなくなってしまいます。
「ヒストリーブラシ」を使い慣れている方なら問題ありませんが、そうでない方は、「レイヤーマスク」を使用するようにしましょう。

「レイヤーマスク」とは、レイヤーの特定の部分をマスクして、透明にしてしまう手法の事です。
マスクをすると、顔の口元部分が見えなくなりますよね?
その発想です。

レイヤーマスク部分を黒く塗りつぶすと、その部分は透明になります。
逆に、白く塗りつぶすと、透明部分を元に戻す事ができます。
ですので、レイヤーマスクを使う事で、画像の透明部分の微調整が容易になるのです。

また、レイヤーマスクを使用する事で、半透明を作ったり、グラデーション状の透過具合を適用する事もできます。

グラデーション状のマスク

更に、透明部分の適用範囲をぼかす事もできます。

このように、レイヤーマスクの利便性はかなり高いです。
レイヤーマスクを使いこなせるかどうかが、ワンランク上の表現ができるかどうかを左右していると言っても過言ではないほどです。
ですので、ぜひ、レイヤーマスクに慣れて下さい。

▲もくじへ戻る

戦闘機レイヤーの背景部分を切り抜く

では、早速、「戦闘機レイヤー」の背景部分を切り抜きましょう。
「レイヤーパネル」で「戦闘機レイヤー」が選択されているのを確認して下さい。

まずは、戦闘機の部分のみを選択する必要があります。

「戦闘機レイヤー」の画像は、戦闘機と背景の空との境目がしっかりしています。
ですが、背景の空は単色ではなく、雲の白と空色が入り交じっています。
これらの点を踏まえると、「クイック選択ツール」を使用して戦闘機部分を選択する方法が効率的ではないでしょうか?

「ツールパネル」の中にある「クイック選択ツール」をクリックします。
もし、「自動選択ツール」が表示されている場合は、「自動選択ツール」を長押しし、表示された「クイック選択ツール」を選択します。

クイック選択ツール

「オプションパネル」で「選択範囲に追加」をクリックし、戦闘機部分をドラッグして下さい。

選択範囲に追加

選択範囲が戦闘機からはみ出てしまった場合は、キーボードの「Alt」を入力しながら、はみ出た部分をドラッグして下さい。

「クイック選択ツール」は自動ツールですので、どうしても、思うように選択できない部分が出て来ます。
そう言った部分の微調整には、「多角形選択ツール」を使用しましょう。

多角形選択ツール

「多角形選択ツール」を選択範囲の微調整として使用する際は、「オプションパネル」の中にある「選択範囲に追加」と「現在の選択範囲から一部削除」を使い分けて下さい。

多角形選択ツールのオプションパネル

一通り飛行機の周囲を囲む事ができたら、「オプションパネル」の中にある「境界線を調整」をクリックします。

境界線を調整

「境界線を調整」とは、髪の毛や動物の毛など、自力で選択範囲を形成する事が困難な細かい部分に使用すると便利な機能です。
また、コップなどの透過するものや、背景色が写り込んでいるものから背景色を取り除く目的にも使用できます。

ただし、良い事ばかりと言う訳ではなく、「境界線を調整」で調整した部分は完全な透明にはなりません。
半透明になってしまいますので、不必要な部分にまで適用してしまうと、かえって汚い仕上がりになってしまいます。

今回は、戦闘機の運転席部分で透過している空の色を半透明にしたいと思います。

「境界線を調整」をクリックすると、「境界線を調整」ダイアログが表示されます。
「表示」横の「▼」をクリックし、表示された一覧の中から、「オーバーレイ」を選択します。

境界線を調整の表示をオーバーレイに

「出力」の中の「不要なカラーの除去」にチェックを入れます。
「出力先」が「新規レイヤー(レイヤーマスクあり)」に切り替わりました。

不要なカラーの除去

この状態で、戦闘機の運転席の窓ガラス部分をドラッグします。
できる限り、余計な部分はドラッグしないようにして下さい。
もし、はみ出てしまった場合は、キーボードの「Alt」を入力しながら、はみ出てしまった部分をドラッグします。

また、ブラシのサイズが大きい場合は、「オプションパネル」の「直径」部分の数字を変更すれば、ブラシサイズも変更されます。

境界線を調整のブラシの直径

「OK」をクリックします。
選択範囲外は自動的にレイヤーマスクでマスクされ、「戦闘機」レイヤーの戦闘機を切り抜く事ができました。

戦闘機レイヤーの戦闘機を切り抜いた

▲もくじへ戻る

戦闘機レイヤーの保護と非表示

この後、「空」レイヤーのサイズに合わせて、カンバスをトリミングします。
その際、「戦闘機」レイヤーが「空」レイヤーからはみ出ている部分まで切り抜かれてしまわないように、「戦闘機」レイヤーをスマートオブジェクトに変換しておきます。

「メニューバー」の中にある「レイヤー」をクリックします。
表示されたメニューの中にある「スマートオブジェクト」にマウスポインタを合わせます。
表示されたサブメニューの中にある「スマートオブジェクトに変換」をクリックします。

スマートオブジェクトに変換

「戦闘機」レイヤーがスマートオブジェクトに変換されました。

続けて、この「戦闘機」レイヤーを非表示にします。
「レイヤーパネル」上の「戦闘機」レイヤー横の、「レイヤーの表示/非表示」をクリックします。

戦闘機レイヤーを非表示に

「戦闘機」レイヤーが非表示になりました。

更に、「戦闘機」レイヤーの元となったレイヤーは必要ありませんので、削除しましょう。
レイヤーを選択した後、「レイヤーパネル」下部の「レイヤーを削除」をクリックします。

不必要なレイヤーを削除

選択したレイヤーが削除されました。

▲もくじへ戻る

人物レイヤーを加工する

「戦闘機」レイヤーと同様に、「人物」レイヤーも加工しましょう。
手順は、「戦闘機」レイヤーと全く同じです。

「人物」レイヤーの人物を選択した後にマスクし、スマートオブジェクトに変換します。
更に、非表示にした後、「人物」レイヤーの元となったレイヤーを削除して下さい。

ポイントとしては、「人物」レイヤーを選択してから作業を行うと言う事と、「人物」レイヤーの背景色は単色に近いグラデーションですから、「自動選択ツール」で選択範囲を作ると言う点です。

自動選択ツール

「自動選択ツール」は、「オプションパネル」の「許容値」の値を「16」に抑えれば、わずか2クリックで、背景のみを選択する事ができます。

許容値

背景のみを選択後、「メニューバー」の中にある「選択範囲」をクリックし、表示されたメニューの中にある「選択範囲を反転」をクリックします。

選択範囲を反転

これで、「人物」レイヤーの人物のみを選択できます。

「境界線を調整」では、髪の毛部分だけではなく、メガネの部分も透過させるようにして下さい。

▲もくじへ戻る

空レイヤーをトリミングする

現在、「空」レイヤーのみが表示されています。
この「空」レイヤーを背景にしますので、「空」レイヤーの透明部分は必要ありません。

背景の透明部分

ですので、カンバスサイズを「空」レイヤーのサイズに合わせる事で、透明部分を取り除きましょう。

「メニューバー」の「イメージ」をクリックし、表示されたメニューの中から「トリミング」を選択します。

トリミング

「トリミング」ダイアログが表示されます。
「トリミング対象カラー」を「透明ピクセル」に設定します。
更に、「トリミングする部分」は全てにチェックを入れます。

トリミングダイアログ

「OK」をクリックする事で、カンバスサイズが「空」レイヤーのサイズに変更になりました。

▲もくじへ戻る

合成した画像の配置やサイズを変更する

人物と戦闘機のサイズと配置を調整

次は、人物と戦闘機のサイズと配置を調整します。
まずは、非表示にしていたレイヤーを再表示しましょう。

「レイヤーパネル」の「戦闘機」レイヤーと「人物」レイヤー横の「レイヤーの表示/非表示」をクリックします。

レイヤーの表示

続けて、「人物」レイヤーの配置とサイズを変更しましょう。
各レイヤーの移動や変形に関しては、「移動ツール」を使用します。

「ツールパネル」の中から、「移動ツール」を選択します。

移動ツール

「オプションパネル」の中の「自動選択」と「バウンディングボックスを表示」にチェックを入れます。

自動選択とバウンディングボックスを表示にチェック

人物をクリックします。
すると、人物の四方にバウンディングボックスが表示されたと思います。
この状態で人物をドラッグすると、人物を移動する事ができます。

人物のサイズを変更する際は、一度、バウンディングボックスをクリックします。

バウンディングボックスをクリック

すると、スマートオブジェクトの枠が表示されます。
表示されたスマートオブジェクトの枠の四隅を、キーボードの「Shift」を入力しながらドラッグする事で、人物の縦横比を保ったまま拡大・縮小する事ができます。

スマートオブジェクトの四隅をドラッグ

サイズが決まったら、「オプションパネル」右側に表示された「変形を確定」をクリックします。

変形を確定

この手順で、人物のサイズと配置を調整して下さい。

そして、戦闘機も同様の手順で、サイズと配置を調整します。

▲もくじへ戻る

画像解像度を変更するタイミング

各レイヤーのサイズや配置を決め、全体のサイズのバランスを取ったら、この時点で、画像解像度を変更します。
画像解像度を変更する事で、画像全体を最終的な仕上がりのサイズに変更する事ができます。

逆に言えば、この先は、画像のサイズ変更は行いません。
画像の拡大・縮小は画質を劣化させてしまいますので、画像解像度を変更する前に、全て終わらせておきます。
・・・とは言うものの、今回の作例においては、各レイヤーをスマートオブジェクトに変更していますので、画質の劣化は起こりませんけれども。

画像解像度を変更する事で画像全体を小さくすれば、それだけ、Photoshopの動作を軽くする事ができます。
加えて、画像を切り抜いた際にできる、細かいガタガタの部分を目立たなくする事もできます。
ですから、このタイミングで画像解像度を変更すると言うのは意味があるのです。

また、今回は使用しませんが、画像解像度を変更する事でレイヤースタイルのズレが生じますので、画像解像度の変更は、レイヤースタイルを使用する前に行いたいものです。

▲もくじへ戻る

画像解像度を変更する

では、「メニューバー」の中にある「イメージ」をクリックして下さい。
「イメージ」のメニューが表示されたら、中にある「画像解像度」を選択します。

画像解像度

「画像解像度」ダイアログが表示されますので、「幅」や「高さ」、「解像度」を任意の数値に設定します。
ここで指定した数値が、最終的な仕上がりになります。

画像解像度ダイアログ

「OK」をクリックする事で、画像のサイズが変更されました。

▲もくじへ戻る

合成画像のリアリティを上げる一工夫

各レイヤーの色相と彩度と明度を調整する

これで、画像の合成はできました。
ですが、仕上がり具合を見てみてどうですか?

画像の合成は完成!?

私には、人物や戦闘機がやや白っぽく見えます。
特に、人物の白っぽさは顕著です。

・・・それもそのハズ。
全く別のカメラ設定で撮られた写真ですから、合うハズがありません。

各レイヤーの色相と彩度、明度の差が大きいと、チグハグ感が生まれてしまい、合成だと丸分かりになってしまいます。
素人っぽさをなくす為には、画像合成後の色相と彩度、明度の調整は必ず行うようにしましょう。
それでも調整しきれない場合は、合わせて、「明るさ・コントラスト」、「トーンカーブ」、「レンズフィルター」を使うのも良いです。

では、「人物」レイヤーの色相と彩度を調整してみましょう。
「レイヤーパネル」で「人物」レイヤーを選択します。
そして、「レイヤーパネル」下部にある、「塗りつぶしまたは調整レイヤーを新規作成」をクリックします。

塗りつぶしまたは調整レイヤーを新規作成

表示されるコンテキストメニューの中から、「色相・彩度」を選択します。

色相・彩度

「属性」パネルが表示され、色相・彩度の調整画面が表示されます。
下部にある「この色調補正は下のすべてのレイヤーに影響します(クリックするとレイヤーにクリップされます)」をクリックして下さい。
ここをクリックしないと、背景レイヤーの色相と彩度と明度にまで影響を与えてしまいます。

「人物」レイヤーの色相と彩度、明度は、背景の画像に合わせるつもりで調整を行って下さい。

属性パネルの色相・彩度

同様に、「戦闘機」レイヤーの色相と彩度、明度の調整も行って下さい。

▲もくじへ戻る

画像の距離感を演出する

続いて、画像の距離感を演出したいと思います。
まずは、現在の仕上がりを確認して下さい。

色相と彩度、明度を変更後

これはこれでも良いのですが、実は、不自然な写真なのです。
なぜならば、背景、人物、戦闘機、全てにピントが合っているからです。

通常ですと、背景か人物か戦闘機、どれか一つにピントが合い、それ以外はピンぼけします。
また、それが遠近感や距離感を演出するのです。
今の画像だと、距離感のない、不自然な写真なのです。

ピンぼけを演出する場合、画像の中で一つ、主役を選びます。
そして、その写真を中心に、各レイヤーの距離感を考えます。
主役から奥行きの距離が遠のくほど、ピンぼけ具合が強くなります。

今回の場合、戦闘機を主役にする場合と、人物を主役にする場合とでは、仕上がり具合が全く変わって来ます。
作例では、戦闘機を主役に据えて、作業を進めて行こうと思います。

▲もくじへ戻る

人物レイヤーにぼかしを入れる

ピンぼけは、「フィルター」と言う機能で演出する事ができます。
では、「人物」レイヤーにぼかしを入れてみたいと思います。

「レイヤーパネル」で、「人物」レイヤーを選択して下さい。

続けて、「メニューバー」の中にある「フィルター」をクリックします。
表示されたメニューの中にある「ぼかし」にマウスポインターを当てます。
表示されたサブメニューの中にある「ぼかし(ガウス)」を選択します。

ぼかし(ガウス)

「ぼかし(ガウス)」ダイアログが表示されます。
距離感を強調したい場合は、やや強めにかけると良いです。

ぼかし(ガウス)ダイアログ

「OK」をクリックする事で、人物がピンぼけします。

人物をぼかした

▲もくじへ戻る

戦闘機と人物の位置関係を変更する

現在の写真の状態は、戦闘機が人物よりも手前に位置し、人物が奥に対峙しているような構図です。
更に一手間加える事で、戦闘機が人物の懐内に進行しているように演出する事もできます。

「レイヤーパネル」の「人物」レイヤーを確認して下さい。
「スマートフィルター」と書かれているレイヤー、そして、その左側にレイヤーマスクのようなものが表示されているのが確認できます。

スマートフィルター

実はこれ、「ぼかし(ガウス)」用のレイヤーマスクなのです。
説明するよりも使ってみた方が分かりやすいと思いますので、作業を行ってみましょう。

「人物」レイヤーのぼかし(ガウス)用のマスクをクリックして下さい。

スマートフィルター

「ツールパネル」の中の「グラデーションツール」を選択します。
「塗りつぶしツール」や「3Dマテリアルドロップツール」が表示されている場合は、長押しして、「グラデーションツール」を選択して下さい。

グラデーションツール

「オプションパネル」の中にある「クリックでグラデーションを編集」をクリックします。

クリックでグラデーションを編集

「グラデーションエディター」が表示されますので、「プリセット」の中から、「黒、白」を選択し、「OK」をクリックします。

グラデーションエディター

続けて、「オプションパネル」の中にある「反射形グラデーション」をクリックします。

反射形グラデーション

では、人物の腕に沿ってドラッグしてみましょう。

腕に沿ってドラッグ

すると、ドラッグした部分のピンぼけが弱まりました。

ドラッグに沿ってピンぼけが弱まる

距離感で言うと、戦闘機の位置は、人物の手と顔の間に位置するように見えます。
このように、ピンぼけの具合を変更する事で、奥行きを自在に変更する事が可能です。
色々試してみて下さい。

▲もくじへ戻る

空レイヤーをぼかす

最後に、「空」レイヤーもぼかします。
「空」レイヤーは、戦闘機から見て、人物よりも更に遠い位置にあります。
つまり、「空」レイヤーを人物よりもぼかすと、適度な距離感が生まれます。

「レイヤーパネル」で、「空」レイヤーを選択します。

続けて、「メニューバー」の中にある「フィルター」をクリックします。
表示されたメニューの中にある「ぼかし」にマウスポインターを当てます。
表示されたサブメニューの中にある「ぼかし(ガウス)」を選択します。

ぼかし(ガウス)

「ぼかし(ガウス)」ダイアログが表示されます。
前述したように、「人物」レイヤーの時よりも強めにぼかしをかけます。

ぼかし(ガウス)ダイアログ

「OK」をクリックする事で、「空」レイヤーがピンぼけします。

空レイヤーもぼかした

▲もくじへ戻る

まとめ

完成例

完成例

▲もくじへ戻る

リアリティが全てではない

今回は、Photoshopで画像合成を行う際のテクニックとポイントについてご紹介しました。

レイヤーと言う概念についての話から、Photoshopに複数の画像を読み込む方法、レイヤーマスクについて、画像の移動やサイズ変更、画像解像度の変更、各レイヤーの色相・彩度・明度を統一する方法、ぼかしで距離感を演出する方法についてご紹介しました。
あれこれと幅広くご紹介しましたが、いかがでしたか?

テクニックに関しては、それぞれ好みの問題もありますし、取り入れたい部分は取り入れ、必要ないと思う分に関しては、そう言う方法もあるのだと言う感じで受け取って頂けたらと思います。
テクニックの取捨選択もその人の個性に繋がりますし、正解はありません。

リアリティと言う事で、色相・彩度・明度や距離感の出し方についてご紹介しましたが、これらも、敢えて崩すと言うのも表現の一つですし、それはそれで面白いと思います。
Photoshopでリアリティのある画像合成を行う事が全てではありませんので、あなた独自の作品を作ってみて下さい。
リアリティのない(現実にはありえない)画像を作れるのがCG最大の魅力でもありますから。

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ :

ソフトウェア Adobe Creative Cloud   コメント:0

この記事に関連する記事一覧

TOPへ戻る