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

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

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

    badge-1-1

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

    badge-2-1

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

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

    badge-3-2

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

    badge-4-1
    badge-4-2

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

    badge-5-1

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

[参考サイト]

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

コメントを残す

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

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