Fireworksで作ったデータ（.png）をPhotoshop形式（.psd）に変換する方法
どうもこんにちは。最近本格的にPhotoshop修行を始めましたがツンデレPhotoshopさんにツンツンされっぱなしで一向に仲良くなれないかわさきです。そろそろ少しはデレてほしい(´・ω・｀)
さて、マグネッツでは普段、WEBページのデザインはFireworksをメインに使用して行っております。
（2013年5月にFireworks開発終了のニュースが流れまして、ゆくゆくは段階的に他のソフトに移行しないとなぁ…という感じです。しかしFireworksはWEB制作に特化した非常に使い勝手のいいソフトでなので、とても残念です…）
たまにFireworksで作成したデザインデータ（.png）をPhotoshop形式（.psd）にてクライアント様にお渡しする必要がありまして、そのまま変換してみたら当たり前だけど結構変わってしまうなぁ…となって四苦八苦…
で、今後同様の作業が必要になった時やりやすい様、いろいろ設定をいじって実験してみまして、効率のいい方法をまとめてみました。
※実験はFireworks、Photoshop共にcs6で行なってますが、Photoshop ccでも大差はないと思われます。
目次
- まずはこんなデータをFireworksでつくりました
- それでは早速Photoshop形式（.psd）で保存します
- .psdで保存したらこうなりました
- 結果、極力効率よく、変換後編集しやすく、かつ見た目を引き継いだ状態で変換するには？
- 終わりに
まずはこんなデータをFireworksでつくりました
Fireworks形式（.png）のデータをPhotoshop形式（.psd）に変換した時、設定やフィルターでどう変わるのか分かりやすいよう、色々な描画方法やフィルターを試したボタンを6つ準備しました。
１のボタン
プレーンなボタンです。塗りと線以外、特に何もしてません。
2のボタン
よくありそうなグラデーションを使用したボタン。
内側にシャドウをかけてます。
文字と頭の矢印（パスで描画）にもグラデーションと、ドロップシャドウをかけました。
3のボタン
ぽわーんと光った感じのボタン。
ボタン部分には内側に、テキストには外側に光彩を。
あと、頭の矢印の不透明度を50にしてみました。
4のボタン
ボタン部分は本来ブルーなんですが、フィルター：色相・彩度で黄緑色に変更してます。
頭のプレゼント箱をベクトルマスクでトリミング、文字はストロークで白フチをつけてみました。
5のボタン
ボタンの塗りをパターンをつかってチェック柄に。
文字は描画モードを乗算にして置いてみました。（わかりやすいように補色を使用）
6のボタン
ストローク：油彩・ブリストルでちょい手書き風のボタンに。
文字の字間をカーニングで調整してみました。
頭のメガホンはビットマップのものをシンボル化して配置、「フィルター：カラー調整→カラーの塗り」で白に。その横に線をパスで描画して加えてます。
データは、それぞれのボタンごとにフォルダ分けしてます。
それでは早速Photoshop形式（.psd）で保存します
「別名で保存」にて「形式を変更して保存」を「Photoshop PSD（*.psd）」に変更します。
「保存」「キャンセル」ボタンに下に「オプション」があり、こちらより保存時の設定を変更することが可能です。
Photoshop書き出しオプションは以下の内容になります。
外観よりも編集性を保持
オブジェクト：Photoshop レイヤーに変換
効果：編集可能
ベクトル：編集性を保持
テキスト：編集可能
Fireworks の外観を保持
オブジェクト：Photoshop レイヤーに変換
効果：効果をレンダリング
ベクトル：外観を保持
テキスト：テキストのレンダリング
Photoshop ファイルサイズを小さくする
オブジェクト：Fireworks の各レイヤーを統合
カスタム
各設定を個別に変更可能
※「カスタム」以外は「オブジェクト」「効果」「ベクトル」「テキスト」の項目は固定になります。
では、
- 外観よりも編集性を保持
- Fireworks の外観を保持
- Photoshop ファイルサイズを小さくする
の3つの設定でpsdに変換して、データをみてみます。
.psdで保存したらこうなりました
「外観よりも編集性を保持」の場合
かなり大幅に見た目が変わってしまってます。
レイヤーやフォルダ構成は維持されており、テキストも編集可能です。
長方形やパスで描いたオブジェクトはシェイプになっているので、拡大・縮小等、問題なくできそうです。
では、それぞれのボタンごとに見ていきます。
1の場合
特に効果を加えていないのでですが、ほぼそのままです。
ただ、ストローク（線）の設定が引き継がれてないため、外枠がなくなってます。
2の場合
グラデーション、シャドウ（内側）、ドロップシャドウ、全てほぼFireworksと同等です。
ただ、文字のグラデーション設定がなくなって、白一色になってます。
3の場合
光彩のかかり具合が変わってます。
レイヤースタイルの光彩になっているのですが、同じ見た目にはならないようです。
矢印の透過設定は引き継がれました。
4の場合
色相・彩度の設定が外れて元のボタンの色になってます。
あと、文字のストローク設定が外れているため、白フチがなくなってます。
プレゼント箱のイラストのベクターマスクは引き継がれていますが、マスクの範囲外は消えてしまっています。（切り抜かれた状態）
5の場合
塗りのパターンがなくなっているため、真っ白に…。
シェイプ自体は残ってます。
文字の乗算設定は引き継がれてなく、「通常」になっていました。
6の場合
長方形のストローク（線）設定がなくなっているので、普通の角丸ボタンになってしまいました。
文字のカーニングはそのまま残ってます。
メガホンのカラーの塗りは、レイヤースタイルの「カラーオーバーレイ」になっていました。
あと、メガホン横の線はシェイプ自体はできていますが、やはりストローク（線）の設定がなくなっているので、透明状態に。
閑話：グループ化したレイヤーは結合され、ビットマップ画像になる
Fireworks上でグループ化したレイヤーやそのままpsdに変換すると、グループ化の情報は引き継がれないため結合され、ビットマップ画像になります。注意！
「Fireworks の外観を保持」の場合
見た目はまったく同じです。
レイヤーやフォルダの設定も引き継がれています。
ただし、すべてのオブジェクトがビットマップになっており、配置変え等は問題なくできますが、サイズを変えたり色を変えたりテキストを編集したり…はかなり厳しい状態です。
プレゼント箱のベクターマスクは引き継がれてました。
「外観よりも編集性を保持」同様に、切り抜かれた状態になっています。
あと、5の乗算設定も、こちらの場合は引き継がれてました。
カンプを渡してコーディングのみしてもらう…みたいな状況だったら使えないこともないかもです。
「Photoshop ファイルサイズを小さくする」の場合
見た目は「Fireworks の外観を保持」と同じく完璧ですが、なんと！各ボタンのレイヤーが結合されて、ボタンごとにひとつのレイヤーになってしまいました。oh…
どうもオブジェクトが重なっているレイヤー同士が結合されるようです。
ですので、普通のwebページのデザインですと、背景になにかオブジェクや画像を置くのが一般的だと思いますので、「節子…これ、psdやない、jpegや…」みたいなデータが完成しそうです。あかん。
結果、極力効率よく、変換後編集しやすく、かつ見た目を引き継いだ状態で変換するには？
変換前にグループ化を解除する
上の閑話でも書きましたが、グループ化すると結合してビットマップ化されますので、グループ化を解除しておく必要があります。
Photoshopに引き継がれないフィルターやパターン等の設定を使っているものは、予めビットマップ化 or グループ化
1を逆手に取り、Photoshopで再現が難しいフィルターやパターンはグループ化しておくことでビットマップに変換できます。
「Photoshopライブ効果」を使ってフィルターをかけておく
Fireworksには「Photoshopライブ効果」というPhotoshopにおける「レイヤー効果」と同じような項目が揃ったフィルターがあります
こちらを利用することで同じ「光彩」や「ドロップシャドウ」でも、そのままPhotoshopに引き継ぐことが可能です。
こちらの画像はテキストや長方形の「光彩」をFireworksのフィルターと「Photoshopライブ効果」を使用して掛け比べたものです。Fireworks上では見た目にほとんど違いがありませんが、psd形式で保存すると違いが一目瞭然です。
保存は「外観よりも編集性を保持」で
上記の検証結果からも、後々編集しやすいデータにしたい場合は「外観よりも編集性を保持」が最適です。もしくは「カスタム」を使用してカスタマイズしましょう。
ある程度諦めてPhotoshopで開いてデータを整える
ドロップシャドウなど、フィルターが引き継がれてもどうしても若干見た目が変わってしまう効果もありますので、細かい部分はどうしても見比べながら調整が必要です。
終わりに
いかがでしたでしょうか？
なんというか、一言で言うとめんどくさいですね…。結論としては最初っからPhotoshopで作るべきとなりますね、はい…。
ただ、これまでFireworksで編集していたデータをPhotoshopで編集したい！という需要はきっとどこかにあるかなぁと思いますので、そんな方のお役に立てば幸いです。