MD-Blog_Web Creative

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

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

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

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

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

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

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

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

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

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

指定形式

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

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

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

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

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

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

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

便利だ。

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

便利だ。

指定形式

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

さいごに

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

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