このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows:ウィンドウを効率よく操作する方法まとめ (12/09)
  • Windows:スリープ復帰時のパスワード入力をやめる (12/07)
  • Windows:ミス激減!チェックボックスでファイルを複数選択する (12/05)
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

    画像のモノクロ化は輝度で変換しないとヒドイことになる

    このエントリーをはてなブックマークに追加
    イメージ


    こんにちは、さち です。

    カラー画像をモノクロに変換することってありますよね。

    モノクロ化する方法は多くありますが
    「輝度」についてちゃんと理解していますか?

    『えっ、輝度って何?明度と違うの?』
    そんな状態だとモノクロ画像がヒドイことになっているかも!?




    色によって明るさの感じ方が違う

    下のような「赤」「緑」「青」の3色があります。
    それぞれ、RGBの各チャンネルを最高値にしたものです。
    サンプル

    あなたに質問です。
    3色の中で、一番明るい(まぶしい)色はどれ?
    逆に、一番暗い色はどれ?

    恐らく、一番明るいのは「緑」、一番暗いのは「青」
    そう答える人がほとんどでしょう。

    では、彩度を下げてこの3色をモノクロ化してみましょう。
    モノクロでも明るさの違いは出るでしょうか?
    サンプル

    結果はこちら。3色とも同じ明るさになりました。
    サンプル

    カラーの時に感じた明るさの違いは何だったのか?
    目の錯覚…?いえ、そんなことはありません。

    原因は、「明度」と「輝度」の違いです。

    実は、先ほどのモノクロ画像は「明度」をもとに変換したもの。
    「輝度」をもとにした場合はこうなります。
    サンプル

    3色の明るさに違いが出ました。
    明るさは、緑 > 赤 > 青 の順。
    カラーの時に感じた明るさと同じ順番ですね。




    「明度」と「輝度」の違い

    「明度」と「輝度」は、どちらも「明るさ」を指す言葉です。
    でも、意味が微妙に違います。
    違いは前項のモノクロ画像で実感できましたよね。

    簡単にいうと
    「明度」は、単に色の彩度を下げたもの。
    「輝度」は、色による明るさの違いを考慮したもの。

    ちなみに、白黒テレビの映像も輝度をもとに作っていました。

    「明度」と「輝度」、どうして違いが出るのでしょう?

    理由は簡単、「変換式」が違うからです。
    「カラー(RGB)」を「明度」「輝度」に変換する式は次のとおり。
    式は覚えなくていいです。理解の助け程度に流し見して下さい。
    (数字が苦手な人はこの項は飛ばしても大丈夫です)

    明度 = (RGBの最大値+RGBの最小値)÷2
    輝度 = 0.299×R + 0.587×G + 0.114×B (≒ 0.3R+0.6G+0.1B)


    「輝度」は、R(赤),G(緑),B(青)に係数をかけて
    重み付けをしているのが分かります。
    明るく感じるG(緑)は約0.6倍、暗く感じるB(青)は約0.1倍
    というように明るさの補正が行われているわけです。

    例えば、青(R:0 G:0 B:255)の場合
    輝度 は 明度 より 約77% も暗くなります。

    明度 = (255+0)÷2 = 127.5
    輝度 = 0.299×0 + 0.587×0 + 0.114×255 = 29.07


    人間の目の性質を考えれば
    「輝度」でモノクロ化した方が、カラーでの印象に近いはずですね。




    「輝度」でモノクロ化しないと問題が起こる

    今度は、「輝度」でモノクロ化することの大切さを目で確認しましょう。

    ここに「色相環(色を少しずつ変化させたもの)」があります。
    これを「明度」でモノクロ化するとすべて同じ色になってしまいます。
    虹色を「明度」で変換したら大変なことになりそうです。
    サンプル

    描画色と背景色の組み合わせによっては
    「輝度」でモノクロ化しないと色が同化してしまうかもしれません。
    下の例では、「明度」でモノクロ化すると赤しか見えないという困った結果に…。
    サンプル

    カラーでは見分けがつく色の組み合わせでも
    「明度」でモノクロ化すると潰れてしまう可能性があるので注意!

    ちなみに、色相環の例を見ると
    「黄」が一番明るく、「シアン」も比較的明るい
    「青」が一番暗く、「赤」も比較的暗いというのが分かります。
    このことは頭の片隅でいいので覚えておきましょう。




    「明度」と「輝度」の違いを実感してみよう

    サンプル

    「輝度」でモノクロ化した方が
    服,炎,背景下側が明るくコントラストも高いですね。
    明るさもカラーのものと近くなっています。


    サンプル

    今度は実写での比較。
    「輝度」でモノクロ化した方が
    花びらが明るくカラーの明るさに近いですね。

    「明度」と「輝度」それぞれのモノクロ画像を見比べると
    「明度」の方が画が暗く、コントラストも低いのが分かります。
    黄,緑,シアン を多く含む画像は特にそれが目立ちます。

    美しいモノクロ画像を作るには
    やはり「輝度」でモノクロ化した方がよいですね。




    Photoshop, SAI で「輝度」によるモノクロ化をする方法

    もしかして手順が面倒なんじゃ…?と思った方
    大丈夫、ものすごく簡単です。
    まずは、Photoshop での手順を見ていきます。

    1. 一番上に「色相・彩度」の調整レイヤーを作り
      描画モードを「色相」にします。
      サンプル

    2. 調整レイヤーの彩度を「-100」にして完成。
      サンプル

    たったこれだけ。簡単です。

    ちなみに、方法はもう一つあります。
    無彩色(白,黒,グレー等)のベタ塗りレイヤーを一番上に置き
    描画モードを「色相」にすれば完成です。
    輝度によるモノクロ化だけが目的ならこちらの方がお手軽ですよ。

    SAI の場合は、「明るさ・コントラスト」で「色の濃さ」を「-100」にするだけ。
    Photoshop よりもさらに簡単ですね。
    操作画面




    知ってると役立つかも

    「輝度」でモノクロ化をするのは
    色によって明るさの感じ方が違うからという理由でした。

    そこで、気になる点が一つ。
    イラストで髪や服の色を変更する時に「色相」を動かすと
    一緒に明るさも変わっているということ。
    明るさが変われば見た目の印象も変わってくるはずです。
    サンプル

    Photoshop で、「輝度」を維持しながら色を変更する方法は
    モノクロ化の手順とほぼ同じ。
    「色相・彩度」の調整レイヤーを作って描画モードを「色相」にしたら
    「彩度」には触れず、「色相」だけを動かせばOK。

    描画モード「色相」の機能により
    下のレイヤーの 輝度,彩度 を維持しながら 色 だけを変更できます。

    そこまで厳密な輝度管理はしないとしても
    黄,シアン=明るい、青,赤=暗い ということを意識して色を調整すれば
    見栄えも大きく変わってくるはずですよ。




    以上、「輝度」について書いてきましたがいかがでしたでしょうか。
    今後のあなたの画像編集に役立てば幸いです。








    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら


    良い記事あざーっす
    名無し | 2013/05/21/Tue [EDIT]
    0.299×R + 0.587×G + 0.114×B
    輝度のこの式は何を基準に設定された値なんでしょうか?
    モノクロ化はソフトウェアによって結果が違うので必ずしもこの式が使われているとは限らないと思うのですが、わかりますか?
    グラフィックプログラム入門 | 2014/11/11/Tue [EDIT]
    RGBをYUVに変換する際の式で「Y」が輝度に当たります。
    詳細は「YUV」について調べてみて下さい。
    うみの さち | 2014/11/11/Tue [EDIT]
    わかりやすいです!
    わかりやすい記事いっぱい書いてください!
    支持者は増えます!
    華村木子 | 2015/06/01/Mon [EDIT]



    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2016 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ