はじめまして!技術グループの阿久沢です。
私は一昨年、まったくの未経験からコーディングの仕事に就かせてもらいました。まだまだ修行中の身ですが、その分WEBにたずさわる皆さんにわかりやすい技術面の記事を書いていきたいと思います。

難しい内容は書き(け)ませんのでヨロシクお願いします。

さて、今回はコーディングで必須の「スライス」作業がテーマ。企業のWEB担当の皆さんも、時としてPhotoshopで作業する機会があるのではないでしょうか。では、下記のようなデータの1つ1つのパーツを書き出したいとき、どのように行ってますか?

スライスツールを使用して、スライスする範囲がはみ出していないか?などを拡大しながら確認したり、背景や重なっているパーツをいちいち非表示にしたり、など手間や時間をかけていませんか?

今回は、Photoshopの機能を活用したり拡張したりして、簡単に効率よく画像の書き出しをする方法を3つほど、ピックアップしました。


■ Cut&Slice me を使って生成

Photoshop CS6以上に対応している無料のプラグインです。
レイヤーグループのコンテンツからPNG画像を書き出してくれます。
Cut&Slice meの公式サイトからダウンロードできます。

初めて使用する場合、ウィンドウ > エクステンション > Cut and Slice meを選択すると作業スペースに表示されます。

●使用手順

① 書き出したい画像のレイヤーグループ名の末尾に@をつけて保存します。
② Cut&Slice meのパネル内のデバイス(iPhone・Android・PC)を選択し
「Cut All assets(全て)」または「Cut Subgroups(サブグループのみ)」または「Cut Selected(選択したもののみ)」のボタンを押します。

※1つ以上のレイヤーグループを選択し「Cut Selected」を押した場合,
選択されたレイヤーグループの全てのパーツが結合されたものが書き出されます。
(下記はicon01@・icon04@・icon_05@のレイヤーグループを選択して書き出した場合です)

●パーツに余白を設けて書き出したい場合

また、Slicy特有のやり方で下記のように好みの余白を設けたレイヤーをグループ内に作成し、
そのレイヤーに#と名前をつけるとそのサイズで書き出しが可能です。

ちなみに#レイヤーは透過されてしまうので何色でも問題ないです。
こんな感じで書き出されました。

●ボタンのhover画像などがあってもまとめて書き出し可能

Cut&Slice meではレイヤーグループ名の後ろに_BTNとつけて、
その中のボタンのレイヤーグループに下記のような名前をつけるとまとめて書き出してくれます。

  • normal
  • hover
  • clicked / pressed
  • selected
  • disabled

今回はnormalとhoverの画像を作成して書き出してみました。
こんな感じで書き出されます。

●スマートフォン用の画像の書き出し

先程、使用手順にあったようにCut&Slice meのパネル内のデバイスを選択すると書き出し可能です。
各ボタンの書き出し結果は以下のようになります。

●使用してみた感想

何も使用せずにスライスツールで行うよりは格段に便利です。無料のプラグインなので導入もしやすいです。
レイヤーグループに@をつけるだけで書き出せること、そしてレイヤーグループ名を変更することなく、パネルにあるデバイスボタンを選択するだけでデバイスごとに変更できるのがいいですね。
ただ、透過PNGしか生成できないのがネック。
写真などはスライスツールで行うことをおすすめします。
また、要領の重いPSDファイルで Cut&Slice me を使用すると、ものすごく時間がかかります。
ひどい時はフリーズします。。(1ページのPSDファイルが430MBとかあったりするので…)
また、レイヤーマスクで余白を設けて書き出しの設定ができません。
「写真を正方形におさめて配置したい」ような場合、レイヤーマスクを使用せずにクリッピングマスクでPSDファイルを作成したほうがCut&Slice meを使用するには楽かもしれません。


■ CCでレイヤーから画像アセットを生成

こちらはPhotoshop CC 2014以降から追加された機能です。
レイヤーやレイヤーグループのコンテンツから JPEG、PNG または GIF の画像を自動で生成してくれます。

●使用手順

① 書き出したい画像のレイヤーやレイヤーグループに書き出したい画像形式の拡張子(.png / .jpg / .gif)を末尾につける。

② ファイル > 生成 > 画像アセット を選択。

③ ファイル > アセットを抽出 を選択するか
Cmd + Opt + Shift + W(Mac)または Ctrl + Alt + Shift + W(Windows) を押します。

④ アセットを抽出のダイアログで右下にある抽出…ボタンを押す。
この時、形式や画質の指定や解像度などが選択できます。
詳しくは こちらに書いてあります。

上記のように名前を付けた場合はこのように書き出されました。

●修正やアセット名(拡張子をつけたレイヤーまたはグループ名)を変更した場合、自動更新も可能

一度、アセットを抽出したPSDファイルを修正した場合は生成された画像アセットも自動的に更新されます。

もしエラーが起きて画像アセットが生成できない場合は「errors.txt」が作成され、そのファイルにエラー内容が書かれます。
エラーの例は下記のような内容です。

  • レイヤーが空
  • 同じアセット名が複数ある
  • アセット名に、ファイル名に許可されていない無効な文字が含まれている
  • 画像はドキュメントの範囲外にある(カンバスサイズを変更し切れてしまっている など)
  • 不明なエラー(Adobe Generator が応答しなくなる など)

●パーツに余白を設けて書き出したい場合

レイヤーマスクをアセット名のついたレイヤーやレイヤーグループに作成すれば、そのサイズで書き出し可能です。
試しに、icons.pngに余白を設けたレイヤーマスクを作成してみます。

以下のように書き出しされました。

●形式や画質の指定やサイズをアセット名のパラメーターで変更可能

使用手順④に書いたようにアセットを抽出のダイアログで形式や画質の指定や解像度などを選択できますが、アセット名にパラメーターをつければ変更可能です。
また画像のサイズもパラメーターで変更できます。
詳しくは こちらに書いてあります。

PNG アセットのパラメーター
必要な出力画質を 8、24、32 のようにアセット名の末尾に追加します。(32がデフォルトの値になります)

  • icon_01.png8
  • icon_01.png24
  • icon_01.png32

JPG アセットのパラメーター
必要な出力画質を .jpg(1-10) または .jpg(1-100%) のようにアセット名の末尾に追加します。(画質90%がデフォルトの値になります)

  • icon_01.jpg8
  • icon_01.jpg80%

サイズのパラメーター
必要な出力画像サイズ(相対値または px、in、cm、mm などのサポートされている形式)をアセット名の最初に追加します。
サイズとアセット名の間には必ず半角スペースをいれてください。

  • 200% icon_01.jpg
  • 300 x 200 icon_01.jpg
  • 10in x 200mm icon_01.jpg

※コンマ記号(,)でアセット名を区切りると複数のアセットが生成できます

例) 画質80%と50%両方ほしい場合

アセット名 → icon01a.jpg80%,icon01b.jpg50%

(80%や50%の文字は消えて同じアセット名になりエラーが起きてしまうため、拡張子前の名前は違うものにします)

●スマートフォン用の画像の書き出し

こちらも使用手順④に書いたようにアセットを抽出のダイアログでできます。
0.25x(25%)・0.5x(50%)・2x(200%)・3x(300%) の4つのボタンがあるのでこちらを選択します。(複数選択可)

全て選択した場合、以下のようにアセットが生成されます。

1x画像が生成され、さらにscaled-at- 25 〜 300の各フォルダ内に
0.25x・0.5x・2x・3xの画像が生成されます。

生成された画像はこんな感じになります。

拡大された画像も綺麗に生成されましたね。
スマートオブジェクトの状態になっているので大丈夫ですが、ベタ張りだとひどいことになります。
参考:「アセットを抽出」の出力は油断するとボケる (Photoshop CC 2014) – d.sunnyone.org

フォルダ名とファイル名はアセットを抽出のダイアログの抽出または完了ボタンを押した時にできる
default 100%, 200% scaled-at-200/@2xとあるレイヤー名で変更できます。

scaled-at-200の部分がフォルダ名、@2xがicon01@2x.pngなどファイル名の末尾につく文字です。
例えば2x画像をiPhoneというフォルダにicon
01_b.pngというファイルを生成させたい場合、
default 100%,200% iPhone/_bとすれば大丈夫です。

また、試しにアセットを抽出のダイアログではなく各アセット名にパラメーターをつけて1xと2xの画像を生成できます。

やり方としては下記のように200% icon_01@2x.jpg,icon_01jpgとコンマ(,)で区切ったアセット名をつけます。

このように画像が生成されます。

下記のように1xと2x画像がきちんと生成されますが、わざわざこんな面倒臭いことをしなくてもいいかと思います。
この画像だけスマートフォン用がほしいという場合はいいかもしれません。

●使用してみた感想

形式はもちろん、画質やサイズまで指定できるので言うことなしです。抽出の時間もかかりません。数秒でできます。
ただ当たり前ですがCCを導入しなくてはならないので、現在CCでない場合は他のプラグインやアプリなどに比べて導入のコストがかかることくらいです。
あと、欲を言えばCut&Slice meのように#レイヤーで余白が設けられたらいいと思います。
(もしかしたら知らないだけかもしれませんが)
そのため「写真を正方形におさめて配置したい」などがあった場合、レイヤーマスクを使用してPSDを作成していただいた方がいいですね。


■ Slicyを使って生成

Mac用のPhotoshop用アプリです(有料)。
画像アセットと同じようにレイヤーやレイヤーグループのコンテンツから JPEG、PNG または GIF の画像を自動で生成してくれます。

Slicyの公式サイトからダウンロードできます。
価格は1つ¥3,529で、4つ以上だと1つ¥2,312になるようです。(2015.3.9 現在)

体験版もあるので使用してから購入を考えてみてはいかがでしょうか。
※体験版は書き出した画像に赤い×がつきます。

●使用手順

① 書き出したい画像のレイヤーやレイヤーグループに書き出したい画像形式の拡張子(.png / .jpg / .gif)を末尾につけて保存します。

② Slicyを起動し、保存したPSDファイルをドラッグ&ドロップ

③ ひとつひとつの画像が書き出されるので、Save…ボタンを押して保存

●画像アセットと同じく自動更新も可能

Save…ボタンを押すと下記のようにメッセージが出ます。

「Repeat Automatically」を押した場合、Photoshopを編集し
上書き保存すると書き出し画像も自動で更新してくれます。

右上にある ボタンを押すと下記のように履歴が確認でき、戻すことも可能のようです。

●パーツに余白を設けて書き出したい場合

画像アセットと同じくレイヤーマスクのサイズで書き出し可能です。
また、Cut&Slice meと同じで下記のように好みの余白を設けたレイヤーをグループ内に作成し、
そのレイヤーに@bounsと名前をつけるとそのサイズで書き出しが可能です。

@bounsレイヤーも透過されてしまうので何色でも問題ないです。
こんな感じで書き出されました。

●スマートフォン用の画像の書き出し

他にもスマートフォン用に画像を作成する際、icon_01.png+@2xのように+@2x拡張子の後ろにつけると
作成した2倍の画像(2x)と、通常サイズ(1x)の画像の2点が書き出されます。
画像アセットとは違い、2x画像がかなりぼけてしまします。

また、icon_01@2x.pngのように@2x拡張子の前につけると
作成した1/2の(1x)画像と、通常サイズ(2x)の画像が書き出されます。

※「lc-auto-1x = off」という名前の新規レイヤーを作成すると1xの画像を生成しないようにできます。

●使用してみた感想

CCの画像アセットと同じく形式が指定できるのがいいですね。
ドラック&ドロップして、こちらも時間があまりかからずにできます。
残念ながらMac版のみなのでWindowsユーザーには導入が難しいです。。
画像アセット機能より先にあったソフトで比べると劣ってはいますが、十分使いやすいです。
余白のつけ方が2パターンあるので「写真を正方形におさめて配置したい」などのとき、クリッピングマスクでもレイヤーマスクでもどちらでも対応可能です。


まとめ

どの方法もスライスツールで行うより早く便利ですが、元のPSDファイルがごちゃごちゃしていたらグループの整理などに時間がかかり意味がありません。
デザインがFIXしたPSDで画像の生成用にグループにまとめる作業をする場合、誤って重なり順を変更し「非表示のレイヤーが出る」「レイヤー効果が効かなくなる」などして完成品と異なってしまう可能性があります。
デザインの段階である程度下記のようなルールを決めておくと、より効率的にできるかと思います。

  • 画像を生成しやすいように細かくレイヤーグループにまとめる。
  • レイヤーやレイヤーグループ名をそのまま画像名にしやすいルールでつける(icon_01,img_01,btn_01 など)
  • 不要なレイヤーやレイヤーグループは削除
  • 画像を範囲に収める場合はレイヤーマスクで。
  • 各パーツはスマートオブジェクトにする(スマートフォンサイトを作る場合)

少しはお役に立ちましたでしょうか?
それでは、また!