Photoshopのデザインカンプ上で、スマートオブジェクトを50％以下に縮小しておき、画像アセット生成などで200％にして書き出す手法があります。スマホなどの高解像度ディスプレイ対策としては定番ですね。しかし、ある条件下では、元の画像を50％以下に縮小しているにも関わらず、書き出し後の200％画像がぼけてしまうことがあります。この点について気になったので、少し整理してみました。
スマートオブジェクトの特長
スマートオブジェクトは、拡大、縮小を繰り返しても劣化しないというのが特長です。もちろん、オリジナルのサイズより大きくする場合は別ですが、いったん縮小してから再び拡大しても、その都度オリジナルからピクセルを生成しますので、常に最適な画質が保持されるというわけです。
デザインカンプから高解像度用の画像を書き出す
Photoshopでデザインカンプを作るとき、高解像度ディスプレイ用の画像を書き出す予定がある場合は、あらかじめ大きいサイズの画像でスマートオブジェクト化しておき、それを50％以下のサイズにしてレイアウトするのが一般的です。これを200％などに拡大して書き出すことで、簡単に高解像度用の2倍画像が作成できるわけです。このとき、「画像アセットの生成」や「書き出し形式」などの機能を使えば、元画像を自動で200％に拡大しながら書き出すこともできるのでとても便利です。
- Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS LAB
- モバイル・Web用のデザインや画像を書き出す新しい方法 | Adobe Photoshop CCチュートリアル
拡大して書き出した画像がぼけちゃう問題
ここでひとつ注意したい点があります。ドラッグ＆ドロップや“ファイル”→“○○○を配置”でドキュメントに配置した場合、スマートオブジェクトを50％以下に縮小しているにも関わらず、書き出し後の2倍画像が、通常の画像のようにぼけてしまうことがあります。
一方、同じ方法で配置したスマートオブジェクトを、同じように拡大して書き出してもぼけない場合もあります。ということは、配置のやり方が問題ではなさそうですね。では、ぼける、ぼけないがどういう条件で決まるのでしょうか。
スマートオブジェクトの中身について
ご存知の方も多いと思いますが、スマートオブジェクトをものすごくざっくりと説明すると、PSDの中に別の画像をまるっと内包する技術です。つまり、内包された画像にも、通常の画像ファイルと同様に画像形式が存在するということです。それは、JPEGであったり、PNGであったり、PSDであったり……とさまざまです。リンクで配置している場合を考えれば、イメージしやすいと思います。
ドラッグ＆ドロップや“ファイル”→“○○○を配置”で配置したスマートオブジェクトは、オリジナルのファイルと同じ画像形式で保持されます。例えば、JPEGのファイルをドラッグ＆ドロップで配置すれば、そのスマートオブジェクトの中身はJPEGになります。スマートオブジェクトの中身が何の形式になっているかは、［レイヤーパネル］でスマートオブジェクトのレイヤーサムネールをダブルクリックして中身を開き、その画像のファイル名（拡張子）を見ることで判別できます。あるいは、属性パネルでファイル名を確認できる場合もあります。
外部ファイルを配置する以外にも、レイヤーの画像を直接スマートオブジェクトに変換することもできます。このときの画像形式は、PSB（ビッグドキュメント形式）となります。PSBは、PSDとほぼ同じ特徴を持っています。詳しくは公式のヘルプを参照してください。
実験
ひとつ実験をしてみましょう。JPEG、PNG、PSDの外部ファイルを埋め込み配置したもの、レイヤーを直接スマートオブジェクト化したもの、合計4つのスマートオブジェクトを用意しました。直接変換したもの以外は、すべてドラッグ＆ドロップで配置しています。元の画像サイズは、それぞれ256pixel四方ですが、スマートオブジェクトを50％に縮小して、128pixelのサイズにしています。これらを、画像アセットの生成で、200％に拡大して書き出ししてみましょう。なお、今回実験に使ったPSDは、下記よりダウンロードできるようにしていますので、興味のある方はご自由にお試しください。
レイヤー名を変更して画像アセットを作成
まず、画像アセットを生成するためにレイヤー名を変更しましょう。今回は、すべてPNGとして書き出します。200％に拡大するので、レイヤー名を「200% xxx.png」としました。あとは、“ファイル”→“生成”→“画像アセット”を選択し、続けてドキュメントを上書き保存すれば、PSDと同じ階層にアセット用のフォルダが作成され、その中に画像が書き出しされます。
結果
元がJPEGとPNGのものは、拡大によって画像がぼけています。一方、PSDと直接変換したものは、きれいに拡大されています。つまり、スマートオブジェクトの中身が、Photoshopのネイティブ形式であるPSDとPSBの場合に限り、拡大に対応しているということですね。
まとめ
今回の実験で、拡大したスマートオブジェクトによる画像の劣化は、配置方法が原因ではないことがわかりました。すべての形式を試したわけではないので、これ以外にも拡大に対応しているものがあるかも知れませんが、少なくとも、PSDかPSBにしておけば大丈夫だということです。このように仕組みを理解しておくことで、意図しない結果が出た時でも、無駄のない対処ができるようになるはずです。重箱の隅をつつくような細かい内容ですが、今回の記事がPhotoshopでWebデザインをされている方の一助になればうれしいです。
Photoshopのことを幅広く理解するのに最適な一冊。基本操作から演出的な色補正まで、さまざまな内容が網羅されています。自分も著者として参加していますのでよかったらチェックお願いします！
- Photoshop逆引きデザイン事典[CC/CS6/CS5/CS4/CS3]
-
著者：上原 ゼンジ／加藤 才智／高橋 としゆき／吉田 浩章
出版社：翔泳社／サイズ：B5変形版／ページ：352P／本体価格：本体2,400円＋税
ISBN：978-4798134420