2017.10.20
Photoshop
画像アセットで拡大書き出した画像がボケる現象を解消する方法
Photoshopの画像アセット、便利ですよね。
レイヤーやフォルダに任意で名前（半角英数字）、保存形式を付けるだけでスライスを当てなくても書き出しが出来る！
素敵やん？（島田紳助風）
画像アセットってなに？という方は以下のAdobeの記事をお読み下さい。
しかしながらとある問題にぶつかりました。レスポンシブサイト用に拡大して書き出ししたら、なぜか画像がボケるのです。画像の大きさは十分に確保してあります。ドキュメント上で打った文字や、シェイプレイヤーオブジェクトはちゃんとボケずにアセット書き出し出来るんですけどね…。
色々試行錯誤した結果、とある解決方法を見つけたので、その方法をお伝えししたいと思います。
原因は配置画像の保存形式にあった
色々試してみた所、配置する画像の保存形式が「JPG」や「PNG」だとこの現象が起きるようです。
ではどの形式にしたらOKなのかというと「PSD」もしくは「PSB」形式です。
この2つの保存形式の画像をドラッグ&ドロップし配置すると、画像がボケることなく書き出しができました。
どうでしょう、分かりやすいように300%で両方書き出してみました。明らかに差がありますよね。
いやだ！ドラッグ&ドロップしたいんだ！
という方は、希望に添える方法かは分かりかねますが、いったんドラッグ&ドロップしたJPG、PNGの画像を一度「ラスタライズ」化し、再び「スマートオブジェクト」化（※）すれば解決します。
※その際は拡大したいサイズでラスタライズ化してから、スマートオブジェクト化してくださいね。
最後に
なぜJPG、PNGファイルの場合、ボケるのかは分かりません。Adobeに問い合わせ確認しましたが、同現象は初めて問い合わせを受けたらしく、PSD形式に変換ししばらくご使用下さいとのことでした。
しかし画像をPSDやPSBに保存し直すというのは、Photoshopのアクション機能を使用して保存し直ししたとしても、年間何十、何百のサイト製作を手がける制作会社の場合、時間的ロスが生じ現実的じゃないですね…。
次回のアップデートで改善されるといいですね。
SHARE
この記事の筆者
