名称未設定-1

試してわかった!Adobe XDで作成したファイルをPSDへ変換する最適な方法

■ はじめに

デザイン制作をしていて、こんな経験はないでしょうか?
先方「納品ファイルはPSDファイルでお願いします。」
自分「かしこまりました!」
(Adobe XDで制作したんだけどな…)

自分はよくあります。納品形式がPSDと定められていることも多く、
「はじめからPSDで制作をしてしまうか」
「XDで制作したのちにPSDへ直していくか」
とよく悩んでいました。

ネットの記事で、XDからPSDへ変換する方法もいくつか見つけましたが、レイヤーがラスタライズされてしまったり、完璧に変換する方法は見つかりませんでした。

しかし、さまざまな記事を参考にしながら、100%はできませんが90%は変換することに成功。数十秒で出来るので、レイヤーを1つ1つ再構築していくよりも、かなり工数を削減できます。

PSDファイルへ変換する際にかなり役に立つと思いますので、やり方を紹介したいと思います。


■ 手順

01. 使用するXDファイル内のリピードグリッドを全て解除。


02.ブラウザから https://www.photopea.com/ へアクセス。


- 先ほど拡張子を変更したファイルをアップロード。
- 読み込みが終わり次第、左上の「File」をクリック。「Save as PSD」を選択してダウンロード(リピードグリッドが解除できていないとPSD保存ができない)

以上です。これで90%の変換が完了です。

ダウンロードしたPSDファイルを開いてみると、日本語のテキストが文字化けを起こしています。
文字化けを直していくのですが、一度テキストを選択すると文字化けが直ります、1つ1つ選択して文字化けを直していけば、PSDへの100%変換が完了です。
● 注意点
特殊フォントを使用すると、アップが出来ないため「https://www.photopea.com/ 」へアップする前に、フォントをヒラギノ角ゴなど汎用的に使用されるフォントへ変更。

■ さいごに

さまざまな方法を試してみましたが、このやり方が現状ではベストだと感じました。
XDでの制作は動作も軽くて便利ですが、先方が使用していないケースも多く、まだまだPSDで納品するケースも多いと思います。
PSDでの納品を求められた際は、ぜひ試してみてください。

■ 参考にさせてもらったWEBサイトhttp://arribux.co.jp/devlog/web_design/193/
https://www.cg-method.com/entry/adobexd-convert-psd/
https://blog.spacemarket.com/design/xd-export-to-sketch/
https://toirodesign.com/article/620

この記事が気に入ったらサポートをしてみませんか?