Contact us
   Blog

Blog

AdobeXDからPSDへ変換し、カラーマネージメント対応にするのと、禁則処理が使えるようにする手順

AdobeXDはサクサク動いてくれて嬉しいのですが、カラーマネージメント非対応という弱点もあります。

また、AdobeXDからPSDへ変換すると、言語オプションが「東アジア」から初期設定に変わってしまい、文字の段落設定から禁則処理が抜け落ちてしまいます。AdobeXDには、禁則処理という項目が無いからです。

InternetExplorer以外のWEBブラウザは自動的に禁則処理がされるようになっていますから、htmlでコーディングする場合は、テキストの禁則処理は必要ないと考えてよいと思います。しかし、LP制作の場合、テキストも含めて画像ファイルにしてしまうことも多いですから、禁則処理が使えないのは制作に差し障りがありますね。

ですから、テキスト編集のことを考えると、禁則処理が使えるようにしておく必要があります。その為には、ファイルの言語オプションを「東アジア言語の機能」にしなければなりません。これらを踏まえ、AdobeXDからPSDへ変換したファイルを、禁則処理が使えるように作り変える手順を考えました。

AdobeXDでワイヤーフレームなどを作ると、PhotoshopやIllustratorよりもサクサク動くし、リピートグリッド機能が便利ですし、快適ですよね。(その代わり高いグラフィックプロセッサーを求められるので、古いマシンにはインストールできない可能性があります)
最近は、XDでプロトタイプを作り、そのまま書き出してHTMLに仕上げるというケースも増えていると思います。

ただし、いくつか注意点があります。

  • ・AdobeXDはカラーマネージメントができない
  • ・文字の段落設定に禁則処理がない(WEBの場合はあまり必要ではありませんが)
  • ・余白を含んだ書き出しが面倒(Photoshopも面倒だけどね)

など、他にもあるかもしれませんが、最も困るのが、AdobeXDは、カラーマネージメントが出来ないという点です。

ブラウザで見た時の表示の色と、XDでの作業中のが異なってしまいます。カラマネ非対応なので、これはどうすることもできません。WEBブラウザは、ファイルにカラープロファイルが埋まっていればそれを採用しますが、プロファイルが無い場合は全部、sRGBになるからです。なので、現状では、厳密なカラマネが必要な場合は、Photoshopでブラッシュアップして最終データを仕上げるのが得策ですね。AdobeXDからPSD へ変換する際の簡単な方法をメモしておきます。

AdobeXDからPSD へ変換する

カラー設定のプロファイルを埋め込むために、AdobeXDファイルをPSDに変換しましょう、変換するにはどうしたらいいでしょうか?

一番手軽な方法として、外部サイトを活用します。
XDファイルを以下のサイトに読み込ませて、ファイル > PSDとして保存を選択してください。

オンライン画像編集ツール
https://www.photopea.com

カラー設定は自動でRGBになります、段落設定の中に禁則処理の項目はありません。MOREから言語を日本語対応にできます。日本語フォントは完備されていません。AdobeXDからPSD

 
AdobeXDからPSD へ変換できました! 保存したPSDのカラー設定は、自動的にRGBになっています。カラープロファイルについては、これで解決できました。

AdobeXDからPSD

しかし!変換後のPSDの言語設定に問題が!

  • ・Photoshopの言語設定がが初期設定になってしまう
  • ・文字の段落設定に禁則処理がない

という問題が発生します。なぜなら、AdobeXDにもphotopeaにも禁則処理の設定項目がないからです。
また、日本語のPhotoshopの場合、言語設定は「東アジア」になってると思いますが、それが初期設定になってしまうという問題もあります。

AdobeXDからPSD変換したPSDの言語設定


変換したPSDのテキスト部分の文字設定を開くと、段落の項目から禁則処理が抜けてしまっています。

禁則処理が使えるようにPSDファイルを作り変えます

疑問に思うところだと思いますが、WEBデザインのカンプファイルで使うテキスト流し込みに禁則処理は必要でしょうか!?

InternetExplorer以外のWEBブラウザは自動的に禁則処理がされるようになっています。ですから、htmlでテキストコーディングする場合は、必要ないと考えてよいと思います。しかし、ほとんど更新が必要ないLP制作の場合、テキストも含めて画像ファイルにしてしまうことも多いですから、禁則処理が使えないのは制作に差し障りがありますね。

キャッチコピーなど、画像で書き出しする場合もあることを想定すると、禁則処理が使えるようにしておく必要があります。その為には、ファイルの言語オプションを「東アジア言語の機能」にしなければなりません。

禁則処理が使えるようにPSDファイルを作り変えましょう〜

STEP01

Photoshopで、新規ファイルを作成します。カンバスサイズは、変換したPSDと同じサイズにしてください。(必ず同じサイズで!)、言語オプションが「東アジア言語の機能」になっているのを確認してください。 言語の設定が東アジアになっていないと、文字設定の段落のところに禁則処理の項目はでてきません。


STEP02

AdobeXDから変換したPSDを開き、レイヤを全選択した上で、それらをコピーしてください。(編集>コピー)

STEP03

さきほど作った新規ファイル側に、ペーストします。この時、普通のペーストではなく、特殊ペーストで同じ位置にペーストを選択してください。 新規ファイル側にも、コピー元のレイヤーが全部、同じ位置で再現できたと思います。

STEP04

新規ファイルに、AdobeXDから変換したPSDの中身が、まるごとコピーされました、これで、新規でテキストを記載すれば、禁則処理が使えるようになります。(コピーしたテキストには適応されません) 完了です!

Follow me

WEBの企画と制作の流れ

WEB制作は リサーチとデザインと実装。リサーチや企画といった 情報を取り扱う工程。 そして、それを元にデザインする工程。デザインしたものを実装する工程。 中でも企画検討といった部分は上流工程と呼ばれ、独立して扱われることもあります。WEBサイトを作る際の思考法やブランディングのために必要なこと。知っておいて欲しい制作の知識や受発注の心得などをまとめました。

future

いきなり完成したものを作って納品するのではなく、徐々に積み上げてゆくように、側でクライアントを支えながら完成させてゆく新しいスタイルの制作です。

lalan with you