Web2.0っぽいグラデーションのコツ

そろそろ「Web2.0的デザイン」という言い回しが恥ずかしくなってきましたが、それはそれでおいといて。グラデーションは今っぽいデザイン(ちょっと言い方を変えてみた)では外せない要素と言えるかと思いますが、プロのデザイナーの方はさておき、素人が挑戦すると、色の選択に失敗してイマイチ・・・なんてことになりがちです。

» A Gradient Tutorial » 9rules Network Official Blog

こちらのサイトでは、グラデーションを作る際のポイントが説明されています。

さて、どれが一番きれいでしょう?1 は彩度(鮮やかさ)が足りません。上のサイトでは「a classic problem」と紹介されています。2 はマシですが、ちょっと素人臭さを感じます。まぁ好みは人それぞれだと思いますが、やっぱり 3 が一番きれいだと思います。

ちなみに僕は、次のようにしてグラデーションを作成しています。使っているのは Fireworks です。

  1. まずは、両側とも同じ色で塗ります。少し明るめの色がよいです。

    step 1

  2. 一方の色を変えます。ポイントは、「明るさ」のみを落とすこと。Windows版だと、「色の選択」ダイアログの右端の矢印を下げるだけでOK。落としすぎると暗くなってしまうので注意が必要です。

    step 2

  3. できあがり。この方法だと最初の色選びを間違えない限り、そんなに悪い結果にはなりません。

    step 3

毎回色を考えるはめんどくさい!というあなた(というか自分)ために、いくつかカラーチャートを用意してみたので、よかったら参考にしてみてください。

color chart

[追記 2007-03-11]

GIGAZINE で、この記事の補足としてより詳しい説明がされています。要は使い道次第だと。なるほど。勉強になるなぁー。

» GIGAZINE – グラデーションを使ったデザインのやり方

Web2.0っぽいグラデーションのコツ」への8件のフィードバック

  1. iconlabo

    Fireworksを使ったアイコンを公開しているものです。
    きれいなグラデーションを作成するために模索しています。
    大変参考になりました。

    楽しみに拝見させていただきます。

    返信
  2. inazuma

    私の場合、[白→目的の色] でグラデを作って出来上がった一部から白を置き換えて作っています。
    クリックする数が少ないのでサクサクできる感じです。

    返信
  3. Yoshihide

    >iconlaboさん
    ありがとうございます!
    iconlaboさんのサイトもFireworksのtipsが紹介されててよいですね。

    >inazumaさん
    なるほど。そういうやり方もあるんですねー。
    参考になります。
    えらそうな記事書きましたが、ワタクシ、ずぶの素人ですので、
    いろいろ指南いただけると助かります。

    返信
  4. ピンバック: Revelation ver2.0

  5. ピンバック: links for 2007-01-24 - *sync

  6. ピンバック: WhitePaper.blog

  7. ピンバック: 料理の・・・鉛人

  8. ピンバック: ライオンの自由帳

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>