Fireworksでボタンを作成する方法

を解説します。

とてもシンプルなwebボタンですが、ナチュラルなグラデーションや陰影など設定がプロ仕様となっています。利用頻度の高いテクニックだと思いますので、ぜひマスターしてみて下さい。

Step01 Fireworksの長方形ツールで長方形を作成

Fireworksボタン作成開始

Fireworksを開き、長方形ツールで長方形を描きます。

この長方形のサイズがwebボタンのサイズとなりますので、お好みのサイズを設定して下さい。

Step02 白黒のグラデーションを適用

Fireworksで白黒のグラデーションを適用

作成した長方形に白黒のグラデーションを適用させます。

カンバスカラー右にある[べた塗り]を[グラデーション→線形]に変え、上図のようにグラデーションを適用させます。

Step03 Photoshopライブ効果

Photoshopライブ効果

長方形を選択して、[プロパティ→フィルター( + をクリック)→Photoshopライブ効果]をクリックします。

[Photoshopライブ効果]ダイアログボックスが開きますので、左上の[ドロップシャドウ]を選択。上図のように設定し、OKをクリックします。

Step04 ボタンにドロップシャドウが適用された!

ボタンにドロップシャドウが適用された

webボタンに[ドロップシャドウ]が適用されました!

これでwebボタンの原型は完成です。

Step05 ボタンの色を決める

ボタンの色を決める

続いてwebボタンの色を決めます。

webボタンを選択し、[プロパティ→フィルター( + をクリック)→カラーを調整→色相・彩度]をクリックします。

[色相・彩度]ダイアログボックスが開きますので、上図のように設定します。なお、色相、彩度、明度のスライダーを動かすことによって、webボタンの色が変化します。お好みの色をお選び下さい。

Step06 ボタンに文字を入力

ボタンに文字を入力

最後に、webボタンに文字を入力して出来上がりです。色は白(#FFFFFF)を設定します。

出来上がり!

シンプルですが美しいwebボタンが完成しました。

かすかなグラデーションと陰影が良い感じです。

このwebボタンは実践ですぐに使えるアイテムです。ぜひお試しを。

この投稿文は次の言語で読めます: 簡体中国語, 英語

Share

  • Add this entry to Hatena Bookmark

Follow Me