FireworksでWeb2.0デザインしてみる – Part.3

そろそろネタが尽きてきましたが、第三弾です。今回はバッジに挑戦！

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