10

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 wydzielenie 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 wielkości pliku

• Dopasowanie działania mechanizmu dithering w zależności od rodzaju rysunku

• Definiowanie przeź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 opanowaniem materiału. Wykonywane ćwiczenia dotyczą programu Adobe ImageReady. Przygotuj się do przećwiczenia lekcji i skopiuj do lokalnego katalogu Moje dokumenty katalog Photoshop-Lekcja10 z podanej 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 zachodzą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 zastosowanym 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 do dyspozycji paletę jedynie 256 kolorów, przez co nie nadaje się on do zapisywania zdjęć. Format GIF umożliwia tworzenie obrazków z przeź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 internetowych 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. Techniki 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ą obsługiwaną przez formaty Photoshopa oraz niektóre formaty Windows. Technika LZW (Lemple-Zif-Welch) jest kompresją bezstratną obsługiwaną 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).

Po wybraniu kompresji JPEG, użytkownik określa jakość obrazka poprzez wybranie opcji z menu Jakość, przesunięcie suwaka Jakość lub wpisanie wartości od 1 do 12 w polu Jakość. Najlepsze efekty na wydruku 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 PostScriptu. (CCITT jest skrótem od francuskiej nazwy International Telegraph and Telekeyed Consultive Committee.) Kodowanie ZIP jest kompresją bezstratną obsługiwaną przez format PDF. Tak samo, jak w przypadku LZW, kompresja ZIP jest najskuteczniejsza 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 Photoshopie 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ązania 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.

• Uruchom program Adobe Photoshop.

• 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 zeskanowanych zdjęć zwierząt w Photoshopie. Aktualny rozmiar pliku jest zdecydowanie za duży, aby go było można umieścić na stronie internetowej. Porównamy teraz różne formaty i ustawienia kompresji, aby osiągnąć najmniejszy rozmiar pliku oraz najlepszą jakość obrazu.

• Wybierz File Save for Web.

• 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 doprowadzić do jak najlepszego przybliżenia oryginału, bez nadmiernego rozrostu rozmiaru pliku.

• 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.

• Przesuń myszkę nas obrazek w górnym prawym rogu. Jest on teraz zaznaczony, o czym świadczy czarna obwódka wokół niego. Wskaźnik myszki przybierze postać ręki, będziesz mógł przesuwać widoczny fragment i zobaczyć inne części obrazu.

• Przysuń teraz powiększony obraz tak, aby zobaczyć napis Tropikalne Lasy Deszczowe.

• Wybierz teraz GIF 128 Dithred z sekcji Settings z prawej strony okna dialogowego.

Zauważ ciemne grupy pikseli o jednolitym kolorze wokół tekstu oraz na dziobie papugi.

Teraz wykorzystamy dwa dolne okna, aby zobaczyć i porównać jak wygląda kompresja w formatach: JPEG i PNG.

• Kliknij myszką na dolną lewą wersję obrazu, aby ją wybrać.

• 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ą jakość obrazu, ale nie doprowadzając do nadmiernego rozrostu wielkości pliku.

• 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.

• Wybierz ustawienie JPEG Medium.

Jakość grafiki jest wciąż do zaakceptowania, a rozmiar pliku prawie dwukrotnie został zredukowany.

• Poeksperymentuj z różnymi ustawieniami, dobierz je ręcznie w menu Settings, kieruj się jakością obrazu i wielkością pliku.

• Kliknij teraz na prawym dolnym obrazku, aby go wybrać.

• 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 Medium, 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.

• Wybierz teraz wersję z lewego dolnego brzegu.

• W ustawieniach włącz opcje Progressive.

Ta opcja powoduje to, że podczas ładowania pliku z serwera cały proces 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.

• Kliknij teraz na przycisk OK w menu z prawej strony. W oknie dialogowym podaj nazwę pliku L10_optym_pocz1.jpg i zapisz w tym samym katalogu, w którym znajduje się oryginalny plik.

• Zamknij oryginalny plik bez zapisania zmian.

Użycie kanałow do modyfikacji jakości formatu JPEG (tłumaczenie z wbudowanej pomocy Adobe Photoshop) Przy używaniu kanału alfa do optymalizacji jakości obrazka JPEG, obszary białe posiadają najwyższą jakość, a czarne obszary maski charakteryzują 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: W panelu/palecie Optimize, zaznaczyć ustawienie JPEG z menu Settings lub wybrać opcję JPEG z menu formatów. Kliknąć na przycisku kanału, umieszczonym na prawo od pola Quality. W oknie Modify Quality Setting, zaznaczyć wybrany kanał z menu Channel. W ImageReady, użytkownik może utworzyć nowy kanał alfa na podstawie bieżącego zaznaczenia, korzystając z polecenia Save Selection. Aby obejrzeć efekty wyważonej optymalizacji, należy zaznaczyć opcję Preview. 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. Kliknąć na OK.

Optymalizacja grafiki w formacie GIF

Teraz zajmiemy się optymalizacją plików w formacie GIF, w których zazwyczaj występują większe obszary o jednolitym kolorze. Pracując w programie ImageReady, będziemy porównywać wpływ różnych ustawień 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.

• Zamknij teraz program Program Photoshop i uruchom ImageReady.

• Otwórz plik L10_optym_pocz2.psd z katalogu z aktualną lekcją.

• Kliknij na zakładkę 2-Up w oknie dokumentu.




Wersja zoptymalizowana jest wybrana i wyświetlana w prawej części okna.

• W palecie Optimize wybierz GIF 128 No Dither z menu Settings.




• Wybierz opcję Perceptual z rozwijanego menu Color Reduction Algorithm (poniżej pola z wyborem formatu pliku).

Powyższe ustawienie dotyczy metody redukcji kolorów, możesz zastosować 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ą reprezentacją 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 niebieskich. Większość obrazków składa się z kolorów określonych obszarów spektrum.

• Web - używa standardowej tabeli 216-kolorów znanych w 8-bitowych (256 kolorów) paletach Windows i Mac OS. Opcja zapewnia, że przeglądarki korzystające z kolorów 8-bitowych nie będą używały ditheringu przy wyświetlaniu takich obrazków. (Paleta jest także zwana Bezpieczną paletą Weba.) Jeśli obrazek posiada mniej kolorów, niż to określono w palecie kolorów, to nieużywane kolory są usuwane. Korzystanie z palety Web może powiększyć pliki i jest zalecane tylko dla uniknięcia ditheringu przeglą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 obrazka.

• Mac OS lub Windows - używa domyślnej 8-bitowej palety systemu 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żywane 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 parametry dotyczące obydwu wersji obrazu.

A - Rozmiar pliku oraz czas załadowania zoptymalizowanej wersji pliku B - Rozmiar pliku wersji oryginalnej oraz zoptymalizowanej

• 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.

• Jeśli nie jest teraz widoczna paleta Color Table, wybierz Window Show Color Table.

Małe białe romby oznaczają kolory zabezpieczone przed ditheringiem

Ta paleta pokazuje tabelę kolorów przygotowaną przez paletę Perceptual dla naszego obrazku mapy zoo. Białe romby na niektórych kolorach oznaczają, że będą one bezpieczne w przeglądarkach internetowych i nie będą poddawane ditheringowi (symulacji nieistniejącego koloru). 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

• Wybierz Sort By Hue, z menu palety Color Table.

Teraz zobaczymy jak wpływają inne ustawienia palety Optimize na wygląd obrazu.

• 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 dostosowana teraz do nowych wymogów.

• Poeksperymentuj teraz z różnymi ustawieniami i analizuj wygląd obrazu, wyciągnij z tego wnioski.

Redukcja tabeli kolorów

W celu lepszej kompresji pliku, możemy zmniejszyć całkowitą ilość koloró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.

• W palecie Optomize wybierz opcję Perceptual.

• W oknie dokumentu zmień powiększenie do 200% lub więcej, abyś mógł zobaczyć na obrazie wszystkie drobne detale.

• Wybierz zoptymalizowany obraz a następnie przesuń obraz do miejsca na mapie Tropikalne Lasy Deszczowe, tak, aby było ono dobrze widoczne.

• 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 Sawanna Afrykańska mają zupełnie odmienne kolory, a w części Arktyczna Pustynia w ogóle nie są widoczne.

• Przesuń teraz obraz na inny obszar mapy, może na początek na część Sawanna Afrykańska lub zmień powiększenie do 100%.

• 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.

• 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

• Kliknij teraz na przycisk Lock button -
  , w dolnej części palety Color Table, co spowoduje zablokowanie wybranego koloru.

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.

• Powtórz teraz procedurę blokowania koloru dla sylwetek zwierząt znajdujących się w części Arktyczna Pustynia.

• Zredukuj powtórnie ilość kolorów do 32.

Teraz zablokowane kolory zostały w palecie, niestety pojawiły się nowe przesunięcia kolorów.

• Zmień ilość kolorów, znów na 128.

• 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.

• Po zakończeniu eksperymentów, zapisz zmiany w pliku, ale nie zamykaj go.

Kontrola Ditheringu

Być może zauważyłeś, że przy niektórych ustawieniach opcji optymalizacji 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 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 zoptymalizowanej wersji obrazka, których nie ma w palecie kolorów przeglą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 bezpiecznych kolorów Weba.

Dither, który tworzy aplikacja można przeglądać bezpośrednio w programie 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 ditheringu. 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.

• Upewnij się, że masz ustawione następujące opcje optymalizacji: format GIF, paleta Perceptual, ilość kolorów 32.

• Zmień teraz algorytm tworzenia ditheringu z opcji No Dither na Diffusion.

• Wprowadź wartość 100% w polu tekstowym Dither.

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 tekstem, które stanowiły wcześniej jednolite zlepek koloru, teraz wyglądają znacznie lepiej. Jednak cały zielony odcinek mapy Tropikalne Lasy Deszczowe nie wygląda teraz najlepiej j nie może być zaakceptowany.

• 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 przypadku zmieni w niewielkim stopniu cień pod tekstem, nie ruszając wogóle zielonego tła.

• Wróć teraz z ustawieniem mocy ditheringu na 100%.

• 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.

• 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 przeglą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 palecie Web. Ponieważ paleta Web zawiera kolory, które są stosowane zarówno w systemie Windows jak i Mac OS, dlatego obrazki przygotowane z jej udziałem będą wyglądały identycznie na obydwu platformach, raz nie będzie wykorzystywany mechanizm ditheringu przeglądarki.

• Przy otwartym, optymalizowanym pliku L10_optym_pocz2.psd, uaktywnij 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.

Następnym naszym krokiem będzie przesunięcie jednego z kolorów do palety kolorów Web, zmniejszy to dithering stosowany przez przeglądarkę.

• Wybierz próbnik koloru (Eyedropper Tool -
  ) i kliknij na brązowej powierzchni poddanej ditheringowi. Próbka koloru pojawi się teraz w palecie Color Table.

• 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.

• Zapisz zmiany w pliku

Tworzenie obrazków z przeźroczystym tłem

Zastosowanie przeźroczystego tła pozwala na umieszczenie grafiki o nieregularnych kształtach na dowolnym tle na stronie WWW. Powierzchnie, które znajdują się za zewnątrz obiektu, definiuje się jako przeźroczyste, w ten sposób tło strony jest przez nie widoczne. Istnieje możliwość utworzenia przeź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 graficznego 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żliwe było utworzenie przezroczystości tła lub otoczki tła w obrazku zoptymalizowanym. 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ę usunięcia tła, za pomocą magicznej gumki - Magic Erazer.

• Przełącz okno dokumentu w tryb oryginalnego obrazu, kliknij na zakładce Original.

• 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 przeźroczyste. 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.

• W palecie Layers, kliknij dwukrotnie na warstwie Background. W oknie dialogowym Layer Options, nie zmieniaj żadnych opcji i kliknij OK.

Narzędzie Magic Erazer Tool usuwa wszystkie piksele o wskazanym kolorze po pojedynczym kliknięciu na tym kolorze. Możemy użyć tego narzędzia do usunięcia w całości białego koloru z przekształconej warstwy. 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 utworzyć wstępną selekcję, która wykluczy obszary, które powinny pozostać nietknięte.

• Wybierz narzędzie Marquee Toll -
  .

• Narysuj prostokątna selekcję wokół mapy zoo tak jak pokazano na rysunku poniżej.





• Wybierz Select Inverse, aby wybrać poza zaznaczonym przed chwilą obszarem.

• Wybierz narzędzie Magic Erazer Tool-
  , które jest ukryte pod zwykłą gumką Erazer Tool -
  .

• W opcjach narzędzia odznacz opcję Contiguous, co pozwoli na usunięcie wszystkich odizolowanych sekcji białego koloru, np. między liśćmi.

• 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.

• W menu palety Optimize, wybierz polecenie Show Options.

• Upewnij się, że w opcjach palety Optimize jest zaznaczona pozycja Transparency.

Opcja ta pozwala na przekonwertowanie i zachowanie jako przezroczystych, wszystkich w zoptymalizowanym obrazie, pikseli, które w oryginalnym obrazie mają większą przezroczystość niż 50%.

• Wybierz Select Deselect.

• 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 wymieszania 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 Opacity. Po zaznaczeniu opcji Ttransparency, matowanie jest stosowane tylko 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ą wymieszane z tłem. Funkcja zapobiega występowaniu efektu aureoli podczas umieszczania obrazka wygładzonego na kolorze innym, niż kolor tła oryginału obrazka. Funkcja zapobiega wystąpieniu nierównych krawędzi w obrazkach GIF z obszarami przezroczystymi o wyraźnych krawędziach.

Aby zobaczyć efekt działania przezroczystego tła, możesz wykorzystać podgląd optymalizowanego w formacie GIF obrazu w przeglądarce internetowej. 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.

• Kliknij teraz na rozwijane menu Matte w palecie Optimize, wybierz kolor inny niż biały i kliknij OK.

• Wybierz teraz File Preview In, i wybierz przeglądarkę Internetową zainstalowaną w twoim komputerze.

Obraz z mapą zoo pojawi się teraz w przeglądarce internetowej z kolorem tła takim, jaki wybrałeś w punkcie 14.

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ą widoczne, to jednak one ciągle zajmują miejsce w pliku. Możemy przyciąć te obszary i tym samym dodatkowo poprawić optymalizację grafiki.

• Wybierz komendę Image Trim.

Komenda Trim pozwala pozbyć się obszarów, które nie wchodzą do naszego obrazu przy założeniu, że są one przezroczyste lub wypełnione określonym kolorem.

• W oknie dialogowym Trim, wybierz opcję Transparent Pixels a następnie kliknij OK.

Nadmiarowe powierzchnie zostaną wycięte.

• Wybierz File Save Optimized As, w oknie dialogowym użyj domyślnej nazwy pliku L10_optym_pocz2.gif.

• 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 tworzyć mapy obrazu przetwarzane zarówno po stronie serwera jak i klienta.

Tworzenie i podglądanie map obrazu (tłumaczenie z wbudowanej pomocy Adobe Photoshop) Mapy obrazka umożliwiają połączenie obszaru obrazka z URL-em. Użytkownik może określić kilka obszarów połączonych (obszarów map obrazka) 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 obszarach 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 źródłowego w postaci strony internetowej. Użycie map obrazka zachowuje bez zmian eksportowany obrazek w postaci jednego pliku, a slice eksportują obrazek jako oddzielny plik. Inna różnica polega na tym, że mapy obrazka umożliwiają łączenie okrągłych, wielobocznych lub prostoką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 warstwach. 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.

• Otwórz plik L10_optym_pocz3.psd.

Mapa zoo wygląda podobnie jak w poprzednich punktach, z tym wyjątkiem, ż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.

• W palecie Optimize wybierz predefiniowane ustawienie GIF 64 Dithered.

• W palecie Layers wybierz warstwę Sawanna Afrykańska

• Wybierz Layer New Layer Based Image Map Area.

• Wybierz Window Show Image Map, aby wyświetlić paletę Image Map.

• 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 obszaru 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 Internet.

• Wpisz tekst http://www.zoo.pl/sawanna_afrykanska.html w polu tekstowym URL (powyższy adres nie istnieje, ale dobrze ilustruje sposób działania pola URL).




Wprowadzony adres URL pojawi się poniżej nazwy warstwy w palecie Optimize.

• 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.

• 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 systemach trzeba podejrzeć to i ewentualnie skorygować.

• W palecie narzędzi, kliknij na przycisk Toggle Image Maps Visibility -
  , co spowoduje ukrycie linii oznaczających granice mapowania obszarów.

• Wybierz View Preview Standard Macintosh Color lub View Preview Standard Windows Color, w ten sposób zasymulujesz 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ł tworzony w systemie Mac OS, pojawi się on jako ciemniejszy w systemie Windows.

• Wybierz Image Adjust Gamma.

W oknie dialogowym, które się teraz pojawi, masz możliwość automatycznej korekcji dla wybranego systemu operacyjnego oraz masz możliwość ręcznej korekcji.




• Ponieważ pracujemy w systemie Windows, kliknij na przycisk Windows to Macintosh. W ten sposób możemy podejrzeć, w jaki sposób obrazek będzie wyglądać w systemie Mac OS. Kliknij na OK, aby zamknąć okno Gamma.

• Wybierz File Save Optimized As.

• Z menu Zapisz jako typ okna dialogowego Save Optimized As, wybierz Images Only a nazwę pliku pozostaw taką jaką zaproponuje komputer.

• 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.

• Zamknij przeglądarkę i wróć do programu ImageReady.

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.

• W programie ImageReady, wybierz File Save Optimized As.

• W oknie dialogowym Save Optimized As, w polu Zapisz jako typ, wybierz HTML and Images, pozostaw domyślną nazwę pliku i kliknij OK.




Po wybraniu tej opcji zapisu zoptymalizowanego obrazu, zostaną utworzone strony HTML, zawierające mapę wyświetlanego obrazu oraz pliki graficzne. Pliki HTML będą maiły taką samą nazwę jak obrazki z wyjątkiem rozszerzenia, które w tym przypadku będzie .html.

• 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.

• Wybierz narzędzie Image Map Select Tool -
  , które jest ukryte pod narzędziem Rectangle Image Map Tool -
  .

• Kliknij w dokumencie, aby zaznaczyć obszar Sawanna Afrykańska

• W palecie Image Map zmień adres URL na: http://www.zoo.pl/sawanna _afrykanska_nowa.html

• Wybierz File Update HTML.

• W oknie dialogowym Update HTML, wybierz plik L10_optym_pocz3.html i kliknij Otwórz.

• W oknie dialogowym Replace Files, kliknij Replace.

• Kliknij OK, aby zamknąć komunikat o aktualizacji.

• 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.

• W programie ImageReady otwórz jakikolwiek plik z katalogu Zdjęcia z bieżącej lekcji.

• Poeksperymentuj z dowolnymi ustawieniami palety Optimize, tak, aby uzyskać satysfakcjonujące wynik.

• 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ą.





• Zamknij program ImageReady, bez zapisywania zmian w otwartym pliku.

• Przeciągnij teraz katalog Zdjęcia na ikonę dropletu. Zostanie automatycznie otworzony program ImageReady a każdy z plików, któ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 przetworzone 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

• Jakie różnice, na korzyść programu ImageReady, zauważyłeś przy optymalizacji grafiki, w porównaniu z Photoshopem?

• Co to jest tabela kolorów?

• W jaki sposób uchronić się przed zmianą kolorów podczas publikowania stron WWW?

• Kiedy ma miejsce dither przeglądarki i jak można zminimalizować to zjawisko?

• Omów najważniejsze kroki, jakie należy podjąć w celu optymalizacji pliku dla formatu GIF i JPEG.

• Jakie mogą być negatywne skutki zastosowania formatu PNG?

• W jakim celu jest stosowany kolor matowania w obrazkach GIF?

• Jaka różnica występuje przy stosowaniu przezroczystego koloru oraz techniki matowania?

• Omów procedurę tworzenia mapy obrazu?

• Jakie występują różnice między techniką slice i mapą obrazu?

26

Lekcja 10

Adobe Photoshop - Optymalizacja grafiki dla WWW

25

Lekcja 10

Adobe Photoshop - Optymalizacja grafiki dla WWW

Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław

Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław

B

A

---