STEP 1 インターフェースをレイアウト

新規作成します。サイズは最近のデザインでは横幅740〜760pxが多いですが、参考画像では少し小さくしてあります。

解像度は72ピクセルインチです。Web画像ではこの解像度をつかうのが一般的です。

練習のための操作は、図1のイメージ作成を飛ばしてSTEP2からはじめても大丈夫です。

また、必要でしたら、こちらのファイルをダウンロードしてお使いください。（Zip圧縮84kb　Fireworks MX PNG形式ファイル）

矩形ツールで全体のイメージを作ります。下書きになるので、このまま全てを画像ファイルに書き出す必要はありません。

まずはテキストと矩形を数点と写真素材を1点適当において、全体のデザインを決めていきます。

STEP 2 矩形をつくり、シンボルに登録

ボタンを置く場所に、適当な矩形をひとつ描きます。

矩形の描き方は、ベクターツールの矩形ツールアイコンをクリックして選択し、イメージ上にドラッグします。

次に、矩形をシンボルに登録します。操作は、矩形オブジェクトを選択し、[修正]-[シンボル]-[シンボルに変換]（F8）を選択します。

シンボル名をつけます。日本語の名前で問題ありません。今回はボタンベースとしました。種類はグラフィックです。

矩形にショートカットアイコンにつくような、矢印がつきましたね。（↓図）これで、この矩形はインスタンスになったというわけです。

インスタンスとは、Windowsでのショートカットアイコンのようなものです。本体ではなく、シンボルという本体を参照して表示しています。本体であるシンボルは直接イメージ上にはなく、ライブラリパネルのなかに登録されています。

矢印はGIFなどに出力する時には表示されません。

Fireworksでは、イメージの構成に直接配置したオブジェクトと、インスタンスの２種類を配置することが出来ます。

STEP 3 複数のインスタンスを配置

ライブラリパネルから、ボタンベースの名前を選択し、イメージ上にドラッグします。

この手順でボタンの予定数だけインスタンスを作ります。あとで配置を整えます。

インスタンスはいくつでも作ることが出来ます。また、選択していない状態では、矢印は表示されません。

STEP 4　整列

インスタンスを整列するために、まず対象を選択します。

オブジェクト、あるいはインスタンスを複数選択するには、shiftキーを押しながらクリックします。またレイヤーパネルの該当レイヤーをクリックしても、同様に選択することができます。

整列パネルから整列させます。

（1）の「キャンバスにあわせる」はオフにします。

（2）の高さの整列では、中心を合わせるボタンでもよさそうなのですが、なぜか中央が少し上に上がるようなので、目立つときは、底辺の整列や、上辺の整列などで配置を整えます。

（3）は間隔の調整です。

[ウインドウ]-[整列]

STEP 5 シンボルの編集

インスタンスのどれかひとつをダブルクリックすると、シンボルの編集ウインドウが開きます。
通常の矩形オブジェクトと同じように、オブジェクト選択後、塗りや透明度の設定が出来ます。ここでは、以下のように設定します。

シンボルの編集ウインドウを閉じると、参照元になるシンボルを編集したので、全てのインスタンスに変更が反映されています。

STEP 6　レイヤーの移動

レイヤーパネルでインスタンスの上にテキストが来るように変更します。
テキストのレイヤーをレイヤーパネル上でドラッグすると移動します。

変更前

変更後

STEP 7 テキストの色変更

レイヤーは上から順に重なっているので、移動した後の状態では、テキストがボタンベースの上に乗っています。

テキストを選択し、色を白に変更します。（文字の入力をこれからする場合はベクターツールの[A]をクリックし、画面上に直接入力します。後から追加したオブジェクトが上のレイヤーに乗るので移動する必要はありません。）

STEP 8　整列とグループ化

それぞれのインスタンスとテキストの中心を整列パネルで合わせます。

（1）の「キャンバスにあわせる」はオフにします。

（2）は中心を揃え、（3）高さの整列では、高さをそろえますが、これは見た目で結果がいいものを選択します。（高さの幅が少ないものは、見た目で選んだほうが結果がよいことがあります。）

テキストとボタンベースのインスタンスを右クリックから[グループ]またはメニューバーから[修正]-[グループ]（Ctrl＋G）でグループ化します。重なった部分が選択しにくい場合は、レイヤーパネルの該当レイヤーを選択しても同様の結果になります。全てのボタンを同様にグループ化します。

STEP 9 コンテンツ名変更

デザインのチェックが終了したら、コンテンツのタイトルなどを入れます。（作業中にサイトのコンテンツ名の変更はよくあります。）今までは仮に「メニュー1」などとなっていた部分を書き直します。書き直しの方法は次（STEP10）で紹介しています。

STEP 10 ライブラリパネルから、シンボルを編集

ツールボックスの白い矢印（1）でテキスト部分を選択すると、グループ化したまま文字の書き換えができます。

テキストを変更すると、余白が少なくなったので、もう一度シンボルを編集します。

ライブラリパネルから、（2）の部分をクリックし、メニューを開き、シンボルを編集を選択します。（STEP5と同じように、ダブルクリックで編集する方法もあります。）

拡大・縮小ツール（3）で横幅を両側に伸ばします。

シンボルを編集ウインドウを閉じると、グループ化されたまま全てのインスタンスが変更を反映しています。必要なら、グループを解除し、ベースとテキストの中心あわせや、ボタン間の間隔を再度調整します。

STEP 11 拡大表示

スライスでボタン周辺を切り出します。今回は、HTML化をFireworks以外のソフトで行う予定なので、無駄なくスライスするために、拡大表示します。矢印の部分をクリックすると、表示の大きさが変更できます。

STEP 12　スライス

Webのボタンの[スライスとホットスポットを表示]にし、[スライスツール]をクリックして、ボタン上をドラッグします。

STEP 13書き出し設定

スライスを選択した状態で、最適化パネルを1ファイルごとに設定します。

それぞれのボタンにここで名前をつけます。そのままファイル名として保存されるので、半角英数にします。

同じ手順で、他のボタンもスライスし、書き出しの設定をします。

STEP 14書き出し

スライスでボタン周辺を切り出します。今回は、HTML化をFireworks以外のソフトで行いますので、スライスしない部分があっても、問題ありません。

無駄なくスライスするために、拡大表示します。

矢印の部分をクリックすると、表示の変更ができます。

STEP 15　書き出し

[ファイル]-[書き出し]（F10）で、[選択スライスのみ]にチェックを入れて書き出します。

Fireworksでは、同じフォルダに、(_notes)というフォルダが自動で出来ますが、FireworksのHTMLを利用しない場合は削除してもかまいません。ファイル名は何か入れないと、書き出しができないのですが、実際保存されるファイルは、スライスの設定でつけた名前で保存されますので、このファイル名は、重要ではありません。上記の手順で、同じベースのボタンが一度に書き出され、保存されます。

STEP 16　完成

インスタンスを利用すると、シンボルの編集で変更が一度にできるので、ボタンベースのようにいくつも同一パーツが必要な場合などはとても便利です。

今回は、全体の配置を見ながら作りましたが、単独でボタンだけ作るときもシンボルを利用すれば、後からのボタングループのデザイン変更時に作業が簡単になり、おすすめです。

全体のレイアウトは保存しておき、Dreamweaver MXに下書きとして取り込んで配置すると、HTML化が視覚的になり、楽に作業できます。