段差配色テクニック

サイト製作  2006/4/ 7

背景やボタンなどを作る場合、大抵画像処理ソフトで作成します。
ソフトを使えば簡単ですが、難しいことの1つに配色があります。
しかし、配色の秘訣を知ることにより、作れる画像の幅が広がります。

まず、上記の画像ですが画像で段差を生み出すテクニックの元です。
上から、灰色・黒・白の順で並んでいます。
これは拡大してあるので、ぱっと見ても意味がわかりませんが、1pxの線にすると…

平坦な場所に段差が生まれました。
「薄い色に濃い色+白色」この組み合わせが段差として見えるのです。
これを利用した簡単な例が以下です。

灰色の下地に、黒+白の組み合わせの線を入れるだけで区切りができました。
一見難しそうに見えますが、実際に作ると簡単です。
次は隆起した区切り線です。

これも先ほどと同じく3色の組み合わせです。
難しそうに見えますが、拡大すると…

たったこれだけの配色です。
このような、ボタン型配色やライン配色で一番参考にし易いのがwindowsです。
デスクトップや各種ウィンドウなど、拡大すると配色がよくわかります。
身近にあり、デザインの参考にとっても役立ちます。

«BACK   NEXT »  

WEBコラムカテゴリー

最近のエントリー

月別アーカイブ