Fireworks(CS6)のWEB画像保存の注意点と便利機能

Fireworksで制作された画像が届きました。
ここからコーディング用に画像をパーツごとに書出してほしいとのこと。

Fireworksなつかしい…!
え、ていうかサポート終了してるよね!?
案の定macの最近のOSではクラッシュして落ちる落ちる…。
同じ作業を何度も何度も…無限ループ(泣)

なんとか作業を終えることが出来たので、気をつけたほうがよかったことをまとめておきます。

★オブジェクトを選択中に「⌥+Shift+U」でスライス作成が便利。
(windowsだと「Alt+Shift+U」かな?)
オブジェクトの形通りの四角にスライスを作成してくれるので、あとは保存するだけでパーツを書き出してくれる便利機能です。ありがたや…。
これで作業効率がグンとUPしました。

★PNGでの透過画像形式がPhotoshopの設定と異なるので注意!
・ツールバー(上)のファイル→画像プレビュー
 →設定:「PNG8」「アルファチャンネル」を選択。
これで透過での書き出しができます。PhotoshopだとPNG32…異なるためややこしいので要注意〜。

★スライスの保存の仕方
書き忘れるところでした。スライスの緑になった領域があるので、そこをクリック、Shiftを押しながら更に他のオブジェもクリック。保存したい領域を選択していきます。(レイヤーのWEBレイヤーグループの中で選択しても一緒です。)
・ツールバー(上)のファイル→画像プレビュー
・jpgやpngなど、保存したい形式を選択します。
・「書き出し」をクリック
・次の画面で、色々選択できるんですが、
 「画像のみ」「スライスの書き出し」「現在のページ」を選択。
 「選択したスライスのみ」にチェックを入れる。他のチェックは外す。
・「書き出し」クリックでOKです。
※新規フォルダでフォルダ作成できるので、適当なフォルダ内にまとめましょう。設定間違えて大量の画像が書き出された場合にプチパニックになります(笑)

サポート終了しているからなのか、頻繁に落ちるのでこまめな保存が必須です。それから、まとめての書出しではなく数枚単位での書出しのほうがクラッシュしづらいです。メモリ不足だと警告を受けるので、基本的に他のアプリは全終了が推奨。(メモリまだあるのにひどいよ…)

Photoshopの画像アセット生成に成れた今となってはスライスなんかなんでやらなきゃいけないんだよーっと不満でしたが、昔は画期的でお世話になりましたよね、スライス機能。