Problemy z przezroczystością.pdf

Problemy z przezroczystością

Jako autor udostępnianych w internecie grafik otrzymuję czasem pytania od osób chcących

wykorzystać moje prace na swoich stronach dlaczego rysunki nie są przezroczyste.

Rzeczywiście, udostępniane przez mnie rysunki posiadają białe tło. Ten materiał opisuje

powody takiego stanu rzeczy.

Przezroczystość wprowadzono między innymi po to aby możliwe było ustawianie rysunku na

dowolnym tle, jak się jednak okazuje istnieją pewne problemy z nią związane. Tabela 1

przedstawia istotę problemu - na różnych tłach (A,B,C) umieszczane są te same obrazy.

Opracowanie dotyczy formatów graficznych obsługujących tryb indeksowany i

przezroczystość - png, gif (oraz roboczy format Gimpa - xcf na czas pracy z rysunkiem). Do

tego typu grafik zalecam i wyłącznie stosuję jako końcowy format png, który zapewnia lepszą

niż gif kompresję, możliwość zapisu dodatkowo w trybie RGB i odcieniach szarości (gif tylko

w trybie indeksowanym), oraz, co bardzo ważne został opracowany przez wspólnotę

OpenSource.

Tabela 1. Możliwości dopasowania grafik do wybranego tła

L.p.

Opis

Obraz zindeksowany w fatalny sposób; 1294 bajty

Przezroczysty obraz został bez dodatkowych zabiegów zindeksowany do około 200 kolorów

co doprowadziło do pojawienia się poszarpanych krawędzi. Czy ktoś chce takiego boćka na

stronie? Nie? Więc rozważamy pozostałe możliwości.

Obraz w trybie RGB; 2859 bajtów

Jeżeli używasz MS Internet Explorer to prawdopodobnie ten rysunek nie jest u Ciebie

przezroczysty. Zamiast przezroczystości pojawia się wówczas (losowy?) kolor zazwyczaj

niepasujący do tła. W Mozilli problem ten nie występuje. Zwróć uwagę na stosunkowo duży

rozmiar pliku, ponad trzy razy większy niż właściwie zindeksowane obrazy poniżej.

Obraz spłaszczony (podstawienie wybranego koloru w miejsce przezroczystości) z białym

tłem, a następnie zindeksowany do 20 kolorów; 854 bajty

Najprosztszy sposób przygotowania prawidłowo zindeksowanego obrazu to spłaszczenie

obrazu z użyciem docelowego koloru tła, a następnie zindeksowanie go. Widać (w kolumnie

A), że 20 kolorów zapewnia w przypadku tego rysunku jakość nie ustępującą trybowi RGB.

Gdyby rysunek zawierał więcej kolorów wówczas indeksując go do odpowiednio większej

ilości kolorów (max. 255) uzyskano by również zadowalający efekt.

Obraz z białą otoczką zindeksowany do 20 kolorów; 947 bajtów

Taki obraz wymaga odrobinę więcej pracy, ale jak widać mimo przygotowania go z myślą o

białym tle dość dobrze sprawdza się również na w miarę jasnym - tutaj żółtym tle. Jest to

prawdopodobnie najwłaściwszy sposób przygotowania indeksowanych grafik.

1. Problem poszarpanych krawędzi

Dopóki praca odbywa się w trybie RGB ( <Obraz> -> Obraz -> Tryb ) bociek sprawuje się

bardzo dobrze. W oknie warstw ( <Obraz> -> Warstwy -> Warstwy, kanały i ścieżki

<Ctrl+l> ) można oglądać boćka na kolejnych tłach przesuwając warstwy na bliższy/dalszy

plan lub ukrywając warstwy klikając na wybranym symbolu oka.

Rysunek 1. Bezproblemowa praca z obrazami w trybie RGB

Powiększając obraz ( znaki = / - ) do 600% można zauważyć, że obraz zawiera częsciowo

przezroczyste piksele na granicy tła i konturu rysunku. Piksele te należy traktować jako

czarne, częściowo przezroczyste - nie szare (zobacz wartości Alfa określające

przezroczystość). Na rysunku 2 widać, że pod częściowo przezroczystymi pikselami znajduje

się kolor czerwony na pierwszym i biały na drugim obrazie.

Rysunek 2. Przezroczystość pikseli w obrazach RGB

Obrazy RGB budowane są z trzech kanałów Czerwony/Zielony/Niebieski. Na informację o

każdym z kanałów przeznaczany jest

1 bajt=8 bitów=2^8=256 poziomów odcieni danego kanału.

Taki obraz nazywa się wówczas obrazem 24 bitowym (3 kanały po 8 bitów). Owe 24 bity

przypadają na każdy pojedynczy piksel. Obraz RGB bez kompresji (bitmapa) o wielkości 2x2

piksele zajmowałby więc 2x2x3 bajty = 12 bajtów, niezależnie od używanych kolorów (nie

licząc nagłówka pliku).

Obraz z kanałem alfa , zwany czasem RGBA używa dodatkowo 8 bitów na informację o

przezroczystości co daje w sumie obraz 32 bitowy (to że obraz jest 32 bitowy nie oznacza, że

musi posiadać kanał alfa - można np. przeznaczyć więcej bitów na informację o RGB

uzyskując lepszą jakość). Przezroczystość występująca w obrazach RGB może przyjmować

wartości od 0 do 255 (0 do 100%). Zmieniając parametr Nieprzepuszczalność w oknie

warstw można przechodzić między stanami prezentowanymi na rysunku 3. Dla

przedstawionych rysunków ustawiono wartości nieprzepuszczalność dla warstwy bociek na

kolejno: 100, 40, 20.

Rysunek 3. Zmiana wartości Nieprzepuszczalność w obrazach RGB

Stąd blisko już do wyjaśnienia istoty postawionego w temacie problemu. Tryb indeksowany

pozwala na ustawianie tylko dwóch poziomów przezroczystości (1 bit informacji zamiast 8

bitów czyli kanału Alfa w RGB). W trybie indeksowanym piksel może być albo całkowicie

przezroczysty albo całkowicie nieprzezroczysty. Poniżej zaprezentowano zmianę obrazu przy

przejściu z RGB do trybu indeksowanego ( <Obraz> -> Obraz -> Tryb -> Indeksowany ).

Rysunek zawiera przezroczystą warstwę bociek i warstwę białą pod spodem. Informacja o stu

poziomach przezroczystości w warstwie bociek musi zostać zredukowana do dwóch

poziomów. Jak wyjaśniano wcześniej piksele konturu boćka należało traktować jako

częściowo przezroczyste, nie szare. W efekcie indeksowania owe przezroczyste-czarne

piksele staną się teraz albo całkowicie czarne (piksele o stopniu nieprzepuszczalności

większym niż 50) lub całkowicie znikną (nieprzepuszczalność mniejsza niż 50) zgodnie z

regułą dwóch możliwych dla pikseli stanów. Warto sprawdzić co dzieje się z jednobitowo-

przezroczystym rysunkiem indeksowanym przy przechodzeniu przez poziom 50 na suwaku

Nieprzepuszczalność .

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: