今回は、色についての知識と色調について紹介します。
光の三原色
普段モニタで見ている色は、RGBという「赤と緑と青の組み合わせ」で表示されます。
色の強さは0から255の数値で表され、赤100%はR:255となります。
赤と緑を100％ずつ足したものが黄色で、R:255 G:255 B:0となります。
それぞれ二つの色を足してできる色が、イエロー、シアン、マゼンタです。
すべての色を足すと白になり、どの色も足さなければ黒になります。
赤緑青の割合によって色が作られています。
赤の隣のオレンジは、R:255 G:128 B:0です。
つまり赤100%に緑50%を足したものがオレンジとなります。
色による意味
色にはそれぞれイメージがあります。
暖色は赤系統の色で、炎、陽の光、活発さなどを表すときに用いられます。
寒色は青系統の色で、水、青空、冷静さなどを表すときに用いられます。
これら色の知識を前提に、画像の見た目(ルックス)を変えてみたいと思います。
拡張色調補正
フィルタオブジェクトに拡張色調補正というものがあります。
拡張色調補正を使うと、画像や動画のルックスを目的に合うように変えることができます。
扱うのは主にRGBの項目です。
それ以外の項目はRGBで上手くいかないときにエイヤっ！といじります。
R(offs)の項目を0から256に移動させました。
offsはオフセットで、画像全体の色に影響を与えます。
R(offs):256は、赤100%を足します。
元々赤100%の赤色と赤緑青すべてが100%の白は変化しません。
緑色は赤を足されたことでイエローになり、青はマゼンタになりました。
また、どの色も0%だった黒は赤100%で赤色になりました。
G(offs)なら全体が緑に、B(offs)なら全体が青になります。
R(offs)を256、G(offs)を128にするとオレンジになります。
反対にR(offs)を-256にすると、全体から赤色を取り除くことになります。
赤色は黒になり、白背景は緑と青が100%のシアンになりました。
R(gain)のゲインはハイライトの部分に影響を与えます。
明るい部分を調整するときにいじります。
R(gamm)のガンマは中間色に影響を与えます。
ゲインを上げて明るくなりすぎる場合はガンマを使うとハイライト部分の影響が小さく済みます。
ルックスを変えてみる
元画像です。
地下鉄車内の画像を緊迫感のある画像へ変えてみたいと思います。
青みを帯びた画像にするために赤と緑のオフセットを下げました。
ゲインの値をいじって明るい部分を青くしました。
赤と緑を下げて、あとは調整のために青を少し上げてみました。
明るさやコントラストの調整は、通常の色調補正を使います。
コントラストを上げることで色がよりはっきりします。
仕上げにグラデーションを加えて完成。
明るい車内が、何か起きそうな緊迫した雰囲気に変わったと思います。
作っておいてなんですが、もう少し青色を控えておけばよかったかな。
目的によって色を変える
元画像です。
全体をオレンジがかった色にすると、やわらかくちょっと古めかしい感じの画像になります。
青色を下げるか、赤と緑を上げると黄色味を帯びてきます。
反対に、青味がかった色合いにして彩度を低くすると、寒々しく陰鬱な雰囲気を醸し出します。
緑がかった色は近未来やサイバーっぽさが出ます。
これはモニタを介して見る画像っぽくしてみました。
色の持つ意味と目的に合わせて調整してみてください。
色調を調整してルックスを変えることの難しさは、素材によって変えるべき色や数値が異なることです。
この設定なら綺麗な色になりますと言えません。
できることなら、お手本となるルックスを手元に置いてその色合いに近づけるように調整するといいと思います。
また、方法は拡張色調補正や色調補正だけではありません。
ティムさんの簡易トーンカーブを用いても変えることができますし、青やオレンジの背景を使ってルックスを変えることもできます。
ひとつの方法にこだわらずいろいろ試してみてください。
デザインノートNo.83
最後に、先日本屋を覗いたらデザインノートNo.83の内容が色に関する特集でした。
色の知識から、配色のパターン、配色のアイデアまで載っています。
背景やテキストの色っていつも悩むんですよね。
教科書的なページだけでなく実例やパターンの提案もたくさんあって、”色を使わない選択”なんていう考え方もいいなと思いました。
グレーとか上手に使えたら格好いいなぁ。
いかがだったでしょうか。
色調をいじってお好みのルックスを作ってみてください。