透明ピクセルとマットの使用

最終更新日 : 2022年1月12日

透明およびマットなWeb画像について

透明により、web用の非長方形画像を作成することが可能になります。背景透明は、GIFおよびPNG形式でサポートされており、画像内の透明ピクセルを保持し、Webページの背景が画像の透明領域を通して表示されるようにします。(JPEG\n形式は透明をサポートしていませんが、マットカラーを指定して元の画像の透明の外観をシミュレートできます。)

透明効果なしのWebボタン(左)と透明効果ありのWebボタン(右)

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

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

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

ハードエッジ透明なしのGIF(左)とハードエッジ\n透明ありのGIF(右)

GIFまたはPNG画像の背景透明性を保持する

GIF\nおよびPNG‑8形式は1レベルの透明をサポートします。つまり、ピクセルは完全に透明または完全に不透明のいずれかになり、部分的に透明にすることはできません。(これに対し、PNG‑24形式はマルチレベル透明をサポートします。つまり、不透明から完全に透明まで、画像内で最大256度の透明を持つことができます。)

透明を含む画像を開くまたは作成し、ファイルWeb用に保存を選択します。

web用に保存ダイアログボックスで、最適化形式としてGIF、PNG‑8、またはPNG‑24を選択します。

透明度を選択します。

GIFおよびPNG‑8形式の場合、元の画像内の部分的に透明なピクセルの処理方法を指定します。これらのピクセルをマットカラーとブレンドするか、ハードエッジ透明を作成できます。

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

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

透明を含む画像を開くか作成し、ファイルWeb用に保存を選択します。

Web用に保存ダイアログボックスで、最適化形式としてGIF、PNG‑8、またはPNG‑24を選択します。

GIF および PNG‑8 形式の場合は、次のいずれかの操作を行います。
  • 完全に透明なピクセルを透明のままにし、部分的に透明なピクセルをマットカラーとブレンドするには、「透明」を選択します。このオプションにより、画像の背景と異なるWebページの背景にアンチエイリアス画像を配置したときに見られるハロー効果を防ぐことができます。このオプションは、ハードエッジ透明部分のギザギザしたエッジも防ぎます。

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

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

  • 白、黒、またはその他(カラーピッカーで色を選択する場合)

GIFまたはPNG-8ファイルでハードエッジ透明を作成する

web ページの背景色がわからない場合、またはweb ページの背景にテクスチャ\nまたはパターンが含まれている場合は、\nハードエッジ透明を使用します。" ] } ```ただし、境界線がはっきりした透明は 画像にギザギザしたエッジを引き起こす可能性があることに注意してください。

透明度を含む画像を開くか作成し、ファイル > Web用に保存を選択します。

webに保存ダイアログボックスで、最適化形式としてGIFまたはPNG‑8を選択します。

透明を選択します。

マットメニューからなしを選択します。

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

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

透明を含む画像を開くか作成し、ファイルWeb用に保存 を選択します。

Web用に保存 ダイアログボックスで、最適化形式として JPEG を選択します。

マットメニューからカラーを選択します。なし、スポイト カラー(スポイトサンプルボックス内のカラーを使用)、白、黒、 またはその他(カラーピッカーを使用してカラーを選択)。

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