星ツールだけを使って、ギザギザWeb 2.0風バッジを作る方法

Jun 7, 2010

Web2.0っぽいギザギザバッジを、星ツールだけで簡単に作る方法をご紹介します。
レイヤー構造、ほとんど無視していいです。だって本当に星ツールだけで作るんですから。

星ツールだけを使って、ギザギザWeb 2.0風バッジを作る方法

STEP01. まずは普通の星を描きましょう

下図のような、なんの変哲もない、星が描けるはずです。色はお好みで変えてOKです。デフォルトで、頂点の数が5になっているので、これを極端に多くします。(例は25)

星ツールだけを使って、ギザギザWeb 2.0風バッジを作る方法

STEP02. ギザギザの形を調整します

頂点を25くらいに設定すると、下図左のようになります。これだと痛そうなので、「半径2」をドラッグして、ギザギザの幅を縮めます。

星ツールだけを使って、ギザギザWeb 2.0風バッジを作る方法

STEP03. グラデーション&縁取り

質感を出す為に、円形のグラデーション&内部グローによる縁取りをします。

星ツールだけを使って、ギザギザWeb 2.0風バッジを作る方法

STEP04. ドロップシャドウ&テクスチャ追加で仕上げ

ドロップシャドウを加え、立体感を出します。お好みで、薄くテクスチャを加えるのも効果的です。

星ツールだけを使って、ギザギザWeb 2.0風バッジを作る方法

STEP05. 上から文字をのせて、完成

あとは上から任意の文字をのせれば、完成です。ドロップシャドウや不透明度等を調整して、なじませましょう。

星ツールだけを使って、ギザギザWeb 2.0風バッジを作る方法

いかがでしたでしょうか。ひとつのオブジェクトに複数フィルタを重ねるだけで、簡単にギザギザWeb 2.0風バッジを作ることが出来ました。今回の例で使用したデータは以下よりダウンロード出来ますので、ぜひ併せてチェックしてみてくださいね。

download the source(524KB, Adobe® Fireworks® CS4)

おまけ

光彩(内側)&グロー等の組み合わせで、テイスト自由自在です。いろいろ試してみるのも面白いですよ!

星ツールだけを使って、ギザギザWeb 2.0風バッジを作る方法

白坂翔
白坂翔

東京のWEB制作会社の代表をしています。デザイナー兼ディレクター。
JELLY JELLY CAFEというお店のオーナーでもあります。MORE

LINE@やってます

'stats.label.addfriend' (MISSING TRANSLATION)

あわせてどうぞ

#wish09 が予想通り、予想以上によかった件