Poradnik webdesignera
Strona główna
Uwagi ogólne
Błędy
Przykazania
Artykuły
Linki
Słowo od autorki
Standardowa ilustracja, stworzona w programie graficznym, kojarzy nam się jednoznacznie z prostokątnym kształtem wypełnionym kolorami. Kiedy przygotowywujemy grafikę do materiału, który ma być wydrukowany sprawa jest prosta – wszystkie elementy będą rozmieszczone w taki sam sposób jak na ekranie.
Projektując stronę internetową musimy jednak zdawać sobie sprawę z faktu, że w zależności od stosowanej rozdzielczości i wielkości monitora, będzie ona wyglądać zupełnie inaczej. Co do tego wszystkiego ma przezroczysta grafika?
Popatrzmy na prosty przykład:
Stworzyliśmy napis, który mamy umieścić na niejednolitym tle. Przy zastosowaniu formatu graficznego, który nie pozwala nam na uzyskanie przezroczystości, obrazek z napisem będzie miał prostokątny kształt oraz widoczne wypełnienie (rys. 1).
Wykorzystanie przezroczystości pozwala nam na pokazanie samego napisu oraz dodatkowych efektów w elegancki, nie kolidujący z tłem sposób (rys. 2).
(rys. 1) (rys. 2)
FORMAT GIF (Graphic Interchange Format) w wersji 89a jest jedynym (oprócz formatu PNG) formatem graficznym pozwalającym na zastosowanie przezroczystego tła (transparent background), co daje nam możliwość uzyskania grafiki o nieregularnych kształtach, w dowolnym miejscu ekranu.
Polega to na tym, że możemy zaznaczyć jeden (i tylko jeden!) z kolorów jako przezroczysty. Każdy inny kolor – nawet tak bardzo zbliżony, że nie odróżnimy go na pierwszy rzut oka, będzie normalnie widoczny.
Przeglądarka wyświetlając taki rodzaj grafiki ignoruje te jej fragmenty, które mają kolor oznaczony jako przezroczysty, pokazując w tych miejscach znajdujące się pod nimi tło. Dzięki temu (mimo że taka ilustracja jest nadal prostokątnego kształtu) pokazywane są jedynie niektóre jej części, sprawiając wrażenie ‘zawieszonych’ nad tłem.
PODSTAWOWE ZASTOSOWANIA
- grafika o nieregularnych kształtach
- grafika, w której używamy efektów specjalnych w celu uzyskania wrażenia trzech wymiarów – rzucony cień, rozmyte brzegi, przenikające się obrazy
- napisy – w szczególności te, do których używamy niestandardowych czcionek lub dodatkowych efektów (np. rzucony cień)
- ikonki nawigacyjne
PUŁAPKI I OGRANICZENIA
- GIF89a (jak wszystkie pliki formatu GIF) jest ograniczony do palety 256 kolorów. Jeżeli chcesz, by był wyświetlany jednakowo we wszystkich przeglądarkach, trzeba zmniejszyć tę ilość do “bezpiecznej palety” 216 kolorów.
- Eksportując plik do formatu GIF89a należy zmienić plik na indeksowany, a następnie wybrać paletę ‘exact’, która uwzględni jedynie te kolory, które rzeczywiście są w pliku używane. Format GIF zawsze zapisuje w pliku paletę kolorów. Jeżeli więc użyjemy palety ‘Windows’ zostanie zapisane niepotrzebnie 256 kolorów, lub w przypadku palety ‘Web’ 216 kolorów – nawet jeżeli nie występują one w ilustracji.
- Wybierając kolor przezroczysty pamiętaj, że wszystkie fragmenty grafiki będące tej barwy staną się niewidoczne, co może spowodować, że ilustracja będzie “dziurawa”.
- Tworząc ilustrację zminimalizuj obszary, które mają być niewidoczne -ograniczy to wielkość obrazka, dzięki czemu będzie się szybciej ładował.
- Nie nadużywaj efektów graficznych, ponieważ każda kolejna ilustracja spowalnia ładowanie się strony!
Antialiasing
Programy graficzne stosują antialiasing do wygładzania ząbkowanych krawędzi ilustracji. Polega to na dodawaniu kolorów pośrednich na brzegach, tak aby uzyskać efekt płynnego przejścia obrazu w tło. Proces ten może znacznie zwiększyć rozmiar palety - tym bardziej im więcej różnych kształtów zostanie nałożonych na siebie. W efekcie powiększy się rozmiar pliku oraz pogorszy się jego kompresowalność.
Kształty, które nie wymagają antialiasingu to poziomo lub pionowo ułożone prostokąty oraz niektóre linie ułożone pod kątem 45 lub 60 stopni.
(rys. 3 - antialiasing) (rys. 4 – charakterystyczne ząbki aliasingu)
W przypadku przezroczystych GIFów, do których zastosowany jest antialiasing możemy otrzymać nieładną mgiełkę wokół ilustracji (tzw. efekt halo).
(rys 5 – efekt halo)
W celu uniknięcia tego efektu należy stworzyć ilustrację na tle jak najbardziej zbliżonym do koloru tła strony; wtedy wszystkie cienie i brzegi będą dobrze wyglądać.
KIEDY NIE STOSOWAĆ PRZEZROCZYSTEGO GIFa
Format GIF nie nadaje się do grafiki, która zawiera dużo odcieni - w szczególności do fotografii. Gdy chcemy umieścić na stronie zdjęcie z dodatkowo rzuconym cieniem należy skorzystać z formatu JPG. Jeżeli jednak tło, na którym zdjęcie ma być umieszczone nie jest jednolite mamy do wyboru dwie możliwości:
- możemy zrezygnować z cienia
- możemy, obrabiając zdjęcie w programie graficznym, umieścić pod nim takie samo tło jakie będzie na stronie i starannie dopasować jego pozycję tak, by wzory się pokrywały.
W tym drugim przypadku koniecznie należy sprawdzić czy grafika dobrze się prezentuje pod różymi przeglądarkami, ponieważ wielkości marginesów mogą być różne. Najbezpieczniej jest ustawić marginesy na wartość zerową: leftmargin=”0” marginwidth=”0” topmargin=”0” marginhight=”0”.
JAK STWORZYC PRZEZROCZYSTEGO GIFa w programie Adobe Photoshop
- Tworzymy nowy plik (File/New) wybierając rodzaj tła jako transparent (Contents/Transparent).
- Tworzymy ilustrację.
- Wybieramy z menu File > Save for Web.
- Wybieramy opcję Gif i zaznaczamy opcję Transparency.
- Jeżeli ilustracja będzie posiadać rozmyte brzegi lub rzucony cień,
to ustawiamy taki kolor przezroczysty (Matte) jak kolor tła na stronie.
Agnieszka Richter
Artykuł został napisany dla Optimus
Pascal S.A. Publikowanie całości lub fragmentów niniejszego artykułu
jest zabronione bez zgody właściciela.