こんにちは、プロクラスの和方です。
普段webデザインを行う際に、何枚もの写真を同一ページ内にレイアウトする事はよくあると思います。
ただ、カメラや撮影の環境、素材自体の画質などの違いによって、手に入る写真のクオリティにはばらつきが出てしまい、レイアウトした際に「なんかチグハグだなぁ…」という印象を持たれたこともあるのではないでしょうか？
今回はそんな画質のばらつきをPhotoshopで補正し、画面に統一感を持たせることで、デザインの印象をもっと良くしてみましょう。
この記事では特に「色調」について取り上げてみたいと思います。
まず、こちらが補正前のデザインです。
3枚の写真の色味や彩度がなんとなく違うため、全体にまとまりがない印象です。
この中では、左下のトマトの画像が一番「明るく」色味のバランスも取れているため、この写真に合わせて他の2枚を補正してみます。
全体に青みがかった写真の補正
まず、メインビジュアルのポートレートから調整します。
パッと見の印象でトマトの写真と比べると、なんとなく写真が青ざめていて冷たい印象があります。
①レンズフィルター
この青みを取り除くため「レンズフィルター」で、青の反対色の黄色をあててみます。
適用量は多すぎるとただの黄色い写真になってしまうので、適度な数値にします。
どうでしょうか？青みが取れて、赤や黄色の発色が良くなったように見えます。
②レベル補正
青みをとると、なんとなく写真自体が暗い印象であることに気づきます。
今度は「レベル補正」でハイライトの最上部を持ち上げてきましょう。
ヒストグラムを見ると右の部分（ハイライト）がごっそり抜け落ちています。
これは最も明度の高い（白い）部分が写真に含まれていないという意味です。
ポインターを左に移動させて、写真全体のハイライトを限界まで持ち上げてきます。（※a）
③カラーバランス
仕上げに、ハイライトを「カラーバランス」で少し調整します。
ハイライトは赤を出すようにして、写真全体の明るさを上げ、人物の顔色も健康的な印象に調整します。
暗い写真の補正
次は右下のピクルスの写真です。
①こちらは第一印象がとても暗い感じで、ピクルスも美味しくなさそうです…。
食べ物の写真は鮮やかで美味しそうに見せていきたいので、明るさや彩度を重点に直していきましょう。
トーンカーブ
まずは「トーンカーブ」で明るさを調整してみましょう。
ポートレートと同じくヒストグラム右のハイライトがごっそり抜け落ちていますね。（※a）
右上のポイントをヒストグラムが現れるギリギリまで左に持ってきて、ハイライトを持ち上げてきましょう。（※b）
②自然な彩度
写真が明るくなると、次は若干彩度が弱い事に気づきます。
「自然な彩度」で色味を出していきましょう。
正直ここからは個人的な趣味の問題なので、微妙にわかりづらいかもしれませんがお付き合いください…！
③カラーバランス
最後は微妙な色味を「カラーバランス」で調整します。
こちらもポートレートと同じく、ハイライトの赤みを強くします。
反対に暗部（シャドウ）はきゅうりの明度の領域になるので赤みは上げないようにします。
完成！
さあこれで全ての写真の補正が完了しました。
最初のデザインと比べて、写真に温かみがでて画面がまとまったのではないでしょうか？
以上、webサイトのための画像補正をご紹介しました。
「なんだかデザインがうまくきまらない…」と言った時は、写真の色調を調整してみるといいかもしれません。
Photoshopでは今回ご紹介した方法以外にも、様々な補正の方法がありますので、またご紹介できればと思います！