ベテランほど知らずに損してるPhotoshopの新常識(4)まだスライスで消耗してるの?「画像アセットの生成」でスライス不要のサクサク切り出し
by 鷹野 雅弘
Posted on 10-09-2015
ベテランほど知らずに損してるPhotoshopの新常識
Web制作で不可欠な画像の切り出し。Photoshopの「画像の切り出しにスライス」は2年前のちょうど今頃に終了、現在は「画像アセットの生成」を使うことでスライス作業から解放されています。
CC→CC 2014→CC 2015とバージョンアップに伴う変更点とともにご紹介します。「画像アセットの生成」をご存じの方は、復習がてら読んでいただければ幸いです。
スライスの問題点
Web制作ではカンプと呼ばれる一枚絵を作成し、そこから必要なパーツを切り出すというワークフローが一般的です。
その際、切り出す箇所を、次のいずれかの方法で「スライス」するのが従来のやり方でした。
後者の方法では、移動や大きさ変更に伴い自動的にスライス領域が拡張しますが、それでも、スライスには次のような制約がありました。
- スライス領域を重ねることができない
- 部分的に透過させるには、下位のレイヤーを非表示にしておく必要がある
レイヤーの表示/非表示などをセットとして管理できる「レイヤーカンプ」を使って切り抜けている方もいると思いますが、何より、スライス作業は面倒!!!これに尽きます。
スライス作業を不要にする「画像アセットの生成」の基本フロー
「画像アセットの生成」を使うと、スライス作業だけでなく、重なりへの配慮が不要になる点がポイント高いです。実現する手順は非常にカンタン、次の2ステップだけです。
これだけで、PSDと同じ階層に「(PSD名)-assets」フォルダが自動生成され、「catchcopy.png」が自動的に書き出されます。レイヤーのコンテンツの色や効果、大きさ変更などを行うと、PSDの保存のタイミングで「catchcopy.png」は自動的に更新されます。
このサンプルでは、キャッチコピーの背面に画像がありますが、書き出し時に隠したりする配慮が不要です。
レイヤーグループを対象としたり、レイヤーグループ内の特定のレイヤーのみを対象にすることもできます(拡張子を付けるだけです)。
うまく生成されない場合
[環境設定]の[プラグイン]カテゴリで、[Generatorを有効にする]オプションにチェックが付いているかを確認してみてください。
なお、「画像アセットの生成」は、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ピクセルの画像が書き出されるが、縦横比が狂ってしまうことがあるので注意
レイヤーのネーミング
ちょっと面倒なのがレイヤー名の変更です。
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キーを与えています。細かいことですが作業効率に直結します。
余白を設定するには?
「画像アセットの生成」は([レイヤーに基づく新規スライス]のように)自動的に書き出し範囲を決定します。しかしながら「少しだけ余白を付けたい」「特定の領域のみ表示させたい」ということがありますよね。
その場合には、レイヤー(またはレイヤーグループ)に対してレイヤーマスクを設定します(ベクトルマスクでも)。長方形でない場合には、マスクされつつ、レイヤーマスクが入りきる大きさの長方形で書き出されます。
なお、マスクで書き出し領域を指定できるのは、Photoshop CC 2014/2015のみです。
書き出し先をカスタマイズするには?
画像の書き出し先について掘り下げてみましょう。
「sample.psd」に対して、画像アセットをオンにすると「sample.psd」と同じ階層に「sample-assets」が作られ、その中に画像が書き出されます。これが基本です。
たとえば、レイヤー名を「images/logo.png」のようにすると、「sample-assets」内に「images」フォルダが作られ、その中に「logo.png」が保存されます。
しかし、これでもサイトの運用には困ります。サイトで使う画像を入れておくフォルダ(images)と「画像アセットの生成」の書き出し先「(PSD名)-assets」を一致させたい場合には、次の手順を踏みます。
- サイト内の「images」フォルダのシンボリックリンクを作成する
- 作成したシンボリックリンクファイル(というかフォルダ)を「sample.psd」と同じ階層に移動する(「sample-assets」フォルダは削除)
- 「sample.psd」と同じ階層に移動した「images」というシンボリックリンクのファイル名を「sample-assets」に変更する
- sample.psdを開くと、「画像アセットの生成」で書き出されるファイルは「images」フォルダー内に保存される
エイリアス(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の素材を利用しているため、透かしが入っています。
[ライブラリ]パネル内で[画像のライセンスを取得]をクリックして、購入処理を行うと、透かしは消えます。
Topics: クリエイティブ
Products: