Photoshopのチュートリアルを参考にFireworksでボタン作成

カテゴリー: デザイン考 — Posted in mutsuki @ 1 月 27th, 2009
(33) (0) (2) (2) Total: 37

MagnusFx | Creating A Glossy 3D Buttonに
Photoshopを使ったボタンのチュートリアルが載っていたので
Fireworksでも同じことができないかな？と思い
Fireworksで同じボタンを作ってみた。

まず、長方形を作って角丸を設定。
グラデーションとグローフィルターを適応。

その長方形をコピーして最背面に配置。
グラデーションを設定してボタンの側面を表現。

2つの長方形の間に側面のグラデーション用の長方形を配置。

光が当たってるのを表現するため
明るめの色で楕円を作成し周囲をぼかす。

長方形をコピーしてマスクをかける。

メタリック感を出す。

ハイライト部分を表現。
高さ2pxの長方形を作成し、以下のように設定。

ボタンの影を作成。

文字を入れてドロップシャドウでなじませて完成。

レイヤーはこんな感じ。

Fireworksでも十分に質感のあるボタンが作成できる。

あと、Fireworksで作ってると便利なのは

ベクターデーターなので
☆ボタンのサイズ変更指示があったときに割と簡単に修正対応できる。
☆角丸や曲線のある図形を拡大縮小しても画像が劣化しない。

また
☆「ぼかし」「グラデーション」の設定を後々でも微調整できる。

なので、私はFireworksが好きだ。

コメントはまだありません »

コメントはまだありません。