解像度について(色々な解像度で混乱) Photoshop

PhotoShop

PhotoshopとIllustratorで画像をやり取りしながらデザインカンプを作成していたら、
あら不思議。
Photoshopで作成したデータをillustratorに表示すると小さくなってしまった。あるいは大きくなっているなどと経験したことがありませんでしょうか。
解像度についてそれなりに理解したはずなのになぜ?
これは中途半端な解像度の理解で起こる混乱です。

今回は解像度について少し整理してみましょう。

これは解像度300ppi 幅860px 高さ576pxの写真です。

これを色々な形式や解像度で保存してIllustratorで表示(配置)してみます。

  1. 最初にこのまま解像度300ppi 幅860px 高さ576px(ドキュメントのサイズは幅72.81mm 高さ48.77mm)でpsd形式にして保存します。それをIllustratorで表示(配置)すると以下のようになります。Photoshopの「ドキュメントのサイズ」と同じ幅72.81mm 高さ48.77mmで表示されます。ドキュメントサイズは同じに表示されるのです。
  2. 次にこのままの解像度300ppi 幅860px 高さ576px(ドキュメントのサイズは幅72.81mm 高さ48.77mm)で保存形式を「web用に保存」でjpg形式に保存します。それをIllustratorで表示(配置)すると以下のようになります。画像が大きくなりました。ドキュメントのサイズは幅303.39mm 高さ203.2mmです。

    これはPhotoshopの「web用に保存」を使用して保存するとPhotoshopが勝手に解像度を72ppiに変更してしまうためです。(これが混乱の原因のひとつです)
    今回の場合はピクセル数は同じで解像度を変更したことになりますので、解像度が下がれば画像は大きくなります。
  3. 今度は同じサンプルを「別名で保存」のjpg形式で保存して、Illustratorで表示してみます。この場合は同じjpg形式でも解像度は変更されませんので上のようにはなりません。psd形式で保存した時と同じで幅72.81mm 高さ48.77mmに表示されます。当たり前のことですが、ドキュメントサイズを変更をしていないのでPhotoshopであれIllustratorであれ、ドキュメントサイズは同じに表示されるのです。
  4. 次に、この画像をPhotoshopの解像度設定パネルの「画像の再サンプル」にチェックを入れた状態で解像度を72pxにします。
    そうすると幅206px 高さ138pxとなりピクセルの数がかわります。けれどもドキュメントサイズは幅72.81mm 高さ48.77mmのままです。

    ドキュメントサイズが変わらないためIllustratorで表示してもドキュメントサイズは幅72.81mm 高さ48.77mmのままです。

    PhotoshopとIllustratorでの画像のやり取りを行う場合は、ピクセル数ではなくて必ずドキュメントサイズを確認しておくことがポイントです。

  5. 今度は、Photoshopの解像度設定パネルの「画像の再サンプル」のチェックを外した状態で解像度を72pxにします。
    ピクセル数は変わりませんが、ドキュメントサイズが変わります。(幅303.39mm 高さ203.2mm)

    この場合はIllustratorで表示すると以下のようになります。ドキュメントのサイズは幅303.39mm 高さ203.2mmです。(画像が大きくなる)これは結果的に「web用に保存」でjpg形式に保存した時と同じ状態になった訳です。

illustratorは画像をドキュメント単位で表示しています。そしてそれは解像度が72ppiであれ300ppiであれ関係ありません。
ドキュメントサイズに従っているだけです。幅72.81mm 高さ48.77mmとPhotoshopで指定すればIllustratorでも幅72.81mm 高さ48.77mmで表示されます。

注意が必要なのは「画像の再サンプル」のチェックを外した状態で解像度を変更するとドキュメントサイズが変わる事とPhotoshopの「web用に保存」を使うと勝手に「画像の再サンプル」のチェックを外した状態で解像度が変わることです。
Illustratorを新規作成するときにweb用として解像度を72ppiなどと指定する項目がありますが、これも混乱の原因になっています。これはphotoshopの解像度と意味合いが違い、ラスタライズするときの設定を72ppiにするということです。

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

PhotoShop
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました