Adobe Photoshopで、画像のレイヤーからJPEGやPNGといった画像を書き出すことのできる画像アセット生成機能。レイヤー名にファイル名をつけて[ファイル]→[生成]→[画像アセット]をオンにすると、PSDファイルのあるフォルダに設定した画像ファイルを生成できます。詳しくは下記にて。

• Photoshop でのレイヤーから画像アセットの作成

Webページのデザインカンプからコーディング用に画像を生成したいときは非常に便利です。この機能の便利なところは、書き出す画像ファイルの大きさを任意に変えることができることです。Retina用に画像を高画質に生成したい場合などに使えます。

例えばレイヤー名に[200% image.png]と設定し生成するとPSDで配置している画像サイズの2倍の大きさで書き出せます。大きな画像を用意してPSDに配置し、[スマートオブジェクト]に変換して縮小・配置することで画質を気にせず生成できます。

拡大して生成すると画像がボヤける

高画質画像のソースを読み込みスマートオブジェクトにして配置し、画像を倍の大きさにして生成してみたのですが、なぜか画像がぼやけてしまうという事象が発生。Adobe Photoshop 2024で発生を確認しました。色々検証すると以下の場合に発生することが判明。

• 画像を[埋め込みを配置…]、或いは[リンクを配置…]で読み込みスマートオブジェクトで配置
• 画像ソースがJPEG形式、或いはPNG形式、TIFF形式など
• 200%など拡大して生成している

原因は画像ソースがJPEG形式やPNG形式であることでした。試しに画像ソースをPSD形式にしたらきれいに生成できました。

画像ソースがJPEGの場合。猫の写真や文字がボケていると思います。

画像ソースがPSDの場合。きれいでくっきりしていると思います。

もし、PSDのドキュメント上に埋め込みやリンクで画像を配置する場合は、多少ファイルが大きくなってしまいますがPSD形式で作って運用したほうが良さそうです。

おしまい♥

タグ：Photoshop