Web 画像の透明ピクセルとマット処理

透明ピクセルを使用すると、Web 用に長方形以外の画像を作成できます。GIF および PNG 形式でサポートされる透明な背景を使用すると、画像の透明ピクセルが保持され、画像の透明部分から Web ページの背景が透けて見えるようになります(JPEG 形式は透明部分をサポートしませんが、マットカラーを指定して、元の画像の透明部分の色をシミュレートすることができます)。

we_06
透明部分なしの Web ボタン(左)と透明部分ありの Web ボタン(右)

GIF、PNG、JPEG 形式でサポートされる背景マット処理では、Web ページの背景と一致するマットカラーで透明ピクセルを塗りつぶしたりブレンドすることで、透明部分の色をシミュレートします。背景マット処理は、Web ページの背景が単色で、その背景色がわかっているときに効果的です。

最適化した画像で透明な背景や背景マット処理を作成するには、まず透明部分を含む画像を用意する必要があります。透明部分は、新しいレイヤーを作成するときや、背景消しゴムやマジック消しゴムを使用するときに作成できます。

GIF または PNG‑8 ファイルの作業では、透明部分にくっきりとした輪郭(ハードエッジ)を作成することができます。元の画像で透明度が 50 %を超えるすべてのピクセルは最適化した画像では完全な透明ピクセルになり、元の画像で不透明度が 50 %を超えるすべてのピクセルは最適化した画像では完全な不透明ピクセルになります。Web ページの背景色がわからない場合、または Web ページの背景にテクスチャやパターンが含まれている場合は、透明部分にハードエッジを適用します。ただし、ハードエッジを適用すると、画像の縁がギザギザに表示されることがあります。

we_07
透明部分にハードエッジを適用していない GIF(左)とハードエッジを適用した GIF(右)

GIF または PNG 画像での透明な背景の保持

GIF および PNG‑8 形式は、1 段階のみの透明ピクセル(完全に透明なピクセルまたは完全に不透明なピクセル)をサポートしますが、半透明なピクセルはサポートしません(これに対して、PNG‑24 形式は複数の段階を持つ透明ピクセルをサポートします。つまり、不透明から完全な透明まで、最大 256 段階の透明ピクセルを画像内で使用できます)。

  1. 透明部分を含む画像を開くか作成し、ファイル/Web 用に保存を選択します。
  2. Web 用に保存ダイアログボックスで、最適化ファイル形式として「GIF」、「PNG‑8」または「PNG‑24」を選択します。
  3. 「透明部分」を選択します。
  4. GIF 形式および PNG‑8 形式の場合は、元の画像の半透明なピクセルの処理方法を指定します。これらのピクセルをマットカラーとブレンドするか、透明部分の輪郭をハードエッジにすることができます。

マット処理した GIF 画像や PNG 画像の作成

画像を表示する Web ページの背景色がわかっているときは、マット機能を使用して、透明ピクセルを Web ページの背景と一致するマットカラーで塗りつぶしたり、ブレンドすることができます。

  1. 透明部分を含む画像を開くか作成し、ファイル/Web 用に保存を選択します。
  2. Web 用に保存ダイアログボックスで、最適化ファイル形式として「GIF」、「PNG‑8」または「PNG‑24」を選択します。
  3. GIF および PNG‑8 形式の場合は、次のいずれかの操作を行います。
    • 完全に透明なピクセルを透明のまま保持し、半透明なピクセルをマットカラーとブレンドするには、「透明部分」を選択します。このオプションは、画像の背景とは異なる Web ページの背景にアンチエイリアスを適用した画像を配置したときに発生するハロー効果を防ぎます。また、透明部分のハードエッジがギザギザになるのを防ぐこともできます。

    • 透明ピクセルをマットカラーで塗りつぶし、半透明なピクセルをマットカラーとブレンドするには、「透明部分」の選択を解除します。

  4. マットメニューからカラーを選択します。
    • スポイトツールカラー(スポイトツールサンプルボックスのカラーを使用する場合)

    • ホワイト、ブラック、その他(カラーピッカーを使用してカラーを選択する場合)

GIF 形式や PNG-8 形式のファイルでのハードエッジ透明部分の作成

Web ページの背景色がわからない場合、または Web ページの背景にテクスチャやパターンが含まれている場合は、透明部分にハードエッジを適用します。ただし、ハードエッジを適用すると、画像の縁がギザギザに表示されることがあります。

  1. 透明部分を含む画像を開くか作成し、ファイル/Web 用に保存を選択します。
  2. Web 用に保存ダイアログボックスで、最適化ファイル形式として「GIF」または「PNG‑8」を選択します。
  3. 「透明部分」を選択します。
  4. マットメニューから「なし」を選択します。

マット処理した JPEG 画像の作成

JPEG 形式は透明部分をサポートしませんが、マットカラーを指定して、元の画像の透明部分の色をシミュレートすることができます。完全に透明なピクセルはマットカラーで塗りつぶされ、半透明なピクセルはマットカラーとブレンドされます。JPEG をマットカラーと一致する背景の Web ページに配置すると、画像が背景とブレンドされたように表示されます。

  1. 透明部分を含む画像を開くか作成し、ファイル/Web 用に保存を選択します。
  2. Web 用に保存ダイアログボックスで、最適化ファイル形式として「JPEG」を選択します。
  3. マットメニューからカラーを選択します。「なし」、「スポイトツールカラー」(スポイトツールサンプルボックスのカラーを使用する場合)または「ホワイト」、「ブラック」、「その他」(カラーピッカーを使用してカラーを選択する場合)から選択できます。

「なし」を選択すると、白がマットカラーとして使用されます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー