PhotoshopのWEB用に保存で画像を保存する方法

PhotoshopでWEB用に保存

以前twitterやInstagramに最適な画像サイズをご紹介しましたが
形式を変えて保存ってどうするの?ということで

今回はPhotoshopで[WEB用に保存]を使って、画像保存する方法をご紹介します。

【1】WEB用に保存する

WEB用に保存_1

まずは保存するために画像サイズと解像度を調整しておきましょう。
今回はtwitter用にW2048×H1152px(72dps)に調整しています。

 

次に
ファイル>書き出し>Web用に保存
を立ち上げます。

WEB用に保存_2

 

このようなウィンドウが立ち上がりますので、
右側の枠の中を調整します。

WEB用に保存_3

 

今回はtwitter用ですのでPNG形式に変換します。

PNGにはPNG-8PNG-24があります。
今回はPNG-24を選びます。(違いは下項で説明します)

WEB用に保存_4

左のタブ[元画像][最適化]を切り替えて変化を確認して、
問題なければ[保存]します。

 

【2】保存形式について

保存形式について、恐らく頻繁に使用するものはJPEGPNG-8PNG24かと思います。
ここでは簡単に違いをご説明します。

 

・PNGについて

JPEG形式では透過処理が出来ませんので、透かしや透過がある場合はこちらを選びます。
また単色のものなどはPNGで保存した方が綺麗に保存できます。

PNG-8とPNG-24は色数の違いです。

PNG-8

  • 色数が少ない
  • 容量が小さくなる
  • 透過で保存できるが、透かしは出来ない

PNG-24

  • 色数が多いので写真など複雑なものが保存できる
  • 容量が大きくなる
  • 透過・透かしの表現で保存できる

PNG画質

・JPEGについて

JPEGは主に写真などの色数が多いものに使用します。

ロゴなどの単色ベクターのような素材では、
ノイズが入ったりして綺麗に書き出せない場合があります。

またJPEGには底画質〜最高画質まであり、使用用途によって画像の容量を調整します。

WEB用に保存_5

 

底画質だともちろん軽くなりますが、ガタガタやジャギが出たりします。
使用用途によって調整してください。

JPEG画質

3 Comments

  1. […] 【PhotoshopでWEB用の画像を保存する方法はこちら】 […]

    返信
  2. […] 【PhotoshopでWEB用の画像を保存する方法はこちら】 […]

    返信
  3. […] 【PhotoshopでWEB用の画像を保存する方法はこちら】 […]

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Scroll to top