ウェブデザイナーへの道のり【第2話】まずはここから始めよう~Photoshopで色調補正(「レベル補正」と「トーンカーブ」)~

・Photoshopを始めたいけど、まず何から手を付けたらよいのか知りたい!!

・Photoshopの色調補正の基礎についてわかりやすく知りたい!!

そんなあなたに!!この記事では、Photoshopを始めたばかりでもわかりやすい色調補正の基礎について紹介しています

※全話まとめ一覧はこちらからどうぞ↓↓(随時更新中♪♪)
目指せウェブデザイナー!!ド素人が1から初めてみた!?Photoshopマスターになるまでの道のり!?
・ウェブデザイナーとして、Photoshopを1から勉強してPhotoshopを使いこなせる方法を知りたい!! ・どこよりも分かりやすいPhotoshopの勉強法と使い方を知りたい!! ・隙間時間を利用しつつ、Photo...

 

※前回お話はこちらからどうぞ↓↓
ウェブデザイナーへの道のり【第1話】Photoshopはじめに ~まずは教材を選ぼう!!~
・Photoshopを使用するにあたってまず何から始めたらいいのか知りたい!! ・Photoshopを勉強するのにどんな教材を使用したらいいのか知りたい!! そんなあなたに!!この記事では、Photoshopを始める...
スポンサーリンク

色調補正をしていこう

 

みぃちゃん
みぃちゃん

ひとまず、Photoshopを始めてみたけれど、色々機能があるから何から勉強したらいいのかな?

 

めいちゃん
めいちゃん

そうだね~。まず写真を加工するにあたって、写真全体の「色調補正」から始めるのが良いね♪

 

みぃちゃん
みぃちゃん

「色調補正」?

めいちゃん
めいちゃん

そうそう!!写真の明るさや鮮やかさなどを自由に変えることが出来るんだ!!

 

みぃちゃん
みぃちゃん

そうなんだ!!なんだかおもしろそうだね!!

めいちゃん
めいちゃん

うんうん!!さっそく進めていこう!!

 

スポンサーリンク

1.「レベル補正」と「トーンカーブ」とは!?

 

めいちゃん
めいちゃん

写真の色調補正をするにあたって、基本となるのが「レベル補正」と「トーンカーブ」さ!!

 

みぃちゃん
みぃちゃん

「レベル補正」と「トーンカーブ」?

 

めいちゃん
めいちゃん

そうそう!!どちらも写真の明るさや明暗の比率(コントラスト)を自由に調節することが出来るのさ!!

 

みぃちゃん
みぃちゃん

そうなんだ!!

めいちゃん
めいちゃん

「レベル補正」は写真全体の明暗を大まかに調整することが出来るよ!!

みぃちゃん
みぃちゃん

なるほど!!

めいちゃん
めいちゃん

一方、トーンカーブも写真全体の明暗を調整できるのだけど、それに加えてより細かくピンポイントで明暗を調整できるんだ!!

 

みぃちゃん
みぃちゃん

より繊細な作業だ出来るんだね!!

めいちゃん
めいちゃん

そうだね!!

みぃちゃん
みぃちゃん

トーンカーブで全てまかなえるのなら、はじめからそれだけやればいいのかな?

めいちゃん
めいちゃん

うーん…それだと、明暗の調整が慣れてない場合、写真が不自然な明暗になってしまいやすいんだ

みぃちゃん
みぃちゃん

そうなんだ~

 

めいちゃん
めいちゃん

トーンカーブは自由自在な表現が可能な分、やりすぎると写真の雰囲気を壊してしまう繊細なものだからこそ、微調整として使うのがおススメだよ!!

 

みぃちゃん
みぃちゃん

なるほどね~

 

めいちゃん
めいちゃん

レベル補正で大まかに明暗を調整しつつ、トーンカーブで細かく明暗を修正していくイメージかな~

 

みぃちゃん
みぃちゃん

なんだか楽しそう!!さっそくやってみたいな!!

めいちゃん
めいちゃん

そうだね!!そうしたら、まずはこの写真を使って色調補正してみよう!!

 

みぃちゃん
みぃちゃん

よーし!!頑張るぞ!!

スポンサーリンク

レベル補正をしていこう!!

 

めいちゃん
めいちゃん

まずははじめに、「レベル補正」から始めてみよう!!

みぃちゃん
みぃちゃん

は~い!!

 

 

 

 

めいちゃん
めいちゃん

まず画面右横にある「色調補正」というところをクリックしよう!!

みぃちゃん
みぃちゃん

あった!!押したよ~!!

めいちゃん
めいちゃん

次に「レベル補正」を選択しよう!!

 

みぃちゃん
みぃちゃん

これだね~

めいちゃん
めいちゃん

レベル補正をしていくためのグラフ(ヒストグラム)が現れるよ!!

 

 

みぃちゃん
みぃちゃん

ほんとだ~!!グラフがある~!!

めいちゃん
めいちゃん

このグラフの直ぐ下にある三角のマークを左右にずらすことによって明るさを変えていくよ!!

 

 

めいちゃん
めいちゃん

グラフの直ぐ下にある三角のマークをにずらすことで写真を明るくすることが出来るんだ!!

 

みぃちゃん
みぃちゃん

ほんとだ~!!明るくなったね!!

 

 

 

めいちゃん
めいちゃん

一方で、グラフの直ぐ下にある三角のマークをにずらすことで写真を暗くすることが出来るんだよ♪

 

みぃちゃん
みぃちゃん

雰囲気がガラリと変わるね!!

 

めいちゃん
めいちゃん

そうだね!!では、レベル補正で調整した前と後で比較してみよう♪

 

めいちゃん
めいちゃん

少しわかりにくいかもだけど、Beforeの状態よりAfterの方がより鮮明さがアップしているよ!!

 

みぃちゃん
みぃちゃん

ほんとだ~!!特にめいちゃんや、ろっぷくんの顔周りが明るくなってるのが分かりるね!!

 

 

めいちゃん
めいちゃん

そうだね♪レベル補正したら、レイヤーも併せて見ておくと良いよ!!

 

スポンサーリンク

Photoshopの「レイヤー」とは?

 

みぃちゃん
みぃちゃん

レイヤー?

 

 

めいちゃん
めいちゃん

レイヤーっていうのは、積み重ねられた透明フィルムのようなものと考えて欲しいんだ!!

 

 

みぃちゃん
みぃちゃん

フィルムというと…?

 

 

めいちゃん
めいちゃん

 要するにレイヤーを透明にした箇所については、その下にあるレイヤーが透けて見えちゃうっていう仕組みさ!!

 

 

みぃちゃん
みぃちゃん

なるほど!!透明のところについては下のものが浮き上がるイメージだね!!

 

 

めいちゃん
めいちゃん

そうなのさ!!

 

 

みぃちゃん
みぃちゃん

レイヤーがあることによって元の写真を壊さずに色んな加工が楽しめるってことだね!!

 

 

めいちゃん
めいちゃん

そうだね♪レイヤーがあることで複数の画像を使った合成や、画像への文字入力、色調補正などを行うことができちゃうのさ~♪

 

スポンサーリンク

Photoshopの「レイヤー」で実際に確認してみよう

 

めいちゃん
めいちゃん

ではでは~先程の加工した写真をレイヤーで実際にレベル補正が出来ているか確認してみよう♪

 

 

めいちゃん
めいちゃん

画面右端のレイヤーをクリックしてね♪

みぃちゃん
みぃちゃん

おしたよ~!!

 

めいちゃん
めいちゃん

レイヤー画面が表示されたら、元の写真の上部にレベル補正をしたというレイヤーが表示されているのが分かるね♪

みぃちゃん
みぃちゃん

本当だ!!レベル補正って書いてある!!

めいちゃん
めいちゃん

ちなみにレベル補正のマスクのすぐ左側の目のマークがあるんだけどこのボタンをクリックすることでレベル補正のBeforeとAfterを確認できるよ!!

 

 

 

みぃちゃん
みぃちゃん

BeforeとAfterで手軽に確認できるのは嬉しいね~♪

 

スポンサーリンク

トーンカーブを使ってみよう!!

めいちゃん
めいちゃん

続いてはトーンカーブを使ってみよう!!

みぃちゃん
みぃちゃん

はーい!!

 

 

めいちゃん
めいちゃん

レベル補正の時のように、画面右側にある色調補正を選択してね!!

 

 

みぃちゃん
みぃちゃん

押したよ~♪

 

 

めいちゃん
めいちゃん

そしたら、トーンカーブを選択してね!!

 

 

 

 

みぃちゃん
みぃちゃん

はーい!!

 

 

 

みぃちゃん
みぃちゃん

グラフが出てきたよ!!

めいちゃん
めいちゃん

このグラフを操作することで写真を明るくしたり、暗くすることが出来るよ!!

みぃちゃん
みぃちゃん

そうなんだー!!

 

めいちゃん
めいちゃん

グラフの線は、にいくほど明るくなり、にいくほど暗くなるのさ!!

みぃちゃん
みぃちゃん

ほうほう

 

 

めいちゃん
めいちゃん

例えば、グラフにカーソルをあてて、クリック&ドラックしながらグラフの線を引き上げるとこんな感じに明るくなるよ!!

みぃちゃん
みぃちゃん

ほんとだ~!!明るくなったね!!

 

めいちゃん
めいちゃん

一方で、グラフにカーソルをあてて、クリック&ドラックしながらグラフの線を引き下げるとこんな感じに暗くなるよ!!

みぃちゃん
みぃちゃん

色々できちゃうね♪

 

めいちゃん
めいちゃん

ちなみにトーンカーブで、明るさを元の状態に戻したいときは、グラフにカーソルをあてて、クリック&ドラックしながら枠外にドラックして離せば元に戻るよ♪

 

 

めいちゃん
めいちゃん

他にも、画面の気になる箇所だけ明るくすることが出来るよ!!

 

みぃちゃん
みぃちゃん

そんなことも出来るの?

 

めいちゃん
めいちゃん

うんうん!!

 

 

めいちゃん
めいちゃん

トーンカーブのグラフ左上にある指のマークをクリックしてね!!

みぃちゃん
みぃちゃん

押したよ!!

 

めいちゃん
めいちゃん

画面の中で明るくしたいか所に指のマークを合わせてクリック&ドラックで明るさを変えることが出来るよ!!

 

みぃちゃん
みぃちゃん

ホントだ!!これによって細かく明るさが調整できるから、かなり便利だね~!!

 

めいちゃん
めいちゃん

そうだね♪

みぃちゃん
みぃちゃん

今日はレベル補正とトーンカーブについて詳しく分かったから、1つ前に進めたから嬉しいな♪

めいちゃん
めいちゃん

明るさの調整は基本ながら写真全体の雰囲気を左右するものだからしっかり覚えておくことが重要だよ!!

 

みぃちゃん
みぃちゃん

そうだね!!しっかりと覚えなきゃだね!!

 

 

※第3話はこちらからどうぞ↓↓

 

ウェブデザイナーへの道のり【第3話】まずはここから始めよう~Photoshopで色調補正「色相・彩度」とは~
・前回の話に続きPhotoshopの色調補正について、より詳しく知りたい!! ・Photoshopの色調補正の「色相・彩度」に着目し、よりわかりやすく知りたい!! そんなあなたに!!この記事では、Photoshopを...