無料HTMLテンプレート・CGI・PHPスクリプト・ホームページ素材の配布

WEB技術講座

Photoshop講座

　上手な配色・色の選択方法

ホームページ作成のポイントの１つに配色があります。
原色ばかり使うのではなく、色の濃淡を上手く使うのがキレイなデザインの第一歩。しかし色は何万色もあります。ホームページ作成ソフトの標準色だけでは柔軟な配色はできません。
そこで、色を幅広く選択する方法を紹介します。
これもPhotoshopを使うと便利なのです。

配色の仕方

サンプル１

左のテーブルレイアウトがあります。
しかし、#FF0000 の赤を使っています。
原色を使うのは、眩しくあまりオススメできません。
そこで配色を変えてみましょう。

まず適当なサイズで新規作成します。

次に新規レイヤーを作り、#FF0000 の赤で塗りつぶします。
これで上が赤、下の背景が白のレイヤーができます。

次に赤レイヤーの不透明度を変更します。
ここでは80%にしました。
すると、色が薄くなります。
カラーコードを見るため、この薄くなった色を

スポイトツールで抽出します。

次に吸い取った色のカラーコードをみます。
ツールの色部分をダブルクリックします。

カラーピッカーウィンドウが出ます。赤枠が薄くなった色のカラーコードです。
80%だと、カラーコードが「FF3333」となります。

サンプル２

このように不透明度を変更して、カラーコードを抽出していきます。
左のサンプルは、
80% 20% 5% の色を抽出し、適用してみた例です。

このように配色をキレイに使うとデザインがグっとよくなります。
もちろん、不透明度の変更だけでなく、色彩・彩度の調整などでも色を上手に使うことができます。