Blog2018.12.03chieスマートオブジェクトの画像劣化検証Web制作PhotoshopWEB制作現場AdobeシェアTweetこんにちは。MaromaroのChieです。PhotoshopでWebデザインを行う際に、直し(拡大縮小など)に強いデータにすべく、画像データはスマートオブジェクト化しているのですが、スマートオブジェクト化しても画像が劣化することがあります。今回はこの劣化についてご紹介したいと思います。目次スマートオブジェクトの特徴スマートオブジェクトの設定方法スマートオブジェクトの劣化の原因スマートオブジェクト化した画像よりも配置した画像を拡大しているスマートオブジェクト化の多重設定まとめスマートオブジェクトの特徴Photoshopによる、スマートオブジェクト化の劣化の話の前に、まずはスマートオブジェクトについてご紹介します!画像をスマートオブジェクト化する利点というと、何と言ってもデータを劣化させることなく変形が行えるので、修正や更新作業などの時に強いデータが制作できること。スマートオブジェクト化しない場合は、ラスター画像を編集することになるため、縮小した場合、画像を構成するドット数が減ってしまい、元のドット情報が破棄されてしまいます。その場合、再度拡大した時には、元の情報がないため、画像が劣化してしまいます。スマートオブジェクトは「ラスター画像」データの【元】を保持したデータ形式です。【元】のデータを保持しているため、編集によりドットの情報を失うことがないので、修正などに適したデータとなります。同じイラストやボタンをデザイン内に複数配置する場合、必要なオブジェをスマートオブジェクト化しておけば、編集が必要になった際に、スマートオブジェクトを編集することで、デザイン内に配置された全ての画像が自動的に更新されて便利です。高画質のデータを使用するに越したことはないですが、Webで使用する場合はある程度加工した状態でのスマートオブジェクト化をオススメします。任意の段階まで加工したら、画像レイヤーを選択し、[右クリック]→[スマートオブジェクトに変換]で変換完了。レイヤーがスマートオブジェクトに変換されると、レイヤーの表示も変わるのでわかりやすいです。スマートオブジェクト化した画像を再度編集したい場合は、レイヤーをダブルクリックすることで別データとしてファイルが開くので、そのデータを編集して保存することで自動更新されます。スマートオブジェクトの劣化の原因さて、今回の本題「スマートオブジェクトの画像劣化」についてですが、スマートオブジェクト化したにも関わらず画像が劣化する原因は2つ。スマートオブジェクト化した画像よりも配置した画像を拡大しているスマートオブジェクト化した画像自体のサイズが配置したサイズよりも小さい場合は、小さい画像を拡大させているのと同じなので、画像が劣化します。スマートオブジェクト化する際には、サイズに気を付けましょう。高画質なデータをスマートオブジェクト化したにも関わらず、画像が劣化してしまうことが今回社内で起きたため、検証してみた結果、下記のようなことが判明しました。左右ともに、画像の解像度は同じサイズなはずなのに、右側は2重にスマートオブジェクトがかかっていることにより、画像が劣化しているのがわかります。左のスマートオブジェクトは編集すると、下記のレイヤー構造となっています。右のスマートオブジェクトは編集すると、下記のレイヤー構造となっていて、スマートオブジェクトの中にさらにスマートオブジェクトデータが入っているのがわかります。データを見てみると、1階層目のスマートオブジェクトデータで解像度の高いスマートオブジェクト画像を縮小していました。赤枠で囲ってある2階層目の解像度の高いスマートオブジェクトを編集してみると、解像度の高いデータが入っていました。配置しているスマートオブジェクトの解像度基準は1階層目に準ずるので、1階層名で縮小してしまうと、2階層目の解像度は保つことができないことが判明しました。何重かのスマートオブジェクト化が必要な場合は、任意の解像度を保ったままスマートオブジェクト化する必要があります。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。