Web2.0っぽいグラデーションのコツ
そろそろ「Web2.0的デザイン」という言い回しが恥ずかしくなってきましたが、それはそれでおいといて。グラデーションは今っぽいデザイン（ちょっと言い方を変えてみた）では外せない要素と言えるかと思いますが、プロのデザイナーの方はさておき、素人が挑戦すると、色の選択に失敗してイマイチ・・・なんてことになりがちです。
» A Gradient Tutorial » 9rules Network Official Blog
こちらのサイトでは、グラデーションを作る際のポイントが説明されています。
さて、どれが一番きれいでしょう？1 は彩度（鮮やかさ）が足りません。上のサイトでは「a classic problem」と紹介されています。2 はマシですが、ちょっと素人臭さを感じます。まぁ好みは人それぞれだと思いますが、やっぱり 3 が一番きれいだと思います。
ちなみに僕は、次のようにしてグラデーションを作成しています。使っているのは Fireworks です。
-
まずは、両側とも同じ色で塗ります。少し明るめの色がよいです。
-
一方の色を変えます。ポイントは、「明るさ」のみを落とすこと。Windows版だと、「色の選択」ダイアログの右端の矢印を下げるだけでOK。落としすぎると暗くなってしまうので注意が必要です。
-
できあがり。この方法だと最初の色選びを間違えない限り、そんなに悪い結果にはなりません。
毎回色を考えるはめんどくさい！というあなた（というか自分）ために、いくつかカラーチャートを用意してみたので、よかったら参考にしてみてください。
[追記 2007-03-11]
GIGAZINE で、この記事の補足としてより詳しい説明がされています。要は使い道次第だと。なるほど。勉強になるなぁー。
About this entry
5 Trackbacks
trackback uri:コメントやトラックバックは承認待ちになる場合がありますので、すぐに反映されない場合はしばらくお待ちください。