Fireworks5.0のスライス(画像の書き出し)の際

1. Fw
Fireworks5.0 スライス＆書き出し①
図1 Illustrator や Photoshop にも機能として存在するスライスは一つのドキュメントから複数の Web 用画像を切り出す際に使用
するツールで、Web 素材作成に特化した Fireworks が最もこのスライスに適しているソフトと言えるでしょう。Fireworks の
スライスツールはツールパネルの″Web″項目内に収納されています。※左図 1 の赤枠のツール
図2
スライスツールを使用し、書き出したい
スライス
HOME
前面画面 :GIF
HOME
オブジェクトを範囲選択するだけの簡単
な作業ですが、丁寧に行わないと HTML
①カンバス内に必要な ②スライスツールを ②範囲選択 ( ドラッグ ) で や CSS で使用したときに余計な線が出た
オブジェクトを作成 選択 書き出したいオブジェク
り、画像が切れて表示されるなど、見た
トを囲む
目に美しくないので気をつけましょう。
※スライスは四角形でしか行えません。
図3 スライスされたオブジェクトは、半透明の緑で囲まれます。
このスライスは図 3 のようにオブジェクトのレイヤーとは別に Web レイヤーとして収納
され管理できるようになります。
Web レイヤーに名前を付けることで、それが書き出した時のファイル名になる。
※書き出し後のファイル名になるので半角英数字での記述が必須
レイヤーに名前を付けると、カンバス上のスライスにも表示され、図 4 のように確認を行う
ことができます。スライスの名前は図 5 のプロパティからも行うことができます。
図4 図5 ※ここでは拡張子まで記述する必要はありません。
button2:GIF
HOME

2. Fw
Fireworks5.0 スライス＆書き出し②
■画像形式の選択
Illustrator や Photoshop の授業では、スライス ( 切り出し ) を行う「Web およびデバイス用に保存」のウィンドウで画像形式を選択し
ていましたが、Fireworks では最適化パネルで行います。 ※各スライスに設定ができ、個々に最適な画像で書き出しを行えます。
図6
GIF 画像
button2:GIF
HOME 最も Web 素材に適した画像形式で透過も行えるが、256 色という色制限が
あるため、写真のような色数の多い画像には適さない。また、透過も半透明
button2:JPEG
HOME が使えないため、滑らかな曲線の透過には向かない。
button2:PNG JPEG 画像
HOME
フルカラーを使用できるが、透過が使えない。鮮やかな色彩を表現したい画
像に適している。
PNG 画像
フルカラーが使用でき、透過も可能。
GIF と違い半透明も使用できるので、滑らかな透過画像に適しているが、
ファイルサイズが大きいのと IE6 では透過しないという欠点を持つ。
図7
書き出しはスライスを右クリックしメニューから「選択したスライスの書き出し」をクリックし、
書き出しウィンドウで図 8 の３項目を設定後、保存しましょう。
※単一のスライスを選択した時と、複数のスライス 図8
を選択したときでは図 7 の「選択したスライスの
書き出し」の項目の位置が違うので確認、認識し
ておきましょう。
※メニューのファイルから「書き出し」も行えますが、単一のスライスをメニューから行うとスライス名ではなくドキュメント名で書き出されるので、右クリックの書き出しの方が確実です。

3. Fw
Fireworks5.0 スライス＆書き出し③
■スライスファイル名の設定変更
スライスで書き出しをする際、スライス番号がファイル名の後ろに (_) アンダーバーで区切って自動で挿入されます。
これは、HTML や CSS で画像読み込みの時に非常に邪魔になってしまいます。ですので設定をカスタマイズし挿入させないようにして
おきましょう。
図 9 メニュー「ファイル」＞「HTML の設定」を選択 図 10
A
B
C
図 10 の HTML の設定内にあるドキュメントの詳細ではスライスのファイル名のカスタム設定が行えます。
A には必ず″ドキュメント名″を入れておきましょう。ドキュメント名以降 5 つの項目をプラスしていくことができますが、無いほうが
判りやすいファイル名になり、ファイル検索が簡単になります。
図 11
ステート名の２項目はボタンのアップ･オーバー･ダウン･オーバーダウンなどの各ステートの
画像名にプラスする項目になります。そこで、B はカスタムを選択し、図 11 のように設定を
しておきましょう。
※図 10 の C「デフォルトに設定」を押しておけば、毎回設定を変える必要がなくなります。