SHIDEN DESIGN BLOG

tumnail_20170906

高解像度ディスプレイに対応した画像をPhotoshopで作る方法

SponsorLink

前回の記事に引き続きRetinaディスプレイ・高解像度ディスプレイの話ですが、今回は高解像度ディスプレイに対応した画像をPhotoshopで作る方法と、その際の注意点などを。
 

 
 
 

通常サイズの画像と2倍のサイズの画像

 
 
デバイス・ピクセル比2.0のディスプレイでは、単純に2倍の画像を用意することになるのですが、このブログの投稿ページのコンテンツエリアに、幅いっぱいで使う画像を作ると言う体で説明をしていくことにします。
 
このブログをPCで閲覧すると、投稿ページのコンテンツエリアは820pxになっています。

image_20170906_01
 
 
ですので、幅820pxの画像と幅1640pxの画像を用意することになります。高さは何でもいいのですが、ちょっとカッコイイ感じがするので、黄金比を用いて高さ507pxです。
 
先ずはPhotoshopを起動し新規作成でカンバスサイズに、通常ディスプレイ用の画像の2倍のサイズを設定します。
今回の場合は、幅1640px高さ1014pxです。
 
作成したPhotoshopファイルに使用する画像を配置し、好みの画像に仕上げます。
理由は最後にかきますがPhotoshop内で、画像を拡大/縮小する際は、必ずスマートオブジェクトに変換して作業してください。
 
 

画像アセットで書き出す

 
書き出したい画像のレイヤーに「ファイル名.拡張子」となるようレイヤー名を変更します。
 
「,」区切りで「ファイル名.拡張子, ファイル名.拡張子」となるようレイヤー名を変更することで、1つのレイヤーから複数の画像を書き出すことができます。
今回は、1つのレイヤーからサイズが異なる2つのJPEGを書き出すので「sample@2x.jpg, 50% sample.jpg」とレイヤー名を変更します。

image_20170906_09

image_20170906_10
 
 
「sample@2x.jpg」の「@2x」は2倍された画像に用いる接尾辞の慣例ですので「sample_large.jpg」など自身がわかりやすいものでもかまいません。
 
「50% sample.jpg」の「50%」は書き出す画像のサイズを指定していて、今回の場合はカンバスサイズを通常ディスプレイ用の画像の2倍のサイズにしていますので、半分のサイズでかきだすことで通常ディスプレイ用の画像となります。
 
「,」と次のファイル名の間のスペースは、有っても無くてもかまいませんが、サイズとファイル名の間のスペースは必ず必要になりますので注意してください。
サイズの指定方法は%の他に「820×507 sample.jpg」のようにpxで指定することもでき、この場合の単位は省略になります。
 
 
同じようにグループに名前を付けて書き出すことも可能ですので、調整レイヤーやテキストなど複数のレイヤーを重ねて画像を作る場合は、それらのレイヤーをグループ化しグループ名を変更します。

image_20170906_14

image_20170906_15
 
 
レイヤーまたはグループ名の変更が済んだら「ファイル」>「生成」>「画像アセット」を選択します。
これでPhotoshopファイルと同じディレクトリに「Photoshopファイル名-assest」と言うフォルダが生成され「Photoshopファイル名-assest」内に、画像が書き出されます。

image_20170906_11

image_20170906_12

image_20170906_13
 
 
画像アセットで生成できるファイル形式は、PNG、GIF、JPEG、SVGの4つです。
「sample.jpg, sample.png」のように異なるファイル形式で書き出すことも可能です。
 
 

書き出し形式の変更で書き出す

 
画像アセットはデザインカンプのような1つのPhotoshopファイルか何種類もの画像を書き出す場合は、非常に便利なのですが、今回のような1つのPhotoshopファイルから一種類の画像しか書き出さない場合は、書き出し形式を変更する方が早いので、その方法も紹介しておきます。
 
 
書き出したいレイヤーを右クリックし「書き出し形式」を選択します。
書き出し形式のオプションパネルで「すべてのスケール」の「サイズ」を「1x」、「接尾辞」を「@2x」に変更し、「すべてのスケール」の枠内右上にある「+」をクリックします。
新しいスケールが追加されますので「サイズ」を「0.5x」、「接尾辞」は未入力のまま「全てを書き出し」をクリックします。

image_20170906_07

image_20170906_08
 
 
これで「sample@2x.jpg」と「sample.jpg」2つの画像が書き出されます。
 
 
 

スマートオブジェクトについて

 
 
スマートオブジェクトに変換する理由は、シンプルに画像の劣化を防ぐためです。
 
JPEGやPNGなどはザックリ言うと色情報を持ったドット(ピクセル)で構成された「ラスター形式」と言う画像データです。
「ラスター形式」の画像データ「ラスター画像」をPhotoshopなどの編集ソフトで編集・加工していくと、ドットが持っている色情報が書き換えられていきます。この色情報が書き換えられることによって画像の劣化が起こるのですが、スマートオブジェクトはドットの元の色情報を保持させたまま編集・加工していくことができるため、画像の劣化を防ぐことができると言うわけです。
 
では、どういうことか見てみましょう。
 
先ずはPhotoshopファイルを新規作成しJPEG画像を配置します。画像をPhotoshopで開くのではなく、Photoshopファイル内に配置するとスマートオブジェクトに変換された状態になっています。
 
次に、配置した画像を複製します。Photoshopファイル内に配置した画像はスマートオブジェクトですので、片方を「ラスタライズ」しラスター画像に戻します。

image_20170906_04
 
 
スマートオブジェクトの画像とラスター画像、2つ同時に縮小し、続けて拡大してみます。

image_20170906_05

image_20170906_06
 
 
これを並べて書き出したモノが次の画像です。

image_20170906_02
 
 
いかがでしょうか?
左がスマートオブジェクトで編集した画像、右がラスター形式を編集した画像です。明らかに右の画像がぼやけていますよね。
このように劣化を防ぐことができるのがスマートオブジェクトです。
 
 
画像をPhotoshopで開くとラスター画像のままなのですが、その場合はレイヤーを右クリックし「スマートオブジェクトに変換」を選択してスマートオブジェクト化します。
 
また、今回の記事での詳しい説明はしませんが、Photoshopで編集・加工を行う際は、画像の劣化を防ぐため、調整レイヤーやスマートフィルターを活用するようにしましょう。
 
 
せっかく「高解像度ディスプレイ用に...」なんてやっても、書き出した画像自体が劣化していては勿体ないですよね。
 
 
 

SponsorLink

Related Articles