» ブログ・webサイト・ランディングページにイラストを活用してみませんか?

デザイナーの悩み解決!AdobeXDをPSDヘ変換する最適な方法を紹介

投稿日時2019年4月7日 タグ

カテゴリ Webデザイン・コーディング, デザイン効率化・お役立ち記事

デザイナーの悩み解決!AdobeXDをPSDヘ変換する最適な方法を紹介
今年に入ってフリーのLPデザイン案件でAdobeXD納品の案件を2件受けました。

しかし、今月LPデザイン案件でPSD納品必須の案件を相談されているので
最近ずっとAdobeXDやIllustratorでしかデザインしていなかった私にとって
Photoshopでデザイン制作は億劫で仕方がありません。

その為、ネットでXDをPSDヘ変換する方法を探してみました。

PhotopeaのサイトからXDをPSDへ変換する

PhotopeaのサイトからXDをPSDへ変換する方法が一番レイヤーの状態が保たれて成功率は高いと思われます。
以下の手順でPSD変換をします。

  1. AdobeXDデータのリピートグリットが使われてる箇所を全て解除します。
  2. https://www.photopea.com/のサイトへ行って「Open Fron Computer」をクリックして変換したいXDファイルを開きます。
  3. XDファイルが開いて変換された後は「File」から「Save as PSD(PSDとして保存)」を選んで保存します。

すごい!!
文字以外のレイアウトはピクセルもずれていなくてXDのデザインがPSDで完全再現されていました。

文字化けしてる箇所はテキストをクリックするとAdobeXDで設定していたフォントへ変換されます。

テキストリンクの文字変換した様子を動画で観ることができます。


参考記事
https://www.iscle.com/web-it/photopea.html
https://note.mu/golferdayo/n/n988997e61263