連載  /  

ベテランほど知らずに損してるPhotoshopの新常識(4)まだスライスで消耗してるの?「画像アセットの生成」でスライス不要のサクサク切り出し

BY 公開

Web制作で不可欠な画像の切り出し。Photoshopの「画像の切り出しにスライス」は2年前のちょうど今頃に終了、現在は「画像アセットの生成」を使うことでスライス作業から解放されています。

CC→CC 2014→CC 2015とバージョンアップに伴う変更点とともにご紹介します。「画像アセットの生成」をご存じの方は、復習がてら読んでいただければ幸いです。

スライスの問題点

Web制作ではカンプと呼ばれる一枚絵を作成し、そこから必要なパーツを切り出すというワークフローが一般的です。

main

その際、切り出す箇所を、次のいずれかの方法で「スライス」するのが従来のやり方でした。

  • [スライスツール]を使って、切り出したい領域をドラッグして指定する
    screenshot-2015-10-09-11-35-22
  • [レイヤー]メニューの[レイヤーに基づく新規スライス]をクリックする

後者の方法では、移動や大きさ変更に伴い自動的にスライス領域が拡張しますが、それでも、スライスには次のような制約がありました。

  • スライス領域を重ねることができない
  • 部分的に透過させるには、下位のレイヤーを非表示にしておく必要がある

レイヤーの表示/非表示などをセットとして管理できる「レイヤーカンプ」を使って切り抜けている方もいると思いますが、何より、スライス作業は面倒!!!これに尽きます。

スライス作業を不要にする「画像アセットの生成」の基本フロー

「画像アセットの生成」を使うと、スライス作業だけでなく、重なりへの配慮が不要になる点がポイント高いです。実現する手順は非常にカンタン、次の2ステップだけです。

  1. 書き出したいレイヤー名に拡張子を付ける(例:catchcopy.png)
    screenshot-2015-10-09-12-24-58
  2. [ファイル]メニューの[生成]→[画像アセット]をクリック
    screenshot-2015-10-09-11-36-48

これだけで、PSDと同じ階層に「(PSD名)-assets」フォルダが自動生成され、「catchcopy.png」が自動的に書き出されます。レイヤーのコンテンツの色や効果、大きさ変更などを行うと、PSDの保存のタイミングで「catchcopy.png」は自動的に更新されます。

screenshot-2015-10-09-12-21-57

このサンプルでは、キャッチコピーの背面に画像がありますが、書き出し時に隠したりする配慮が不要です。

catchcopy

レイヤーグループを対象としたり、レイヤーグループ内の特定のレイヤーのみを対象にすることもできます(拡張子を付けるだけです)。

うまく生成されない場合

[環境設定]の[プラグイン]カテゴリで、[Generatorを有効にする]オプションにチェックが付いているかを確認してみてください。

screenshot-2015-10-09-12-27-57-s

なお、「画像アセットの生成」は、Node.jsベースのGeneratorテクノロジーを使っています。

対応しているファイル形式、画質の変更方法

「画像アセットの生成」で対応しているファイル形式は、PNG、GIF、JPEG、SVGの4つ。
また、デフォルトの書き出し設定は表の通りです。

ファイル形式 設定
PNG 32bit
GIF 透過GIF
JPEG 80%
SVG

書き出し設定を変更するには、次のようにレイヤー名を変更します。

レイヤー名の設定 書き出しオプション
PNG logo.png 半透明のアルファチャンネルを持つPNG-24
logo.png8 PNG-8
logo.png24 PNG-24
JPEG .jpg
.jpg8
画質80%
.jpg1 画質10%
.jpg10 画質100%
logo.jpg50% 画質50%
logo.jpg100% 画質100%
  • デフォルトのPNG形式は、半透明のアルファチャンネルを持つPNG-32形式。「.png8」や「.png24」のように指定することで書き出しオプションを変更できる
  • 「.jpg1」から「.jpg10」のように、10段階でJPEGの書き出しクオリティを変更できる(指定なしの場合は「.jpg8」と同様)。また、「logo.jpg100%」や「logo.jpg50%」のように「%」付きで指定することも可能
  • GIFには書き出しオプションがない

さらに、複数画像の書き出しやサイズ変更にも対応しています。

レイヤー名の設定 生成される画像ファイル
複数のファイル logo.png, logo.gif logo.png
logo.gif
大きさ指定(ピクセル) 250×150 logo.png logo.png(幅250ピクセル、高さ150ピクセル)
大きさ指定(%) 200% logo-retina.png logo-retina.png(200%の大きさ)
組み合わせ 200% logo@2x.png, logo.png logo@2x.png(200%の大きさ)
logo.png
  • 複数の画像を変更するには、「logo.png, logo.gif」のように「,」でつなぐ(「,」の後のスペースはなくてもOK)
  • 「250×150 logo.png」のように指定すると、幅250ピクセル、高さ150ピクセルの画像が書き出されるが、縦横比が狂ってしまうことがあるので注意

レイヤーのネーミング

ちょっと面倒なのがレイヤー名の変更です。

screenshot-2015-10-09-12-30-45

2013年11月にリリースされた「Adobe Layer Namer」を使うと、拡張子の付加や画質設定などを手軽に行うことができます。

しかし、Photoshop CC 2015には、インストールできないことがあります。というのも、インストールにExtension Managerを使うのですが、Extension Managerは開発中止されてしまい、CC 2015には対応していないのです…

CC/CC 2014をインストールしていない環境では、CC 2015にインストールできました。こちらの中程にリンク先がありますので、トライしてみてください。

そのほか、Photoshop CC 2015にも対応したOvenという拡張機能もあります。

ダブルクリックしないでレイヤー名を変更する

レイヤー名を変更するには、レイヤー上でダブルクリックして編集します。なかなか面倒なダブルクリック操作ですが、[レイヤー]メニューの[レイヤー名の変更](レイヤーグループの場合には[グループ名の変更])に、キーボードショートカットを割り当てることで解決します。

私の場合、command+control+AキーとF4キーを与えています。細かいことですが作業効率に直結します。

screenshot-2015-10-09-12-36-12-s

余白を設定するには?

「画像アセットの生成」は([レイヤーに基づく新規スライス]のように)自動的に書き出し範囲を決定します。しかしながら「少しだけ余白を付けたい」「特定の領域のみ表示させたい」ということがありますよね。

その場合には、レイヤー(またはレイヤーグループ)に対してレイヤーマスクを設定します(ベクトルマスクでも)。長方形でない場合には、マスクされつつ、レイヤーマスクが入りきる大きさの長方形で書き出されます。

screenshot-2015-10-09-12-40-14

なお、マスクで書き出し領域を指定できるのは、Photoshop CC 2014/2015のみです。

書き出し先をカスタマイズするには?

画像の書き出し先について掘り下げてみましょう。

「sample.psd」に対して、画像アセットをオンにすると「sample.psd」と同じ階層に「sample-assets」が作られ、その中に画像が書き出されます。これが基本です。

screenshot-2015-10-09-01-31-26

たとえば、レイヤー名を「images/logo.png」のようにすると、「sample-assets」内に「images」フォルダが作られ、その中に「logo.png」が保存されます。

screenshot-2015-10-09-01-31-30

しかし、これでもサイトの運用には困ります。サイトで使う画像を入れておくフォルダ(images)と「画像アセットの生成」の書き出し先「(PSD名)-assets」を一致させたい場合には、次の手順を踏みます。

  1. サイト内の「images」フォルダのシンボリックリンクを作成する
    screenshot-2015-10-09-12-51-29-s
  2. 作成したシンボリックリンクファイル(というかフォルダ)を「sample.psd」と同じ階層に移動する(「sample-assets」フォルダは削除)
  3. 「sample.psd」と同じ階層に移動した「images」というシンボリックリンクのファイル名を「sample-assets」に変更する
    screenshot-2015-10-09-12-51-44-s
  4. sample.psdを開くと、「画像アセットの生成」で書き出されるファイルは「images」フォルダー内に保存される
    screenshot-2015-10-09-12-51-55-s

screenshot-2015-10-09-12-49-38

エイリアス(Windowsのショートカット)ではNGです。シンボリックリンクをお使いください。複数のPSDにも対応できますが、書き出しのファイル名がダブらないように注意してください。

アップデートで解決した問題

「画像アセットの生成」がPhotoshopに搭載されて、2回のメジャーアップグレードを経ています。2013年のリリース時にあった次の問題は解決されています。

  • カンバスから、レイヤーのオブジェクトがはみ出ている場合、マスクを設定しなくてもカンバス内のみが書き出される
  • 余白を設定したい場合には、レイヤーマスク(ベクトルマスク)で対応可能
  • Photoshop CC 2014以降、SVG書き出しが可能

アセットを抽出?

「画像アセットの生成」は2013年10月のPhotoshop CCのアップデートで実装されました。Photoshop CC 2014では、「画像アセット」に加え、「アセットを抽出」が付加されましたが、Photoshop CC 2015で画像アセットのみになりました。ブログなどを参照される場合、ご注意ください。

画像アセット アセットを抽出
Photoshop CC ×
Photoshop CC 2014
Photoshop CC 2015 ×

まとめ

Web制作でPhotoshopをお使いの方でしたら、本当に使わないと“ソン”な「画像アセットの生成」。ぜひ、活用してみてください。

サンプルファイルで使用している画像はAdobe Stockの素材を利用しているため、透かしが入っています。
[ライブラリ]パネル内で[画像のライセンスを取得]をクリックして、購入処理を行うと、透かしは消えます。

screenshot-2015-10-09-03-24-31


screenshot-2015-10-09-12-57-43

連載

「ベテランほど知らずに損してるPhotoshopの新常識」のバックナンバー

  TAGS

  AUTHOR

鷹野 雅弘

1996年にDTP制作プロダクション「株式会社スイッチ」をスタート。 その後、Web制作、 コンサルティング業務にシフト。トレーニングやテクニカルライティング、書籍の企画や編集なども行っている。CSS Niteなどのセミナーイベントを企画運営のほか、DTP情報サイトDTP Transitを2005年から継続している。

テクニカルライターとして20冊以上の著書を持つ。主な著書に『10倍ラクするIllustrator仕事術(増強改訂版)』(共著、技術評論社)ほか。