Photoshop 画像アセット生成活用術 2倍のスマートオブジェクトがぼやける件も

こんにちは。Maromaroのfutaです。

PhotoshopでWEBデザイン制作をする時に、画像をコーディング用に書き出す必要がありますが、どのようにしていますか？ 以前はみんなスライスを使っていたと思います（筆者は2017年くらいまではスライスしていた記憶があります…）が、CC2015で「WEB用に保存」が旧方式となりPhotoshop自身に書き出し機能のバリエーションが増え、色々選択できるようになりました。
その中の１つに、一度これを知るともうスライスには戻れなくなる、便利な書き出し機能「画像アセット生成」というのがあり、当ブログでも過去に紹介済みなのですが、

Maromaro Blog

Photoshopの画像アセットで高速Web書き出し！

こんにちは！Webサイトの制作で Photoshop のスライスが一番大変なhoshidaです！特にコーディングとスライスを交互に行うときなど、わずかしかない脳内メモリーがいっぱいになってしまい頭の中からカリカリ音がします。しかし Maromaro は Web 制作がメインの業務ですし、スライスから逃れることなどできるはずはない…そんな最中、Photoshop CC から「画像アセット」というWeb用画像を書き出す機能が追加されました。この機能が従来の書き出し機能であるスライスよりもかなり時間を短縮できるので今回ご紹介します。Photoshop 画像アセ...

画像アセット生成について

基本操作

書き出せるファイル形式

• JPG
• PNG
• GIF
• SVG

書き出し方

下記2ステップを実行する。

1. レイヤー名またはレイヤーグループ名を「任意の名前.指定したい拡張子」にする
2. 「ファイル」→「生成」→「画像アセット」をクリックしチェックが入った状態にする

これだけで、書き出しが完了です。PSDと同じ場所に「PSD名-assets」というフォルダが自動生成され、中に指定した形式の画像が指定しただけ保存されます。

拡張子以外にも細かい命名規則があり、各パラメータを覚えてレイヤー名に書き加えれば、個別に画質（圧縮率）・サイズ（拡大縮小）・保存先（サブフォルダ）の指定が可能です。これにより自由度の高い快適画像書き出しライフを送れる事になるでしょう。
（詳細は公式サイトをご参考下さい→Photoshopユーザーガイド）

↑sample_img01というレイヤーに、指定の値を書き込む。複数書き出す場合は「,」で区切る。この例は、等倍サイズでJPG80%画質、200%サイズでJPG80%画質の2種を書き出す指定

ちなみに、細かい指定をしない場合は、各形式の初期設定（JPEGアセットは90％の画質、PNGアセットは32ビット画像、GIFアセットは基本的なアルファ透明度）で書き出されるそうです。

意外と知らない、更に便利な活用法

レイヤー名に個別にパラメーターを加筆するのが基本となるので、PSD画像数が多かったり、タイプミスに気づかずエラーになったりという時にしんどさを感じる事もあるかもしれません。そんな時に便利なものがありますので、紹介します。

簡単3ステップで命名完了。「Adobe Layer Namer」

タイピングをしなくても3回クリックすれば自動でレイヤーに命名をしてくれる、Photoshopプラグインです（無料）。2倍サイズの同時書き出しも指定出来るのでRetina等高精細ディスプレイ対応の時も使えます。ADOBE公式サイトからダウンロードできます。
※SVGは非対応です

使い方

書き出したいレイヤーまたはレイヤーグループを選択して、「Adobe Layer Namer」パネルを開く

1. ファイル形式を選択 JPG・PNG・GIFの3形式から選べます。
2. パラメーターを選択 JPG選択時は1〜10の画質を、PNG選択時は8bit・24bit・32bitを選べます。
   2X　拡大サイズも同時生成は必要な場合チェックを。
3. 名前を変更 このボタンを押せば完了です。命名規則を覚えていなくても安全に指定が出来ました。

アセットの初期設定の指定

複数のレイヤーの書き出し設定が同じ内容で構わない場合はこの一括指定方法が有効です。ただ、拡張子だけはあらかじめ入力しておく必要があります。

①ドキュメント内に空のレイヤーを作成する
②空レイヤーのレイヤー名を「default」にし、半角スペース空けて適用したい設定を加筆する

例：2倍（200%）の画像を、X2というサブフォルダに書き出す
　　　→default 200% X2/

注意点

イラレ要らずで早い！ SVG書き出しはシェイプレイヤーで

SVGは、シェイプレイヤー名またはシェイプレイヤーグループ名に「.svg」を記入することで書き出す事が出来ます。
Illustratorで作成したデータは、ベクトル情報保存の為aiのままPhotoshopにスマートオブジェクトで埋め込む事が多いと思いますが、PSD上でスマートオブジェクトのレイヤーに拡張子svgを指定しても、ピクセルデータになってしまうので注意して下さい。
アイコンのような単純な形なら、Photoshop上にシェイプレイヤーで配置しておきましょう。それだけで他の画像と同じように勝手に書き出されます。Illustratorを立ち上げなくて済むので、書き出し作業や連携がスムーズになります。

もちろん、オブジェクトが複雑になっている場合やフォントをアウトラインしないで残したい場合等、シェイプレイヤーだと成立しないaiデータも多いので、シェイプレイヤーにするかスマートオブジェクトでIllustratorで書き出しにするかは、デザイナー判断で適切に使い分けていけると良いですね。

2倍書き出しのスマートオブジェクトがぼやける件

「Adobe Layer Namer」の説明の時に少し触れた、Retina等の高解像度ディスプレイ対策として必須の2倍書き出しについての注意点です。

スマートオブジェクトが50％より高い縮尺だと、画像アセット生成等で200％で書き出すと画質が荒くなるので、PSDには必ず50％以下に縮小した状態のスマートオブジェクトを配置する必要があります。ぼやける場合は、この条件を満たしてない事が多いです。
ところが、この条件を満たしていても、書き出し後の2倍画像が等倍画像を処理した時のように、ぼやけてしまうことがあります。
これはPSDに画像を配置した方法が異なるのが原因のようなのです。

それぞれのスマートオブジェクトを展開してみると、荒くなってしまう方は、拡張子はjpgと表示されます。Finder上からphotoshopへ直接ドラッグ＆ドロップをしたので、ファイル形式もオリジナルのままで配置されています。
一方、2倍書き出しがうまく行った方は、PSD上でスマートオブジェクト化をしており、拡張子はpsbになっていました。

わかりやすく検証してくれている記事があるのですが、つまり、現状のPhotoshopでは、スマートオブジェクトはPSDかPSBで作られていないと、2倍、3倍書き出しの時に高解像度の元データから引っ張ってきての書き出しをしてくれないのです。
ドラッグ&ドロップした画像はJPGもPNGもその形式を維持するので、スマートオブジェクトの中は高解像度であっても、アートボード上の等倍の状態から2倍に書き出されるという訳です。

2倍書き出しが想定される画像を配置する時は、形式がPSDかPSBどちらかになっているかを確認するようにしましょう。
ドラック＆ドロップで配置してもすぐに変換が出来る（スマートオブジェクトに一度ラスタライズをかけスマートオブジェクト化をする）ので覚えておきましょう。

以上、知っておくと良い画像アセット生成の活用術についてでした。