Macromedia FireworksMXを使用して、このサイトのメニューイメージの制作手順を紹介します。右は完成例です。

キャプチャー画面はFireworksMXのものですが、ここで紹介している基本機能やインターフェイスについては、Fireworks4とほぼ変わりありません。


（※一部、Photoshopを使用して加工してある画像があります。）

Macromedia FireworksMX is used and introduce the work procedure of the menu image of this site. The right image is an example of completion.
Although a capture screen is FireworksMX,. It does not change mostly with Fireworks4 about the basic function or interface which are introduced here.

(* there are images processed with Photoshop in part)

(1) 背景のイメージを用意します。

完成イメージでは、複数のレイヤーが重なってイメージが構成されています。
そのためレイヤーを１つずつ作っていきます。

・１番下に緑のイメージを配置します。

・白の長方形のイメージを上のレイヤーに配置します。
　（このときにキャンパスサイズより大きいサイズにします。）
　（白のイメージに「エフェクト」を適用した場合、キャンパスいっぱいに「ドロップシャドウ」などがかかるようにする為です。）

・ あとでサイズを変更しないのであれば、ビットマップに結合しておきましょう。


(1) Prepare for the a background image

Some layers overlap and the image consists of completion images.Therefore, you make one layer at a time.

- Arrange a green image to the lower part.

- Arrange the image of a white rectangle to the upper layer. (It is made larger size than campus size at this time.)(When an "effect" is applied to a white image, it is for making it a "drops shadow" etc. start to the limit of a campus.)
- If you don't change the size, let's combine with a bit map.

(2) ボタンのベースとなるフレームを描きます。

あらかじめ風景のイメージ画像を用意しておきます。

・「ペンツール」を使用してパスの輪郭を描きます。

・「塗り」に茶色と黄土色っぽいグラデーションを設定します。
（このとき「塗り」に「テクスチャ」を用いても右の例と同じような効果が得られるのですが、期待どおりに反映されにくいため、あえて少し手間をかけます。）

・「風景のイメージ画像」を配置して、描いたパスの選択範囲で切り抜きます。
（「選択範囲の保存」「選択範囲の復元」を有効に使います。）

・切り抜いた風景のイメージ画像の透明度を調整します。

・先に描いたパスをコピーして右下へずらし、「塗り」を解除します。
　このときコピーしたパスのレイヤーは先に描いたパスのレイヤーの下へ配置しておきます。


(2) Draw the frame used as the base of a button

You prepared The image picture of scenery image picture beforehand.

- Draw the outline of a path using a "pen tool."

- "coating" -- brown and ocher -- set up sexy gradation
(It dares. Although the same effect as a right example is acquired even if it uses a "texture" for "coating" at this time, since it is hard to be reflected as expected, time and effort is applied for a while.)

- Arrange "the image picture of scenery" and clip it in the selection range of the drawn path. ("Preservation of the selection range" and "restoration of the selection range" are used effectively.)
- Adjust the transparency of the image picture of the clipped scenery.

- Copy the path drawn previously, shift to the lower right, and cancel "coating."The layer of the path copied at this time is arranged down to the layer of the path drawn previously.

(6) マウスオーバーを設定します。

「スライス」は「書き出し」のときに自動的にイメージが分割される範囲です。

・「スライス」を設定します。


(6) Set up mouse over
A "slice" is the range by which an image is automatically divided at the time of the "beginning."
- Set up a "slice."

・「スライス」の上で右クリックして「スワップイメージビヘイビアの追加」を設定します。

・「スライス」に名前をつけておくと、「書き出し」によって書き出されたイメージのファイル名になり、整理しやすいです。

・「スワップイメージ」ウィンドウで入れ替えるイメージのスライス領域を選択します。


- Carry out a right click on a "slice" and set up "an addition of swap image behavior." - If the "slice" is named, it will become the file name of the image written out by the "beginning", and will be easy to arrange.

- Choose the slice domain of the image replaced in a "swap image" window.