どうも、Tです。
Webサイトのデザインを作成するときにはもっぱらAdobe XDを使っています。なんせ一人お勉強で使ってる＆過去からの風習（デザインカンプはPhotoshopを使う）にとらわれたりしていないので、好き勝手やってます。
しかしながら、世の中デザインカンプを作成する際は、Photoshopを使っている人が以前として多いです。XDで作っていてPhotoshopのPSD形式のファイルが欲しいという要望があった際にどうやって変換すればよいのかやってみました。
目次
やりたいこと
XDで作ったファイルをPSD形式に変換したい。
環境
- Adobe XD CC：14.0.42.14
- Adobe Illustrator CC：23.0.1
- Adobe Photoshop CC：20.0.1
問題
なんでこんなことをわざわざ書くかというと、XDからPsおよびAiへのファイル変換ができないからです。
XDのアセットを書き出しで見ると書き出せるのは、「PNG」「SVG」「PDF」「JPG」の4種類のみです。
解決方法
方法1．PDFに変換後にPSD化する
方法1では、図に示したような手順を踏みます。
- XDからPDFファイルを書き出す
- PDFをAiで読み込み、PSD形式で書き出す
- PSDファイルで保存できた
んー、非常にめんどくさい。
方法2．Photopeaのサービスを使ってPSDに変換する
方法2は、Photopeaを使う方法です。
- XDファイルをPhotopeaにアップロード
- PSDファイルに変換してダウンロード
こちらは、比較的簡単ですね。Photopeaは、下記のサービスになります。
解決方法詳細
解決方法1の手順
XDファイルを開いて、書き出ししたいアートボードを選択し、左上のメニューボタンをクリックします。
「書き出し」->「選択済み」を選択します。形式に「PDF」を選択し、「書き出し」をクリックします。これでPDFファイルに変換されます。
変換したPDFファイルをAiから開きます。レイヤーにクリップグループがあるので、メインパネルで「Ctrl＋A」キーを押してすべてのオブジェクトを選択します。「オブジェクト」->「クリッピングマスク」->「解除」をクリックします。これを行わないとPSDファイルに変換した際に正常に変換されないことがあるようです。
クリップグループが入れ後になっているので、上のように「解除」がグレーアウトして押せなくなるまで繰り返し行います。
1つのグループの配下にすべてのパスが含まれる形になりました。
「ファイル」->「書き出し」->「書き出し形式」をクリックします。
カラーモードを「RGP」、解像度を「スクリーン(72dpi)」、「ICCプロファイルを埋め込む」にチェックをし「OK」をクリックします。
これでPSDファイルへの変換が行えました。
PSDファイルが正常に開けるようになりました。
方法1のメリット・デメリット
方法1のメリット
CCであれば、おそらくXD/Ai/Psすべて使えると思うので、手持ちの環境で変換が行えることでしょうか・・・・あまりメリットになっていませんが・・・・。
方法1のデメリット
グループがなくなる
個人的に致命的なのは、XDでグループ分けをしていても変換した際にグループが消え去ります。
Psで編集はできない
パスになっているのでPSDへの変換後は、文字やデザインの修正を行うことはできません。
やはりなんかおかしい
PSD変換後、両端に余計な余白が入ってしまいました。スライス程度であれば問題ないのですが、ほかにも気づいていない問題がありそうです。
解決方法2の手順
XDファイルを選択してグリッドグループを解除しておきます。グリッドグループは左画像のようなマークがついているものです。※アートボードは複数あっても問題ありません。
上記のPhotopeaに接続します。
「File」->「Open」をクリックし、XDファイルを開きます。
XDファイルが正常に開いたら「File」->「Save as PSD」をクリックします。その後ダウンロードが自動的に行われます。
ダウンロードしたファイルが正常に開くことを確認します。レイヤーを見るとグループが残っています！これはちょっと感動！日本語が文字化けするという情報もありましたが、正常に変換されていました。
方法2のメリット・デメリット
方法2のメリット
グループが維持できる
XDのグループ構成が維持できているのは大きなメリットです。
編集が行える
パスに変換されるわけではないため、テキストも図形もPSDで編集が行えます。
方法2のデメリット
あげるとすれば、外部のサービス（Photopea）に依存していることです。現在は無料で利用できていますが、仕様変更などで使えなくなる可能性が多少なりとも存在します。また、業務ファイルをオンラインサービスにアップデートするので、そこもハードルになりそうです。
結局どれがいいの？
明らかに方法2がいいです。
方法1は、グループがなくなる・パス化されるなどで納品ファイルとしては利用できません。デザインカンプとしてもフォントサイズを確認することすらできないので厳しいです。あげるとすれば、スライス用途には使える程度でしょうか。
ちなみにどちらの方法でも、PSD変換後はファイル容量が数倍に膨れ上がります。
まとめ
XDの浸透率はまだまだのため、数年程度は納品物としてPSD形式を求められることが多いでしょう。ぶっちゃけAdobeがXDからPSDへ直接変換できるようにしてくれればよいのですが、WebサイトのUX/UIツールとしてXD押しを進めているので、そのような仕様変更はされないというのが個人的な意見です。
デザインツールとしては圧倒的にXDが使いやすいので早く浸透してくれることを期待するばかりです。