本文へジャンプ

PSDデータから一括で画像を書き出せる「画像アセット」の使い方をまとめてみた

Posted by MONSTER DIVE

こんにちは。
私事、MDに入社して現在9ヶ月目(=Web業界・マークアップエンジニアとしてのキャリア)になる。

さて、弊社でのWebデザイン制作は「Adobe XD」を用いて行っているが、稀にPSDデータからコーディングする場合がある。
普段XDに慣れているため、PSDデータからの画像書き出しに時間がかかってしまう。
そこで、Photoshopの「画像アセット」を利用して効率よく画像を書き出す方法についてまとめてみた。
本記事がわたしと同じような境遇の方などの一助になれば幸いだ。
決してPV数を稼ぎ年末の納会で金一封を得ようなどとは一切考えていない。奉仕の心で執筆している、本当だ。

こんな便利機能とっくに使ってるわ!という方は、ブラウザを閉じる前にぜひ他メンバーのブログを楽しんでいっていただきたい。

[準備編] 画像アセット機能の利用を開始する

こちらのシンプルなPSDデータのサンプルで紹介していく。

シンプルなPSDデータのサンプル

まずは、自動で画像書き出しをするための準備をする。
ファイル > 生成 > 画像アセット にチェックを入れる。これだけだ。

画像アセット利用開始フロー

レ点が表示されていれば設定済み。この設定は後で実施しても問題ない。

[基本編] ファイル名をつける

レイヤー(もしくはレイヤーグループ)に拡張子付きでファイル名をつける。
例では「apple.png」としてみた。
PSDデータを保存すると、同階層に自動でディレクトリが生成され、画像が格納される。
ディレクトリ名は「[PSDデータのファイル名]-assets」になる。

apple.pngが自動生成されたsample-assetsディレクトリに格納された様子

簡単だ。
自動保存の設定をしている場合はリアルタイムに書き出される。

サポートされている画像形式

  • jpg
  • png
  • gif
  • svg(※)
    ※スマートオブジェクトで配置されているとただ画像が貼り付いたものが書き出されるため、シェイプレイヤーで配置されている必要がありそうだ。この場合は、デザイナーさんに「svgでちょうだい!」とお願いしたほうがはやい。

[応用編] パラメーター(画質・倍率)を指定する

Webで使用する場合、画質については基本的に未指定で良いと個人的には思うが、それぞれ以下のように指定することができる。
この章はほぼテキストのみで構成されているが、我慢して見て欲しい。

png

  • PNG-32形式:apple.png(未指定)
  • PNG-24形式:apple.png24
  • PNG-8形式:apple.png8

jpg

  • 画質 90%:apple.jpg(未指定)
  • 画質 100%:apple.jpg10(1~10)
  • 画質 70%:apple.jpg70%(0%〜100%)

サイズ

  • 2倍:200% apple.jpg
  • 横300px縦200px:300 x 200 apple.jpg
  • 横10inch縦200mm:10in x 200mm apple.jpg
    ※サイズとファイル名の間にはスペースを入れる。
    ※pxは単位を省略できる。

指定形式

  • [サイズ]␣[ファイル名.拡張子][画質・形式]

[応用編] 書き出し先ディレクトリを分割する

サブディレクトリを指定することができる。
ファイル名の前にスラッシュで区切ってディレクトリ名を指定する。
例では「favorite/banana.png」としてみた。

banana.pngがfavoriteディレクトリに書き出された様子

どうでもいい話だが、このsampleのfruitsの中ではlemonがfavoriteだ。

指定形式

  • [ディレクトリ名]/[ファイル名.拡張子]

[応用編] 複数のアセットを生成する

シンプルなあわせ技を紹介する。カンマで区切れば複数指定することができる。

例)pngとjpgの拡張子で書き出す。

apple.pngとapple.jpgが書き出された様子

例)等倍と2倍のサイズで書き出す。

apple.pngとapple@2x.pngが書き出された様子

[応用編] アセットの初期設定をする

自動生成されるアセット全体に対して適用したいパラメーターやサブディレクトリを指定することができる。
空のレイヤーを追加し、「default」に続けてレイヤー名に指定する。
例では「default images/, 200% retina/ @2x」としてみた。
imagesディレクトリには等倍サイズの画像が書き出され、retinaディレクトリには2倍サイズの画像がファイル名にサフィックス「@2x」がついた状態で書き出される。

等倍サイズの画像はimagesに、2倍サイズの画像はretinaディレクトリに書き出された様子

便利だ。

また、初期設定をしたとしても個別に指定している設定が優先される。
例ではapple.pngとbanana.pngのみサブディレクトリiconを指定してみた。

個別に指定したapple.pngとbanana.pngのみiconディレクトリに書き出され、他の画像はimagesディレクトに書き出された様子

便利だ。

指定形式

  • default␣[サイズ]␣[ディレクトリ名]/␣[サフィックス]
    ※指定不要なものは省略する。

さいごに

効率化できるところは効率化して、実装することに時間を使っていきたい。
ここまで書いておいて思ったのだが、これデザイナーさんがやってくれたらとっても嬉しい。と、生意気にも圧をかけて締めたいと思う。

引用元:Adobe公式『レイヤーからの画像アセットの生成』

Recent Entries
MD EVENT REPORT
What's Hot?