ファーストビューを作成していきましょう。
まずはPhotoshopを使って、ベースとなる画像部分を作っていきます。
最終仕上がりとPhotoshop操作範囲
ファーストビューの仕上がり
ファーストビューは、クリップしたOHEYAGO(オヘヤゴー)のデザインを参考に作成することにしました。
最終的には、下図のようなレイアウトにします。
今回は、Photoshopで背景画像部分を作成していきましょう。
写真はバナー講座でも使った 笑顔のビジネスウーマン Stock 写真 | Adobe Stock のサンプル用画像を使用します。
ただ、ファーストビューで使うにはちょっと幅が短いですね。
横長になるように、別の背景画像と合成して使用します。
注意
以下では、バナー講座で透過した女性の画像(psd)を使用します。
透過データがない方は、先に『ILLUSTRATORとPHOTOSHOPでつくるバナー制作講座 - Photoshopで背景を透明化する』を行ってください。
Photoshopによる補正と合成
1.新規ドキュメント作成
Photoshopを立ち上げて、ファーストビュー用の新規ドキュメントを作成します。
サイズは1440×700pxにしました。
作成したドキュメントは、わかりやすい名前をつけて素材フォルダに保存します。
本レッスンではfv-base.psdにしました。
2.メイン写真を配置する
バナー講座で使用した女性の写真を配置しましょう。
そのままファイルを読み込むと、バナー講座のファイルの影響を受けてしまいます。
誤って消してしまわないよう、透過したpsdファイルをLP > sozai フォルダにコピー（複製）しておくと良いです。
マスクで背景を透過しているpsdファイルを、ファーストビューの制作用ドキュメント（fv-base.psd）にドラッグ。配置します。
3.背景画像と合成する
女性の背景に、別の画像（背景）を合成しましょう。
まずは、背景画像を探します。
今回はAdobe Stockのファイル番号「435934385」を使用してください。
⇒Adobe Stock
ダウンロードしたプレビュー画像をsozaiフォルダに移し、ファーストビューの制作用ドキュメント（fv-base.psd）にドラッグ。
横幅いっぱいまで伸ばして、とりあえず配置してください。
背景と被写体（女性）との距離感が、なるべく自然に見えるように調整します。
拡大と移動を使って、下記のような配置にしました。
まだ不自然さがありますが、今回は“一眼レフで撮ったように背景をぼかす（被写体にフォーカスする）”とのことなので、ぼかしで誤魔化せるでしょう。
4.背景をぼかす
女性にピントを合わせたように見えるよう、背景をぼかします。
『ニューラルフィルター』を使ってみましょう。
今回使用する深度ぼかし以外にも、人物の加工を中心に便利なフィルター機能が複数搭載されています。
背景用の画像が入っているレイヤーを選択した状態で、トップメニューのフィルターからニューラルフィルターを開きます。
深度ぼかしをONにします。
初めて使用する場合はダウンロードを行ってください。
この“深度ぼかしニューラルフィルター”では、一眼レフカメラで被写体にフォーカスした（被写体以外をぼかした）ような効果を加えることができます。今回の目的にピッタリですね。
焦点の項目で、画像をクリックすると焦点を決めることが出来ます。
写真右側、手前から3本目のポールあたりをクリックしてみましょう。
少し待つと、プレビュー画像の方にぼかしが適用されます。
焦点範囲を少し大きくします。
こうすることで右下の方のぼかしが弱くなります。
ニューラルフィルターパネル右下、OKボタンをクリックして、深度ぼかしを適用してください。
もう少し、ぼかしを加えてみましょう。
フィルターメニュー > ぼかし > ぼかし（ボックス） を使います。
半径7pxくらいに設定して、OKをクリック。
ここで一旦、ぼかしはOKとしましょう。
通行人やビルの模様が邪魔にならないよう、背景画像の位置を動かして調整します。
こだわりすぎると先に進めないので、ぼかしも位置も「このくらいかな」というくらいの決め方で良いです。
必要に応じて、後で微調整していけば大丈夫です。
ぼかし方は色々
フォトショップにはたくさんのぼかしが用意されています。
似たような事をするのにも、色々なアプローチ方法があり、これが正解というものはありません。
何を使ったら良いかわからない時は、イメージしている仕上がりと見合わせつつ、いくつかのぼかしを試してみてください。
5.背景画像を補整する
次に、背景画像の明るさを変更していきます。
最終的には黒の半透明レイヤーを上に乗せるので、ちょっと明るすぎるくらいに補正してしまって良いです。
調整レイヤーから、露光量を選択します。
露光とオフセットをプラスにして、背景画像を全体的に明るくします。
調整レイヤー > トーンカーブ で更に調整します。
白い部分が少し滲んだように見えるように、白のレベルを上げます。
調整レイヤー > カラーバランス を追加します。
少し青みを感じさせるよう、調整してみましょう。
補正前と比べると、かなり雰囲気が良くなったのではないでしょうか。
背景画像とその調整レイヤーはグループ化してまとめておくと便利です。
6.メイン画像を補正し、統一感を出す
背景が出来たので、メインの女性の画像を補正していきましょう。
トーンカーブ補正
調整レイヤー > トーンカーブ を使ってみます。
背景にも調整レイヤーの効果がかかってしまっていますね。
女性にだけ効果がかかるようにしましょう。
調整レイヤーを右クリックして、クリッピングマスクを作成 をクリックします。
こうすることで、女性にだけトーンカーブが反映されます。
目のアイコン（表示/非表示）を使って確認してみてください。
背景とのバランスが良くなるようにトーンカーブを調整しましょう。
こちらも最終的に黒の半透明レイヤーを重ねるので、ちょっと白すぎるかな、くらいで大丈夫です。
色味を背景に寄せる
背景グループを複製し、複製したグループを結合。
一枚のレイヤーにしてください。
結合したレイヤーを一番上に移動させます。
トップメニューのフィルター > ぼかし > ぼかし（平均） をクリック。
↓
できた薄緑色に塗りつぶされたレイヤーを、クリッピングマスクにします。
描画モードを「ソフトライト」に変更。
不透明度を35％くらいに設定すると、背景との馴染みが良くなります。
7.最終仕上げ
最後に、半透明の黒いレイヤーを全体に重ねましょう。
新規レイヤーを作成して、黒で塗りつぶします。
不透明度を調整したら完成です！
psdファイルを上書き保存してください。
次回、Illustratorを使って配置していきます。