ここが違う！ Adobe Fireworksで軽快プロトタイピング

ビジュアルデザイン

Photoshopファイルとの互換

　実装のための最終的なビジュアルデザインもFireworksの得意とするところです。Photoshopを使い慣れている方にとってみれば、基本的な操作感やメニューはほぼ同じなので親しみやすいのではないかと思います。FireworksはPhotoshopのレイヤー効果をサポートしており、読み込んだPSDのレイヤー効果の編集を、Fireworks上で行うこともできます。

　例として、sample_photoshop.psdをFireworksに読み込んでみます。

　Photoshopで作成されたファイルをFireworksで開く時のオプションは、［編集］-［環境設定］の「Photoshop 読み込み / 開く」で細かく設定することができます。

アセット類の作成

パーツの書き出し

　Fireworksでは、アプリケーションのパーツ素材をpngなどで一度に書き出すことができます（サンプルファイルの「assets」）。

　例として、パーツをまとめて書きだしてみます。

　【1】パーツ素材を並べ、開発メンバーが探しやすいように各パーツに名前をつけます。

　【2】一つ一つのパーツは別レイヤーに入れ、レイヤー名をパーツ名とします。

　【3】「最適化」パネルで、ファイル書き出し時のパーツの最適化設定を行います。パーツの周りをアルファで切り抜きたい場合にはPNGを選択しておくようにしましょう。

　【4】［ファイル］-［書き出し］で書き出しダイアログボックスを表示します。「書き出し」プルダウンメニューから［レイヤーからファイルへ］を選択します。パーツの周囲を切り抜きたい場合は［画像を切り抜き］チェックボックスにチェックを入れておきます。最後に［保存］ボタンを押して、パーツをまとめて書き出します。