10
Optymalizacja gra-
fiki dla WWW
2
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Zarówno Adobe Photoshop jak i Adobe ImageReady pozwalają na
optymalizowanie grafiki pod względem jakości i objętości pliku w celu
efektywnego publikowania stron WWW. Im mniejszy wygenerujesz plik,
tym szybciej będzie on pobrany z serwera, ale czasem istnieje potrzeba
pokazania dużego rysunku, z bogactwem kolorów i szczegółów, wtedy
musisz poszukać kompromisu. ImageReady pozwala także na wydzie-
lenie obszarów rysunku, które można wykorzystać do nawigacji stroną
WWW. W tej lekcji poznasz następujące zagadnienia:
" Optymalizacja grafiki w formacie JPEG oraz GIF, dopasowanie
ustawień optymalizacji w celu zrównoważenia jakości grafiki i wiel-
kości pliku
" Dopasowanie działania mechanizmu dithering w zależności od ro-
dzaju rysunku
" Definiowanie przez
roczystego tła dla grafiki
" Tworzenie hiperłącz za pomocą map definiowanych na obrazach
" Automatyzacja procesu optymalizacji za pomocą przygotowanych
procedur
Lekcja powinna zakończyć się po około 90 minutach całkowitym opa-
nowaniem materiału. Wykonywane ćwiczenia dotyczą programu Adobe
ImageReady. Przygotuj się do przećwiczenia lekcji i skopiuj do lokalne-
go katalogu Moje dokumenty katalog Photoshop Lekcja10 z poda-
nej przez prowadzącego lokalizacji.
Optymalizacja obrazów przy użyciu Adobe Photoshopa
lub ImageReady
Adobe Photoshop i ImageReady pozwalają na szeroki zakres kontroli
parametrów kompresji rozmiarów plików, a podczas optymalizacji za-
chodzące zmiany w jakości grafiki są na bieżąco wyświetlane. Opcje
optymalizacji są zależne od formatu pliku, który wybraliśmy.
" Format JPEG został stworzony w celu odzwierciedlenia szerokiego
zakresu kolorów oraz subtelnych zmian jasności w obrazach o
płynnych przejściach tonowych takich jak zdjęcia, grafiki z zasto-
sowanym gradientem itp.
" Format GIF jest efektywny wtedy, gdy obraz zawiera obszary
pokryte jednolitym kolorem oraz powtarzające się elementy (np.
w grafikach, logo, ilustracjach z tekstem). W tym formacie mamy
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
3
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
do dyspozycji paletę jedynie 256 kolorów, przez co nie nadaje się
on do zapisywania zdjęć. Format GIF umożliwia tworzenie obraz-
ków z przez
roczystym tłem.
" Format PNG, podobnie jak GIF, jest efektywny w przypadku, gdy
obrazek zawiera obszary o jednolitym kolorze i chcemy zachować
drobne szczegóły na obrazie. Format PNG-8 używa palety 256
kolorów, format PNG-24 wspiera 24 bitowy zapis kolorów (16,7
milionów kolorów). Niestety wiele starszych przeglądarek inter-
netowych nie obsługuje tego formatu.
W tej lekcji nauczysz jak w pełni wykorzystać możliwości Photoshopa i
ImageReady w dziedzinie optymalizacji obrazów i wykorzystania ich w
tworzeniu stron WWW. Będziemy tworzyć fikcyjną stronę ZOO, gdzie
poznasz praktyczne zastosowanie omawianych tutaj mechanizmów.
Istotną rzeczą jest to, że Adobe Photoshop i ImageReady udostępniają
wiele podobnych funkcji optymalizacji. Obydwa programy pozwalają
podglądać i porównywać różne wersje zoptymalizowanych obrazów,
wybierać spośród wielu formatów i ustawień, pracować z paletą kolorów
i z każdym kolorem indywidualnie, aby zachować spójność kolorów i
zmniejszyć jak tylko to możliwe rozmiar pliku.
Kompresja grafiki (tłumaczenie z wbudowanej pomocy Adobe
Photoshop)
Wiele formatów plików z obrazkami korzysta z technik kompresji dla
zmniejszenia powierzchni potrzebnej dla obrazków bitmapowych. Tech-
niki kompresji dzielą się na takie, które usuwają szczegóły i kolory z
obrazków (technika stratna) i na technikę bezstratną, która kompresuje
dane bez usuwania szczegółów. Wymienione niżej techniki są najczę-
ściej używane:
" Kompresja RLE (Run Length Encoding) jest techniką bezstratną ob-
sługiwaną przez formaty Photoshopa oraz niektóre formaty Win-
dows.
" Technika LZW (Lemple-Zif-Welch) jest kompresją bezstratną obsłu-
giwaną przez formaty TIFF, PDF, GIF i język PostScript. Technika ta
jest szczególnie przydatna przy kompresowaniu obrazków z dużymi
obszarami w jednym kolorze.
" Kompresja JPEG (Joint Photographic Experts Group) jest techniką
stratną obsługiwaną przez formaty JPEG, PDF i język PostScript.
Technika ta przynosi najlepsze rezultaty w przypadku obrazków z
łagodnymi przejściami tonalnymi (np. w fotografiach).
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
4
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Po wybraniu kompresji JPEG, użytkownik określa jakość obrazka po-
przez wybranie opcji z menu Jakość, przesunięcie suwaka Jakość lub
wpisanie wartości od 1 do 12 w polu Jakość. Najlepsze efekty na wy-
druku przynosi kompresja o maksymalnej jakości. Pliki z kodowaniem
JPEG mogą być drukowane tylko na drukarkach PostScript Level 2 (lub
nowszych) i mogą nie rozdzielać się na poszczególne płyty.
" Kodowanie CCITT jest grupą kompresji bezstratnych dla obrazków
czarno-białych obsługiwanych przez formaty PDF i języka PostScrip-
tu. (CCITT jest skrótem od francuskiej nazwy International Telegra-
ph and Telekeyed Consultive Committee.)
" Kodowanie ZIP jest kompresją bezstratną obsługiwaną przez format
PDF. Tak samo, jak w przypadku LZW, kompresja ZIP jest najsku-
teczniejsza dla obrazków z dużymi obszarami kryjącego koloru.
" (ImageReady) PackBits jest bezstratną kompresją. Kompresja
PackBits jest obsługiwana przez format TIFF tylko w ImageReady.
Optymalizacja i zapis plików w Photoshopie
Wszystkie możliwe opcje optymalizacji grafiki znajdują się w Photosho-
pie w oknie dialogowym Save For Web. Możesz porównywać jedną lub
więcej zoptymalizowanych wersji pliku, nad którym pracujesz. Możesz
dopasowywać ustawienia optymalizacji dopóki nie znajdziesz rozwiąza-
nia gwarantującego najlepszą jakość obrazu oraz najmniejszy rozmiar
pliku.
Teraz otworzysz pierwszy plik, zawierający zdjęcie w formacie JPEG,
który będziemy poddawać optymalizacji. Zastosujesz różne ustawienia i
porównasz otrzymane wyniki.
1 Uruchom program Adobe Photoshop.
2 Otwórz plik L10_optym_pocz1.psd.
Plik przedstawia zmodyfikowaną wersję mapy zoo, którą wykorzystasz
w dalszej części lekcji. Mapa powstała z połączenia i obróbki zeskano-
wanych zdjęć zwierząt w Photoshopie. Aktualny rozmiar pliku jest zde-
cydowanie za duży, aby go było można umieścić na stronie interneto-
wej. Porównamy teraz różne formaty i ustawienia kompresji, aby osią-
gnąć najmniejszy rozmiar pliku oraz najlepszą jakość obrazu.
3 Wybierz File Save for Web.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
5
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
4 W oknie dialogowym Save for Web, kliknij na zakładkę 4-Up, aby
zobaczyć cztery wersje kompresowanego obrazku.
Oglądając cztery różne warianty obrazków poddanych kompresji, mo-
żesz wybrać ten, którego ustawienia będą najodpowiedniejsze dla tego
typu grafiki, następnie skupiając się na wybranej metodzie możesz do-
prowadzić do jak najlepszego przybliżenia oryginału, bez nadmiernego
rozrostu rozmiaru pliku.
5 W lewym dolnym brzegu okna dialogowego Save for Web wybierz
powiększenie 200% lub większe, wtedy będziesz mógł natychmiast
dostrzec wszystkie niedoskonałości kompresji.
6 Przesuń myszkę nas obrazek w górnym prawym rogu. Jest on teraz
zaznaczony, o czym świadczy czarna obwódka wokół niego. Wskaz
-
nik myszki przybierze postać ręki, będziesz mógł przesuwać widocz-
ny fragment i zobaczyć inne części obrazu.
7 Przysuń teraz powiększony obraz tak, aby zobaczyć napis Tropi-
kalne Lasy Deszczowe.
8 Wybierz teraz GIF 128 Dithred z sekcji Settings z prawej strony
okna dialogowego.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
6
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Zauważ ciemne grupy pikseli o jednolitym kolorze wokół tekstu oraz na
dziobie papugi.
Teraz wykorzystamy dwa dolne okna, aby zobaczyć i porównać jak wy-
gląda kompresja w formatach: JPEG i PNG.
9 Kliknij myszką na dolną lewą wersję obrazu, aby ją wybrać.
10 Wybierz teraz ustawienie JPEG Low z sekcji Settings.
Obraz wygląda bardzo zaśmiecony, jakość jest nie do zaakceptowania,
szczególnie wokół tekstu. Będziemy teraz próbować osiągnąć dobrą ja-
kość obrazu, ale nie doprowadzając do nadmiernego rozrostu wielkości
pliku.
11 Wybierz teraz JPEG High z palety Settings.
JPEG Low JPEG High
Ta operacja poprawiła nam jakość obrazu, ale wrosła też objętość pliku.
12 Wybierz ustawienie JPEG Medium.
Jakość grafiki jest wciąż do zaakceptowania, a rozmiar pliku prawie
dwukrotnie został zredukowany.
13 Poeksperymentuj z różnymi ustawieniami, dobierz je ręcznie w me-
nu Settings, kieruj się jakością obrazu i wielkością pliku.
14 Kliknij teraz na prawym dolnym obrazku, aby go wybrać.
15 Wybierz ustawienie PNG-8 128 Dithered.
W tym przypadku rozmiar pliku jest również mniejszy niż oryginalny,
ale jakość obrazu jest gorsza niż w przypadku ustawienia JPEG Me-
dium, które w dodatku pozwala uzyskać mniejszy rozmiar pliku. Na
domiar wszystkiego ten format nie obsługiwany jest przez większość
starszych przeglądarek internetowych.
16 Wybierz teraz wersję z lewego dolnego brzegu.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
7
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
17 W ustawieniach włącz opcje Progressive.
Ta opcja powoduje to, że podczas ładowania pliku z serwera cały pro-
ces jest rozbity na kilka etapów. Obraz z każdym następnym krokiem
uzyskuje coraz lepszą jakość, a już w pierwszym momencie wiemy, co
znajduje się na obrazku.
18 Kliknij teraz na przycisk OK w menu z prawej strony. W oknie dialo-
gowym podaj nazwę pliku L10_optym_pocz1.jpg i zapisz w tym sa-
mym katalogu, w którym znajduje się oryginalny plik.
19 Zamknij oryginalny plik bez zapisania zmian.
Użycie kanałow do modyfikacji jakości formatu JPEG (tłuma-
czenie z wbudowanej pomocy Adobe Photoshop)
Przy używaniu kanału alfa do optymalizacji jakości obrazka JPEG, ob-
szary białe posiadają najwyższą jakość, a czarne obszary maski charak-
teryzują się jakością najniższą. Użytkownik może zmienić najwyższy i
najniższy poziom jakości w oknie Modify Quality Setting.
Aby użyć kanału alfa do zmiany jakości JPEG, należy:
1. W panelu/palecie Optimize, zaznaczyć ustawienie JPEG z menu Set-
tings lub wybrać opcję JPEG z menu formatów.
2. Kliknąć na przycisku kanału, umieszczonym na prawo od pola Quali-
ty.
3. W oknie Modify Quality Setting, zaznaczyć wybrany kanał z menu
Channel. W ImageReady, użytkownik może utworzyć nowy kanał al-
fa na podstawie bieżącego zaznaczenia, korzystając z polecenia
Save Selection.
4. Aby obejrzeć efekty wyważonej optymalizacji, należy zaznaczyć
opcję Preview.
5. Zdefiniować zakres jakości:
" Aby zaznaczyć najwyższy poziom jakości, należy przeciągnąć
prawą (białą) zakładkę suwaka, wpisać wartość w polu Maximum
lub zmienić aktualną wartość przy pomocy strzałek.
" Aby zaznaczyć najniższy poziom jakości, należy przeciągnąć lewą
(czarną) zakładkę suwaka, wpisać wartość w polu Minimum lub
zmienić aktualną wartość przy pomocy strzałek.
6. Kliknąć na OK.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
8
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Optymalizacja grafiki w formacie GIF
Teraz zajmiemy się optymalizacją plików w formacie GIF, w których za-
zwyczaj występują większe obszary o jednolitym kolorze. Pracując w
programie ImageReady, będziemy porównywać wpływ różnych usta-
wień opcji optymalizacji na efekt końcowy.
W programie ImageReady mamy do dyspozycji paletę Optimize, która
pozwala na wybór formatu pliku i ustawienia opcji kompresji.
1 Zamknij teraz program Program Photoshop i uruchom ImageReady.
2 Otwórz plik L10_optym_pocz2.psd z katalogu z aktualną lekcją.
3 Kliknij na zakładkę 2-Up w oknie dokumentu.
Wersja zoptymalizowana jest wybrana i wyświetlana w prawej części
okna.
4 W palecie Optimize wybierz GIF 128 No Dither z menu Settings.
5 Wybierz opcję Perceptual z rozwijanego menu Color Reduction
Algorithm (poniżej pola z wyborem formatu pliku).
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
9
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Powyższe ustawienie dotyczy metody redukcji kolorów, możesz zasto-
sować poniższe ustawienia, każda z tych metod ma zastosowanie w
konkretnych sytuacjach:
" Perceptual - tworzy własną tabelę kolorów, nadając pierwszeń-
stwo kolorom lepiej odbieranym przez ludzkie oko.
" Selective - tworzy tabelę kolorów podobną do tabeli Wizualnej,
nadając pierwszeństwo szerszym obszarom kolorów i zachowując
kolory Weba. Tabela tworzy zwykle obrazki z najlepszą reprezen-
tacją kolorów i jest tabelą domyślną.
" Adaptive - tworzy własną tabelę kolorów poprzez próbkowanie
kolorów ze spektrum najczęściej pojawiającego się na obrazku.
Na przykład, w obrazku w kolorach zielonym i niebieskim, opcja
utworzy tabelę składającą się głównie z zieleni i kolorów niebie-
skich. Większość obrazków składa się z kolorów określonych ob-
szarów spektrum.
" Web - używa standardowej tabeli 216-kolorów znanych w 8-
bitowych (256 kolorów) paletach Windows i Mac OS. Opcja za-
pewnia, że przeglądarki korzystające z kolorów 8-bitowych nie
będą używały ditheringu przy wyświetlaniu takich obrazków. (Pa-
leta jest także zwana Bezpieczną paletą Weba.) Jeśli obrazek po-
siada mniej kolorów, niż to określono w palecie kolorów, to nie-
używane kolory są usuwane. Korzystanie z palety Web może po-
większyć pliki i jest zalecane tylko dla uniknięcia ditheringu prze-
glądarki. Przeglądanie i kontrola ditheringu.
" Custom - zachowuje bieżącą paletę kolorów jako tabelę stałą,
która nie będzie uaktualniana przy wprowadzaniu zmian do ob-
razka.
" Mac OS lub Windows - używa domyślnej 8-bitowej palety sys-
temu Mac OS lub Windows (256 kolorów), która jest oparta na
ujednoliconych próbkach kolorów RGB. Jeśli obrazek posiada
mniej kolorów, niż to określono w palecie kolorów, to nieużywa-
ne kolory są usuwane.
Na dole okna dokumentu znajduje się pasek informacyjny. Wyświetlana
jest na nim informacja o aktualnym powiększeniu, oraz o innych waż-
nych dla nas parametrach zarówno o wersji oryginalnej obrazu i jak i
optymalizowanej. Mogą tam być wyświetlane jednocześnie dwa para-
metry dotyczące obydwu wersji obrazu.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
10
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
A
B
A - Rozmiar pliku oraz czas załadowania zoptymalizowanej wersji pliku
B  Rozmiar pliku wersji oryginalnej oraz zoptymalizowanej
6 Wybierz teraz z paska informacyjnego, rozwijając drugie menu,
opcję Image Dimensions.
Ta opcja pokazuje rozmiar obrazu w pikselach. Jest to przydatne, kiedy
masz już przygotowane miejsce na stronie WWW i dopasowujesz do
niego obrazek.
7 Jeśli nie jest teraz widoczna paleta Color Table, wybierz Window
Show Color Table.
Małe białe romby oznaczają
kolory zabezpieczone przed
ditheringiem
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
11
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Ta paleta pokazuje tabelę kolorów przygotowaną przez paletę Percep-
tual dla naszego obrazku mapy zoo. Białe romby na niektórych kolo-
rach oznaczają, że będą one bezpieczne w przeglądarkach interneto-
wych i nie będą poddawane ditheringowi (symulacji nieistniejącego ko-
loru). Całkowita liczba zastosowanych kolorów jest widoczna w dolnej
lewej części palety. Masz możliwość przewijania zawartości palety,
zmiany jej rozmiarów, oraz sposobu rotowania kolorów
8 Wybierz Sort By Hue, z menu palety Color Table.
Teraz zobaczymy jak wpływają inne ustawienia palety Optimize na wy-
gląd obrazu.
9 W palecie Optimize wybierz opcję Web z rozwijanego menu Color
Reductions Algorithm.
Zauważ jak, po tej zmianie, wygląda tabela kolorów, która jest dosto-
sowana teraz do nowych wymogów.
10 Poeksperymentuj teraz z różnymi ustawieniami i analizuj wygląd ob-
razu, wyciągnij z tego wnioski.
Redukcja tabeli kolorów
W celu lepszej kompresji pliku, możemy zmniejszyć całkowitą ilość ko-
lorów, występującą w tabeli kolorów. Redukcja kolorów często pozwala
na zachowanie wysokiej jakości obrazu przy jednoczesnym bardzo
znacznym pomniejszeniu rozmiaru pliku.
1 W palecie Optomize wybierz opcję Perceptual.
2 W oknie dokumentu zmień powiększenie do 200% lub więcej, abyś
mógł zobaczyć na obrazie wszystkie drobne detale.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
12
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
3 Wybierz zoptymalizowany obraz a następnie przesuń obraz do miej-
sca na mapie Tropikalne Lasy Deszczowe, tak, aby było ono do-
brze widoczne.
4 Zapamiętaj obecny rozmiar optymalizowanego pliku, a następnie
zmień liczbę kolorów, w polu Colors palety Optimize, na 32.
Zauważ, że nowy rozmiar pliku jest znacznie mniejszy niż poprzednio,
ale zostało to okupione niską jakością obrazu, zostały zmienione kolory
symboli zwierząt a także innych elementów. Symbole w części Sawan-
na Afrykańska mają zupełnie odmienne kolory, a w części Arktyczna
Pustynia w ogóle nie są widoczne.
5 Przesuń teraz obraz na inny obszar mapy, może na początek na
część Sawanna Afrykańska lub zmień powiększenie do 100%.
6 Zmień ilość kolorów z powrotem do 128.
Tym razem, przed następną redukcją ilości kolorów, zabezpieczymy
niektóre z nich przed zniknięciem z palety kolorów.
7 Wybierz próbnik koloru (Eyedropper Tool - ) i kliknij na sylwetce
wielbłąda, aby pobrać próbkę koloru.
Ciemnobrązowy kolor jest teraz wybrany w tabeli kolorów
8 Kliknij teraz na przycisk Lock button - , w dolnej części palety
Color Table, co spowoduje zablokowanie wybranego koloru.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
13
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Na zablokowanym kolorze, w prawym dolnym rogu, pojawi się malutki
biały kwadrat, który oznacza kolor zablokowany, aby czynność odwró-
cić należy powtórzyć czynność z punktu 8.
9 Powtórz teraz procedurę blokowania koloru dla sylwetek zwierząt
znajdujących się w części Arktyczna Pustynia.
10 Zredukuj powtórnie ilość kolorów do 32.
Teraz zablokowane kolory zostały w palecie, niestety pojawiły się nowe
przesunięcia kolorów.
11 Zmień ilość kolorów, znów na 128.
12 Zablokuj teraz kolory na wszystkich sylwetek zwierzą oraz innych
elementów na różnych częściach mapy zoo. Nie blokuj jednak teraz
zielonego koloru tła w części Tropikalne Lasy Deszczowe. Bę-
dziemy jeszcze z tym kolorem eksperymentować w dalszej części
lekcji.
Dalsze obniżanie ilości kolorów nie zawsze jest możliwe ze względu na
dużą utratę jakości, jednak w przypadku prostych grafik może to być
możliwe i spowoduje jeszcze większe zmniejszenie objętości pliku.
Zawsze staraj się używać najmniejszej ilości kolorów jak to tylko moż-
liwe, ale zwracaj uwagę na zachowanie dobrej jakości obrazu.
13 Po zakończeniu eksperymentów, zapisz zmiany w pliku, ale nie za-
mykaj go.
Kontrola Ditheringu
Być może zauważyłeś, że przy niektórych ustawieniach opcji optymali-
zacji na niektórych powierzchniach obrazu pojawiają się kropki lub
plamki ułożone w dziwne wzory. Tak się dzieje, gdy jest stosowana
technika ditheringu. Technika ta jest oparta na symulacji koloru, który
nie jest obecny w tabeli kolorów za pomocą innych kolorów, które w
niej są obecne. Przykładowo kolor niebieski i żółty, ułożone w mozaikę
według pewnego wzoru dadzą w efekcie złudzenie koloru zielonego,
którego może nie być w tabeli kolorów.
Podczas optymalizacji plików graficznych pamiętaj o dwóch rodzajach
ditheringu.
" Dithering aplikacji - występuje w obrazkach GIF i PNG-8, gdy
ImageReady lub Photoshop próbują odtworzyć kolory oryginału
obrazka, których nie ma w palecie kolorów wybranej dla wersji
zoptymalizowanej. Dithering aplikacji może być kontrolowany w
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
14
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Photoshopie i ImageReady poprzez wybranie wzoru ditheringu i
zakresu kolorów podlegających tej operacji.
" Dithering przeglądarki  występuje, gdy przeglądarka 8-
bitowa (tryb 256 kolorów) próbuje odtworzyć kolory zoptymali-
zowanej wersji obrazka, których nie ma w palecie kolorów prze-
glądarki. Dithering przeglądarki może wystąpić z obrazkami GIF,
PNG i JPEG oraz przy ditheringu aplikacji z obrazkami GIF lub
PNG-8. Stopień ditheringu przeglądarki może być kontrolowany
poprzez przeniesienie zaznaczonych kolorów obrazka do bez-
piecznych kolorów Weba.
Dither, który tworzy aplikacja można przeglądać bezpośrednio w pro-
gramie ImageReady. Również Dither przeglądarki możesz zobaczyć w
programie ImageReady lub też w przeglądarce internetowej, po przełą-
czeniu jej w tryb 8-bitowego koloru (ustawienia systemowe).
Kontrola Ditheringu aplikacji
Suwak Dither, w palecie Optimize, pozwala na kontrolowanie zakresu
kolorów, który program będzie symulować za pomocą techniki ditherin-
gu. Dithering zwiększa dostępną ilość kolorów oraz poprawia czytelność
szczegółów, ale jednocześnie zwiększa rozmiar pliku. Aby kompresja
była efektywna, nie ustawiaj dużego zakresu kolorów symulowanych za
pomocą ditheringu.
1 Upewnij się, że masz ustawione następujące opcje optymalizacji:
format GIF, paleta Perceptual, ilość kolorów 32.
2 Zmień teraz algorytm tworzenia ditheringu z opcji No Dither na
Diffusion.
3 Wprowadz
wartość 100% w polu tekstowym Dither.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
15
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Przy użyciu różnych kolorów, ImageReady próbuje zasymulować kolor,
który znajduje się w oryginalny obrazku, ale nie ma go w zredukowanej
tabeli kolorów. Zauważ, że po zastosowaniu ditheringu, cienie pod tek-
stem, które stanowiły wcześniej jednolite zlepek koloru, teraz wygląda-
ją znacznie lepiej. Jednak cały zielony odcinek mapy Tropikalne Lasy
Deszczowe nie wygląda teraz najlepiej j nie może być zaakceptowany.
4 Zmień teraz moc ditheringu, przesuwając suwak Dither do wartości
50%, spróbuj też inne ustawienie.
ImageReady zmniejszy zakres symulowanych kolorów i w tym przy-
padku zmieni w niewielkim stopniu cień pod tekstem, nie ruszając wo-
góle zielonego tła.
5 Wróć teraz z ustawieniem mocy ditheringu na 100%.
6 Zmień ilość kolorów na 128, zablokuj zielony kolor tła w części
Tropikalne Lasy Deszczowe, a następnie zmień ilość kolorów na
32.
7 Zmień powiększenie dokumentu na 100%.
Teraz obraz jest do zaakceptowania, a osiągnięto też niewielki rozmiar
pliku.
Podgląd i minimalizacja ditheringu przeglądarki internetowej
Jak nauczyłeś się wcześniej, obrazy, zawierające kolory, które nie są
bezpiecznymi kolorami Web, w przeglądarkach internetowych używają-
cych 8 bitowego koloru są poddawane procesowi ditheringu przez prze-
glądarkę. ImageReady daje tobie możliwość obejrzenia jak taki obrazek
będzie wyglądać w przeglądarce internetowej.
Aby zabezpieczyć się przed ditheringiem przeglądarki należy przesunąć
używane przez na kolory w obrazku na ich najbliżej odpowiedniki w pa-
lecie Web. Ponieważ paleta Web zawiera kolory, które są stosowane za-
równo w systemie Windows jak i Mac OS, dlatego obrazki przygotowa-
ne z jej udziałem będą wyglądały identycznie na obydwu platformach,
raz nie będzie wykorzystywany mechanizm ditheringu przeglądarki.
1 Przy otwartym, optymalizowanym pliku L10_optym_pocz2.psd, uak-
tywnij opcję View Preview Browser Dither. Włączenie tej
opcji pozwoli tobie zobaczyć jak przeglądarka zastosuje dithering.
Zauważ, że brązowy kolor w części Sawanna Afrykańska został zastą-
piony jego symulacją przez zastosowanie ditheringu przeglądarki.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
16
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Następnym naszym krokiem będzie przesunięcie jednego z kolorów do
palety kolorów Web, zmniejszy to dithering stosowany przez przeglą-
darkę.
2 Wybierz próbnik koloru (Eyedropper Tool - ) i kliknij na brązo-
wej powierzchni poddanej ditheringowi. Próbka koloru pojawi się te-
raz w palecie Color Table.
3 Kliknij teraz na przycisk przesunięcia koloru do palety Web - ,
spowoduje to zastąpienie wskazanego koloru, najbliższym kolorem
dostępnym w palecie Web.
Po tej czynności pojawił się inny kolor, najbardziej zbliżony do zastę-
powanego i zostanie oznaczony białym rombem w środku.
Za pomocą przesunięcia używanych kolorów w bezpieczny obszar dla
przeglądarek internetowych pracujących z 8 bitowym kolorem, unikamy
ditheringu w przeglądarkach.
4 Zapisz zmiany w pliku
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
17
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Tworzenie obrazków z przez
roczystym tłem
Zastosowanie przez
roczystego tła pozwala na umieszczenie grafiki o
nieregularnych kształtach na dowolnym tle na stronie WWW. Po-
wierzchnie, które znajdują się za zewnątrz obiektu, definiuje się jako
przez
roczyste, w ten sposób tło strony jest przez nie widoczne. Istnieje
możliwość utworzenia przez
roczystego tła w formatach GIF i PNG.
Tworzenie obrazków przezroczystych i matowych (tłumaczenie
z wbudowanej pomocy Adobe Photoshop)
Przezroczystość umożliwia umieszczenie nie prostokątnego obiektu gra-
ficznego na tle strony WWW. Przezroczystość tła, obsługiwana przez
formaty GIF i PNG, zachowuje przezroczyste piksele obrazka, które są
wtapiane w tło strony WWW w przeglądarce.
Matowanie tła, obsługiwane przez formaty GIF, PNG i JPEG, przypomina
przezroczystość poprzez wypełnianie lub mieszanie przezroczystych
pikseli z kolorem matowym identycznym z kolorem tła strony Weba, na
której będzie umieszczony obrazek. Matowanie tła działa tylko wtedy,
gdy tło strony WWW jest w jednym, znanym wcześniej kolorze.
Obrazek oryginalny musi zawierać piksele przezroczyste tak, by możli-
we było utworzenie przezroczystości tła lub otoczki tła w obrazku zop-
tymalizowanym. Przezroczystość jest tworzona po utworzeniu nowej
warstwy.
Ponieważ przed zastosowaniem przezroczystości obrazek musi zawierać
przezrocze piksele, w tej części lekcji poznasz najprostszą metodę usu-
nięcia tła, za pomocą magicznej gumki  Magic Erazer.
1 Przełącz okno dokumentu w tryb oryginalnego obrazu, kliknij na za-
kładce Original.
2 Dopasuj teraz powiększenie obrazu do rozmiarów ekranu.
Przed tym niż użyjemy formatu GIF w celu zachowania przezroczysto-
ści, musimy w naszym obrazie, zamienić niektóre obszary na przez
ro-
czyste. Aby wykonać tą operację, przekonwertujemy najpierw warstwę
z tłem obrazu na zwykła warstwę, a następnie usuniemy zawartość tej
warstwy za pomocą magicznej gumki.
3 W palecie Layers, kliknij dwukrotnie na warstwie Background. W
oknie dialogowym Layer Options, nie zmieniaj żadnych opcji i klik-
nij OK.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
18
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Narzędzie Magic Erazer Tool usuwa wszystkie piksele o wskazanym ko-
lorze po pojedynczym kliknięciu na tym kolorze. Możemy użyć tego na-
rzędzia do usunięcia w całości białego koloru z przekształconej war-
stwy. Jednak my potrzebujemy usunąć tylko biały kolor z części pikseli,
które otaczają mapę a nie na przykład białe litery, musimy, więc utwo-
rzyć wstępną selekcję, która wykluczy obszary, które powinny pozostać
nietknięte.
4 Wybierz narzędzie Marquee Toll - .
5 Narysuj prostokątna selekcję wokół mapy zoo tak jak pokazano na
rysunku poniżej.
6 Wybierz Select Inverse, aby wybrać poza zaznaczonym przed
chwilą obszarem.
7 Wybierz narzędzie Magic Erazer Tool- , które jest ukryte pod
zwykłą gumką Erazer Tool - .
8 W opcjach narzędzia odznacz opcję Contiguous, co pozwoli na
usunięcie wszystkich odizolowanych sekcji białego koloru, np. mię-
dzy liśćmi.
9 Kliknij na białym tle na zewnątrz mapy zoo.
Teraz możesz mieć pewność, że wszystkie przezroczyste piksele, które
znalazły się w obrazie, będą zapisane w pliku GIF jako rzeczywiście
przezroczyste.
10 W menu palety Optimize, wybierz polecenie Show Options.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
19
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
11 Upewnij się, że w opcjach palety Optimize jest zaznaczona pozycja
Transparency.
Opcja ta pozwala na przekonwertowanie i zachowanie jako przezroczys-
tych, wszystkich w zoptymalizowanym obrazie, pikseli, które w orygi-
nalnym obrazie mają większą przezroczystość niż 50%.
12 Wybierz Select Deselect.
13 Zapisz zmiany w pliku.
Tworzenie matowego tła w obrazach GIF i PNG (tłumaczenie z
wbudowanej pomocy Adobe Photoshop)
Jeśli znany jest kolor tła strony WWW, na której będzie wyświetlany
obrazek, to można użyć funkcji matowania do wypełnienia lub wymie-
szania pikseli przezroczystych z kolorem matowym, pokrywającym się z
kolorem tła strony WWW. Tło musi mieć kolor kryjący i nie posiadać
wzorków.
Efekt matowania obrazków GIF i PNG-8 jest uzależniony od opcji Opaci-
ty. Po zaznaczeniu opcji Ttransparency, matowanie jest stosowane tyl-
ko do pikseli częściowo przezroczystych (np. piksele krawędzi obrazków
wygładzonych). Po umieszczeniu obrazka na stronie WWW, jej tło bę-
dzie widoczne spod pikseli przezroczystych, a krawędzie zostaną wy-
mieszane z tłem. Funkcja zapobiega występowaniu efektu aureoli pod-
czas umieszczania obrazka wygładzonego na kolorze innym, niż kolor
tła oryginału obrazka. Funkcja zapobiega wystąpieniu nierównych kra-
wędzi w obrazkach GIF z obszarami przezroczystymi o wyraz
nych kra-
wędziach.
Aby zobaczyć efekt działania przezroczystego tła, możesz wykorzystać
podgląd optymalizowanego w formacie GIF obrazu w przeglądarce in-
ternetowej. Ponieważ ImageReady standardowo wyświetla obraz w
przeglądarce na białym tle, musimy zmień kolor matowania, aby można
było zobaczyć przezroczyste powierzchnie na mapie zoo.
14 Kliknij teraz na rozwijane menu Matte w palecie Optimize, wybierz
kolor inny niż biały i kliknij OK.
15 Wybierz teraz File Preview In, i wybierz przeglądarkę Interne-
tową zainstalowaną w twoim komputerze.
Obraz z mapą zoo pojawi się teraz w przeglądarce internetowej z kolo-
rem tła takim, jaki wybrałeś w punkcie 14.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
20
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Funkcja przezroczystości włączona Funkcja przezroczystośći wyłączona
Przycinanie nadmiarowych powierzchni tła
Pomimo to, że nasza mapa zoo, zawiera teraz piksele, które nie są wi-
doczne, to jednak one ciągle zajmują miejsce w pliku. Możemy przyciąć
te obszary i tym samym dodatkowo poprawić optymalizację grafiki.
1 Wybierz komendę Image Trim.
Komenda Trim pozwala pozbyć się obszarów, które nie wchodzą do na-
szego obrazu przy założeniu, że są one przezroczyste lub wypełnione
określonym kolorem.
2 W oknie dialogowym Trim, wybierz opcję Transparent Pixels a
następnie kliknij OK.
Nadmiarowe powierzchnie zostaną wycięte.
3 Wybierz File Save Optimized As, w oknie dialogowym użyj do-
myślnej nazwy pliku L10_optym_pocz2.gif.
4 Zamknij oryginalny plik i zapisz w nim zmiany.
Tworzenie Mapy obrazu
Pod pojęciem Mapa obrazu kryje się technika tworzenia hiperłącz, któ-
rej podstawą jest tworzenie mapy punktów na obrazie, które definiują
obszary działania tych, hiperłącz. Różne obszary oraz punkty obrazu
mogą być połączone z różnymi plikami. Adobe ImageReady potrafi two-
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
21
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
rzyć mapy obrazu przetwarzane zarówno po stronie serwera jak i klien-
ta.
Tworzenie i podglądanie map obrazu (tłumaczenie z wbudowa-
nej pomocy Adobe Photoshop)
Mapy obrazka umożliwiają połączenie obszaru obrazka z URL-em. Użyt-
kownik może określić kilka obszarów połączonych (obszarów map ob-
razka) w danym obrazku, które będą połączone z plikami tekstowymi,
innymi obrazkami, plikami audio, wideo lub multimedialnymi, innymi
stronami na witrynie internetowej lub witrynami internetowymi. Na ob-
szarach map obrazka można tworzyć efekty rollover.
Główna różnica pomiędzy używaniem map obrazka i techniki slice do
tworzenia połączeń polega na sposobie eksportowania obrazka z
ródło-
wego w postaci strony internetowej. Użycie map obrazka zachowuje
bez zmian eksportowany obrazek w postaci jednego pliku, a slice eks-
portują obrazek jako oddzielny plik. Inna różnica polega na tym, że
mapy obrazka umożliwiają łączenie okrągłych, wielobocznych lub pro-
stokątnych obszarów obrazka, podczas, gdy slice umożliwiają łączenie
tylko obszarów prostokątnych. Jeśli łączone obszary są prostokątne, to
odcięcia mogą być używane zamiast map obrazka.
W tej części lekcji, będziesz tworzyć mapę obrazu na przygotowanym
obrazie. Definiowanie aktywnych obszarów będziemy przeprowadzać za
pomocą konwersji warstw lub któregoś z narzędzi do tworzenia map. W
ćwiczeniu posłużymy się specjalnie przygotowaną mapą zoo, w której
poszczególne kontynenty geograficzne znajdują się na różnych war-
stwach. Za pomocą konwersji warstw na aktywną mapę hiperłącz, mo-
żesz mieć większą kontrolę nad kształtem niż za pomocą prostych
kształtów geometrycznych, dostępnych za pomocą narzędzie.
1 Otwórz plik L10_optym_pocz3.psd.
Mapa zoo wygląda podobnie jak w poprzednich punktach, z tym wyjąt-
kiem, że jest podzielona warstwy. Mapa będzie tworzyć swoisty spis
treści, który będzie prowadzić do wybranej części zoo po kliknięciu na
niego.
2 W palecie Optimize wybierz predefiniowane ustawienie GIF 64 Di-
thered.
3 W palecie Layers wybierz warstwę Sawanna Afrykańska
4 Wybierz Layer New Layer Based Image Map Area.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
22
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
5 Wybierz Window Show Image Map, aby wyświetlić paletę
Image Map.
6 W palecie Image Map wybierz kształt, według którego ma zostać
utworzona mapa (w rozwijanym menu Shape wybierz Poligon). W
polu tekstowym Quality wpisz 90.
Ustawiane powyżej opcje mają wpływ na kształt brzegu aktywnego ob-
szaru oraz na dokładność jego odwzorowania.
Pole URL służy do podania docelowego przeznaczenia hiperłącza, może
to być inny plik na twojej stronie, może też być inne miejsce w sieci In-
ternet.
7 Wpisz tekst http://www.zoo.pl/sawanna_afrykanska.html w
polu tekstowym URL (powyższy adres nie istnieje, ale dobrze ilu-
struje sposób działania pola URL).
Wprowadzony adres URL pojawi się poniżej nazwy warstwy w palecie
Optimize.
8 Powtórz krok 3 dla wszystkich kontynentów, użyj tych samych
ustawień, z wyjątkiem pola URL, które wypełnij według własnego
uznania.
9 Zapisz zmiany.
Podgląd i dopasowanie zakresu gamma dla różnych systemów
Sprawdzimy teraz czy jasność naszego obrazu jest odpowiednie dla
większości monitorów i dla różnych systemów operacyjnych. System
Windows z reguły wyświetla ciemniejsze średnie tony niż system Mac
OS. Aby być pewnym jak będzie wyglądać nasz obrazek na różnych sy-
stemach trzeba podejrzeć to i ewentualnie skorygować.
1 W palecie narzędzi, kliknij na przycisk Toggle Image Maps Visibi-
lity - , co spowoduje ukrycie linii oznaczających granice mapowa-
nia obszarów.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
23
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
2 Wybierz View Preview Standard Macintosh Color lub View
Preview Standard Windows Color, w ten sposób zasymulu-
jesz wygląd obrazu w dwóch różnych systemach operacyjnych.
Jeśli obraz był tworzony w systemie Windows, pojawi się on jako ja-
śniejszy w systemie Mac OS. Jęsli było odwrotnie i obrazek był tworzo-
ny w systemie Mac OS, pojawi się on jako ciemniejszy w systemie Win-
dows.
3 Wybierz Image Adjust Gamma.
W oknie dialogowym, które się teraz pojawi, masz możliwość automa-
tycznej korekcji dla wybranego systemu operacyjnego oraz masz moż-
liwość ręcznej korekcji.
4 Ponieważ pracujemy w systemie Windows, kliknij na przycisk Win-
dows to Macintosh. W ten sposób możemy podejrzeć, w jaki spo-
sób obrazek będzie wyglądać w systemie Mac OS. Kliknij na OK, aby
zamknąć okno Gamma.
5 Wybierz File Save Optimized As.
6 Z menu Zapisz jako typ okna dialogowego Save Optimized As,
wybierz Images Only a nazwę pliku pozostaw taką jaką zapropo-
nuje komputer.
7 Podejrzyj teraz poczynione zmiany w przeglądarce internetowej za
pomocą polecenia File Preview In, i wybraniu zainstalowanej
przeglądarki internetowej.
Zobacz jak i na jakich obszarach działają hiperłącza, przeanalizuj kod
strony, który jest wyświetlony poniżej mapy zoo.
8 Zamknij przeglądarkę i wróć do programu ImageReady.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
24
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
Tworzenie plików HTML
Podczas zapisywania mapy obrazka w pliku HTML, podstawowe tagi
HTML, niezbędne do prawidłowego wyświetlenia obrazka na stronie
WWW, będą utworzone automatycznie. Najprostszą droga, aby to osią-
gnąć jest wybranie, podczas zapisywania zoptymalizowanej grafiki,
opcji HTML and Images. Od momentu, kiedy po raz pierwszy zostaną te
pliki utworzone, będzie ich można w prosty sposób uaktualniać, np. po
dokonanych zmianach w adresach URL.
1 W programie ImageReady, wybierz File Save Optimized As.
2 W oknie dialogowym Save Optimized As, w polu Zapisz jako typ,
wybierz HTML and Images, pozostaw domyślną nazwę pliku i klik-
nij OK.
Po wybraniu tej opcji zapisu zoptymalizowanego obrazu, zostaną utwo-
rzone strony HTML, zawierające mapę wyświetlanego obrazu oraz pliki
graficzne. Pliki HTML będą maiły taką samą nazwę jak obrazki z wyjąt-
kiem rozszerzenia, które w tym przypadku będzie .html.
3 W polu dialogowym Replace Files, kliknij Replace, aby zastąpić
już istniejące pliki.
Teraz zmienimy jedno odwołanie URL a następnie uaktualnimy strony
HTML.
4 Wybierz narzędzie Image Map Select Tool - , które jest ukryte
pod narzędziem Rectangle Image Map Tool - .
5 Kliknij w dokumencie, aby zaznaczyć obszar Sawanna Afrykańska
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
25
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
6 W palecie Image Map zmień adres URL na:
http://www.zoo.pl/sawanna _afrykanska_nowa.html
7 Wybierz File Update HTML.
8 W oknie dialogowym Update HTML, wybierz plik
L10_optym_pocz3.html i kliknij Otwórz.
9 W oknie dialogowym Replace Files, kliknij Replace.
10 Kliknij OK, aby zamknąć komunikat o aktualizacji.
11 Zamknij obrazek i ewentualnie zapisz zmiany.
Wsadowy proces optymalizacji plików
ImageReady wspiera wsadowy proces optymalizacji pliku, wykonuje do
za pomocą specjalnego dropletu, który zawiera akcję dla ImageReady
przetwarzającą jeden lub więcej plików. Dropletu są proste w tworzeniu
i użyciu. Aby utworzyć dropletu, należy ikonę dropletu przeciągnąć z
menu Optimize na pulpit systemowy. Aby użyć dropletu należy przecią-
gnąć pliki da ikonę dropletu na pulpicie.
1 W programie ImageReady otwórz jakikolwiek plik z katalogu Zdję-
cia z bieżącej lekcji.
2 Poeksperymentuj z dowolnymi ustawieniami palety Optimize, tak,
aby uzyskać satysfakcjonujące wynik.
3 Następnie przeciągnij ikonę dropletu ( ) z palety Optimize i
umieść ją na pulpicie. Możesz też kliknąć na ikonę dropletu i zapisać
go w dowolnym katalogu pod dowolną nazwą.
4 Zamknij program ImageReady, bez zapisywania zmian w otwar-
tym pliku.
5 Przeciągnij teraz katalog Zdjęcia na ikonę dropletu. Zostanie auto-
matycznie otworzony program ImageReady a każdy z plików, któ-
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
26
Lekcja 10
Adobe Photoshop  Optymalizacja grafiki dla WWW
re znajdowały się w katalogu zostaną automatycznie przetworzone i
zapisane pod ta samą nazwą i w tym samym katalogu.
Wszystkie pliki, które znajdowały się w folderze Zdjęcia zostały prze-
tworzone według tego samego algorytmu, możesz się o tym przekonać
otwierając każdy z obrazków osobno.
Na tym kończymy nasze zajęcia z optymalizacji plików.
Pytania Kontrolne
1 Jakie różnice, na korzyść programu ImageReady, zauważyłeś przy
optymalizacji grafiki, w porównaniu z Photoshopem?
2 Co to jest tabela kolorów?
3 W jaki sposób uchronić się przed zmianą kolorów podczas publiko-
wania stron WWW?
4 Kiedy ma miejsce dither przeglądarki i jak można zminimalizować to
zjawisko?
5 Omów najważniejsze kroki, jakie należy podjąć w celu optymalizacji
pliku dla formatu GIF i JPEG.
6 Jakie mogą być negatywne skutki zastosowania formatu PNG?
7 W jakim celu jest stosowany kolor matowania w obrazkach GIF?
8 Jaka różnica występuje przy stosowaniu przezroczystego koloru oraz
techniki matowania?
9 Omów procedurę tworzenia mapy obrazu?
10 Jakie występują różnice między techniką slice i mapą obrazu?
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław