コーダーの為のFireworksスライス入門

2011.10.25

iPhone 4S遣いが身の回りに着々と増えてますが、うらやましくなんかないんだからねっhakoishiです。
今回は、「あれ、今回はデザイン？」と見せかけてやはりコーディングネタ。

スライスって、コーダーが担当することが多いですよね。
けど、デザイナーほどグラフィックソフトに通じてなくて「もっと効率いいやり方があるんじゃないかなあー」なんてもどかしく思うこと、あるんじゃないですか？

そこで、突然ですがFireworks。
馴染みのない人も多いかもしれませんが、スライス機能がスッゴイんですよ！
以下、普段Photoshopを使用している人向けに、Fireworksの便利なスライス機能をまとめました。

まずは基本動作。
Photoshop同様、スライスツールでドラッグします。
…でも良いのですが、もっと楽な方法があります。

スライスを切りたいオブジェクトを全て選択
⇒右クリックで「長方形スライスを挿入」を選択
⇒ダイアログが開くので「複数」を選択。

これで、範囲内にあるオブジェクト全て、別々にスライスを切ってくれます。
複数ではなく「単一」を選択すると、全部まとめて1つのスライスになります。
ドロップシャドウなどエッジのボケたものもまるっと含めた範囲で切ってくれるのがありがたい。

余談ですが、エッジにボケのある部分まで含めたスライスはPhotoshopでも切れます。
「レイヤー」メニュー⇒「レイヤーに基づく新規スライス」から。
詳細はこちらのブログの記事をご覧ください。
【コーダーのための時短テク】Photoshopで複数のスライスをまとめて入れる-FHWブログ

さて、では実践です。
渡されるデザインデータがpsd形式のことは多いですね。
そのままだと扱いにくいので、一旦photoshop上で加工します。

具体的には

レイヤーをまとめる。
1レイヤー1オブジェクトを原則にまとめてください。
（まとめたいレイヤーを一旦レイヤーフォルダにまとめて、「グループを結合」すると楽です。）
レイヤー効果等をラスタライズしておく。
ここは要注意。
レイヤー効果は全て無くした状態にしてからFireworksに持ち込んでください。

見た目が変わる恐れがあることもそうですが、なにより、
フォトショップのレイヤー効果の残ったファイルをFireworks形式のpngとして保存すると、かなりの確率でファイルが壊れて開けなくなります。
バージョンにもよるようですが、悲しい事故を防ぐため念には念を。

調整したファイルはだいたいこんな感じになります。
保存したら、Fireworksから開きます。オプション指定のダイアログが出ますが、通常はそのままOKで問題ありません。