Fireworksで色のロックを利用した、GIFや8bit PNGの画像を綺麗にかきだすTips #adobefireworks

Fireworks Lover Advent Calender 2013 8日目が空いてましたので記事書きました。

Adobe Fireworksによるスライス最適化の制限

GIFや8bit PNGはWebでのボタン画像などでよく使用するわけですが、その特性上、保持出来る色が最大256色という制限があります。スライスを切って書き出す際に、その範囲が256色以上の色情報を持つ場合、Fireworksが自動で256色に割り当てています。

スライス範囲が256色以上持つ場合はインデックスパレットがアダプティブに変更されてしまう

この時ボタン等で背景にテクスチャーやグラデーションを設定していると、256色以上になって色落ちにより、色が置き換わったり、バンディングが起きたりします。使われている色の頻度からすれば何故欠落するのか不思議なところではあります。

スライス範囲が256色以上持つ場合はグラデーションなどでバンディングが発生する場合がある

書き出したい色は必ず「カラーをロック」を利用

見た目で明らかに色落ちが発生してしまった場合、「カラーをロック」でそれなりに回避することが可能です。

手順は以下。

Step.1 スライス範囲を変更

Step.1 スライスの範囲を狭めて、綺麗に書き出したい部分のみにする。

Step.2 最適化パネルのファイル形式は「GIF」または「PNG 8」、インデックスパレットは「全色割り付け」を選択し、「再構築」ボタンを押下。

Step.2 綺麗に書き出したい部分のインデックス作成

この時、インデックスパレットが「アダプティブ」に変わるとその範囲の色が256色以上持っていることになります。スライスサイズを調整して256色以下になるようにしてください。右下に色数が表示されます。

Step.3 現在表示されている色をすべて選択し、「カラーをロック」ボタン押下でロック

Step.3 選択スライスのインデックスカラーをロック

ロックされた色は右下にマークが付きます。

Step.4 スライスをオブジェクトサイズに戻し、再度「再構築」ボタンを押下。

これで完成です。デフォルトと比較しても綺麗になっていると思います。

それぞれの書き出し結果の比較

GIFや8bit PNGは画像のサイズダウンに効果的なフォーマットです。こうしたちょっとした手間で書き出す画像のクオリティーを上げることができます。

終わり。