新しいブログに引っ越しました

tomotomoSnippetは新しいブログに移動しました
http://develtips.com/

2010-11-10

ブレンドモード・色相/彩度/カラー/輝度のまとめ

Photoshop, Illustrator, Fireworksなどの画像編集ソフト(ざっくりだな)を使うときに、良くカラーのブレンドってやりますよね。
"乗算"とか"スクリーン"とか"反転"とか"削除"とか。
まぁ、このあたりは直感的に分かるんですが、"色相"・"彩度"・"カラー"・"輝度"なんてのになると、訳が分からなくなるのは僕だけじゃないはず。
「何で、水色の上に茶色を色相でブレンドしたらオレンジ色になるん??」
なんて思っている人は僕だけじゃないはず。
と言う事でそのあたりをまとめてみました。
(Figure.1)
(Figure.2)
まずは、基本中の基本。
色の仕組み。
WEB屋さんだと色はRGBで考えがちですが、HSL(H:色相、S:彩度、L:輝度)で表現することもあります。(Figure.1,2)
CSS3使っている人は知ってるかも。
あえて詳しく説明する必要もないでしょう。

ブレンドモード"色相"とは、"ベースカラーの彩度と輝度"と"ブレンドカラーの色相"を合わせた色にすることです。
ブレンドモード"彩度"とは、"ベースカラーの色相と輝度"と"ブレンドカラーの彩度"を合わせた色にすることです。
ブレンドモード"輝度"とは、"ベースカラーの色相と彩度"と"ブレンドカラーの輝度"を合わせた色にすることです。
ブレンドモード"カラー"とは、"ベースカラーの輝度"と"ブレンドカラーの色相と彩度"を合わせた色にすることです。



…と、Adobeさんの説明を噛み砕いて書いてみましたが、はい?って感じです。
これで分かる人は賢い人ですね。
分からない人は次の図を見て下さい。(Figure.3,4)
(Figure.3)
(Figure.4)
上図の左がベースカラー(色相:中、彩度:中、輝度:中)です。右がブレンドカラーです。

「ブレンドモードで指定した要素のみ上書きする」と考えれば分かりやすいです。(余計分かりにくいですか?)
これが理解できればデザインの幅が少し広がりますね。

じゃあ、"焼き込み(リニア)"とか、"ハードミックス"はどうなんだって?
知りません。
また機会があればまとめます。

(余談)
輝度って「きど」って読むんですね。
読み方が分からず「けいど」って言っていました。お恥ずかしい。

(2010.11.12追記)
こちらの記事が大変詳しいです。
http://ofo.jp/osakana/cgtips/blendmode.phtml

0 件のコメント:

コメントを投稿

人気のエントリー