ブログ

【Photoshop】画像アセットの生成

2020.08.24 : Other Staff
Design

弊社ではホームページなどのデザインにXDを使用することが多くなりました。
しかしながら餅は餅屋ということで、画像(特に写真)の扱いについてはPhotoshopを用いることがほとんどです。

そんなPhotoshopの今や制作業務において欠かせない「画像アセット」機能、搭載されてかれこれ経ちますが、改めて書いてみます。

画像アセットの基本

まずは基本形です。
レイヤーに、拡張子を含むファイル名を付けます。
(jpeg、png、gifの3種類がサポートされています)

グループに”panda.jpg”と命名

それからメニューの「ファイル」>「生成」>「画像アセット」を選択。
この設定はファイルを閉じても、解除するまで有効です。

そうすると、PSDファイルと同じ階層に「PSDファイル名-assets」というディレクトリが作られ、その中に画像が生成されます。なんて楽ちんなんでしょう。

panda.psdと同じ階層にpanda-assetsが作られ、panda.jpgが生成された

画像アセットの生成:応用編

ここから応用編です。よく使用しているものから、最近まで知らなかったものまでピックアップ。

画像倍率の指定

昨今のホームページ制作では、スマートフォンなどの普及で高解像度の画像が必要になるケースがほとんどです。
そんなときには“200% panda.jpg”とレイヤー名の頭に倍率を指定。

Photoshop上で600×400のサイズで作成していますが、2倍(200%)の1200×800でアセットが生成されます。

2倍のpanda.jpgが生成された

画質の指定

読み込み速度への影響を考えると、ホームページに使用する画像はなるべく容量が少ないほうが良いですよね。
画像アセットでは画質の指定も可能です。
今度はレイヤー名の後ろに、“panda.jpg5”もしくは“panda.jp50%”と数値を指定します。
※ちなみにデフォルトは90%の画質が指定されています

わかりやすく10%の画質で書き出してみると、荒いパンダが生成されました。

panda.jpg10%

書き出し先の指定

シングルページでない限り、画像はホームページ内の各ページそれぞれでフォルダ分けをすることがほとんどです。
この場合は“panda/panda.jpg”といった形で、書き出し先の指定が可能です。

panda-assets内にpandaディレクトリが作られた

複数パターンの指定

先に書いたように高解像度の画面に対応するため、サイズ違いで画像を書き出したい場合。レイヤー名をカンマ区切りで複数指定が可能です。
“panda.jpg, 200% panda@2x.jpg”のような形式になります。

また、この場合は同一ディレクトリへの書き出しになるため、それぞれ別のファイル名を指定しましょう(200%には@2xを付けるなど)。同じファイル名だとエラーが発生します。

100%、200%それぞれの画像が生成された

デフォルト設定の指定

最後にデフォルト設定の指定です。
この場合は書き出すレイヤーではなく、空のレイヤーを作成してそこへ指定をしていきます。

例えば、空のレイヤーに“default panda/”と指定すれば、ファイル内のすべてのアセットがpandaフォルダに生成されます。

さらに、いろいろな指定を組み合わせて複雑な設定も可能です。

“default 200% @2x + 100%”のように、+で区切って複数指定をすれば、それぞれのレイヤーに指定をすることなく“@2xが付いた200%の画像”“通常(100%)の画像”が生成されます。

【ちなみに】XDからの書き出しとの比較

まったく同じサイズでXDとPhotoshopそれぞれで書き出しを行いました。
上がXD、下がPhotoshpから画質100%のJPEGで書き出したものです。

XDから書き出したレッサーパンダ
Photoshopから書き出したレッサーパンダ

XDから書き出したものは若干彩度が落ち、全体的にすこしぼやけたような状態になってしまいました。
一方Photoshopからは元画像に忠実な状態で書き出されています。
かなり微妙な違いですが、毛を、毛のあたりをよく見てください。。。

まとめ

日頃から当たり前のように使用しているPhotoshopの「画像アセット」機能を改めてご紹介いたしました。
「スライス」で画像を書き出していた頃を思い出しながら、技術の進歩に感謝の気持ちでいっぱいです。

ここに書いたものがすべてではなく、いろいろな指定の方法がオフィシャルのページで詳しくまとめられています。
https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html

いろいろなアプリの機能や新しい技術を学びつつ取り入れつつ、すばらしいホームページが制作できるようこれからも日々精進です。
制作のご依頼・ご相談はお気軽にどうぞ!

アーカイブ

新しいサイト制作や、既存サイトの運用に関するお困りごとなどございましたらご依頼、ご相談ください。

ビジネスやサービスに最適なウェブ制作、デザインをおこなっている株式会社ナナサンの会社案内をダウンロードいただけます。

制作依頼・ご相談 資料ダウンロード
イメージ:制作依頼・ご相談
イメージ:制作依頼・ご相談