[Photoshop]画像アセット生成でできること

小川さん
聞いてくれ、 カンマンからのお知らせだ。

取りあえずでも十分な機能

Photoshopのアセット書き出しで、
「.png」とか「.jpg」とか書いときゃ十分でしょとか安易に考えておりますが。
そんな事ないのでココでメモ。

今回の情報はPhotoshop cc 2014での情報です。
Photoshop cc以前のバージョンでは使えない機能もありますのでご注意を。

簡単な使用方法

F8BA57B7-D610-449D-A5B3-43794805F68C
【レイヤーパネル】
こんな感じで「.jpg」と付けて【ファイル】→【生成】→【画像アセット】にチェックを入れると。

画面

0CB3B45D-CCF7-42CF-9D51-68C762543620
【生成されたフォルダ】
勝手に「ファイル名+ -assets」というフォルダが自動生成されて、その中に先ほど指定した画像達が簡単に出てきてくれます☆

ちなみにこのフォルダ毎回中身を入れ替えますので、関係ない別の画像を入れても次回の画像生成でいったん削除してから生成しますから、別の画像消えますんで注意です。

という感じで十分事足りてましたが、もうちょっと使い方を良くしようと思い、お勉強しました。

アセット抽出パネル

これから書くのはアセット抽出のパネルを使って説明しますが、直接同じことをレイヤー(もしくはグループフォルダ)の名前に(menu.jpgとか)記述しても生成されます。覚えたらそっちの方が早いですね。

書き出すレイヤー(もしくはグループ)をアクティブにし【ファイル】→【アセットを抽出…】

333A0B14-485C-4D7A-9C81-F3DF9E3B62BF

E01B062B-23AE-4E60-8AE3-2EF35A092779

F3E77FF9-AF20-448B-981B-8E922C711341

拡張子の付いたものは勝手に右側表示リストに出てきます。
もし拡張子を付けてないものをここに出したい場合は、レイヤーをアクティブにして【アセットを抽出…】を選択してください。

アセット抽出で書き出せる拡張子

アセット書き出しで出力できる拡張子は、下記の6種類です。

  • png-8
  • png-24
  • png-32
  • gif
  • jpg
  • svg

B289EE8D-65D9-441C-9ADD-BF023AA1B8D5

番外?手書きを含んだフォルダをsvgに

svgは脱ピクセルパーフェクト的な雰囲気が出てきてる昨今に外せない形式かもしれませんね。
そんなsvgですが、ラスタ形式を含めたグループをどうやってPhotoshopは書き出すのか調べました。
565E3EB3-1CC8-459D-A68C-412D30E37963

手書きでmenu00って書いたものを「menu00.svg」で書き出してみたところ、ちゃんと出力されました。
コードをみたらdata url スキームとしてインラインにおりました。
なるほど納得ですね。
もちろんラスタ形式部分は拡大されるとボケますので、それはしょうが無いですが、
別フォルダで画像が吐き出されることもないので、画像リンク切れとかもないんでいいですね。
どこかで使ってみようと思います。

【出力結果】
DAE0421E-A4B2-4596-AC77-779A44BAF37E

【ソース】
F673E950-8F98-48BA-B681-65E8FD48472D

画質指定・出力サイズの変更

アセット抽出パネルでは画質や画像サイズ(単位)の変更も可能です。

753DF217-B149-43A0-838E-E8CD6DB5A50C

例えば
・画質 50%
・サイズ横75px縦57px
として[完了]すると レイヤー名が70×57 menu01.jpg-50% となります。

2DEEAECC-6B89-4999-8913-62A9E18D1DD0

これを出力すると画質50%の横70px縦57pxの画像が出力されます。

↓これ出てきた。
menu01

Retinaディスプレイに対応する

Retinaディスプレイに対応するために、大きいサイズの画像を用意して。。。
とかしなくて大丈夫です。
勝手に大きいサイズを書き出してくれる設定がありますので、PSDファイルが汚れなくてすみます。

Retinaディスプレイなど、高解像度用の画像を書き出すときに、便利ながアセット抽出右上にあるこいつ。
これを例えば[2×]にすると

12156165-D9A2-47C2-A955-CB969F11F805

なんかレイヤーに出てきた

EBA72F5E-0BA0-4A91-850E-8396CEC68162

保存したらデカい子たちが出てきました。

2FBF2959-87B0-4AF9-B471-4616D51A99DE

名前のお尻に付く接尾辞や自動生成されるフォルダ名の変更は、設定画面で変更出来ますので。
「接尾辞入らない」ってときは[none]ってやったらなくなりました。

12156165-D9A2-47C2-A955-CB969F11F805

EAF4B494-7A74-4215-91AA-4014A1D6EA8B

余白の付け方

画像に余白を付けて書き出したい時って多々あります。
そんなときは、余白の文だけマスクをかければ余白付きで書き出すことが可能です。

616B72D3-11CE-45D1-A6E7-C45E11122A9F

試しにmenu01におっきな余白をつけた。

9865E73B-BC5E-4F27-8E7B-0CB5752EADDC

余白付きの画像が生成されました。

F5B7B302-48EF-4F12-A806-208AEC8FC2AB

複数設定した画像を書き出したいとき

カンマ(,)で区切ると複数のパターンで画像を書き出せます。
例えばjpgとpngで書き出す時。

menu01.jpg,menu01.png

E0BF080A-92FD-49A6-8F69-0AC8F347DFD0

結果

8E178BAD-5123-4BC4-9A3A-78A1AC8FB326

画質を50% 80% 100%で出力

menu01_50.jpg-50%,menu01_80.jpg-80%,menu01_100.jpg-100%
ファイル名被るとエラーになるんで「menu01_50.jpg」「menu01_80.jpg」「menu01_100.jpg」としてお尻に%を付けました。

B65DF3A5-64E1-4262-86E6-3B400674AF4E
575A935F-2696-4159-9678-80542217CB2B

フォルダをわける

たとえば「50/」とファイル名の頭に付けると、
50というフォルダを作ってそこに格納してくれます。
つまりさっきのファイル名被るとエラーになるっていうヤツを、「ファイル名は同じでフォルダ名を変える」とすれば同じファイル名でフォルダが別れた状態になります。

50/menu01.jpg-50%,80/menu01.jpg-80%,100/menu01.jpg-100%

F54DCF67-B113-444C-99AF-05046BC34D09

出力
7D910BDC-01B3-4555-B469-39666D82B026

こんな感じでしょうか。
ざっと書きましたがまだ素敵機能は沢山ありますので勉強したいと思います。

この記事は「Photoshop」カテゴリーです。

カンマン最新情報をゲット!

Facebookのウォールで

Twitterのタイムラインで

この記事を書いた人

白い たつ也
白い たつ也 Web Hengineer 「腹は黒いが名は白い」 気がついたら徳島にいました。 好き嫌いの激しい87年生まれ。 白い たつ也が書いた他の記事をチェック!

もう1記事どうぞ!

  • 関連
  • 人気
  • 最新

コメントを残す