こんにちは、LIGデザイナーのぱんちゃんです。
今回はPhotoshopを使った合成で光をふんわりまとわせる方法＆馴染ませる方法をお伝えします。
デザインのクオリティをグッと上げることができる合成のスキルですが、初学者の方にとっては難しいイメージがあるかもしれません。ですが、コツとちょっとしたテクニックさえ知っていれば合成は怖くありません！
「いままで合成は難しそうで手が出せなかった……」という方も、この機会にぜひチャレンジしてみてください！
「わからないこと」が一瞬で解決するかも？
Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！
目次
今回作るものはこちら！
今回作成するのはこちらです！
合成に使用する写真はこちらの２枚です。
室内で撮影した私の写真を合成して、春の光に包まれた雰囲気にしてみたいと思います。
- 特にこんなトンマナの場合は今回の方法が役に立ちます！
- ・光がたっぷりで幸福感溢れる
- ・女性的で柔らかなイメージ（化粧品など）
- ・ふんわり淡くてエモい
写真選びのポイント
使用する素材を選ぶときは下記の2点がポイントとなります。
ご自身で写真撮影ができるのであれば、使用したい素材に合わせたライティングや、撮影アングルを工夫できるとより良いです。
1.光の向きを揃える
素材を選ぶ際には光の向きを合わせることが大切です。レタッチで光の当たり方を多少変更することはできますが、基本的には素材選びor撮影の時点で合わせておくと合成がグッと楽になり、クオリティも高くなります。
2.パースを合わせる
「パースを合わせる」とは、複数の素材を配置する際、それらを同じ視点から見た場合に一定の奥行きや角度を合わせることを指します。パースが合っていないと、合成されたデザインが違和感を与えたり、不自然に見えたりすることがあります。
合成の手順
それではさっそく合成を始めていきましょう！ 特に色味の馴染み方、光の向きの調整は、合成の出来栄えに大きく影響します。2と3の工程が少し複雑ですが、ぜひ最後まで試してみてください！
1.人物の写真を切り抜く
人物の写真を上に、風景の写真を下に配置します。
このとき、写真がスマートオブジェクトになっていることを確認してください。
※スマートオブジェクト化されていないと画像に直接編集を加えることとなり、加工をやり直せなくなってしまいます。レイヤーパネルの写真のサムネイルにスマートオブジェクトのマークがない場合は、レイヤーを右クリック＞「スマートオブジェクトに変換」でスマートオブジェクト化をしてから加工を行いましょう。
レイヤーパネルの右下の「レイヤーマスクを追加」をクリックし、次に写真レイヤーの横に現れた白の四角をダブルクリックします。
新しく出てきた画面の右上にある「被写体を選択」をクリックし、右下の「OK」を押します。
これで簡単に被写体を切り抜くことができました。
2.人物の色味を馴染ませる（CameraRAWフィルター、レンズフィルター）
次に人物の色味を背景に馴染ませていきます。今回はCamera RAW フィルターという機能と、レンズフィルターの二つを使用していきます。
まずCamera RAW フィルターをかけていきます。
メニューバーの「フィルター」から「Camera Raw フィルター」をクリックします。
レイヤーパネルに戻り、「Camera Raw フィルター」をクリックします。
出てきた調整画面で、背景の画像に合うように明るさ・色味・彩度などを調整していきます。
まずは「基本補正」を開きます。
今回はふんわりとした加工にしていきたいので、ハイライトの数値を＋30、シャドウの数値を+20上げます。ハイライトとシャドウを上げた影響で少し写真がぼやけてしまいそうなので、テクスチャを+10かけます。
背景の写真に合わせて彩度も上げます。今回は自然な彩度を＋70としました。
次に「カラーミキサー」を開きます。
カラーミキサーは特定の色味だけに色相・彩度・明度の変化を加えられる機能のことです。今回は緑の空間にいるので肌色をやや黄色寄りに、また背景に合わせて彩度を高くしていきます。
オレンジの色相を+10、彩度を+12としました。
これでCamera RAW フィルターの調整が完了したので、画面右下の「OK」をクリックします。
次にレンズフィルターを使ってより色味を馴染ませていきましょう。
レンズフィルターは名前の通り、指定した色味のフィルターをかけたように加工できる機能です。今回は背景に合わせて黄緑のレンズフィルターをかけていきます。
レイヤーパネルを開きます。右下の「塗りつぶしまたは調整レイヤーを新規作成」をクリックし、「レンズフィルター」を選択します。
レンズフィルターを選択した状態で、MacはOption、WindowsはAltを押しながらレンズフィルターと人物画像の間にカーソルを合わせます。するとカーソルが矢印に変わるので、クリックをします。これで効果を人物写真のみに適用できる状態になりました。
プロパティパネルを開き、カスタムの隣にある四角を選択し、カラーピッカーから色味を選びます。
今回は背景に合わせて黄緑色に設定しました。色を選んだら「OK」でカラーピッカーを閉じます。
今の状態だと緑すぎるので、適用量を調整します。今回は適用量を8%としました。
これで色味の調整は完了です！ BeforeとAfterを比べると、かなり背景に馴染んできました。
4.トーンカーブで光と影をつける
次にトーンカーブを使って、光と影を加えていきます。
合成のコツは光と影の当たり方をできるだけリアルに近づけることです。今回のバナーでは、左上かつ後ろから光が注いでいることを想定しています。ということは、頭の左上や左肩はかなり光を浴びて明るくなっており、右側には影が落ちているはずです。
この光の当たり方をトーンカーブで作っていきましょう！
まずは光からです。
レイヤーパネル右下の「塗りつぶしまたは調整レイヤーを新規作成」をクリックし、「トーンカーブ」を選択します。プロパティパネルのトーンカーブの真ん中をぐーんと上に持ち上げます。
写真全体がかなり白くなりました。後ほど調整するのでここでは明るすぎてもOKです。
調整をかけていく前にレイヤーパネルと同じく人物写真だけに効果が適用されるようにしましょう。レンズフィルターを選択した状態で、MacはOption、WindowsはAltを押しながらレンズフィルターと人物の画像の間にカーソルを合わせます。カーソルが矢印に変わったらクリックをします。
次にレイヤーマスクを使用して、明るくしたい位置にだけ効果を適用していきます。
写真レイヤーの横にある白の四角をクリックし、Macはcommand+i、WindowsはCtrl+iを押して、クリッピングマスクの選択範囲を反転させます。
黒くなった四角を選択したまま、ツールバーからブラシを選択します。ショートカットキーはBです。
塗りは白、ブラシの硬さは0%、モードは通常、流量と不透明度を25％にして、光が当たっている箇所をふわっと塗っていきます。
ブラシの太さや流量と不透明度を適宜調整しながら塗っていきましょう。頭の左上や肩など、特に強く光が当たっている部分は重ね塗りをしたり、ブラシで塗る際に流量や不透明度の数値を上げてより明るくするのがコツです。明るくしすぎた場合はブラシの色を黒に変えて塗れば逆に消すことができます。
次に影を作っていきます。
先ほどと同様の手順で「塗りつぶしまたは調整レイヤーを新規作成」をクリックし、「トーンカーブ」を作成します。今度はトーンカーブの真ん中を持って、下に引き下げます。
こちらも前回と同じく人物写真だけに効果が適用されるようにしましょう。レンズフィルターを選択した状態で、MacはOption、WindowsはAltを押しながらレンズフィルターと人物の画像の間にカーソルを合わせ、カーソルが矢印に変わったらクリックをします。
写真レイヤーの横に現れた白の四角をクリックし、Macはcommand+i、WindowsはCtrl+iを押して、クリッピングマスクの選択範囲を反転させます。
黒くなった四角を選択したまま、ツールバーからブラシを選択します。ショートカットキーはBです。
今度は影が落ちているであろう部分をふわっとブラシで塗っていきます。光と反対側の右の鼻筋、顎のラインや服のシワの影の部分などを塗ってあげると良いです。
これで光と影をつけることができました！
4.レンズフレアをつける
ここからは最後の仕上げです。光が多めのふわっとしたビジュアルの場合には仕上げに「レンズフレア」を加えることが多いです。
レンズフレアとはカメラで光を撮影する際に、レンズの内部で光が反射や屈折することで輝きが発生する現象です。これを最後に加えることで、光がキラッと輝くビジュアルに仕上げていきます。
「レンズフレア」と検索すると素材が色々と出てくるので、お好みのものを使用してください。
レンズフレアの画像をPhotoshopに配置します。
左上に重ねたら描画モードをスクリーンに変更します。これでレンズフレアを追加することができました。
これで合成の完成です！
さらに上手に合成をするには
「もっと合成が上手くなりたい！」という方のために、おすすめの記事もご紹介します。
切り抜き
今回は自動で切り抜きを行いましたが、こだわって切り抜きを行うことでよりクオリティの高いビジュアルを作ることができます。 【Photoshopの小技】切り抜きの精度をグッと上げる方法 Photoshopで写真を切り抜く方法！髪の毛と背景を馴染ませるコツも紹介【初心者向け】
もりぐ
おまめ
レタッチ
色味を合わせたり世界観を作り込むためにレタッチの技術は欠かせません！ こちらの記事が助けになってくれるはずです。 Photoshopで初めて写真加工をするときに知っておくべき基本手順まとめ 意外と知らない！写真編集ソフト「Lightroom」を使った、お役立ちレタッチ方法！
LIGブログ編集部
たわ吉
影
今回はサクッとしか触れませんでしたが、リアルな影をつけることは合成で非常に大事です！ 影の作り方もぜひ学んでみてください。 Photoshopで切り抜き画像に影をつけてなじませる方法
藤田
まとめ
今回はふんわり光をまとわせる合成について解説しました。いかがでしたでしょうか？
合成には、技術的な知識が必要とされるので難しいのですが、一度覚えてしまえば狙い通りのデザインや表現を実現することができます。
初心者の方でも、今回ご紹介した手順やポイントを理解して、少しずつ練習していくことで、世界観を表現したビジュアルを作り上げることができるようになります。この記事を参考に、光がたっぷりのぜひふんわりしたビジュアル作りにも挑戦してみてください！
以上、ぱんちゃんでした！
プロからWebデザインを学びませんか？
「プロから学びたい」、「未経験だけどクリエイティブな仕事がしたい……」という方は「スクールでの勉強」もおすすめです。
デジLIGでは、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と豊富な就職支援が特徴！ ぜひ一度詳細をチェックしてみてください。
