【Photoshop】Photoshopのデザインカンプの書き出しがうまくいかない・できないときの対処法

Photoshopのデザインカンプの書き出しがうまくいかない・できないときの対処法

初めてPhotoshopのデザインカンプからコーディングをした際は、コーディングの時間よりも書き出しにめちゃくちゃ苦戦しました。

どういう仕組みか知らないが、Photoshopで画像の書き出しができないことがあったので対処法を紹介します。

Web用に保存ができない

Photoshopから書き出し
Photoshopから書き出し

上記の画像のように、なぜか「Web用に保存」が選択できない場合がある。

この場合はデザインカンプが30,000px以上の場合にこういう事態になるらしいので、切り抜きをしてデザインカンプのサイズを調整すると「Web用に保存」が使用できるようになる。

切り抜きツール
切り抜きツール

書き出した画像が勝手に縮小されてる

30,000px以下にすれば「Web用に保存」が使え書き出しできるようになるが、ここでまた問題が発生するケースがある。

それは書き出した画像が自動的に縮小されていることだ。

Web用に保存の書き出し画面
Web用に保存の書き出し画面

上記の画像の右下に画像サイズとある。
これは実際に書き出した際の画像の大きさの数値。

パーセントが34.26%となっており、パーセントもwidthもheightも変更することができない。

エラーメッセージが出る
エラーメッセージが出る

縮小された画像で問題ない場合はそのまま書き出せばいいが、webサイト制作において画像の縮小はOKだが、画像の拡大は画質が荒くなるため御法度である。

この場合の対処法も「Web用に保存」の時と同じように、さらに切り抜きをすれば100%で書き出しすることができるようになる。

Adobe XDになれていると、Photoshopからのデザインカンプからのコーディングはコーダーにとってはかなり手間であり、触り慣れていないと地獄でしかない。

しかし、そう嘆いてもどうにもならないのでPhotoshopに慣れて効率良く作業するしかほかならない。