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

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

2013.02.26

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

今回は、Fireworks CS5でボタンを作る方法の勉強!第2弾!

今回勉強のために参考にさせて頂いた記事はこちら
→ Fireworksで基本的なボタンのパーツを作成する方法

それでは、早速ボタンの作成開始!
おまかな手順は以下のとおりです。

  1.  ボタン用の長方形をかく(外側)
  2. グラデーション設定
  3. ボタン用の長方形をかく(内側)
  4. 文字と矢印をかく
  5. 文字と矢印をボタンになじませる
  6. ボタンを立体的にする

STEP1: ボタン用の長方形をかく(外側)

ボタンのベースになる長方形をかきます。「サイズ・塗りのカラー・線のカラー」は任意で!下の画像の場合は、サイズは横180px/横40px。塗りのカラーは#2b91f6。線のカラーは#0060bfにしています。

STEP2: グラデーション設定

今書いた長方形の塗りを、グラデーションにします。開始位置(左)は#2b91f6に、終了位置は#0060bfにしました。

STEP3: ボタン用の長方形をかく(内側)

ボタンの内側の長方形をかきます。

“内側の長方形の幅”は外側の長方形よりも2px短くします。外側の長方形の幅が180pxなので、内側は178pxを指定。
“内側の長方形の高さ”も外側の長方形よりも2px短くします。外側の長方形の高さが40pxなので、内側は38pxを指定。

塗りはなし、線は1pxの白に指定します。

“外側の四角”と“内側の四角”を選択し、整列パネルをオブジェクトに相対的にしてから、水平方向と垂直方向ともに「中央揃え」を指定します。
Fireworks ボタンの作り方(その2)03_03

すると、こんな風になります。

STEP4: 文字と矢印をかく

完成までもう少し!つぎは、ボタンに“文字”と“矢印”をのせます。

「お問い合わせはこちら」と入力し、フォントのサイズを14pxにしました。
(参考にさせて頂いた記事では、「は」の文字だけ12pxにして「お問い合わせ」と「こちら」の部分を強調しているようです!他にも勉強になることが描かれているので、『Fireworksで基本的なボタンのパーツを作成する方法』の記事はぜひ見てくださいね!)

多角形ツールをつかって、三角形をかきます。

STEP5: 文字と矢印をボタンになじませる

ここまででも十分ボタンらしくなりましたが、文字と矢印をボタンになじませると、さらに見やすく、かっこよくなります!これを知らないでボタンを作っていたから僕のボタンはダサかったのかも・・・

ちなみに、ここでいう「なじませる」とは、「文字と矢印がボタンに押し込まれているように見える」ようにすることを意味しています。ボタンの表面に塗るのではなく、ボタンの表面を彫ってその中に塗られているイメージです。

この押し込まれたイメージを表現するためにフィルターの「シャドウ(ペタ塗り)」をつかいます。
(参考にさせて頂いた記事では「ソリッドシャドウを使う」と書いてありますが、CS5では「シャドウ(ペタ塗り)」を使います。「ソリッドシャドウ」から「シャドウ(ペタ塗り)」に名前が変わったようです。これが分かるまでに時間がかかりました・・・)

フィルターからシャドウ(べた塗り)を選択して、以下のように設定します。

指定する色は、ボタンのグラデーションの暗い部分からとるとキレイにできると思います。

STEP6: ボタンを立体的にする

いよいよ最後です。ボタンに影をつけて立体的にみせます!

ボタンに影をつけるために、フィルターの「ドロップシャドウ」をつかいます。(ちなみに、影を強くつけすぎると素人っぽくみえるようです!僕は今までガンガン影をつけてました・・・笑)

完成

最終的に、こんな感じになりました!
下のボタンは、「は」の文字を小さくしてみました!

なんとなくレベルアップした感じがします!

ほんとに、こちらの記事『Fireworksで基本的なボタンのパーツを作成する方法』は勉強になりました。ありがとうございました!僕も早くこんな、カッコイイサイトを自分で作りたい!!

いつになるか・・・(笑)

関連記事

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