STEP 1 新規作成

[ファイル(F)−新規作成(N)](Ctrl+N)で、新しいファイルを作成します。

新規ドキュメントウィンドウが表示されたら、サイズを決定します。

今回は、幅「100」px、高さ「50」px、解像度「72」、キャンパスカラーを白に設定しましょう。

STEP 2　角丸矩形で描画

角丸矩形ツールを使用して、適当な大きさに角丸を描画し、オブジェクトを選択したまま、情報パネルでサイズを幅「100」px、高さ「30」pxに設定します。

STEP 3 塗りの設定

塗りのパネルを開き、線形を選択します。塗りパネルの[編集]をクリックし、鉛筆マークの様なアイコンをクリックすると色を設定できますので、左のスライダを「#FFFFFF」、右のスライダを「#6699FF」に設定します。好みで、スライダの位置を調節します。

STEP 4 グラデーションの方向を決める

ドキュメントに戻り、グラデーションの方向を決めます。

まず、オブジェクトを選択し、黒い線についている黒丸を下にドラックします。

そして、黒四角をドラックします。

STEP 5 エフェクトをかける1

「エフェクトパネル」の「シャドウとグロー ⇒ ドロップシャドウ」で、エフェクトをかけます。

今回は、影の距離「5」、不透明度「65」%、柔らかさ「4」、角度「315」、色「#0066CC」に設定します。

色は、ボタンの色と同一色相、または、類似色相のもので、明度が低い色を選ぶと仕上がりが自然です。

STEP 6 エフェクトをかける2

さらに、別のエフェクトをかけます。「エフェクトパネル」の「シャドウとグロー ⇒ グロー(内側)」を実行します。

幅「4」、不透明度「75」％、柔らかさ「4」、オフセット「0」、色「#330066」に設定します。

STEP5同様にボタンの色と同一色相、または、類似色相のもので、明度が低い色を選ぶと仕上がりが自然です。

STEP 7 透明度の設定

オブジェクトの透明度を「80」に設定し、そのオブジェクトを[コピー](Ctrl+C)＆[ペースト](Ctrl+V)して、元の画像と重ねます。

コピーのオブジェクトの全てのエフェクトをはずし、塗りは無し、ストロークを種類−基本、ストローク名−エッジが柔らかい線(丸)、チップのサイズ「1」、色#0066CC(色の設定は、この場合も上記同様です)を設定します。この時、この線がオブジェクトの透明度を「60」に設定しておきます。

STEP 8　ボタンを仕上る

先ほどのストロークのみのオブジェクトをさらに[コピー](Ctrl+C)＆[ペースト](Ctrl+V)し、塗りを「#FFFFFF」に設定します。

そして、「塗りパネル」の[エッジ]を[エッジをぼかす]に設定し、適用量を「5」にします。

消しゴムツールで上5分の1ほどの所をドラッグし、下の部分を選択し[削除](Delete)します。

STEP 9 文字を入れる

文字ツールで好きな文字を入れます。文字の色は白(#FFFFFF)にドロップシャドウのエフェクトを設定すると、ボタンが引き立ちます。この時、文字の透明度を少し落とした方が、文字とボタンが馴染んでいるように見えます。

STEP 10 保存する

プレビュータブをクリックし、出来上がりを見てみましょう。

OKなら書き出します。[ファイル(F)−書き出し(E)](Ctrl+Shift+R)で書き出します。

Fireworks pngファイルは、このまま残しておくと、後々便利です。