名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

TEL.0120-038-517 CONTACT

NEWS & COLUMN

お知らせ・コラム

SCROLL

DESIGN

Photoshopで写真の色調補正をする時に覚えておきたい基礎知識

2023
.01.13

Photoshopで写真の色調補正をする時に覚えておきたい基礎知識

WEBデザインを制作する際、Photoshopを使って写真の色調補正をする場面があると思いますが、Photoshopでできる色調補正は機能が多く初心者にとっては難しいと感じられるかもしれません。
今回のコラムでは写真の色調補正をするために覚えておきたい基礎知識を、WEBデザイン初学者の方向けに紹介していきます。

【目次】
1. 色調補正とは
2. Photoshopの色調補正方法
a.明るさ・コントラスト
b.レベル補正
c.トーンカーブ
d.露光量
e.自然な彩度
f.色相・彩度
g.カラーバランス
h.白黒
i.レンズフィルター
j.チャンネルミキサー
k.階調の反転
l.ポスタリゼーション
m.2階調化
n.グラデーションマップ
o.特定色域の選択
3. 今回のまとめ

色調補正とは

色調補正とは、写真や画像の色相や彩度、コントラストなどを、その使用目的にあった色調に補正することを言います。元の色を忠実に再現したり、より美しいと感じるために調整するPhotoshopなどのツールを使って色調を補正します。色調を補正する際は、写真や画像の使用目的に合った補正を行いましょう。例えばECサイトなどで使用する商品画像の場合は、元の色を忠実に再現する補正が必要でしょう。
また、色調補正と一口に言っても、その補正方法は多岐に渡ります。今回のコラムで紹介するのは色調補正をする上での基礎知識までですが、基礎を踏まえて何度も試行錯誤することで、ノウハウをためていくことが重要です。

Photoshopの色調補正方法

Photoshopの色調補正はメニューバーの〔イメージ〕→〔色調補正〕から行う色調補正と、調整レイヤーを使用して行う方法の2種類があります。
メニューから行う色調補正の場合、スマートフィルターという機能を使って適用する事で、操作後にも再編集を行うことができます。
調整レイヤーを使用して色調補正を行う場合、画像を直接編集せず、後からでも設定を変更できますが、ピクセルを直接操作しているわけではないため、一部の色調補正機能を利用できないといったデメリットがあります。状況によって補正方法を使い分けて色調補正を行うようにしましょう。

各色調補正の機能

ここからはPhotoshopに用意されている基本的な色調補正機能を紹介していきます。それぞれの機能でできることを理解し、実際に色調補正を行う場合に目的の機能がすぐに見つけられるようにしておきましょう。色調補正を行う場合、どれかひとつだけ適用するというのは稀で、幾つもの機能を組み合わせて補正を行う場合がほとんどです。

明るさ・コントラスト

写真の明るさとコントラストを調整する機能です。初心者でも簡単に調整できる上、自動補正にチェックを入れることで、Photoshopが自動的に明るさとコントラストを調整してくれます。

レベル補正

写真の明るさとコントラストを調整する機能で、RGBとチャンネルに対してそれぞれ調整することができるため、特定の色相だけ明るさを上げたいといった場合に便利な機能です。

トーンカーブ

色調や濃度、コントラストを細かく調整することができます。明るさを変える他の色調補正よりも詳細かつ高精度に補正することができます。複雑な階調を持つ写真で細かく調整できるため、写真の色調補正を行う場合に最も重要な機能と言っても過言ではありません。こちらもRGBのチャンネルごとに調整することができます。

露光量

レベル補正と似た機能で、写真の暗い部分や明るい部分をコントロールする機能です。

自然な彩度

写真の一部の色相と彩度を調整する機能です。彩度のバランスが均一になるように整えることができます。彩度が不足している部分を持ち上げるイメージです。

色相・彩度

写真の色相と彩度を調整する機能です。自然な彩度とは違い、写真全体の彩度を調整することができます。赤色を青色にしたりなど、特定の色相を他の色相に変えることもできます。

カラーバランス

スライダーの操作で写真の色を調整する機能です。シャドウ・ハイライト・中間色ごとに色みを調整することができます。

白黒

写真を白黒やモノトーンにする機能です。ピクセルに含まれるカラーの割合に応じて明るさを指定することができます。

レンズフィルター

カメラのレンズにつけるフィルターをシミュレートできる機能です。セピア風の写真にするなど、雰囲気のある写真にすることができます。プリセットがいくつか用意されているので誰でも簡単に調整することができます。また、自分の好きな色をフィルターとして使用することもできます。

チャンネルミキサー

RGBの各チャンネルをミックスする機能です。各チャンネルの色の割合を変更することができるため、写真の一部の色が欠損している場合に他のチャンネルの色で補うことができます。

階調の反転

RGBの各チャンネルの値を0から255に、255から0に反転させる機能です。アルファチャンネルなどでマスクを使用している場合で、マスク範囲を反転させたい場合などにも使用します。

ポスタリゼーション

画像の階調数を指定し、画像を単純化することができる機能です。グラデーションを絵の具を使って描写したような表現にしたりなど、アーティスティックな表現をしたい場合などに使用します。

2階調化

指定した明るさよりも明るいピクセルは白色に、暗いピクセルは黒色にすることで、画像を白黒の2階調にする機能です。写真の色を忠実に使用する機能ではないため、アーティスティックな表現に向いた機能です。

グラデーションマップ

画像の明暗に応じて指定したグラデーションの色を適用する機能です。こちらもアーティスティックな表現に向いた機能です。この機能を使った写真はダブルトーンと呼ばれ、印象的なイメージを作ることができます。

特定色域の選択

特定の色域の色相を調整する場合に使用します。草木の緑を強調したい場合や、空の青さを強調したい場合などに使用します。また、商品画像の補正を行う場合は、この機能を使って実際の見えに近い色に補正する場合があります。

今回のまとめ

今回は写真の色調補正をする場合に覚えておきたい基礎知識をいくつか紹介しました。今日、多くのホームページで画質の高い写真を使用してデザインが制作されています。写真の色調補正技術はWEBデザイナーにとって、必要なスキルだとも言えるので、写真の色調補正にまだ不安が残るデザイナーの方や、WEBデザイン初学者の方はぜひ今回のコラムを参考にしてみてください。
また、写真の色調補正方法は多岐にわたる上、使用するWEBデザインによっても適した補正方法は異なります。写真の素材サイトや様々なWEBデザインを参考に、色々と試行錯誤してみてください。

AUTHOR

著者情報

WEBデザイナー

D.M.

前職では、ITコンサルティング会社での勤務を経てWEB制作会社に転職し、ディレクターとして勤務。株式会社オンカに入社後は、WEBマーケティングに関する最新の知見や技術、WEBデザインの最新トレンドを取り入れて幅広い業種のホームページ制作に尽力している。

  • WEBアナリスト検定
  • カラーコーディネーター AD
  • フードコーディネーター 3級

PAGE TOP