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

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

2013.02.25

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

今回は、Fireworks CS5で“ボタン”を作成する方法を勉強!

ボタンの作成手順は全部で5STEPです。

  1. 長方形を描く
  2. グラデーションを設定する
  3. ドロップシャドウを設定する
  4. ボタンの色を設定する
  5. ボタンの文字を入力

【STEP1】長方形を描く

長方形ツールで適当なサイズの長方形をかきます。

【STEP2】グラデーションを設定する

塗りのグラデーションを設定します。グラデーションには色は使わずにグレースケールで指定します。

グレースケールで指定する場合、赤枠(右向き三角)の部分をクリックして、グレースケールを選択すると、簡単にグレースケールで指定できます。

ここでは、上に「#CBCBCB」を下に「#8C8C8C」を指定しています。

【STEP3】ドロップシャドウを設定する

フィルタからPhotoshopライブ効果を適用します。
ボタンの作り方03

設定する内容は以下のとおり。
ボタンの作り方03-02

【STEP4】ボタンの色を設定する

フィルターを利用して、ボタンに色をつけます。
ボタンの作り方04

利用するフィルターは[カラーを調整] → [色相・彩度。。。]を選択。

[色を付ける]と[プレビュー]にチェックを入れ、色相・彩度・明度を指定してボタンの色を決めます。[OK]をクリックして設定を保存します。

【STEP5】ボタンの文字を入力

最後は[テキストツール]でボタンの上に、テキストを入力してボタンの作成は完了です!

これが、一番シンプルな作り方だとおもいます。

ちなみに、このボタンの作り方は、こちらの記事(Fireworksでボタンを作成する方法)の内容で勉強させていただきました!!とても分かりやすくて助かりました。作業の流れじたいは、元の記事のままですが、僕のような超初心者のために補足を付け加えました。

関連記事

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