FireworksデータをPhotoshopデータに変換する際にやるといいこと

# 前置き(Fireworks Dis)
AdobeがMacromediaを買収して早10年。AdobeがFireworksの開発を終了して早2年。IllustratorやPhotoshopにウェブデザイン関連の機能が実装されてきて、Fireworksで作業をするメリットが徐々に薄れてきた昨今ですが、未だにその人気は根強く、WEBデザイナーさんから送られてきたデザインデータが *.fw.png になってることがままあります。
正直、Fireworksはバギー過ぎてまともに動かないことが多々あるし、できることなら使いたくないし、いまだFireworksを使ってるひｔ（ｒｙ

とはいえ、\*.fw.png が送られてきてしまった以上は仕方がないし、おそらくFireworksのデータを送ってくる人はPhotoshopで起こし直すなんてことしない（できない）だろうから、スライス切って書き出すにしても、この \*.fw.png でどうにかしないといけないのです。
というか、中途半端にFwデータをPSDに変換されてしまうと、いろいろ面倒くさいので、 **もらうときは制作データ（＋アウトライン化データ）をもらいましょう**。

# FireworksデータをPhotoshopデータに書き出す
Fireworksにはアリガタイことに、Photoshopデータとしての書き出し機能があります。別名保存からファイルタイプとして「Photoshop PSD(\*.psd)」を選ぶだけです。これでとりあえずはPSDデータとして書き出してくれるので、あとはPhotoshopで頑張ることができます。


![名称未設定_と_保存_と_FireworksデータをPhotoshopデータに変換する際にやるといいこと.png](https://qiita-image-store.s3.amazonaws.com/0/55145/0ee4971f-a58b-aacd-a644-6c6731f889e8.png "名称未設定_と_保存_と_FireworksデータをPhotoshopデータに変換する際にやるといいこと.png")

# PSD書き出しの問題点
ただ、このまま保存してしまうと、いくつか問題が生じてしまいます。
具体的には、

- 「グループ」がラスタライズされたレイヤーとして書きだされてしまう
- 境界線が消える

という特徴があります。
なかでも「境界線が消える」という問題は、見た目のデザインが変わってしまうため、どう考えても適切ではありません。レイヤー構造もあまり変わっては欲しくないけど、最低限、見た目は保持してもらえないと、WEBデザイナーさんに作ってもらった意味がなくなってしまうので、オプションをいじって、見た目が保持されるようにしましょう。

# PSD書き出しオプション
ファイル形式を選ぶプルダウンの横に「オプション…」というボタンがあるので、それをクリックして、 ~~質素な~~ダイアログを開きます。
![Photoshop_書き出しオプション_と_保存.png](https://qiita-image-store.s3.amazonaws.com/0/55145/27ba0dac-105e-f2ae-5a6b-e51489b90f25.png "Photoshop_書き出しオプション_と_保存.png")
通常は画像のように「設定：外観よりも編集性を保持」が選ばれています。このままだと、いろいろPhotoshopから編集ができる（パスデータやテキストデータなどが編集可能なまま変換される）一方、「境界線が消える」という問題が生じてしまいます。

そこで、このプルダウンを変更して、 **「設定：Fireworksの外観を保持」**にしてください。こうすることで **レイヤーは分かれたまま、完全に見た目を保持**してくれます。一方で、パスデータやテキストデータをラスタライズしてしまうので、後からの編集ができません。要注意。
![Photoshop_書き出しオプション_と_保存.png](https://qiita-image-store.s3.amazonaws.com/0/55145/f08ca811-c19a-5f86-1f7a-9524e5191464.png "Photoshop_書き出しオプション_と_保存.png")

各設定項目の役割については、下記にざっくりまとめときます。

# テキストだけは編集可能にしたいなー
FireworksのPSD書き出し機能はトテモスバラシイので、そのような設定も可能です。設定プルダウンを「カスタム」に変更すると、その下にある4つの項目が自分で選べるようになります。この中で、編集可能なままにしたいものは「編集性を保持」にして、見た目が重要なところは「外観を保持/ エフェクトのレンダリング」を選びましょう。
![Photoshop_書き出しオプション_と_保存.png](https://qiita-image-store.s3.amazonaws.com/0/55145/f00733b1-bbd3-5abc-773e-86b9f2f9488d.png "Photoshop_書き出しオプション_と_保存.png")

# 設定まとめ
設定名|詳細設定
------|------
外観よりも編集性を保持|オブジェクト：Photoshopレイヤーに変換 / エフェクト：編集性を保持 / ベクトル：編集性を保持 / テキスト：編集性を保持
Fireworksの外観を保持|オブジェクト：Photoshopレイヤーに変換 / エフェクト：エフェクトのレンダリング / ベクトル：外観を保持 / テキスト：外観を保持
Photoshopのファイルサイズを小さくする|オブジェクト：Fireworksレイヤーを統合


## オブジェクト
詳細設定名|効果
----|----
Photoshopレイヤーに変換 | 各レイヤーをPhotoshop用のレイヤーに変換する。ただし、Fw内でグループになっているものはラスタライズされ、1つのレイヤーとなってしまう。
Firewroksレイヤーを統合 | 全レイヤーを1つのPhotoshopレイヤーに統合する。そのため、その他のプルダウンが設定できなくなる。PSD変換として取り扱う意味あるのか？

## エフェクト
詳細設定名|効果
----|----
編集性を保持| 「光彩」や「カラーオーバーレイ」などのフィルターが、Photoshopの効果として残したまま保持される。Photoshopから **編集が可能**だが、効果のアルゴリズムが違うと **見た目に差異が出る**。
エフェクトのレンダリング|「光彩」や「カラーオーバーレイ」などのフィルターが、レイヤーにラスタライズされる。ビットマップデータになるので、 **見た目は維持される**が、 **編集ができない**。

## ベクトル
詳細設定名|効果
----|----
編集性を保持| パスデータがシェイプレイヤーとして書き出される。Photoshopの方から **編集が可能**。
外観を保持| パスデータがラスタライズされ、ビットマップレイヤーとして書き出される。 **パスデータとして編集することはできない**。

## テキスト
詳細設定名|効果
----|----
編集性を保持| テキストがテキストレイヤーとして書き出される。Photoshopで **編集が可能**。
外観を保持| テキストがラスタライズされ、ビットマップレイヤーとして書き出される。 **テキストとして編集はできない**。


# 「グループがラスタライズされる」問題は？
グループ解除してから変換しましょう。コレ以外にない。


# 関連サイト
- [Fireworks と Photoshop の併用 | Fireworks ヘルプ](https://helpx.adobe.com/jp/fireworks/using/fireworks-photoshop.html)
- [Fireworks CS6 の進化したところと不具合まとめ | Stocker.jp / diary](http://stocker.jp/diary/fireworks-cs6/)
- [CS6バグリスト | Facebook](https://www.facebook.com/notes/%E9%B7%B9%E9%87%8E-%E9%9B%85%E5%BC%98/cs6%E3%83%90%E3%82%B0%E3%83%AA%E3%82%B9%E3%83%88/10150926105553366)