This page is intended for users in Hong Kong. Go to the page for users in United States.

オブジェクトの配置方法で書き出し画質が変わります

初めまして。
ブログにて登場するのは初となりますね。日々は主にフロントエンドエンジニアとしてUIアニメーションの作成などを担当しております、ディベロッパーの石山 大輔(いしやま だいすけ)と申します。

気付けば入社より一年、お仕事では日々デザイナーの方より受け取ったpsdファイルと睨み合いながら実装を行っていますが、様々なデザイナーの方が居る世の中、psdの中身も千差万別。それぞれの几帳面さや感性などがデザインデータには現れます。

そして、デザインデータによってコーディングの効率が左右されることも多々あり、それらに対応するべく実装の視点から見たpsdファイル作成のTipsは多数点在していますが、今回は私個人の経験を元にスマートオブジェクトが書き出し時に劣化し、ボケてしまう現象の原因についてと、改善方法をまとめました。

目次

  1. 執筆のきっかけ
  2. 従来のスマートオブジェクトの配置
  3. 200%で書き出せないスマートオブジェクトについて
  4. 書き出し時の拡大縮小に対応したスマートオブジェクトの配置
  5. 元の画像データを保ち200%で書き出し可能な配置方法

なお、スマートオブジェクトとはなんぞやという方は先ずPhotoshop の公式マニュアルをご覧下さい。
Photoshop でのスマートオブジェクトの操作

1.執筆のきっかけ

AppleからのRetinaDisplay登場を皮切りに、ディスプレイの解像度が上昇し続ける昨今では、.psdにスマートオブジェクトとして配置された画像の200%書き出しは常識の仕様となりました。

しかし、デザインデータによっては200%で書き出した画像が劣化して書き出されるという悲劇を生むことも。
こうなると解決策は全てのスマートオブジェクトの参照元の画像を開き、デザインにサイズとマスク位置を合わせて一枚ずつ書き出すという所業に見舞われます。。。

本音を述べるとやはり画像は全てアセット書き出しで済ませたいもの。制作の時間は有限でありながら上記の手順では書き出しに膨大な時間を費やしてしまうため、今回原因と解決方法の調査に至りました。

2.従来のスマートオブジェクトの配置

まず使用するのは最新バージョン(2019年8月時点)のAdobe Phothop CC 20.0.4です。
※執筆にあたり、Photoshop の設定等は初期化しています。

それでは早速、おそらく一般的であるスマートオブジェクトの配置を行ってみましょう。
新規ドキュメント作成から一般的なwebデザインプリセットである横幅1366pxを選択します。

元画像との比較を行うため、配置されたスマートオブジェクトを一度元サイズの10分の1まで縮小し、
書き出し時に元画像と同じ横幅3725pxで書き出します。

それでは、作成したドキュメントに以下手順で画像を追加し、スマートオブジェクト化していきましょう。

  1. 画像をドラッグ&ドロップ
  2. 配置後にEnterキーを入力しスマートオブジェクト化
  3. スマートオブジェクトを元サイズの10%まで縮小
  4. 元サイズと同等になるよう、10倍のサイズを指定し書き出し

書き出した画像(test1.jpg)と元画像の比較を用意しました。左がtest1.jpgで、右が元画像です。

スマートオブジェクトは非破壊編集を行うため、縮小した状態から元サイズに書き出しても劣化しない筈ですが、見事に劣化しています。これはアセット書き出しを行っても同様の結果となり、デザインデータに同じ症状が出ると最後、書き出しに恐ろしい手間が・・・。

それでは何故、上記のスマートオブジェクトは200%で書き出せないのでしょうか。

3.200%で書き出せないスマートオブジェクトについて

まずは、[ウィンドウ]より[属性]パネルを表示したのち、配置したスマートオブジェクトを選択してみましょう。

青枠内はスマートオブジェクトの参照元ファイルを表しています。形式は.jpegということが分かります。
そして、先ほど書き出したスマートオブジェクトが劣化していた原因はこのファイル形式にあり、スマートオブジェクトは中身のファイルが.psdまたは.psb形式ではない場合、書き出し時の再描画に対応していないのです。

つまり、配置の際に画像をPhotoshop のネイティブ形式である.psbまたは.psd形式にすることで、書き出し時の拡大縮小に対応したスマートオブジェクトを配置することができるようになります。

4.書き出し時の拡大縮小に対応したスマートオブジェクトの配置

それでは、以下手順にてpsb形式でのスマートオブジェクトの配置を行っていきます。

  1. 画像をドラッグ&ドロップ
  2. 配置後にレイヤーパネルから画像レイヤーを右クリックし、[スマートオブジェクトに変換]をクリック

なお前回との違いは、配置後のスマートオブジェクト化の操作がEnterキーからレイヤーパネル内の右クリックによるものとなっています。

上記手順で無事psb形式での配置が完了しました。

しかし、キャプチャでも確認できるように、スマートオブジェクトの参照元ファイルを確認してみると、本来ならば元画像と同じく横幅3725pxでなければスマートオブジェクトである意味が無いのですが、カンバスサイズを確認したところ横幅1030pxとなっています。
どうやら先ほどドラッグ&ドロップで画像を配置した際、ドキュメントのカンバスサイズに合わせて画像が自動的に縮小されてしまい、その画像をスマートオブジェクト化したのが原因のようです。当然といえば当然ですね。

これではスマートオブジェクトの参照元ファイルが拡大縮小に対応した.psb形式だとしても、参照元ファイル自体が元画像のサイズを維持していないため、書き出し時に200%を選択すると劣化した画像が書き出されてしまいます。

過去にここまでの仕様を調べた結果、私はデザイナーに対し[ドラッグ&ドロップによる配置]を廃止し、[画像を個別にPhotoshop で開きスマートオブジェクト化]→[デザイン用のカンバスにコピー]を行うことで、元画像の情報を維持したまま行えるスマートオブジェクトの配置方法を提案したことがありました。

しかし、これではフロントエンドエンジニアの作業量が減る一方で、デザイナーの作業に余計な手間が増えてしまいます。制作における時間は有限ということを考えると、これは根本的な解決とは言えません。

5.元の画像データを保ち、拡大で書き出し可能な配置方法

それでは先ず、ドラッグ&ドロップによる画像配置の仕様から見直していきます。

Photoshop の環境設定[command+K]を開き、サイドバーから[一般]の項目を表示します。
以下の項目のチェックを下部の画像に合わせて下さい。理由も追記しておきます。

  • [画像サイズを変更して配置]を解除
    >配置時、アートボードサイズに合わせた画像サイズの変更を防ぐため
  • [配置時にスマートオブジェクトを常に作成]を解除
    >レイヤーパネル内の右クリックからスマートオブジェクト化を行うため
  • [配置時に変形をスキップ]をチェック
    >スマートオブジェクト化の前に画像サイズの変更を行わないため

以上の設定により、ドラッグ&ドロップ時もアートボードに依存しないサイズで画像が配置されます。

この画像オブジェクトをレイヤーパネルから選択し、右クリックでスマートオブジェクト化することで、.psbファイルでありまた参照元ファイルが元の画像サイズを維持したままのスマートオブジェクトが完成します。

それでは以下手順で改めて画像を配置し、書き出してみましょう。

  1. 画像をドラッグ&ドロップ
  2. 配置後にレイヤーパネルから画像レイヤーを右クリックし、[スマートオブジェクトに変換]をクリック
  3. スマートオブジェクトを元サイズの10%まで縮小
  4. 元サイズと同等になるよう、10倍のサイズを指定し書き出し

書き出しが完了しました。

改めて、書き出した画像(test2.jpg)と元画像の比較を用意しました。左がtest2.jpgで、右が元画像です。

2.従来のスマートオブジェクトの配置にて比較した画像とは違い、元画像の情報を保持したまま書き出しが成功しています。
なお、アセット書き出しを行っても同様に画像の劣化が現れることなく書き出し可能となっています。

まとめ

以上、200%で書き出し可能となるスマートオブジェクトの配置方法でした。
過去に個人的に調べ、psbまたはpsd形式で配置すれば劣化しないことまで理解できたのち「結局どうやってその形式に配置すれば良いんだ...」「配置の手間が大きい...」と肩を落としたことがありましたが、上記の手順であれば手間を増やすことなく、スマートオブジェクトの配置が行えるのではと思います。

それにしても何故このような仕様を...と考えましたが、そもそも200%で書き出す必要の無いデザインの場合はpsdのファイル容量を圧迫するのみなので、勝手に最適化してくれていたのは心遣いの一つなのでしょう。なるほど。

UNIEL ltd.'s job postings

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more