ホーム グラフィックス、HP素材の作り方 無料素材、HP素材 デザインのスキルアップ 成者のためのリンク集

彩度に注目

色のことを学ぶと、明度、彩度、色々なことがらがでてきます。
予断ですが、ファイナルファンタジーのコンフィグの画面の色を変える、でしたっけ・・・の

R [・・・・・・・・・・・*・・・・・・・・・・]
G [・・・・・・・・・・・・・・・・・・・・*・]
B [・・・・・・・・・・・・・・・・・*・・・・]

これの意味が分かりませんでした。
これは、RED、赤が数値0-255。
GREEN、緑が数値0-255。
BLUE、青が数値0-255、
のグラフだったのです。
パソコンのモニターというのは赤、緑、青の光線を幾重にも混ぜて今見ている色を表現しています。
赤の光の強さはいくつで、緑の強さはいくつで、青の強さはいくつでといった感じです。
フルカラーというのは、256 * 256 * 256 = 16777216、1677万色でフルカラーといわれています。

高校から、ウェブデザインをはじめましたが、素材自体を作る能力はあまり以前と変わってないのですが、
デザインする力は及ばずながら、成長していると感じます。
それを感じるのはなぜか、最近何個かホームページを作った結果、その答えを引き出すことが出来ました。

答えは、「彩度を気にする」ようになったからです。

つまり、色を気にするようになったからです。

人間は選択肢から、モノを選んでしまいがちですが、Windowsでは標準についている、ペイントのパレットを見てみましょう。

これです、ほとんどが、不自然に作られたコンピュータ色です。

彩度は、
それぞれRGBの差が大きく開いたら高い、差が少ないと低いです。
R [・・・・・・・・・・・・・・・・・・・・・・]
G [・・・・・・・・・・・・・・・・・・・・・・]
B [・・・・・・・・・・・・・・・・・・・・・・]

RとGとBの数値が、ともに同じであれば、灰色になります。つまり彩度0です。

では、R値D7の値を、GにもBにも当てはめてみましょう。

彩度0のグレーになります。

その差が、開けば開くほど彩度が高いということになります。

彩度の高いデザインは子供っぽく見られがちです。

Photoshopでも同じことが言えます。

初期設定のカラーパレットはこれです・・・。

灰色の濃淡の幅は広いですが、左上の12マスに注目すれば、ほとんど、Windowsのペイントの配色といってもいいくらいです。

彩度が高すぎる配色です。

あなたは、デジカメをもう、お持ちだと思いますが、景色の写真を一度スポイトツールで、色を吸い取ってみてください。

R、G、Bの差がWindowsペイントのパレットに比べて、あまり無いことに気づくと思います。
実験程度にこの、実際にデジタルカメラで写したハエトリグサの写真をみてみましょう。

くっきり黄緑にみえますが、Photoshopのスポイトツールで抜き出してみましょう。

△の値に注目してください。これだけ黄緑に見えるハエトリグサを実際にスポイトツールで色を抜き出してみると、RとGとBの差があまり無いことに気づくと思います。

彩度が低いということは、モニター画面に置いては、RGBの差が無いことを意味します。

自然の色というのは、意外と彩度が低いのです。
試しに、あなたが映した写真を開いて、スポイトツールで、気に入った色を調べてみてください、彩度の低さ(RGBの差がないこと)に驚かれることと思います。

なんでもかんでも、彩度を下げればいいというものではありませんが、あなたが思っているより、きれいに見える色というのは、彩度が低い(自然の色に近い)と伝えたかったのです。

あなたが映した写真、あなたが気に入ったホームページの色をスポイトツールで色をみてみてください。

ほとんどの場合、かっこいいとおもったホームページのカラーは彩度が低めに設定されているはずです!

 

 

ページの先頭に戻ります