2011年

6月

06日

写真技術 色と陰影(手代木さんblogより)

 

 

写真技術 色と陰影(手代木先生のblogより転載)

 

こないだの写真教室で言っていた事を理論立てていうとこういうことです!というのを手代木先生がblogで書かれていたので、許可を頂き転載します。

どうしても難しくなりがちなのですが、普段僕が言ってる事は現場実践編で内容は同じですので、僕の言い回しがわかりにくい場合はコチラのほうが科学的でわかりやすいかもしれません。 以下

 

 

 

色とは


わたしたちが目にするものすべてに「色」があります。
デザイン・プレゼンをする際にもこの「色」が大きく関わってきます。
まずその「色」の基本を理解しましょう。



色とは光


この世界が暗闇だったら、わたしたちは個々の「色」も「実体」も認識できません。
なぜなら、まず「光」があり、その「光」が「物体」に反射することで、人は「色」を認識するからでです。
そして、わたしたちの脳は、それら「色」の情報と、体験的に知っている「物体」の情報をもとに「形」を認識するのです。



光とは電磁波


光は電磁波と呼ばれる波動の一種で、波長と粒子両方の性質で構成されています。
19世紀後半、イギリスの物理学者マックスウェルが「光は光源の電気振動によって起こる電磁波である」という説を表明しました。
色の認知には、「波長」の性質が関係してきます。



色は光の電磁波


この「光」自体にも複数色があり、これを発見したのがニュートンです。

彼の発見により、太光線(白色光)をプリズムで分光すると、「スペクトル(虹=赤・橙・黄・緑・青・藍・青紫の異なった光)」と呼ばれる色の帯が生まれることがわかりました。

 

 

 

この帯を構成する「光」は、人間の眼が感じることのできる「波長」を持つ「電磁波」であり、「可視光線」と呼ばれます。

光(白色光)が物体に当たって反射すると、その物体の持つ「光の電磁波」が生まれ、わたしたちの目に届くということになります。

 

 

 

 

この「可視光線」は、380nm(1nmは、1mの10億分の1)から780nmあたりの周波数域にある。
光の波長の幅が短くなるほど、エネルギーは大きくなる。
可視光線の−方の端にある赤色光の外側には赤外線(IR)が、もう一方の紫色光の外側には紫外線(UV)が続く。
これらは目に見えないので「不可視光線」とも呼ばれる。

 

 

 

 

 

 

光源色


光源が発する光の中に、どの波長の電磁波が多く含まれているかによって、光そのものが青や赤、オレンジなどの色を帯びて見えます。

これを「光源色」と呼びます(太陽・花火・蛍光灯など)。

 

 

 

 

 

 

物体色(表面色・透過色)

 

表面色


物体に光が照射されたとき、その表面から反射された光によって現れる色。

 

透過色


物体が光を透過することによって現れる色(ステンドグラス・セロファン・瓶など)。

 

 

 

 

この二つを「物体色」と呼びます。

 

 

 

 

 

 

 

色を見るということ


この光源色と物体色という、物体に吸収されずに目の網膜に直接飛び込んでくる波長によって、わたしたちは様々な色を認識します。

ここまでが「目」が認識する色です。
この信号が「脳」に伝わり「色」に対して感情が生まれてきます。
それが「色を感じる」「色を認識する」ということです。

 

 

 

 

 

色の分類:三属性


「色について」で触れたように、人は「色」を目から脳に伝達し「色の情報」を「感覚」で理解します。

そして、誰もがもつ共通の感覚である「色」の情報を、理解しやすく伝達するために様々な分類方法があります。まず、その分類を理解しましょう。

 

 

 

 

有彩色・無彩色


色には様々な種類がありますが、大きく「有彩色」と「無彩色」に分けられます。

 

 

 

少しでも色みがあれば有彩色となります。
有彩色は、無彩色以外のすべての色を指します。
無彩色は、白・黒・グレーのことを指します。

 

 

 

 

 

色の三属性


色の三属性とは様々な色を表現するために必要な3つの要素で、色相(Hue)、彩度(Saturation)、明度(Brightness)のことを表します。



色相(Hue)


色相とは赤、青、緑のような「色味の違い」のことを表します。
色相はイメージの違いを最も表現することが出来る属性です。


色相と色相環


 色相を円上に配置したものを「色相環」と言います。
 ニュートンは当時の音階が「7音」だったことから「7色」を基本色としました。

 「」「黄赤(橙)」「」「」「」「青紫(藍)」「紫青(紫)

 これを、「虹色」と呼んでいます。

 ですから「虹の色」は「七色」ではないという議論はナンセンスです。
 たとえて言えば「七色」ということなのですから。

 

 

 

 

類似(隣接)色相


よく似た色相のことを表します。
色相環の上の基本色を基準にすると、隣接する両側の類似色相を指します。


補色


この色相環の正反対に位置する色のことを補色と呼びます。
補色同士を並べて配置するとお互いに引き立て合って鮮やかに見えることがありますが、絶対的ではありません。
注意したいのは「補色=目立つ組み合わせ」と覚えないことです。

 ※「補色」については、配色の説明で詳しく書きます。



彩度(Saturation)


彩度とは色の鮮やかさを表す属性です。
彩度は「高い」「低い」でその度合いを表します。

彩度が最も高い色は鮮やかな原色となり、彩度が低くなるにつれてくすんだ色みを感じない色に変化し、最後には無彩色になります。

 

 


一般的には、彩度が高い色は派手な印象を受け、彩度の低い色は地味に感じます。
それには、心理的に「エネルギー」の強弱を感じることが関係します。

 

明度(Brightness)


明度とは、明るさの強弱の違いのことです。
最も明るい色は白、最も暗い色は黒です。
「明度」は、有彩色・無彩色のすべての色にある性質です。

明度を表す場合、明るい色のことを「明るい」「明度が高い」というような表現をします。

 

 

 

明度とコントラスト


明度は「色相・彩度」といった他の属性よりもものの見え方に直接影響してきます。

隣あう色面の明度関係を「コントラスト」と呼びます。

 

 

人はこの「コントラスト」の高いものを、一番最初に認識します。
そしてそれは、人が感じる「時間」との関係でもあります。

 


例えば「モダン」という言葉は、単に古い・新しいではなく、その色の組み合わせの中に過去と未来への時間の振り幅が大きいことを感じるときに使われます。

 

 

 

 

 

 

 

 

 

カラーモード:RGBとCMYK

 

RGB


「光の3原色」であるR(Red=赤)、G(Green=緑)、B(Blueviolet=青紫)の3色で表現したカラーモードです。

 

パソコンのモニターや液晶画面は、「色光」で発色しているため、モニター表示の色の指定や確認は、CMYKよりもRGBのほうが向いています。

通常のRGBは、10進法で0〜255までの256段階で表記します。0が最小で255が最大値となります。
従って、「R:255/G:255/B:255」は最も明度が高い色、すなわち「白」となる。

この数値は「Photoshop」を使用することで、より理解しやすくなります。
※「256色」は「8ビット:2×2×2」を意味します。


この混色の方法を「加法混色」と呼びます。

 

 

 

CMYK


「色の3原色」は C(Cyan=シアン,藍)、M(Magenta=マゼンタ,紅)、Y(Yellow=イエロー,黄)ですが、実際の印刷の際には、黒を忠実に再現するため K(Black=ブラック,黒)を合わせた4原色を基本とするカラーモードです。

 


各色を混合することで色を表現します。掛け合わせるインキの量を%で表示し、その数値はインキの混合率であると共に色指定をする際の数値表記にもなります。


この混色の方法を「減法混色」と呼びます。

 

 

 

 

 

 

カラーモード:WebセーフカラーとHSB


RGBカラーでは、それぞれの色光が256段階(8bit)の階調を持っています。
その全てを表示できるかどうかはコンピュータのVRAM(ビデオメモリ)の容量によって決定します。
現在では24bit、つまり256(R)×256(G)×256(B)=約1,670万色での表示となります。

これを一般的には「フルカラー:256の3乗で16,777,216色」と呼びます。

 

HEXカラー


「HEXadecimal:ヘクサデシマル」(16進数)に由来します。
「0〜9」に続けて「A〜F」までを「ひとけた」として進数です。


Webセーフカラー


「#FF9933」「#0066CC」のように、同じ番号2桁ずつの組み合わせたカラーがWebセーフカラーです。
RGB値を16進数で表す時に、00,33,66,99,CC,FFのみを用いて色を作ります。
この組み合わせの総数が「216色」であることから、この組み合わせで表現した色を「Webセーフカラー」と呼びます。



Webセーフカラーは気にしなくてもよい


Webセーフカラーは、古い16bit環境では見え方がOSやブラウザによって変わってしまうためにできた考え方です。
現在のモニターではフルカラーが表示できますから「Webセーフカラー」にこだわる必要はありません。
Webの習慣として「Webセーフカラー」が存在しているだけです。

大切なのはどの環境でも同じように見えることではなく、どのような人でも読みやすくわかりやすいということです。

Webセーフカラーを使った配色イメージということで、まぶしく読みにくいサンプルに惑わされたり、縛られたりするよりも、自分の表現したい内容を適切に 表現することが出来る色彩設計をした後で、8bitカラーや16bitカラーでもきちんと読むことが出来るかを確認した方が建設的です。




HSB


HSBカラーモデルとはコンピューター上で扱う色を数値化した物の一つで、色の三属性である「色相(Hue)」「彩度(Saturaion)」「明度(Brightness)」を数値化して色を指定します。


人間の色知覚に基づいたカラーモードなため、コンピューター(IllustratorやPhotoshop、Webデザインアプリケーションソフト等)で色を作成・指定する場合に、直感的に作業を行うことができます。

 

 

 

Photoshopには図のような「カラーピッカー」があり「HSB」の数値指定も可能です。

左側の色空間は横軸に彩度、縦軸に明度が設定されています。
彩度・明度は0〜100%の範囲で調整が可能です。
右側にあるのは色相のバーで、角度で表します。

※注意しなければならないのは明度100%の色が白ではないことです。
 色相と彩度における最も明るい色が100%となります。




HSBの色相


HSBの色相は見た目が偏っており、色彩調和論に基づいた配色を理論的に説明することが難しいカラーモデルです。

 

HSBは色相を角度で表します。360°を色数で割った角度でずらしていくとHSB色相環ができます。
しかしHSBの色相には偏りが見られ、隣同士の色が同じに見えたり、離れすぎて見えたりします。
それぞれの色相環の色の差が均等でないと、配色について考えることが難しくなります。

見た目の色の差が均等な色相環を用い配色するには、「マンセルシステム」や「PCCS」のような知覚的に等間隔な色相環を理解する必要があります。


 

 

 

 

 

 

 

陰影とは

 

  1. 光の当たらない、暗い部分。かげ。「ライトを当てて被写体に陰影をつける」
  2. 物事の色・音・調子や感情などに含みや趣があること。ニュアンス。「陰影に富んだ文章」

 

 

 

陰影をつくる


つまり平面的な表現に立体的にみえるような表情をくわえることにより、平面的な表現では伝えにくいニュアンスをつくろうとすること。

 

陰影とハイライトが奥行き知覚に及ぼす効果

陰影とは、物体内および物体間の面が光源に対して遠近の関係にある場合、もしくは光源に対する面同士の角度が異なる場合に生じる輝度勾配をさす。
こうして面に生じた輝度勾配は、視覚系が3次元世界を再構成するのに有用な手がかりとなっている。

少なくともダ・ヴィンチの時代から、陰影が奥行き知覚を生起する要因となっていることは経験的に明らかではあるが、陰影手がかりについての心理学的研究は歴史が浅い。

しかしながら、近代に入って、コンピュータ技術の発達に伴い、これまでさまざまな研究が行なわれてきた。
なかでもV. S. Ramachandran等によって上方光源仮説が提唱され、その後様々な学者により研究が進められて今日に至っている。

これまでの先行研究においては、円形の内部に陰影として線形のグラデーションで塗りつぶしたものを刺激として用いているが、現実世界における陰影の付き方はそれだけではない。

   引用[熊本大学 学術リポジトリ



知覚心理学

 

空間知覚


視覚・聴覚・触覚などによって空間的広がりを認識する作用。
形・大小・方向・位置・距離がその対象となる。



奥行きを知覚するデザイン


奥行きのデザインに関わるキーワードは、主に知覚・認知心理学で研究されている事項です。


形状の簡潔性

  • 人間には見たものをより単純な形状として認識しようとする

 

明暗・陰影

  • 人間はモノクロ写真の明暗や陰影から奥行きや立体感を得るとができる
  • 一般に、物体の左上から光を当てた場合の陰影を再現すると立体感を得やすい-厚みを持ったボタン

 

重なり合い

  • 2つの図形が重なる部分で一方の図形を消し去ると、消された図形の方が後ろにあるように感じられる
  • これは、後方にある物体は前方にある物体に隠されて見えないと頭の中で解釈されるためである

 

相対的大きさ

  • 同じ大きさの物体であっても、遠くの物は小さく見え、近くの物は大きく見える
  • このように、2次元上の相似な図形の大小は見る側に奥行き感を与える

 

透明視

  • スイス国旗の上に透明な短冊が乗っているように見える
  • このように、実際には透明でないものでも明暗の付け方によって透明感を感じることがある

 

マッハバンド効果

  • 人間の目は色相や明暗が急に変化する部分に敏感に反応する
  • また、人間の目には明るさや色に対して反応するレベルに境界値(閾値)がある
  • このことから、色相や明暗が急に変化する境目付近では、その部分が盛り上がった形状に見える

 

線遠近法

  • 一直線に続く道路を写真に取ると、平行する左右の路肩および街路樹の先端を結ぶ線は1点に収束する
  • これと逆に、人間は1点に収束する直線を全て平行線と認識し奥行きを感じる性質がある




レイヤースタイル-グラデーションオーバレイ

 

形を認識しやすいグラデーション

  • あまり強いシャドウを使わないことが基本
  • ハイライトに「白」を使うことも不自然にみえる原因

 

 

 

以上です。

 

手代木先生、許可して頂き ありがとうございました!

 

手代木先生もまた愛のある授業をされている素晴らしい先生です。


素晴らしい師を持つ事ほど難しいことはないので、先生の受講生の皆さんは授業の300時間を有意義に使い、修了時のクリエーターデビューを是非目指してくださいね!

 

 

 

 

 

 

 

 

 

 

 

コメントをお書きください

コメント: 1
  • #1

    長谷川禎泰 (火曜日, 04 3月 2014 01:35)

    まずはじめに白。加法混色、白から始まる色だ、元素記号はわからないがイメージできるものは骨ボーン。そして次に黒でしめる減法混色。コントラストがはっきりしている。RGBは255シャドウと来るか?  コメントさせていただきました。