配色サンプルを作る(1)

デザインには欠かせない配色(色の組み合わせ)を作る無料のサービスを紹介します。

まずは、大御所AdobeのKuler。

Kuler
http://kuler.adobe.com/

j111103-01.gif
 大きな画像を見るには2回クリックしてね。

要は、誰かが作った配色見本がたくさんアップされているのです。たくさんあるから、探しやすい工夫がされているので、がんがん見ていきましょう。さすがにページ自体がおしゃれで、操作もしやすく、眺めているだけでも楽しいです。

このサイトは英語サイトです。英語がわからない? 英語を見ただけで頭の中真っ白になっちゃう?
そんなあなたに、ちょっとだけ解説しましょう。私もたいして英語わからないけど(笑)。

最初のページは、Newest(新着)が表示されています。
気になった配色をクリックしてみます。

j111103-02.gif

j111103-03.gif

クリックします。

j111103-04.gif

どどーん。色の壁みたいになります。冬っぽいですね。ベージュのコートにピスタチオ色のマフラー、ボトムはグレー、って結構定番のコーディネートですね。

色の部分をもう1回クリックすると、元の画面に戻ります。

この配色が気に入ったら、色の番号(カラー値)を見ましょう。

j111103-05.gif
横スライドバーのアイコンをクリック

j111103-06.gif

RGBだけじゃなくて、いろいろ出てきます。
j111103-07.gif

HTMLやCSSで指定するのは一番下の「HEX」。この明るいグレーは「CCD1D9」。実際に使う時は、頭に「#」を付けるのを忘れずに。

スライドバー(△マークの部分)を動かすと色が変わるので、元の配色を自分好みにカスタマイズすることも簡単です。

j111103-08.gif
こんな具合。

今はRGBが選択されているのでスライダは3本。CMYKを選択すればスライダは4本になりますし、スライダの意味も変わります。

j111103-09.gif

上部の丸いのもスライダなので、色について精通している人はその知識をもとに、よくわからない人はグリグリ動かせる快感のままに、いろいろ動かしてみてください。


とまあ、これは1つの配色サンプルのなかの1色をいじっただけです。5色いじるとかなりの作業量に!
…になるかどうかはその人次第ですが、自由に配色が作れる感覚は感じ取っていただけたかと思います。


次回に続く...


 クリックしてもらえたらすごく嬉しい♪

この記事へのコメント

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/233408177

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック


SPONSORED LINK