【Photoshop cc】イラレデータをレイヤーを保持した状態でPhotoshopで開く方法

こんにちは。デザイナーの佐竹です。

今回は、イラレデータをレイヤーを保持した状態でPhotoshopで開く方法をご紹介します。
FWの開発が終了した時、イラレでデザインするか、PSでデザインするかを迷っていた時期がありました。
どちらにもメリット・デメリットがあり、最終的にPSを選んだ決め手は、スライスが必要ないことでした。

コーディングの準備段階で、まずは画像などのスライス作業が必要になるのですが、その点が便利なのがFWでした。
FWを手放す際に、気になっていたのがこのあたりの機能だったわけですが、PSの新機能として、画像の自動保存というものがあり、もはやスライス作業も必要ない!ということが分かり、小躍りしたのでした!!

制作用ソフトはどんどん機能改善されていくものなので、今後、別のソフト(たとえばXDとか)でコーディングに便利な機能が追加される可能性は大ですが、現時点ではweb制作においては、PSの凄さは他を圧倒しているように感じます。

さて、そんなわけでデザインをAIデータで受け取った場合も、一度PSに変換してコーディング作業を進めていきたいので、その手順をご紹介します!

Photoshop(PSD)形式でデータを保存



「ファイル」から「書き出し」→「書き出し形式・・・」を選択し、ファイルの種類をPhostoshop(PSD)にしてデータを保存します。

「Photoshop書き出しオプション」ダイアログが表示されるので、オプションの[レイヤーを保持]、テキストが含まれている場合は「テキストの編集機能を保持」にチェックを入れてください。

「OK」ボタンをクリックすると、指定した場所に書き出しファイルが保存されます。

Photoshopで開いて確認


レイヤーが保持されているのが確認できました。
手順は以上です。簡単ですね!!