透明なGIFをエクスポートするときに、エッジの周りの白いピクセルを削除するにはどうすればよいですか?


11

ローダーをxooplate.comから取得し、含まれているアクションを使用してそれらをGIFにエクスポートしました。しかし、ローダーの周りに白いピクセルがいくつかあります。暗い背景に表示すると、本当に面倒です。これは、gifから抽出したフレームで確認できます。

ここに画像の説明を入力してください

これらの白いピクセルを防ぎ、透明な背景を維持するにはどうすればよいですか?


使用しているソフトウェアについて言及したい場合があります。私はPhotoshopを想定できますが、質問に適切にタグを付けて、使用しているソフトウェアについて言及することは決して害にはなりません。
スコット

フォトショップです。透明度ではなく、これらの白いピクセルを削除したい(KMSTR)
Ryan

1
粗さの理由(つまり、透明度のオン/オフのバイナリ状態)について、konturは正しいです。状況によっては、アルファ透明度のあるPNGとして保存された、少し大きくてほぼ同一の画像を作成し、中央に低色のアニメーションGIFを配置した静的な背景画像として配置することで、少しだまされる場合があります。このようにして、マットカラー(konturの回答で説明されている)を確実に確実に知ることができます。
horatio

回答:


19

透明度が8ビットgif / pngで機能する方法、ピクセルが完全に透明または完全に不透明であることです。

円が背景に透明に溶け込んでいる円の角には、通常、遷移を滑らかにするために半透明のピクセルがあります。このスムーズな移行は、8ビットのgif / pngでは完全に再現することはできません。

これを偽造する 1つの方法は、すべての半透明ピクセルの背景マットを選択することです。つまり、完全に透明でないピクセルは、マットカラーの上にあるかのように計算されたカラーを取得します。

サークルgifの白いピクセルは、白い背景に対して使用されるように作られたため、このように発生しました。元の円の半透明のピクセルが白いマットカラーに対してラスタ化され、その結果、角の周りはほぼ白ですが完全に不透明なピクセルになります。

オリジナルの完全に透明な円がある場合にこれを修正するには、save for web & devices背景に適したマットカラーを選択します。このようにして、潜在的に半透明のピクセルは、マットカラーに対して完全に不透明なピクセルに統合され、同様の背景色でWebサイトに表示され、完全に滑らかに表示されます。a)半透明領域(ピクセル単位)の範囲が狭いグラフィックスが最も効果的であり、b)これは、gifが表示される背景が、マットに対して選択した一貫した色の一部であることを要求することに注意してください。

ここに画像の説明を入力してください

この画像では:

  • 左上は元の丸いグラフィックで、アンチエイリアス処理された、つまり滑らかなコーナーがあります。
  • 右上にあるように、png-24と同じ結果が得られますが、これはアニメーションでは機能しません。
  • 左下のビューは、グラフィックの半透明のピクセルが、選択した赤いマットカラーにどのように置き換えられるかを示しています。また、完全に透明なピクセルが完全に透明なままであることにも注意してください。一方、少し透明度のあるピクセルだけがマットカラーで「アンダーレイ」され、完全に不透明なピクセルは透明度設定の影響を受けません(ただし、ディザリングのタイプと色の選択から影響を受けます)。
  • 右下は、サンプルイメージに使用されたエクスポートオプションの種類に似ています。白のマットを選択すると、左下の画像で赤を表示する同じピクセルが、右下の画像で白を表示します。白い背景に対して表示する場合、これは完全に許容されます。他の暗い背景では、白いピクセルが表示されます。これは、が完全に透明でないピクセルに対して完全に不透明なピクセルを作成するために間違ったマットカラーを使用するためです。

この画像の赤と白のマットでエクスポートされた両方のgifを、異なる背景に対して表示します。これは、赤いマットが赤い背景にうまく溶け込む様子を示していますが、白いマットが黒い背景に対して乱れている様子も示しています。

ここに画像の説明を入力してください


不幸な状況にあり、完全なアンチエイリアス処理されたアルファを持つ元のファイルがない場合(つまり、8ビットのgifしかない場合)、このマットラスタリングを元に戻すのは面倒です-ピクセルごとに削除する必要があります。半透明のピクセルからマットカラーを作成し、より適切な設定でそれらを再エクスポートします。


5

[Web用に保存]ダイアログで、ウィンドウの右側のマットの色をWebページの背景の色に設定してください。

GIFは完全な8ビット透明度をサポートしていません。1ビット透明度のみをサポートしています。最善の方法は、Webページの背景に一致する色を使用して、画像がその色に簡単に溶け込むようにすることです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.