タイ研修いってきました
2021.06.27

【Photoshop】スライス不要!「アセット書き出し」で爆速書き出し!

  • このエントリーをはてなブックマークに追加

こんにちは、デザイナー、兼ディレクターのみっちーです!

皆さんは、Photoshopで作成したデータの書き出しはどの機能を使っていますか?

今日は、ポイントを抑えていれば、鬼のように早く書き出しが可能な「画像アセット」を紹介します!

 

スライスせずに書き出せるPhotoshopの「画像アセット生成」って?

画像アセット生成とは、レイヤーやレイヤーグループをそのままJPEGやPNGなどの拡張子に書き出すという機能です。

PhotoshopCCから実装されている機能で、CC2014以降はSVGへの書き出しも可能となりました!

 

「画像アセット生成」の特徴

  • レイヤーごとに「拡張子」「ピクセル指定」「拡縮の倍率」を指定できる
  • 作業中に各素材が自動更新される
  • 素材にマスクをいれるとマスクサイズで書き出すことができる

 

「画像アセット生成」での書き出し方

書き出し方はものすごく簡単です!

レイヤー・グループ名の後ろに.(ドット)と書き出したい拡張子(jpg、png、gif、svg)を付けて

 

メニューの、ファイル > 生成 > 画像アセットにチェックをつける。

はい。これだけです(笑)

このチェックマークを入れた段階で、レイヤー名に拡張子が付けられたデータを一斉に書き出します。

 

書き出された画像は、psdが格納されている階層と同階層に「psd名-assets」というフォルダが自動生成され、保存されます。

 

サイズの指定、画質の指定も可能

レイヤー名の付け方次第で、様々なオプションをつけることができます。

書き出しサイズを指定する

サイズを指定したい場合はレイヤー名の先頭に指定のサイズを記載します。

  • 180 x 20 logo.png → 横180px、縦20pxのPNG画像
  • 200% logo.png → PSD上で配置されているサイズの2倍のPNG画像

こんな感じです。

注意:接頭文字とアセット名の間には必ずスペースを追加してください。サイズをピクセル数で指定する場合は、単位を省略できます。例えば 300 x 200 のようにします。

ちなみにサイズは「px」「in」「cm」「mm」に対応しています。

jpgの画質を指定する

jpgの画質を指定したい場合はレイヤー名(jpg)の一番最後に指定したい画質のパーセンテージを記載します。

「レイヤー名.jpg●●%」

こんな感じです。画質は0~100まで画質を指定することができます。

pngの画質を指定する

pngも同様に、8、24、32の中から画質を指定できます。

  • logo.png8 → 8bitのPNG画像
  • logo.png24 → 24bitのPNG画像
  • logo.png32 → 32bitのPNG画像

こんな感じです。

 

いかがでしたか?

「画像アセット生成」を使いこなすことができれば、コーディングを劇的に効率化することができるはずです!

その為にもデザイナーは「画像アセット生成」での書き出しを想定したレイヤー設計、命名規則をしっかりとマスターしましょう!

 

この記事を書いた人

平川 迪郎Leg-hirakawa

5年のアパレルECサイト運営経験を経て現在に至る。趣味はビールとゲーム(PS4)、たまにカメラもやります。

小規模持続化補助金

WEB制作WEB制作

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。
売れてるサイトはこんなに違う。
イキツケ制作所
小規模持続化補助金