【 Photopea 】 WEBサイトデザインはやっぱりXDを使いたい人の便利ツール FirE♯583
WEBデザインツールとして必須のPhotoshopですが、WEBサイトのデザインを作るにあたっては、AdobeXDの方が、遥かに効率的であると感じています。
問題は、Photoshopでのデザインカンプが必要にXDデータがPhotoshopデータにすんなりと変換できないことです。
これを解決する方法があったので紹介します。
うまくPSDデータに変換するのは一手間必要でした。
【 Photopea （フォトピー） 】
こちらのPhotopea のUIを見ていただければ分かる通り、
Photoshopを同じことができます。
XDファイルを、Photopeaにドラッグ&ドロップすると、このように変換されます。
ファイル → 保存 その他 → 保存 PSD/PSB でPSDデータと保存できます。
■ レイヤー保持
このようにXDをPSDに変換し、Photoshopで開くと、しっかりとレイヤーのデータが残っています。
■ フォント変換
フォントはXDにあっても、Photoshopにないフォントの場合には、変換されます。
ここは制作前に考慮しておく必要があります。
■ 画像のエラー
XDでの配置と、PSDでの配置がズレることがあります。
ほぼ大丈夫ですが、この現象は起きるので、画像については、確認をし、再度Photoshopで貼り直しても良いでしょう。
【 注意点 】
うまくPSDデータに変換するために、必要なことがあります。
■ レイヤー数に注意
XDでサイト全体をデザインし、そのままPSDへ変換すると、レイヤーの情報が多すぎることから、エラーが出ます。
この場合は、レイヤーは保持されずに、一枚の画像としてPhotoshopで開かれるので、PC版と、SP版を分けてPSDに変換するなどすれば問題ありません。
■ アートボード全体のサイズに注意
例えば、20ページ分のサイトデザインを一度にPSDデータに変換すると、Photoshopで開いたときに、画像や文字の表示が荒くなります。
これは、100%のサイズが、20ページ分の横幅になるからと思われます。
一番良いのは、1ページ分づつPSD変換する方が良いと思われます。
しかし、これは手間なので、試したところ、横幅1500を5ページ分でも全く問題なく表示されました。
【 まとめ 】
Photopeaについて書きました。
Photoshopでサクサクと作業できてば使う必要ないモノですが、
XDでの効率を考えると、導入しても良いのではないかと思っています。