Dziś, w dobie stałego rozwoju Internetu i technologii multimedialnych, studia graficzne, a także samodzielni graficy, niemal stale spotykają się z koniecznością przygotowania projektów witryn czy reklam internetowych dla swych klientów. Rzecz jasna, tego typu prace wymagają nieco innego podejścia do projektowania, rozszerzenia zakresu prac o elementy interaktywne witryn, ale przede wszystkim dobrego zrozumienia możliwości i ograniczeń Internetu.

Graficy doskonale radzą sobie z tym wyzwaniem i tworzą wspaniałe projekty stron i reklamy internetowe. Spróbujmy spojrzeć na to zagadnienie od drugiej strony. Sprawdźmy, w jaki sposób najnowsze oprogramowanie graficzne spod znaku Adobe wspomaga proces projektowania stron WWW i reklam w Internecie.

Prześledzimy tu proces optymalizacji grafiki internetowej, tworzenia animacji i bannerów oraz budowy interaktywnej strony WWW, wykorzystując najnowszą wersję programu Adobe Photoshop CS z angielskim interfejsem użytkownika.

Optymalizacja grafiki na potrzeby Internetu - Adobe Photoshop

Adobe Photoshop pozwala w wygodny sposób przygotować grafikę do wykorzystania w Internecie. Polecenie Save for Web dostępne w górnym menu File wywołuje duże okno konfiguracyjne 1.

Przyjrzyjmy się dostępnym w nim opcjom i ustawieniom.

Zakładki Original, Optimized, 2-Up oraz 4-Up pozwalają wybrać jeden z podglądów naszej grafiki. Original to oryginalna wersja naszej grafiki. Optimized to podgląd optymalizowany, uwzględniający wybrane ustawienia formatu i kompresji obrazu. 2-Up oraz 4-Up to tryby podglądu dzielonego. Pozwalają na wizualne porównanie jakości oryginalnej pracy (zwykle lewy lub lewy górny narożnik okna) z podglądem optymalizowanym 2.

1 Adobe Photoshop - okno konfiguracyjne...

2 ... podgląd optymalizowany...

Informacje o wielkości pliku i szacunkowym czasie ładowania widoczne są w dolnej części okna optymalizowanego podglądu.

Po prawej stronie okna widoczne są ustawienia formatu zapisu i kompresji obrazu. W pierwszej kolejności należy wybrać format pliku graficznego i dopiero wówczas dokonać właściwych ustawień w dostępnych polach. Różnią się one w zależności od wybranego formatu pliku.

W kompresji JPEG kluczową rolę odgrywa parametr Quality 3, pozwalający określić jakość i stopień kompresji obrazu. Im mniejszą wartość ustawimy, tym utrata jakości pliku stanie się bardziej widoczna. Uzyskamy jednak mniejszą wagę i krótszy czas ładowania mocno skompresowanego pliku. W codziennej pracy kompresja na poziomie zawartym pomiędzy 20 a 60 daje zazwyczaj wystarczająco dobre rezultaty.

Prosta grafika (wektory), logo, teksty zwykle powinny być zapisane w formacie GIF. W ten sposób obszary o jednakowym kolorze będą doskonale kompresowane za pomocą bezstratnej kompresji LZW.

Pliki GIF mogą być dodatkowo kompresowane stratną kompresją. Suwak Lossy pozwala określić jej stopień.

Pliki GIF pozwalają zapisać jedynie do 256 kolorów i, co ważne, w tej liczbie zawarta jest także grupa barw, które mogą oznaczać pełną przezroczystość obrazu. Aby zapisać plik GIF z przezroczystością, należy zaznaczyć opcję Transparent w oknie konfiguracyjnym 4.

3 ... parametr Quality...

4 ... opcja Transparent w oknie konfiguracyjnym...

Paleta kolorów GIF pozwala nam wskazać optymalną przestrzeń barw dla obrazu. Ustawienie Restrictive (WEB) jest najlepszym wyborem w chwili, gdy chcemy zachować jednolite barwy na wszystkich systemach operacyjnych i w różnorodnych przeglądarkach.

Optymalizacja pliku GIF to przede wszystkim zarządzanie ilością dostępnych kolorów. Liczba barw pliku GIF w znaczący sposób wpływa na wielkość pliku i czas jego ładowania.

Pliki PNG-8 mają dokładnie takie same opcje, jak wspomniany wcześniej GIF. Gdy chcemy zapisać obrazek z pełną informacją o przezroczystości, należy wybrać zapis w formacie PNG-24 (przydatne do wykorzystania w Macromedia Flash i Director).