» A Gradient Tutorial » 9rules Network Official Blog

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

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

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

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

   

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

   

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

   

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

1. まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。

2. ラインツールで 1px の「硬い線」を斜めに引きます。

   

3. 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。

   

4. 書き出しをすれば画像は完成です。

   

あとは、css で背景画像と背景色を同時に指定します。

斜線の線を変えたい場合は、css の背景色を変えるだけでOK（サンプルページ）。この透過GIF を作っておくだけでいろいろ使いまわせます。とっても便利！

Lucky bag::blog: 背景画像に使える透過 GIF では斜線以外に市松模様やストライプの透過GIF画像が入手できます。いろいろなパターンに応用できそうですね。

1. まず、角の丸みが100%の角丸矩形を描きます。塗りの色は#000000、ストロークは「なし」にしておきます。

   

2. 描画した矩形をコピー＆ペーストで複製します。（下の図ではわかりやすいように複製したほうの塗りの色を変えています。）元の矩形を「base」、複製したほうを「gradation」とします。

   次に「gradation」の大きさを変えておきます。幅と高さをそれぞれ2pxずつ小さくしてください。

   

   

3. 矩形ツールで「gradation」の半分の高さの長方形を描き、「gradation」の上辺と揃えます。長方形の塗りの色を#000000、透明度を50%ぐらいにすると、重なり部分が見えるので調整しやすいです。

   

4. ここで、Part.2 で使ったテクニックの登場です。「gradation」と 3. で描いた長方形の両方を選択し、メニューから[修正]-[パスの結合]-[交差]を選びます。すると、下図のように「gradation」が上半分になります。

   

5. 「gradation」と「base」を図のように重ねます。上と左右が1pxずつずれるようにしておきましょう。

   

6. 「gradation」の塗りの色を変更します。「塗りの種類」で[グラデーション]-[線形]を選び、グラデーションの方向を縦にします。グラデーションの色は上を#525252、下を#333333としておきます。

   

   

7. 次は「base」の編集です。ストロークの色を#000000、ストロークの種類を1pxの「柔らかい線」にします。

   

8. 最後に「base」にドロップシャドウをかけます。各設定値はキャプチャのとおりです。

   

9. 完成！どうでしょうか？

   

   さらに、応用編。

   「Ctrl+g」でグループ化したあとに、[カラー調整]-[色相・彩度...]というフィルタを追加します。「色を付ける」にチェックをつけて、それぞれの設定値を変更すると、いろんな色に！黒いのを1つ作っておくといろいろ応用がききそうです。

   
   

なお、今回はオリジナルでやり方を考えてみました。「もっといい方法があるよ」という方は是非教えてください。

1. 星型で適当な大きさの星を描きます。

   

2. 画像を選択すると黄色のポインタが5つ現れると思います。これらのうち、「頂点」というのを動かして頂点の数を24ぐらいにします。さらに、「半径2」も動かして、下の図のようにします。

   

3. 次は塗りを調整します。「塗りの種類」で[グラデーション]-[線形]を選び、左右の色を調整します。
   

   さらに、グラデーションの方向を縦にします。shiftキーを押しながらだときれいに90度回転させることができます。

   

4. ドロップシャドウをかけます。各設定値はキャプチャのとおりです。

   
   

5. 完成！これは簡単に出来ました。

   

ちなみに、PingMag – 東京発 「デザイン＆ものづくり」 マガジン » Archive » ウェブデザインのトレンド：死の宣告にもあるように、バッジは使いすぎるとゴテゴテした印象になってしまうので、ご利用は計画的に。

[参考サイト]

» Creating Badges | Bartelme Design
» Creating Badges: Part 2 | Bartelme Design
» Web 2.0 Design Kit | Photoshop Lab

1. 下の図のような感じの角丸矩形（「くけい」って読むのね。）を描きます。角の丸みは20-30%程度。塗りの色は淡い色に、ストローク（線）の色はなしにしておきます。

   

   次に描画した矩形を2回コピー＆ペーストして複製を作ります。（つまり全部で3つが重なっている状態。）便宜上、上から順番に「base」「100% round」「temp」という名前をつけます。下の2つはしばらく使わないのでロックをかけておくとよいでしょう。

   

2. 一番上の「base」を編集していきます。まず、ストローク（線）の色をつけます。「塗り」よりも濃い目の色にすると見栄えが良いです。（例では塗りの色を#DDFF88、ストロークの色を#99CC00、ストロークの種類は1pxの柔らかい線にしてみました。）

   

   次に「シャドウ（内側）」をかけます。各設定値はキャプチャのとおりです。

   
   

   さらに「ドロップシャドウ」をかけます。各設定値はキャプチャのとおりです。

   
   

   これでずいぶんと「らしく」なりました。「シャドウ（内側）」と「ドロップシャドウ」の二つのフィルタをかけて、さらにドロップシャドウの角度を「270」にするあたりが、なんだか玄人っぽいですね。（そんなことない？）さて、さらにかっこよくするために、もう一工夫かけます。

3. 次は「100% round」と名前をつけたイメージの編集です。「base」を一番下のレイヤーに移動させ、「100% round」→「temp」→「base」の順番にします。「100% round」のロックははずしておきましょう。

   

   見やすいように「100% round」の塗りの色を変えます。色はなんでもよいです。次に「100% round」の角丸矩形の角丸を100%にします。左上か右下の黄色のポインタを動かせば変更できます。

   

4. 「100% round」の底辺が「base」の中間に来るように、「100% round」を上に移動します。

   

5. さて、ここが今回のポイントです。まず、レイヤーが「100% round」→「temp」→「base」の順番になっていることを確認し、「base」にロックをかけ、それ以外はロックをはずします。

   

   「100% round」と「temp」の両方を選択し、[修正]-[パスの結合]-[交差]を選びます。すると下の図のようになります。

   

6. パスを結合したイメージを1pxか2px下に移動します。さらに、塗りの色を#FFFFFFにし、透明度を65%にします。

   

7. これで完成！それっぽいでしょ？

   

[参考サイト] aquaButton2 . Fireworks . Learn . solarDreamStudios