Fireworksのマスク処理とグラデーションでリンクボタンを作る

Fireworksのマスク処理とグラデーションでリンクボタンを作る

　アドビ社のWeb画像編集ソフト「Fireworks 8」でマスクとグラデーションを利用したリンクボタンの作り方をご紹介します。

完成サンプル（角を丸くしベベルでフレームを設定）

作り方の一例（背景は白、文字入れなし）

1. レイヤー１に矩形ツールで長方形を作成（塗りは白）
2. 新規にレイヤー２を作成し、長方形をレイヤー１と同位置にコピー
3. レイヤー１はロックし見えなくしておく（理解のために）
4. レイヤー２の長方形に白黒のグラデーションをかける
5. マスクする画像とレイヤー２の長方形を重ねる（長方形を前面に）
6. メニューの「修正」→「マスク」→「マスクとしてグループ化」
7. レイヤー１を見えるように戻す（理解のために）
8. メニューの「修正」→「キャンパス」→「キャンパスをフィット」

マスク処理・グラデーション設定のポイント

• グラデーションの白い部分で画像がマスクされる
• グラデーションの黒い部分は透明になる
• 背景用画像として同じサイズの長方形が必要
• レイヤーを活用すると便利（背景用、マスク用、テキスト用）