Photoshopでトーンカーブを使って色調補正する方法【初心者向け】現役デザイナーが解説

Photoshopで【トーンカーブ】を使って色調補正する方法を初心者向けに解説した記事です。トーンカーブを使用すると、画像の色や明るさを細かく調整することができます。編集例も紹介しているので、ぜひ自分で試してみてください。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

監修してくれたメンター

ノマリカ

印刷会社で校閲とDTPオペレーションを5年、Web制作会社でデザイナーを8年、一般企業でWeb担当を1年経験した後、フリーランスのデザイナーとして独立。
伝わりやすくて明快なデザインを得意としている。

Photoshopでトーンカーブを使って色調補正する方法を初心者向けに解説した記事です。

トーンカーブを使用すると、画像の色や明るさを細かく調整することができます。

目次

(※今回の作業はすべてAdobe PhotoShop CCのバージョンでおこなっています)

 

田島悠介

今回は色調補正の機能のひとつ「トーンカーブ」を使ってみよう。

大石ゆかり

田島メンター!!トーンカーブは何をするんですか~?

田島悠介

明るさの補正やコントラスト、色合いなどカラーに関する調整をまとめて行うことができるんだ。

少し複雑だけれど、慣れると色々な表現ができるので是非挑戦してみよう。

大石ゆかり

はい!やってみまーす!

 

トーンカーブの設定画面

トーンカーブの設定画面を説明します。

今回はサンプルとして下の画像を使用します。

ps_tc_1

 

上部メニュー「イメージ」内にある、「色調補正」→「トーンカーブ」を選択します。

ps_tc_2

 

すると、トーンカーブの設定画面が開きます。

画面内に表示されたグラフの対角線上に直線があり、この線を変形(カーブ)させることによって色を調整していきます。

また、このグラフの横軸は「変更前の値」を、縦軸は「変更後の値」を示しています。

下の画像のように、カーブの無い直線の状態は、変更前と変更後の色の差がないことを意味します。

ps_tc_3

 

 

トーンカーブの基本的な使い方

実際に線を動かして画像の色調を補正してみましょう。

トーンカーブで色調補正をする場合、カーブの形状パターンをいくつか覚えておくと便利です。

例えば、直線上の一点をドラッグして上に移動し、下の画像のような上向きのカーブにすると画面全体が明るくなります。

ps_tc_4

ドラッグした点は「制御点」として曲線上に追加され、この制御点をさらに動かすことで補正具合を調整できます。

 

下の画像のような下向きのカーブにすると画像全体が暗くなります。

ps_tc_5

設定画面の右側にある「プレビュー」にチェックを入れると、開いている画像に調整具合が反映されます。

是非プレビューを確認しながら適切なカーブを探してみてください。

 

曲線の形状をさらに変更する場合は、線上をクリックし新たに制御点を追加します。

追加した制御点はCtrl(command)を押しながらクリックするか、グラフの枠外へドラッグすることで削除することが可能です。

ps_tc_6

 

制御点を利用し、下の画像のようなS字の形状にすると、暗い部分はより暗く、明るい部分はより明るくなり、メリハリのあるはっきりした画像になります。

ps_tc_7

 

トーンカーブの線を左右反対にすると、画像の色が反転されます。

ps_tc_8

 

田島悠介

基本的な使い方はこんな感じかな。

大石ゆかり

トーンカーブを触っただけなのに、ずいぶん雰囲気が変わりましたね。

田島悠介

曲線の操作方法には他にもいくつか便利なものがあるので、そっちも見てみよう。

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

トーンカーブの便利な機能

設定画面の右側にある「自動補正」ボタンを押すとPhotoshopが画像を解析し、自動的に制御点が追加され、曲線が形成されます。

ps_tc_9

 

ペンの形をした「描画してトーンカーブを変更」のアイコンをクリックすると、グラフ上に直感的に線を描画してカーブの形状を変更することができます。

ps_tc_10

 

ペンのアイコンをクリックして線を描画した後、左の「ポイントを編集してトーンカーブを変更」アイコンをクリックすると、描画した形を反映したまま制御点によって編集し直すことができます。

ps_tc_11

 

田島悠介

あとから微調整するためにも、この辺りの編集方法はしっかり押さえておくといいと思うよ。

大石ゆかり

制御点はいくつでも追加できるんですね。

でも色々触ってたら何か色合いが変な画像になっちゃいました……

田島悠介

慣れないうちは今回やったメリハリをつけるS字など、いくつか決まった形とその効果を覚えておくのがいいかもしれないね。

大石ゆかり

他にも編集例が見たいです!

 

風景写真の色調補正例

今度は他の写真を使ってトーンカーブを編集してみましょう。

下の都市風景の写真を補正していきます。

 

少しぼやけた印象があるので、トーンカーブの曲線を下に向けてくっきりとした印象にしていきます。

 

写真のトーンを落とすことで、全体的に引き締まった印象になりました。

 

今度はトーンカーブの曲線を上に向けて明るくしてみましょう。

 

全体が明るくなり、写真の印象が明るくなりました。

 

大石ゆかり

トーンカーブを少し操作するたけで、かなり印象が違う写真になるんですね!

田島悠介

トーンカーブをマスターすれば、同じ写真から複数パターンの写真を作ることができるんだよ。

カーブの形状パターンを覚えておけば、ある程度補正後のイメージが予測できるから、覚えておくといいよ。

大石ゆかり

はい!覚えてみます!

 

コントラストを強調した色調補正例

次は下の写真の色調を補正していきます。

 

逆光により手前の人物が暗くシルエットのように見え、雰囲気のある写真です。

もう少し太陽の光が目立つよう、少しトーンを落としつつコントラストを高めてみましょう。

トーンカーブは以下のように編集しました。

 

太陽の光以外の明るさを落とすことで、コントラストがより強調され、感動的な印象が加わりました。

 

大石ゆかり

トーンカーブだけでも色々な雰囲気の写真が作れるんですね!

田島悠介

トーンカーブと他の編集を組み合わせて使うことはよくあるから、しっかりと覚えておくように。

大石ゆかり

分かりました!ありがとうございます!

 

まとめ

トーンカーブは、画像のもつ階調(最も暗い部分から最も明るい部分までの遷移)を、変更前は横軸で、変更後を縦軸で示したものです。

直線をさまざまな形状の曲線に変更することで、画像の色調を細かく補正することができます。

初めのうちは、いくつかのカーブの形状パターンがどんな効果を持っているのかを覚えておくとよいでしょう。

Photoshopには他にも「明るさ・コントラスト」や「レベル補正」などの色調補正機能がありますが、トーンカーブを使えばそれらを一度に調整できるようになります。

トーンカーブを使った画像補正を覚えて、さらに幅広い表現を身につけてみてください。

 

Photoshopを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • Photoshopを調べたけど分かりづらい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

Photoshopの学習や情報収集をしていて、このように思ったことはありませんか?

テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。