Cat Speak

札幌在住のWebデザイナー・コモモのブログ

ホーム > ウェブ制作Tips > Photoshop > Web用写真の補正基礎知識1(レベル補正)

Web用写真の補正基礎知識1(レベル補正)

12月10日(土)のSaCSS Vol.30は、LT大会で持ち時間ひとり10分くらいなので、私も何かお話させてもらいたいなーと思っていました。とりあえず枠だけ押さえさせてもらって、何を話したらいいか前日くらいまで考えていました。

Webデザインをするにはまずはコーディングを覚えなければならないので、写真の正しい補正知識は意外と知らないまま過ごしているんじゃないかなと思ってLTしてみたら、けっこう評判がよかったので、SaCSSではスライドも用意せずデモをしながら話したのですが、話した内容をブログにまとめておこうかなと思います。

意外と長くなりそうなので、いくつかの記事に分割します。まずはレベル補正から。
ちなみにRGBの意味は理解しているものとして解説していますのでご了承ください。

  1. レベル補正
  2. トーンカーブ
  3. アンシャープマスク


レベル補正

まずは、左の写真。色が黒くくすんで、せっかくの料理が全く美味しそうに見えません。(残念ながら撮影者は私なんですよね。。)

こういったキレイじゃない写真があるときに、まず最初に見るべきは、メニューの「イメージ>色調補正>レベル補正」です。


レベル補正では、写真がどのような色データを使用しているかを確認することができます。
「チャンネル」をR(レッド)G(グリーン)B(ブルー)で切り替えると、入力レベルがそれぞれの色に切り替わります。

「入力レベル」の横軸は、下図のように、RGBそれぞれの色での「輝度(明るさ)」を示しています。縦軸はこの写真に含まれている色の量を示しています。つまり、レベル補正では、写真にどの色が多く含まれているかヒストグラムを確認することができます。

チャンネル「RGB」は、それぞれの色を単純に足したものなので、カラー情報のない純粋な輝度分布です。

つまり、左図でピンクで示した明るい色の領域を写真は使っていないので、まずは右のスライダを移動して無駄な領域をカットします。
写真が暗い一番の原因はコレ(露出が合っていない)なので、ここを調整するだけでかなり写真が明るくなります。

まだ写真が暗いと感じる場合は、中間調(真ん中くらいの色)を持ち上げて明るくする必要があります。

真ん中のスライダを左に移動すると明るく、右に移動すると暗くなります。

レベル補正だけで、かなり写真を適切な明るさにすることができましたね!

最後にお手本写真(素材辞典さん)の「入力レベル」を見てみましょう!

適切に撮影された写真は、明暗のバランスが整っていて、上のようにきれいな山なりのヒストグラムを描きます。

8bitチャンネル→16bitチャンネル

今回補正した写真の入力レベルはどうなったでしょうか?再びレベル補正を開いてみます。
最初と比べるとだいぶヒストグラムの偏りがなくなったようです(ちょっといまいちなのはおいといて。。)

でもなんでかヒストグラムが歯抜け状態になってしまいました。写真補正は、色データがなかったところを引き延ばして使うので、補正するとどうしてもこうなります。

これを少しでも軽減するために、通常は「イメージ>モード>8bitチャンネル」が選択されていると思いますが、補正作業をする前に「16bitチャンネル」に変更しておきます。

左図は、16bitで作業したのち、8bitに変更した場合の入力レベルです。
失われる色データがだいぶ軽減されますね!

コメントを残す

人気の記事