写真にイラスト（キャラクター）を合成する【Photoshop】

2024年6月27日

「写真×イラスト」が熱い！

まずは、このツイートを見てください！

◤￣
　　あたらしい日常は、
　　すぐそばにいる。
　　　　　　　　　　＿◢

LIVE NEW REAL with
がうる・ぐら（ @gawrgura ）#ひろがるホロライブ
— ホロライブプロダクション【公式】 (@hololivetv) March 13, 2023

日常生活の中にキャラクターが居る…！
ワクワクしますね！

今回はこのツイートの画像を参考に、写真とイラスを合成する自分なりの加工方法を紹介したいと思います。

今回使用したもの

① Adobe Photoshop 2023

今回はPhotoshop最新バージョン（2023年4月時点）を使用します。
※バージョンによっては、今回紹介する操作方法とは異なる場合があります。

② 写真とイラスト

今回はフォトACとイラストACからダウンロードした素材を使用しました。

フォトAC 公式サイト：

https://www.photo-ac.com/

イラストAC 公式サイト：

https://www.ac-illust.com/

合成方法

自己流の方法も一部ありますので、
手順などは「参考程度」にしてください

3分に縮めたダイジェスト動画はこちら↓
※音が出ます

今回の画像加工のポイントを最初にお伝えします

「平均」と「ソフトライト」で馴染ませる
写真とイラストのコントラストを合わせる
光と影を表現する
「カラールックアップ」で色味を調整する
全体効果で仕上げる（今回の場合は「逆光」）

では、一つずつ作業を見てみましょう！

まずは、写真にイラストを重ねる

クリックすると、画像を拡大できます。

Photoshopで写真を開きます。

Windowsのフォルダから開く場合：
写真を右クリック＞「プログラムから開く」を選択＞「Photoshop」を選択

Photoshopから開く場合：
画面左上「ファイル(F)」をクリック＞「開く(O)…」を選択＞使いたい写真を選択

同様に、Photoshopでイラストを開きます。

「Ctrl + A」でイラストを全選択します。

全選択した状態で「Ctrl + C」でイラストをコピーします。

「Ctrl + V」でイラストを写真へペーストします。

イラストをちょうどいいサイズ・位置に調整してください。

イラストの大きさを変更する方法（一例）：
画面左上「編集(E) 」> 「自由変形(F)」、またはショートカット「Ctrl + T」で変形できます。

「平均」と「ソフトライト」で馴染ませる

クリックすると、画像を拡大できます。

Photoshop操作画面：複製したレイヤー（1番上のレイヤー）を選択した状態で、「平均」

写真レイヤーを複製し、1番上に配置します。

複製したレイヤー（1番上のレイヤー）を選択した状態で、「平均」します。

「平均」の方法：
画面左上「フィルター(T」) >「ぼかし」 > 「平均」でできます。

平均化したレイヤーを「ソフトライト」に変更します。

平均とは？
画像全体または選択範囲のカラーの平均値を求め、そのカラーで画像全体または選択範囲を塗りつぶします。

ソフトライトとは？
Photoshopの描画モードの1つで、レイヤーの色調をより柔らかく、ハレーション（光の周囲に広がる光の漏れ）を加えるためのブレンドモードです。
具体的には、背景となるレイヤーの色調と、上のレイヤーの色調を比較して、上のレイヤーの明るさが背景色を照らし、暗い場合は背景色を減らします。この効果により、上のレイヤーが背景になじむようになります。
例えば、写真にキャラクターのイラストを合成する場合、ソフトライトモードを使用して、イラストをよりリアルに馴染ませることができます。

右が、平均化したレイヤーをソフトライトに変更したもの

「平均」と「ソフトライト」を使うことで、
写真とイラストの色味を均一にします。

これだけで「自然な合成」が完成する場合もあります。

コントラストを調整する

Photoshop操作画面：「明るさ・コントラスト」調整レイヤーを使ってコントラストを調整

写真に比べると、イラストがかなり濃く感じがします。

そこで、今回は「明るさ・コントラスト」調整レイヤーを使ってコントラストを調整します。

「明るさ・コントラスト」の方法：
画面左上「レイヤー(L」) >「新規調整レイヤー(J)」 > 「明るさ・コントラスト(C)…」でできます。

今のままだと、キャラクターより下にあるレイヤーすべてに「明るさ・コントラスト」の効果がかかります。

キャラクターのみに「明るさ・コントラスト」の調整レイヤーを適用したい場合は、「クリッピングマスクを作成」などの機能を使って調整してください。

右が、イラストのコントラストを調整したもの

特に、キャラクターの黒いドレスが薄くなり、
写真のコントラストと合ってきました。

光と影を表現する

クリックすると、画像を拡大できます。

今回は、写真の女性のように、キャラクターも「逆光」風にします。

そこで、時短技としてレイヤースタイルの「サテン」を使って簡易的に逆光を表現します。

自然な逆光になるよう、サテンの不透明度や角度、距離、サイズなどを調整します。

「サテン」は本来「逆光」で使うレイヤースタイルではないため注意してください。
あくまで時短技として紹介します。

サテンとは？
レイヤーに影をつけたり、光沢を加えたりすることができるエフェクトの1つです。具体的には、レイヤー上に一定の光沢やテクスチャーをつけ、立体感や質感を表現することができます。
サテンを適用すると、レイヤーの中央に沿って光沢が現れ、縁取りに沿って陰影が生じます。
サテンを使用して、石や金属、シルクや布地などのテクスチャーを再現することができ、レイヤーに奥行きと立体感を与え、よりリアルな表現ができます。

「サテン」だけでは「逆光」感が足りなかったため、
次の方法も試していきます。