Photoshop

画像アセットで拡大書き出した画像が
ボケる現象を解消する方法

2017.10.20

画像アセットで拡大書き出した画像がボケる現象を解消する方法のアイキャッチ画像

Photoshopの画像アセット、便利ですよね。

レイヤーやフォルダに任意で名前(半角英数字)、保存形式を付けるだけでスライスを当てなくても書き出しが出来る!

素敵やん?(島田紳助風)

画像アセットってなに?という方は以下のAdobeの記事をお読み下さい。

しかしながらとある問題にぶつかりました。レスポンシブサイト用に拡大して書き出ししたら、なぜか画像がボケるのです。画像の大きさは十分に確保してあります。ドキュメント上で打った文字や、シェイプレイヤーオブジェクトはちゃんとボケずにアセット書き出し出来るんですけどね…。

色々試行錯誤した結果、とある解決方法を見つけたので、その方法をお伝えししたいと思います。

原因は配置画像の保存形式にあった

色々試してみた所、配置する画像の保存形式が「JPG」や「PNG」だとこの現象が起きるようです。

ではどの形式にしたらOKなのかというと「PSD」もしくは「PSB」形式です。

この2つの保存形式の画像をドラッグ&ドロップし配置すると、画像がボケることなく書き出しができました。

どうでしょう、分かりやすいように300%で両方書き出してみました。明らかに差がありますよね。

いやだ!ドラッグ&ドロップしたいんだ!

という方は、希望に添える方法かは分かりかねますが、いったんドラッグ&ドロップしたJPG、PNGの画像を一度「ラスタライズ」化し、再び「スマートオブジェクト」化(※)すれば解決します。

※その際は拡大したいサイズでラスタライズ化してから、スマートオブジェクト化してくださいね。

最後に

なぜJPG、PNGファイルの場合、ボケるのかは分かりません。Adobeに問い合わせ確認しましたが、同現象は初めて問い合わせを受けたらしく、PSD形式に変換ししばらくご使用下さいとのことでした。

しかし画像をPSDやPSBに保存し直すというのは、Photoshopのアクション機能を使用して保存し直ししたとしても、年間何十、何百のサイト製作を手がける制作会社の場合、時間的ロスが生じ現実的じゃないですね…。

次回のアップデートで改善されるといいですね。

SHARE

この記事の筆者

デザイナー 芳村 明文

デザイナー 芳村 明文

カテゴライズしたらきっとデザイナーのはず。音楽(洋楽をジャンル問わず雑多に貪る)、欧米テレビドラマ(シットコム)が好き。時々バンド活動。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。