何でもありの、ごちゃまぜブログ。

Fireworks ボタンの作り方(その2)

2013.02.28

Fireworks ボタンの作り方(その2) はコメントを受け付けていません。

Fireworks ボタンの作り方(その2)

今回作成するのは、光ってるボタン!
こんな感じです。
↓ ↓ ↓

おおまかな手順は、以下のとおりです。

  1. ベースになるボタンをかく(外側)
  2. ボタンの光っている部分をかく(内側)
  3. 「ボタンのベース(外側)」と「光っている部分(内側)」を一つにする
  4. ボタンに文字をのせる

ベースになるボタンをかく(外側)

まず、ボタンのベースになる部分をかきます。角丸長方形を選択し、適当なサイズの長方形をかきます。つづけて、[自動シェイプのプロパティ]で「幅170/高さ40/角丸の半径20」を指定します。塗りの色はあとで変えます。線はなし。

塗りをグラデーションで指定します。左側の色は“#009900”で右側の色は“#00E500”にしました。

ボタンの光っている部分をかく(内側)

ボタンの光っている部分は、さきほど作成したボタンのベースとなる角丸四角形を複製して作ります。複製した角丸四角形を選択して、[自動シェイプのプロパティ]に「幅168/高さ38/角丸の半径19」を指定します。“内側の四角形”は“外側の四角形”よりも、幅が2px小さく、高さが2px小さくなります。

角丸四角形の上部を覆うような長方形をかきます。長方形の不透明度を下げると、角丸四角形との関係がわかりやすくなります。下の例では、長方形の不透明度を70にしています。

長方形と角丸四角形の両方を選択して、[パスパネル]の「パスの交差」を選択します。

すると、長方形と角丸四角形が重なっていた部分でだけが残りますので、塗りをベタ塗り白(#FFFFFF)にします。線はなし。

「ボタンのベース(外側)」と「光っている部分(内側)」を一つにする

それでは、最初に作成した「ボタンのベース(外側)」と「光っている部分(内側)」をひとつにします。

両方選択している状態で、[整列パネル]の「水平方向中央揃え」と「垂直方向中央揃え」をクリックします。すると、したの画像のように、2つのオブジェクトが重なります。

「光っている部分(内側)」を選択して、キーボードの下向き矢印ボタン[↓]を1回おして、1px下にずらします。

「光っている部分(内側)」にグラデーションを設定します。色は両方とも白(#FFFFFF)を指定します。不透明度の値は、左が90、右が25です。

これで、ボタンの部分の作成は完了です。つづけてボタンの文字を入力します。

ボタンに文字をのせる

ボタンのうえに文字を入力します。フォントやサイズはなんでもかまいません。下の例では、フォントは「Arial」に、サイズは「20px」にしています。可読性を高めるために、下の例では「光彩」フィルターを使用しています。指定した値は画像のとおりです。

なお、文字の可読性を高める方法はいくつかあるようで、ほかには「ドロップシャドウ」を使う方法や、「シャドウ(ペタ塗り)」を使う方法もあります。それぞれの方法で作成した例は以下。

【ドロップシャドウを使った方法】

【シャドウ(ペタ塗り)を使った方法】

■参考にさせていただいた記事
10分で作る!ガラスっぽいボタン【Fireworks】
【Fireworks】ボタン画像に使うテキストのいじり方

関連記事

コメントは利用できません。