Jak mogę usunąć białe piksele wokół krawędzi podczas eksportowania przezroczystego pliku GIF?

11

Wziąłem programy ładujące z witryny xooplate.com, a następnie wyeksportowałem je za pomocą dołączonej akcji do pliku GIF. Ale wokół modułu ładującego mam kilka białych pikseli, które są naprawdę denerwujące, gdy są wyświetlane na ciemnym tle. Możesz to zobaczyć tutaj, w ramce wyodrębnionej z gif:

wprowadź opis zdjęcia tutaj

Jak mogę zapobiec białym pikselom i utrzymać przezroczyste tło?

Ryan
źródło
Warto wspomnieć o używanym oprogramowaniu. Mogę założyć Photoshop, ale nigdy nie boli odpowiednio otagować pytanie i wspomnieć o używanym oprogramowaniu.
Scott
to jest photoshop. Jestem zainteresowany usunięciem tych białych pikseli, a nie przezroczystości (KMSTR)
Ryan
1
kontur ma rację co do przyczyny chropowatości (tj. włączania / wyłączania binarnego stanu przezroczystości). W zależności od kontekstu można nieco oszukać, tworząc nieco większy, prawie identyczny obraz zapisany jako PNG z przezroczystością alfa i umieszczając go jako statyczny obraz tła z wyśrodkowanym animowanym gifem o niskiej kolorystyce. W ten sposób możesz upewnić się, że matowy kolor (jak opisano w odpowiedzi na kontur) jest znany z większą pewnością.
horatio

Odpowiedzi:

19

Przezroczystość działa w przypadku 8-bitowych gif / pngs, ponieważ piksel jest albo całkowicie przezroczysty, albo całkowicie nieprzezroczysty .

W rogach koła, w których koło miesza się przezroczyście z tłem, zwykle znajdują się piksele półprzezroczyste, aby wygładzić przejście. To płynne przejście nie może być w pełni odtworzone za pomocą 8-bitowych gif / pngs.

Jednym ze sposobów udawania jest wybranie tła matowego dla wszystkich półprzezroczystych pikseli. Oznacza to, że piksele, które nie są w pełni przezroczyste, obliczane są tak, jakby były na wierzchu koloru matowego.

Białe piksele w twoim gifie koło tak się dzieje, ponieważ gif został stworzony do użycia na białym tle. Półprzezroczyste piksele oryginalnego koła zostały rastrowane względem białego matowego koloru, co spowodowało powstanie prawie białych, ale całkowicie nieprzezroczystych pikseli wokół rogów.

Sposobem na zaradzenie tym , jeśli masz oryginalny, całkowicie przezroczysty okrąg jest save for web & devicesi wybierz kolor matowy, który odpowiada Twoim tła. W ten sposób potencjalnie półprzezroczyste piksele zostaną scalone w całkowicie nieprzezroczyste piksele w stosunku do koloru matowego, a oglądane na twojej stronie internetowej z podobnym kolorem tła, będą wyglądać w pełni gładko. Zauważ, że a) grafika z małymi zakresami półprzezroczystych obszarów (w pikselach) działa najlepiej, i b) wymaga to, aby tło, na którym wyświetlany jest gif, było częścią tego, co w jednolitym kolorze, który wybierzesz jako matowy.

wprowadź opis zdjęcia tutaj

Na tym obrazku:

  • W lewym górnym rogu znajduje się oryginalna okrągła grafika z wygładzonymi, tj. Wygładzonymi narożnikami.
  • Taki sam efekt, jaki otrzymujesz w przypadku png-24, jak widać w prawym górnym rogu - ale to nie działa w przypadku animacji.
  • Lewy dolny widok pokazuje, w jaki sposób półprzezroczyste piksele grafiki są transponowane na wybrany czerwony matowy kolor. Zwróć też uwagę, jak te piksele, które są całkowicie przezroczyste, pozostają całkowicie przezroczyste. Podczas gdy tylko te piksele, które mają odrobinę przezroczystości, są „podkładane” kolorem matowym, a w pełni nieprzezroczyste piksele pozostają całkowicie niezmienione przez ustawienia przezroczystości (jednak wpływają na nie wybory typu ditheringu i kolorów).
  • Dolny prawy róg przypomina rodzaj opcji eksportu, które zostały użyte dla twojego przykładowego obrazu. Po wybraniu białego elementu matowego te same piksele, które pokazują kolor czerwony na lewym dolnym obrazie, pokażą biały na prawym dolnym obrazie. Jest to całkowicie do przyjęcia, jeśli pokażesz to na białym tle. W przypadku innych, ciemniejszych tła białe piksele są wyświetlane, ponieważ użycie niewłaściwego koloru matowego powoduje utworzenie w pełni nieprzezroczystych pikseli dla pikseli, które nie są w pełni przezroczyste.

Zobacz oba gify eksportowane z czerwoną i białą matą na tym obrazie, na innym tle. To pokazuje, jak czerwony mat ładnie miesza się z czerwonym tłem, ale także jak niepokojący jest biały mat na czarnym tle.

wprowadź opis zdjęcia tutaj


Jeśli znajdujesz się w niefortunnej sytuacji, że nie masz oryginalnego pliku z pełnym anty-aliasingiem alf (tj. Masz tylko 8-bitowy gif), kłopotliwe jest odwrócenie tego matowego rastrowania - piksel po pikselu musisz usunąć matowy kolor z półprzezroczystych pikseli, a następnie ponownie wyeksportuj je z bardziej odpowiednimi ustawieniami.

kontur
źródło
5

W oknie dialogowym Zapisz dla Internetu ustaw kolor Matowy po prawej stronie okna na kolor tła strony internetowej.

Pliki GIF nie obsługują pełnej 8-bitowej przezroczystości, obsługują tylko 1-bitową przezroczystość. Najlepsze, co możesz zrobić, to użyć koloru, który pasuje do tła strony internetowej, aby obraz łatwo zlewał się z tym kolorem.

Scott
źródło