ぬるま湯デザイン塾 – 公式ブログ

みなさんこんにちは！

新人講師の篠原と申します。
初めましての方が多いと思いますので、簡単に自己紹介させていただきます。

現在は東京に住んでおりますが、ほとんどの時間を
家で過ごしているため、一度田舎に住んでみるのもありかな、、、
と思いつつ、なかなか行動に移せないでいます。

元々は自動車会社でデザイナーとして新車の開発に携わっておりました。
こう言うと車に詳しいのかと思われそうですが、
実際は全く詳しくなく、樹脂部品を担当していたので、
あの車のエンジンは・・・と言う話をされてもポカンとしてしまいます笑

ある日突然、働き方を変えたいな〜、ずっと在宅できる仕事が
したいな〜と思い、調べていた際にWEBデザイナーという仕事が
あることを知りました。
30歳になる前に、、と思い一念発起し、ここぬるま湯塾でデザインを学び、
WEB&グラフィックデザイナーとして活動しております。

Photoshop以外のデザインツール

突然ですがみなさん、XDを扱えますか？
私も触ったことがないのですが、ぬるま湯デザイン塾で
WEBデザインを学び始めた方は触ったことがないという人も
多いのではないでしょうか？

実際に私が個人で仕事をとっている中で、お客様から
「コピーライターからXDでLPのデザインカンプを作ってもらったので、
これをベースにデザインを作ってください」
と依頼されたことがあります。

私は
「XD使ったことないからPhotoshopで
作り直さないと・・でもそこに打ち込まれたテキストや
オブジェクトがあるのにそのまま使いたいなぁ」
「でもXDを今から勉強してたら納品が間に合わない・・」
と頭を悩ませていました。

そこで、みなさんお馴染みグーグル先生に相談してみました。

まず見つかった方法としては、一度IllustratorへXDデータを取り込んでから、
.aiデータをPhotoshopで開くというものでした。（方法1）

●方法1

【手順】
1.XDで.svgとして書き出し
2..svgデータをIllustratorで開き、保存（.aiデータを作成）
3..aiデータをPhotoshopで開く

<メリット>
.xdデータ内のオブジェクトをPhotoshopへ取り込める

<デメリット>
XD・Illustratorのインストールが必要
テキストがパス化されているため、
テキストの編集・フォント変更などの作業ができない

この方法であれば、adobeのコンプリートプランなら
追加費用もかからず、変換自体はすぐにできるのでいいのですが、
データの全てがパス化されてしまうので、
テキストが編集できないのはダメだ・・と思い断念。

さらに調べていくと、.xdデータを.psdへ直接変換できる
「Photopea（フォトピー）」という無料ツールを発見しました！（方法2）

Photopeaとは

・無料の画像編集ツール
・UIはPhotoshopと似たような感じ
・PSD、AI、XD、Sketchおよび各画像の拡張子に対応
・ブラウザ版とダウンロード版がある

●方法2

【手順】
1. .xdデータをPhotopeaで開く
2. Photopeaで.psdへ変換（とっても簡単ですね^^）

<メリット>
.xdデータ内のオブジェクトとテキストをPhotoshopへ取り込める

<デメリット>
元の.xdデータに対し、.psdのデータサイズが大きくなる
使えない時間帯がある

以上、とても簡単です^^

デメリットとしては、変換後のデータサイズが大きくなってしまうため、
大きいデザインデータだとPhotoshopが重くなってしまいます。
さらに、Photopea自体に利用できる時間が決まっています。
利用できる時間は「2時間毎に最初の15分間だけ」です。
具体的には、12:00〜12:15 → 14:00〜14:15 → ・・・と続いていきます。

それでは詳細を紹介いたします。

『Photopea活用』

1.Photopeaへアクセス（またはダウンロード）
　https://www.photopea.com/
2.「コンピュータから開く」から、.xdファイルを開く
3.「ファイル」→「PSDとして保存」（※時間帯に注意）

〜完〜

本日紹介したPhotopeaでの.psd変換について、
下記サイトにわかりやすくまとめられています。
使ってみる前に一度ご確認ください^^
https://homupedia.com/xd-to-psd.html

XDを扱えない方で、.xdファイルを支給された場合は
こちらを活用してみてはいかがでしょうか？

使い方でわからないことがあれば、
スペチャにちょくちょく出現してますのでお声かけください。

それでは！