Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

前置き(Fireworks Dis)

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

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

FireworksデータをPhotoshopデータに書き出す

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

名称未設定_と_保存_と_FireworksデータをPhotoshopデータに変換する際にやるといいこと.png

PSD書き出しの問題点

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

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

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

PSD書き出しオプション

ファイル形式を選ぶプルダウンの横に「オプション…」というボタンがあるので、それをクリックして、 質素なダイアログを開きます。
Photoshop_書き出しオプション_と_保存.png
通常は画像のように「設定:外観よりも編集性を保持」が選ばれています。このままだと、いろいろPhotoshopから編集ができる(パスデータやテキストデータなどが編集可能なまま変換される)一方、「境界線が消える」という問題が生じてしまいます。

そこで、このプルダウンを変更して、 「設定:Fireworksの外観を保持」にしてください。こうすることで レイヤーは分かれたまま、完全に見た目を保持してくれます。一方で、パスデータやテキストデータをラスタライズしてしまうので、後からの編集ができません。要注意。
Photoshop_書き出しオプション_と_保存.png

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

テキストだけは編集可能にしたいなー

FireworksのPSD書き出し機能はトテモスバラシイので、そのような設定も可能です。設定プルダウンを「カスタム」に変更すると、その下にある4つの項目が自分で選べるようになります。この中で、編集可能なままにしたいものは「編集性を保持」にして、見た目が重要なところは「外観を保持/ エフェクトのレンダリング」を選びましょう。
Photoshop_書き出しオプション_と_保存.png

設定まとめ

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

オブジェクト

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

エフェクト

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

ベクトル

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

テキスト

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

「グループがラスタライズされる」問題は?

グループ解除してから変換しましょう。コレ以外にない。

関連サイト

kkotaro0111
ウェブデザイナー・フロントエンドエンジニア・ビデオグラファー
http://utage.works
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした