Pamiętaj, że Twoje grafiki internetowe prawie zawsze będą oglądane w ich oryginalnych wymiarach. Mimo że o wyborze formatu eks­por­to­wa­­nego pliku możesz decydować na podstawie powiększonego wi­do­ku grafiki, skala tego widoku jest nieistotna dla ostatecznego wy­glądu grafiki.

Rysunek 15.9.

Po powiększeniu jednego z widoków, wszystkie pozostałe także zostaną powiększone

W celu przewinięcia podglądu powiększonego widoku bez konieczności wy­łą­cza­nia narzędzia Zoom, wciśnij i przytrzymaj klawisz spacji, aby tym­cza­sowo przełączyć się na narzędzie Hand.

Oto lista kontrolek położonych od lewej do prawej:

u         First Frame (Pierwsza klatka). Wyświetla pierwszą klatkę obrazka.

u         Play/Stop (Odtwarzaj/Zatrzymaj). Odtwarza wszystkie klatki po kolei. Pod­czas odtwarzania ikona znajdująca się na przycisku zamieniana jest na kwa­drat. Kliknięcie tego kwadratu powoduje zatrzymanie odtwarzania.

u         Last Frame (Ostatnia klatka). Wyświetla ostatnią klatkę obrazka.

u         Current Frame (Aktualna klatka): Wyświetla numer bieżącej klatki obrazka.

u         Previous Frame (Poprzednia klatka). Wyświetla klatkę znajdującą się przed aktualnie wyświetlaną.

u         Next Frame (Następna klatka). Wyświetla klatkę znajdującą się za aktualnie wyświetlaną.

Oprócz oglądania poszczególnych klatek animacji, często wykorzystuję kontrolki do po­ruszania się pomiędzy poszczególnymi klatkami w przyciskach reagujących na zda­rze­nia myszy. Pamiętaj, że każda klatka obrazka jest oddzielnym plikiem i może być indywidualnie optymalizowana.

Eksportowanie kolorów indeksowanych

Obrazki posiadające duże obszary jednolitych kolorów (przeważnie ilustracje, w prze­ciwieństwie do fotografii), które mogą posiadać ograniczoną liczbę kolorów są eks­por­towane w formatach plików z kolorami indeksowanymi. Formaty z kolorami indek­so­wanymi posiadają najwyżej 256 różnych kolorów, tzw. kolor 8-bitowy. Infor­macje o tym, które z 256 kolorów znajdują się w określonym pliku obrazka prze­cho­wywane są w indeksie kolorów. Stąd właśnie bierze się nazwa kolor indeksowany (indexed color).

Kluczową funkcją plików z kolorami indeksowanymi jest to, iż ich indeksy mogą być tak redukowane, aby zawierały jedynie kolory wykorzystywane w obrazku. Re­dukcja liczby kolorów ma zasadniczy wpływ na rozmiar fizyczny pliku. Właściwie jest to podstawowa metoda optymalizacji plików z kolorami indeksowanymi. Pełny do­stęp do indeksu kolorów daje jedna z palet Fireworks - Color Table (Tabela kolorów).

Gdy w grafice z kolorami indeksowanymi wymagane jest stworzenie wrażenia większej niż 256 liczby kolorów, można wykorzystać dithering (rozpraszanie). Rozproszone ko­lo­ry są tworzone za pomocą deseni składających się z pikseli o dwóch lub więcej różnych ko­lorach. Oko ludzkie nie jest wówczas w stanie odróżnić poszczególnych pikseli i postrzega je jako nowy kolor.

W tabeli 15.1 znajduje się zestawienie formatów plików z kolorami indeksowanymi, któ­re mogą być eksportowane z Fireworks.

Z wszystkich powyższych formatów tylko GIF i PNG 8 mogą być wykorzystywane w In­ternecie. GIF jest obecnie najpopularniejszym i najbardziej odpo­wied­nim dla Internetu formatem, gdyż jest obsługiwany przez ogromną liczbę przeglądarek in­ternetowych. Pod wieloma względami lepszym od GIF-a jest format PNG, ale jego funk­cje przezroczystości nie są jeszcze obsługiwane przez przeglądarki internetowe.

Zarówno GIF, jak i PNG są przystosowane do wykorzystywania przezroczystości, ale obec­ne przeglądarki słabo odczytują przezroczystość formatu PNG. Funkcja ta jest szcze­gólnie przydatna w Internecie, gdyż umożliwia tworzenie grafik o nieregularnych kształ­tach, jak również tworzenie wrażenia nakładających się na siebie obrazków. W obu formatach: GIF i PNG można opcjonalnie stosować przeplot. Obrazki z prze­plo­tem wy­świetlane są stopniowo, w miarę ładowania strony na komputer użytkownika.

Tabela 15.1.

Formaty plików z indeksowanymi kolorami

W 1-bitowym formacie WBMP każdy piksel jest przechowywany jako włączony lub wyłączony. Podczas oglądania obrazka WBMP na szarym wyświetlaczu urządzenia przenośnego mamy dzięki temu do czynienia z paletą jasno szarą i ciemno szarą. Niestety, pliki WBMP eksportowane z Fireworks mają puste ikony, ale zawsze można je rozpoznać po ich rozszerzeniu - ".wbmp"

Proces eksportu wszystkich obrazków z kolorami indeksowanymi jest bardzo zbliżony. Je­dynie format GIF posiada więcej opcji. Właśnie z powodu liczby opcji oraz tak dużej po­pularności w Internecie, w kolejnych podrozdziałach szerzej zajmiemy się formatem GIF. Gdy nauczysz się eksportować obrazki w formacie GIF, wiedzę tę będziesz mógł łat­wo wykorzystać do eksportu każdego innego formatu. Gdy w palecie Optimize wy­bie­rzesz inny format zamiast GIF, Fireworks usunie wszystkie zbędne kontrolki i po­zos­tawi jedynie potrzebne funkcje.

Paleta kolorów

Paleta jest grupą kolorów używanych w obrazku. Fireworks oferuje w rozwijanej liście In­dexed Palette palety Optimize dziewięć różnych palet kolorów oraz opcję Custom umo­żliwiającą modyfikowanie wbudowanych palet. Po zmodyfikowaniu palety możesz ją zapisać i dodać do listy Indexed Palette

Każda z dziewięciu palet (dostępnych dla wszystkich indeksowanych formatów plików, nie tylko dla GIF-a) daje dostęp do różnych grup kolorów. W grafikach internetowych wy­korzystywane są przeważnie palety WebSnap Adaptive (Internetowa adaptacyjna) oraz Web 216, zaś wszystkie pozostałe przydają się w innych sytuacjach. Oto ze­sta­wie­nie dziewięciu wbudowanych palet Fireworks:

u         Adaptive (Adaptacyjna): Analizuje wszystkie kolory używane w obraz­ku i wyszukuje 256 najbardziej odpowiednich. Nazwa adaptacyjna wzię­ła się stąd, że zamiast stałego zestawu kolorów, paleta ta używa 256 ko­lo­rów najlepiej dostosowanych do obrazka. Jeśli jest to możliwe, Fireworks przy­dzie­la wstępnie do obrazka paletę Web 216, a następnie pozostałe kolory, które mo­gą być niebezpieczne dla Internetu. Paleta Adaptive składa się więc z ko­lo­rów bezpiecznych i niebezpiecznych dla Internetu.

u         WebSnap Adaptive (Internetowa adaptacyjna): Podobna do palety Adaptive w tym sensie, że obie są pale­ta­mi, w których wybrane kolory są jak najbliższe oryginalnym. Po wstępnym do­pasowaniu kolorów bezpiecznych dla Internetu, pozostałe kolory są analizowane wzglę­dem ich wartości szesnastkowych. Wszystkie kolory bliskie kolorowi bez­piecznemu dla Internetu (których wartości są najwyżej o siedem większe lub mniej­sze od wartości koloru bezpiecznego dla Internetu) są za­mie­niane na ten kolor. Paleta ta nie daje absolutnej pewności, że wszystkie kolory będą bez­pieczne dla Internetu, ale większość z nich taka właśnie jest.

u         Web 216: Wszystkie kolory obrazka są przekształcane na najbliższe im kolory bezpieczne dla Internetu.

u         Exact (Dokładna). Używa oryginalnych wartości RGB kolorów. Przydatna je­dy­nie do pracy przy obrazkach posiadających mniej niż 256 kolorów. W przy­pad­ku obrazków z większą liczbą kolorów Fireworks wyświetli ostrzeżenie, mó­wiące, że powinieneś użyć palety Adaptive

u         Macintosh Gdy monitor jest ustawiony na wyświetlanie 256 kolorów, pasuje do palety używanej przez system operacyjny MacOS.

u         Windows Gdy monitor jest ustawiony na wyświetlanie 256 kolorów, pasuje do palety używanej przez system operacyjny Windows.

u         Grayscale (Skala szarości). Konwertuje obrazek na grafikę w skali szarości, o maksymalnie 256 odcieniach szarości.

u         Black&White (Czarno-biała). Redukuje obrazki do dwutonowych. Opcja Dit­her (Dithering) jest po wybraniu tej palety ustawiana automatycznie na 100%, ale możesz ją modyfikować.

u         Uniform (Jednolita). Wybierane są kolory występujące w spektrum w postępie ma­tematycznym. Paleta ta ma niewielkie zastosowanie w Internecie, ale może być wykorzystywana do nadawania obrazkom efektu posteryzacji poprzez usu­nię­cie dużej liczby kolorów i zredukowanie wartości funkcji Dither, która jest auto­matycznie ustawiana na 100%.

u         Custom (Własna). Po załadowaniu zapisanej palety lub zmodyfikowaniu jed­nej ze standardowych, Fireworks nadaje palecie nazwę Custom. Modyfikacji pa­let można dokonywać za pomocą rozwijanego menu palety Options

Jaką więc paletę powinieneś wybrać dla swojego obrazka? Prawdopodobnie najlepiej jest utworzyć grafikę w Fireworks z wykorzystaniem palety kolorów bezpiecznych dla In­ternetu, a następnie wyeksportować ją z paletą WebSnap Adaptive. Zyskasz wówczas pew­ność, że obrazek jak najbardziej wierny oryginałowi przy oglądaniu przez użyt­kow­ników posiadających monitory pracujące z 24-bitową lub większą głębią kolorów, a tak­że przez tych, których systemy nadal mogą wyświetlać jedynie 256 kolorów.

Pamiętaj, że nawet jeśli użyjesz w swojej grafice jedynie kolorów bezpiecznych dla In­ter­netu, końcowy rezultat może nieco odbiegać od Twoich oczekiwań. Fireworks przy wy­gładzaniu, tworzeniu zewnętrznych cieni i blasków generuje dodatkowe kolory, któ­re mogą nie być bezpieczne dla Internetu. Dlatego właśnie palety Adaptive i WebSnap Adap­tive pozwalają uzyskać najlepsze odwzorowanie kolorów obrazka we wszystkich prze­glądarkach internetowych.

Liczba kolorów

Jednym z najszybszych sposobów na zmniejszenie rozmiaru pliku jest zredukowanie licz­by kolorów obrazka. Przypomnijmy, że GIF jest formatem 8-bitowym co oznacza, że mo­że zawierać maksymalnie 256 kolorów, czyli 8 bitów informacji. Miłośnicy ma­te­ma­ty­ki wiedzą, że 256 to wynik podniesienia liczby 2 do ósmej potęgi. Każdy dodatkowy bit informacji powoduje wykładniczy przyrost liczby kolorów i rezerwuje określony przedział pamięci (zwiększając jednocześnie rozmiar pliku). Dlatego właśnie w roz­wijanej liście Number of Colors (Liczba kolorów) znajdują się pozycje: 2, 4, 8, 16, 32, 64, 128 i 256 (kolejne potęgi dwójki).

Paleta Color Table

Aby zapewnić całkowitą kontrolę nad poszczególnymi kolorami obrazka, kontrolki pa­lety Color Table umożliwiają dodawanie, edytowanie i usuwanie kolorów oraz zapi­sy­wanie i ładowanie całych ich palet. Fireworks pozwala na zaznaczenie próbki okre­ślo­nego koloru, a następnie jego zablokowanie, zamianę na najbliższy kolor bezpieczny dla Internetu lub przekształcenie na przezroczystość za pomocą jednego z przycisków dos­tępnych w palecie Color Table lub poleceń, które znajdują się w jej rozwijanym menu.

Zablokowanie jednego lub większej liczby kolorów grafiki pozwala upewnić się, że za­cho­wane zostaną wszystkie najważniejsze (używane w znakach firmowych klienta lub waż­ne dla całego projektu) kolory obrazka. Po zablokowaniu kolor nie będzie mógł zos­tać zmieniony bez względu na wybraną paletę. Możesz na przykład wyświetlić swój obra­zek, używając palety Web 216, zablokować wszystkie kolory, a następnie prze­łą­czyć paletę na Adaptive, aby poszerzyć zakres kolorów przy jednoczesnym zachowaniu wszys­tkich ko­lo­rów bezpiecznych dla Internetu. W próbkach kolorów bezpiecznych dla In­ter­ne­tu wy­świe­tlany jest mały romb, zaś dla zablokowanych kolorów w prawym dolnym rogu prób­ki pojawi się mały kwadrat (rysunek 15.10).

Swatches ... - Informacja o konieczności odbudowy próbek kolorów

Web-safe color - Kolor bezpieczny dla Internetu

Locked color - Kolor zablokowany

Delete color button - Usuń kolor

Lock color button - Zablokuj kolor

Snap to ... - Zamień na kolor bezpieczny dla Internetu

Transparent - Przezroczysty

Edit color - Edytuj kolor

W tabeli 15.2 znajduje się zestawienie wszystkich poleceń rozwijanego menu palety Co­lor Table. Niektóre z tych poleceń reprezentowane są również za pomocą przy­cisków.

Sortowanie względem "popularności"

W rozwijanym menu palety Color Table dostępne jest polecenie Sort by Popularity, któ­re jest bardzo pomocne przy zmniejszaniu rozmiaru pliku poprzez odrzucenie pewnej licz­by kolorów. Standardowo wszystkie próbki są wyświetlane w przypadkowej ko­lej­noś­ci. Po wybraniu z rozwijanego menu polecenia Sort by Popularity, w lewym górnym ro­gu palety jako pierwsze wyświetlane są najczęściej wykorzystywane kolory, zaś w pra­wym dolnym rogu - kolory najmniej wykorzystywane w obrazku. Ułatwia to wy­bór tych, które powinny zostać usunięte. Możesz kliknąć z wciśniętym klawiszem Shift dwa kolory, aby zaznaczyć te i wszystkie znajdujące się pomiędzy nimi kolory lub użyć kla­wisza Ctrl Command), aby zaznaczyć wiele niesąsiadujących ze sobą kolorów.

Tabela 15.2.

Zestawienie poleceń rozwijanego menu palety Color Table

Matte (Tło)

Przy oprawianiu fotografii w ramki, bardzo często są one umieszczane nad pewnym tłem, zapewniającym kontrast. Fotografia rzuca się wówczas bardziej w oczy. Fire­works wykorzystuje tę koncepcję i umożliwia projektantom eksportowanie swoich obraz­ków z wykorzystaniem różnych kolorów obszaru roboczego (bez konieczności mo­dyfikacji tego obszaru). Jednym z najczęściej występujących problemów doty­czą­cych przezroczystych GIF-ów jest niepożądana aureola, która powstaje przy tworzeniu zew­nętrznych cieni lub innych przejść kolorów nad różnymi odcieniami tła. Tradycyjną
me­todą zapobiegania takim problemom jest zmiana obszaru roboczego w programie gra­ficznym na taki, który będzie pasował do koloru tła strony internetowej. Roz­wią­za­nie to sprawdza się doskonale w niektórych sytuacjach, ale projektanci internetowi bar­dzo częs­to muszą wykorzystać tę samą grafikę w wielu różnych sytuacjach i umieszczać ją nad różnymi kolorami tła. Funkcja Matte pozwala na zachowanie jednej, głównej gra­fi­ki i eksportowanie dowolnej liczby jej kopii, które będą umieszczane na różnych tłach (rysunek 15.11).

Wybranie koloru Matte jest bardzo proste. Kliknij przycisk ze strzałką, który znajduje się obok opcji Matte, aby wyświetlić rozwijany próbnik kolorów. Wybierz jeden spo­śród tych, które znajdują się w próbniku lub użyj narzędzia Eyedropper do pobrania ko­lo­ru z ekranu. Aby przywrócić opcji Matte przezroczystość, kliknij znajdujący się w roz­wijanym próbniku przycisk No Color (Brak koloru).

Stratna kompresja GIF

Być może pamiętasz, że format GIF używa kompresji bezstratnej. Do czego więc służy znaj­dująca się w palecie Optimize opcja Loss (Strata)? Nazwa Lossy GIF nie oznacza ja­kie­goś nowego formatu plików, ale metodę optymalizacji obrazków. Umożliwia ona za­pi­sanie grafiki w pliku GIF o małym rozmiarze fizycznym. Przy określaniu idealnego ustawienia Loss bardzo przydatne są podglądy przedstawione na rysunku 15.12. Zazwyczaj zaczynam od ustawienia krańcowego, np. 60 lub 70 procent, a następnie stopniowo zmniejszam je, aż uzyskam możliwy do akceptacji wygląd obrazka.

Przekonałem się, że opcja Loss daje dobre wyniki z niektórymi obrazkami, zaś z innymi nie wypada najlepiej. Niekiedy - dopóki nie ustawisz wysokiej wartości opcji Loss
- po­trafi ona nawet zwiększyć rozmiar końcowego pliku. W przypadkach, gdy uda Ci się znacznie zmniejszyć rozmiar pliku określonego obrazka, ucieszysz się, że w swo­im zestawie narzędzi posiadasz opcję Loss

Dithering

Jednym ze sposobów (niekoniecznie najlepszym) usuwania obszarów jednolitych kolo­rów, które powstają w wyniku słabej zdolności obsługi koloru przez format GIF, jest za­sto­sowanie opcji Dither (Dithering). Po włączeniu tej opcji, Fireworks symuluje nowe ko­lory za pomocą deseni tworzonych z istniejących kolorów, czyli dzieje się to do­kład­nie tak samo jak w przypadku tworzenia wypełnienia Web Dither. Ponieważ nie można ogra­ni­czyć obszaru działania ditheringu i jest on stosowany do całej grafiki, jego rezultaty mo­gą być widoczne w końcowym obrazku. Dithering powoduje powstawanie wyraź­nych "kropek" (rysunek 15.13) i zwiększenie rozmiaru pliku. Poziom ditheringu można re­gulować za pomocą suwaka Dither Amount lub poprzez wpisanie żądanej wartości bez­pośrednio w odpowiednie pole tekstowe.

Type of ... - Rozwijana lista typów przezroczystości

Set ... - Ustaw kolor przezroczystości

Remove ... - Usuń kolor z indeksu przezroczystości

Add ... - Dodaj kolor do indeksu przezroczystości

Przezroczystość

Jednym z powodów, dla których format GIF jest stosowany o wiele częściej niż JPEG, jest możliwość zdefiniowania dowolnego koloru, a co za tym idzie również obszaru, obrazka GIF jako przezroczystości. Jak zostało już wcześniej wspomniane, przezroczystość jest funkcją umożliwiającą two­rze­nie grafik o nieregularnych kształtach. Do tworzenia przezroczystych obszarów w obraz­kach GIF można wykorzystywać kontrolki Fireworks pokazane na rysunku 15.14.

Oto dostępne w Fireworks kontrolki przezroczystości:

u         Type of Transparency option list (Lista Typ przezroczystości). Możesz wybrać je­den z typów przezroczystości: No Transparency (Brak przezroczystości), Index Trans­parency (Indeksowana przezroczystość) lub Alpha Transparency (Przezroczystość alfa). Domyślnie jako prze­zro­czys­tość przyjmowany jest kolor obszaru roboczego grafiki.

u         Add Color to Index Transparency (Dodaj kolor do indeksu przezro­czys­tości). Umożliwia tworzenie przezroczystości z dodatkowych kolorów, wybie­ra­nych z próbek kolorów lub próbkowanych z obrazka.

u         Remove Color from Index Transparency (Usuń kolor z indeksu przezro­czys­tości). Przekształca przezroczyste kolory z powrotem na oryginalne. Moż­na je pobierać z palety próbek lub bezpośrednio z obrazka.

u         Set Transparent Index Color button (Ustaw kolor przezroczystości). Umo­żli­wia zdefiniowanie pojedynczego koloru jako przezroczystości. Kolor ten moż­na pobrać z palety próbek lub bezpośrednio z obrazka.

Gdy kolor zostanie zdefiniowany jako przezroczystość, jego próbka i piksele w widoku Preview są zastępowane przez szaro-białą szachownicę (rysunek 15.15). Jako prze­zroczystość możesz zdefiniować dowolną liczbę kolorów.

Aby uczynić wybrane obszary obrazka GIF przezroczystymi:

1. Kliknij zakładkę Preview okna dokumentu, aby wyświetlić podgląd grafiki.

2. Wybierz z menu polecenie Window Optimize, aby wyświetlić paletę Optimize

3. Wybierz pozycję GIF z rozwijanej listy Export Format, która znajduje się w pa­le­cie Optimize

4. Aby jako przezroczystość zdefiniować kolor obszaru roboczego, wybierz z roz­wi­janej listy Type of Transparency opcję Index Transparent

5. Aby jako przezroczystość zdefiniować inny kolor niż kolor obszaru roboczego, klik­nij przycisk Set Transparent Index Color i wybierz kolor z palety próbek lub po­bierz go za pomocą kroplomierza z podglądu obrazka.

6. Aby zdefiniować więcej kolorów jako przezroczystość, kliknij przycisk Add Co­lor to Index Transparency i wybierz kolory z palety próbek lub pobierz je z pod­glą­du obrazka.

7. Aby przekształcić przezroczysty kolor z powrotem na oryginalny, kliknij przy­cisk Remove Color from Index Transparency i wybierz kolor z palety próbek lub pobierz go z podglądu obrazka.

8. Aby mieć jeszcze większą kontrolę nad przezroczystością obrazka, wybierz ko­lor lub kolory z palety Color Table i kliknij przycisk Transparent

Jak zostało wspomniane w opisie rozwijanej listy Type of Transparency, dostępne są dwa typy przezroczystości: Index Transparency (Indeksowana przezroczystość) i Alpha Trans­parency (Przezroczystość alfa). Index Transparency umożliwia zdefiniowanie jako przezroczystość dowolnego koloru. Można ją traktować jak przełącznik Włą­cz-Wyłącz. Alpha Transparency umożliwia stopniowanie przezroczystości - możesz two­rzyć różne odcienie kolorów. Więcej informacji o przezroczystości alfa znajdziesz w podrozdziale poświęconym formatowi PNG.

W formacie GIF przeważnie stosowana jest indeksowana przezroczystość, gdyż prze­zroczystość alfa obsługiwana jest jedynie przez format PNG. Twórcy Fireworks pozo­sta­wili jednak dostępną dla formatu GIF również przezroczystość alfa, pozwalającą uzy­skać nieco odmienne efekty. Po wybraniu opcji Alpha Transparency rejestrowany jest nowy kolor obszaru roboczego i zamieniany na przezroczystość. Czym takie działanie róż­ni się od przekształcenia koloru roboczego na przezroczystość, jakie ma miejsce w przy­padku opcji Index Transparency? Szybko zrozumiesz działanie tej funkcji i do­ce­nisz jej możliwości, gdy utworzysz obrazek, którego część będzie miała taki sam kolor jak tło (na przykład białe oczy przy białym kolorze obszaru roboczego). Prze­zro­czys­tość alfa, zastosowana w Fireworks do formatu GIF, pozostawia paletę kolo­rów nie­zmie­­nioną i zamienia na przezroczystość jedynie kolor obszaru roboczego (rysu­nek 15.16).

	Rysunek 15.16. Opcja Alpha Transparency umożliwiła utworzenie przezroczystości z białego koloru obszaru roboczego i pozwoliła na zachowanie koloru obszarów białych w pozostałych elementach grafiki
		Jeśli po wybraniu opcji Alpha Transparency nie zauważyłeś, aby został za­re­jestrowany jakiś nowy kolor, sprawdź, czy włączona jest opcja Op­ti­mized. Jeśli tak, oznacza to, że Fireworks połączył inne kolory, aby za­chować w grafice niezmienną liczbę kolorów.		Przeplot Znajdująca się w rozwijanym menu palety Optimize opcja Interlaced umożliwia two­rze­nie obrazków GIF, które są wyświetlane stopniowo w miarę pobierania ich z Internetu. W miarę przesyłania danych z serwera do przeglądarki internetowej, wyświetlanych jest co­raz więcej szczegółów obrazka. Mimo że wyeksportowanie grafiki z opcją Interlace nie powoduje jej szybszego ładowania z Internetu, pozwoli jednak osobom odwiedzającym stro­nę zorientować się, że odbywa się jakiś proces. Dołączanie przeplotu do gra­fiki jest kwestią gustu - jedni projektanci nie utworzą żadnej strony bez wyko­rzys­ta­nia tej opcji, inni są jej zdecydowanymi przeciwnikami. Ustawienia zachowane (Saved Settings) Cztery z sześciu dostępnych ustawień, które znajdują się w rozwijanej liście Saved Set­tings w palecie Optimize, dotyczy formatu GIF: u         GIF Web 216. Format GIF używający palety Web 216 u         GIF WebSnap 256. Format GIF używający palety WebSnap Adaptive i mak­sy­malnie 256 kolorów. u         GIF WebSnap 128. Format GIF używający palety WebSnap Adaptive i mak­sy­malnie 128 kolorów. u         GIF Adaptive 256. Format GIF używający palety Adaptive i maksymalnie 256 ko­lorów. Włączona zostaje opcja Optimized Używaj tych ustawień jako obowiązujących przy eksporcie grafiki w formacie GIF lub wy­korzystaj je jako punkt wyjścia do tworzenia własnych ustawień optymalizacji. Technika Fireworks: tworzenie obrazków przeznaczonych do wyeksportowania w formacie GIF Zanim rozpoczniesz pracę z paletą Optimize, możesz utworzyć obrazek "przyjazny" dla for­matu GIF, zwracając szczególną uwagę na tworzące go wzory pikseli, a także dowiedzieć się jak for­mat GIF kompresuje te piksele. Poświęcenie czasu na utworzenie obrazka bardziej przy­jaznego dla formatu GIF pozwala niekiedy uzyskać mniejsze rozmiary pliku niż za po­mocą metod oferowanych przez narzędzia eksportu Fireworks. Najprostszym sposobem na utworzenie dokumentu odpowiedniego dla formatu GIF jest do­łączenie dużych obszarów jednolitego koloru. Wszystkie zmiany pomiędzy pikselami są mniej kompresowane niż duże obszary jednolitych kolorów. Korzyści, które wy­ni­ka­ją ze stosowania w formacie GIF dużych obszarów jednolitych kolorów, za­de­mon­struję na małym eksperymencie. Utwórz nowy dokument o wymiarach 400 400 pik­se­li i wy­bierz kolor obszaru roboczego. Kliknij zakładkę Preview w oknie dokumentu i zwróć uwagę na mały rozmiar eksportowanego pliku - około 600 bajtów, czyli 0,6 K (być może będziesz musiał rozciągnąć okno dokumentu, aby zobaczyć informacje o roz­miarze pliku). Przejdź z powrotem do zakładki Original i za pomocą narzędzia Pen­cil narysuj znak X, który będzie stykał się ze wszystkimi narożnikami dokumentu. Klik­nij zakładkę Preview, a zobaczysz, że rozmiar pliku wzrósł do około 1,74 K, czyli pra­wie trzykrotnie. A wszystko przez cienki znak X. Innymi elementami zawierającymi duże obszary jednolitego koloru, doskonałymi do wy­eksportowania w formacie GIF są poziome linie. GIF kompresuje piksele od lewej do prawej, więc poziome linie składające się z pikseli o takich samych kolorach, będą dos­konale kompresowane. Bez kompresji, linia składająca się z czerwonych pikseli jest wy­rażana za pomocą informacji typu "czerwony piksel, czerwony piksel, czerwony pik­sel, czerwony piksel, czerwony piksel." Widzisz więc, że do opisu pięciu pikseli musi zo­stać użyte dość długie wyrażenie. Z wykorzystaniem kompresji GIF, ta sama linia mo­że zostać opisana za pomocą wyrażenia "czerwony piksel x 5." Już taki opis pozwala od­rzucić wiele informacji, a przy zapisie "czerwony piksel x 300" różnica staje się jesz­cze bardziej zauważalna. Oczywistym jest więc, że wykorzystanie w dokumentach po­zio­mych linii pozwoli znacznie zredukować rozmiar pliku GIF. Najprostszym sposobem na umieszczenie w obrazku większych ilości poziomych linii jest zastąpienie złożonych, chaotycznych wypełnień teksturami, takich jak Fiber, ty­mi, któ­re zawierają poziome linie (rysunku 15.17). Oba dokumenty są prawie takie sa­me, z tym wyjątkiem, że koło po lewej zostało wypełnione 50-procentową teksturą Fiber, zaś ko­ło po prawej - 50-procentową teksturą Lines. Przy takich samych ustawieniach eks­por­tu, dokument zawierający wypełnienie teksturą Lines ma cztery razy mniejszy roz­miar pliku.   Rysunek 15.17. Zastąpienie wypełnienia Fiber za pomocą tekstury składającej się z poziomych linii zredukowało rozmiar eksportowanego pliku z 19 kB do mniej niż 6 kB (rozmiary plików wyświetlane są obok zakładek podglądu). Spowodowane jest to dobrą kompresją długich poziomych linii składających się z podobnych pikseli w formacie GIF Wiele "zabłąkanych" pikseli pozostaje w obrazkach, które oryginalnie by­ły zapisane w formacie JPEG. Niekiedy obrazki przechodzą przez wie­le różnych rąk, zanim trafią w Twoje. Mam klientów, którzy mimo mo­ich protestów dostarczają prace graficzne, posiadające duże ob­sza­ry jednolitych kolorów (czyli doskonałe dla formatu GIF) w formacie JPEG. Co więcej - nie posiadają już oryginalnych plików zapisanych w for­macie PNG lub TIFF. Format JPEG jest dobry dla fotografii, ale znie­­­kształ­ca obszary jednolitych kolorów, tworząc w ten sposób wiele nie­­da­jących się skompresować "zabłąkanych" pikseli. Używaj poniżej opi­­sanej te­chni­ki do redukowania lub usuwania zabłąkanych pikseli i zaw­sze żądaj od swoich klientów obrazków zapisanych w formacie GIF.   Do usuwania zabłąkanych pikseli możesz użyć narzędzia Pencil (rysunek 15.18). Zmia­na koloru zabłąkanych pikseli na takie, jaki ma cały jednolity obszar pozwoli utworzyć więk­sze ilości jednolitych poziomych linii i zredukować rozmiar eksportowanego pliku. Aby usunąć zabłąkane piksele: 9. Wybierz narzędzie Pencil z palety narzędziowej. 10. Z próbnika koloru obrysu znajdującego się w palecie narzędziowej wybierz kro­plomierz i pobierz kolor dominujący w jednolitych obszarach obrazka. Rysunek 15.18. Powiększ obrazek i usuń wszystkie zabłąkane piksele, aby utworzyć większe obszary jednolitych kolorów, które są lepiej kompresowane przy eksporcie formatu GIF 11. Użyj narzędzia Pencil do pomalowania zabłąkanych pikseli kolorem jedno­li­tych obszarów. 12. Powtórz kroki od 2 do 3, dopóki nie usuniesz wszystkich zabłąkanych pikseli. Po powiększeniu obrazka wybierz z menu polecenie Window New Win­dow, aby utworzyć nowy, 100-procentowy widok obrazka, w którym bę­dziesz mógł śledzić wszystkie zmiany grafiki w jej naturalnych roz­miarach.   Eksportowanie obrazków fotograficznych Fotografie są najczęściej wyświetlane w 24-bitowym trybie True Color i są zapisywane prze­ważnie w formacie JPEG, zamiast w formatach posiadających ograniczone palety lub indeksowane kolory, takich jak GIF. Fotograficzne obrazki posiadają subtelne przej­ścia tonalne, których nie można odtworzyć za pomocą małych ilości kolorów i które mo­gą być rozpraszane (dithering) przez przeglądarki użytkowników pracujących ze standardem 256 kolorów. Co więcej - format JPEG doskonale kompresuje obrazki posiadające łagodne przejścia to­nalne do niewiarygodnie małych rozmiarów plików bez zauważalnej utraty jakości. Fakt, że format JPEG jest doskonały w tych zastosowaniach, w których GIF wypada ra­czej kiepsko, sprawia, że oba świetnie się uzupełniają i można je uznać za kom­ple­men­tar­ne wśród formatów grafiki internetowej. W tabeli 15.3 znajduje się zestawienie pełnokolorowych formatów plików, które można eks­portować z Fireworks. Ze wszystkich formatów wymienionych w tabeli 15.3, tylko JPEG i PNG mogą być wykorzystywane w Internecie. Maski alfa zawarte w 32-bitowym PNG są ignorowane przez przeglądarki, które odczytują wówczas jedynie 24 bity formatu PNG. Jeśli chcesz, aby obrazek był wyświetlany w jak najlepszej jakości i nie zależy Ci na zmniejszeniu rozmiaru pliku, użyj formatu PNG 24. Jeśli jednak najważniejsza jest dla Ciebie szyb­kość przesyłania danych, najlepszym wyborem jest format JPEG, zapewniający dos­ko­nałą jakość fotograficznych obrazków przy o wiele większej redukcji rozmiaru pliku niż ta, jaką zapewnia format PNG. Tabela 15.3. Pełnokolorowe formaty eksportu   Format Opis     JPEG Format plików graficznych opracowany przez Joint Photographic Experts Group. Używany dla prawie wszystkich pełnokolorowych obrazków stosowanych w Internecie. Jego stratna kompresja pozwala maksymalnie zredukować rozmiar fizyczny pliku     PNG 24, PNG 32 Portable Network Graphic. Oferuje stratną kompresję dającą większe rozmiary plików niż kompresja JPEG, ale zapewnia doskonałą jakość grafiki     TIFF 24, TIFF 32 Tag Image File Format. Format nie mający zastosowania w Internecie, ale często wykorzystywany w poligrafii     BMP 24 Bitmapa Microsoft. Format systemów operacyjnych Windows. Nie znajduje zastosowania w Internecie, ale doskonale sprawdza się przy przenoszeniu grafiki pomiędzy różnymi aplikacjami systemu Windows     PICT 24 (tylko Macintosh) Format graficzny systemów MacOS. Zawarte w nim informacje o wektorach nie są obsługiwane przez Fireworks. Nie znajduje zastosowania w Internecie, ale doskonale sprawdza się przy przenoszeniu grafiki pomiędzy różnymi aplikacjami systemu MacOS   Format pliku Photoshopa może także zawierać obrazki fotograficzne, jak również warstwy i inne atrybuty. Kwestie eksportu dokumentu Photoshopa z Fireworks są omówione w dalszej części rozdziału. Więcej informacji o maskach alfa znajdziesz w rozdziale 13.   JPEG Podczas gdy format GIF zmniejsza rozmiary plików poprzez zredukowanie liczby uży­wa­nych w obrazku kolorów, format JPEG to samo zadanie wykonuje poprzez od­rzu­­ca­nie pikseli. W metodzie tej wykorzystywany jest algorytm stratnej kompresji. Nazwa "stra­tna" bierze się stąd, że im niższa jakość obrazka tym traconych jest wię­cej jego pik­seli. Stosowany w JPEG algorytm jest bardzo dobry, gdyż poprzez zmniej­sza­nie parametru JPEG Quality (Jakość) pozwala na znaczne zredukowanie rozmiaru eks­portowanego pliku. Oto inne charakterystyczne cechy formatu JPEG: u         W obrazkach JPEG może być wyświetlanych ponad 16 milionów kolorów. Tak sze­roki (24-bitowy) zakres kolorów pozwala na odwzorowanie subtelnych przejść tonalnych fotograficznych obrazków. u         Mimo że w obrazku JPEG można wyświetlić prawie każdy kolor, żaden z nich nie może zostać przekształcony na przezroczystość. Jeśli więc obrazek wy­świe­tlany w przeglądarce powinien posiadać przezroczyste obszary, musi być za­pisany w formacie GIF. u         Aby obrazek JPEG mógł być stopniowo wyświetlany w miarę pobierania go z In­ternetu, musi zostać zapisany jako Progressive JPEG (Progresywny JPEG). Obra­zek jest wówczas tworzony stopniowo na ekranie monitora, podobnie jak GIF z przeplotem. Progresywne obrazki JPEG mają trochę lepszy algorytm kom­presji i mogą być zapisywane w plikach o mniejszych rozmiarach. Internet Explorer nie obsługuje w pełni progresywnych obrazków JPEG. Wy­świetla je jak zwykłe JPEG.   Jakość Podstawową metodą modyfikowania rozmiarów plików JPEG jest zmiana wartości pa­ra­metru Quality (Jakość). W Fireworks parametr Quality jest wyrażany w wartościach pro­centowych, w zakresie od 0 do 100%. Im wyższe wartości, tym mniejsza kompresja pli­ku i odwrotnie, im mniejsze wartości, tym odrzucanych jest więcej pikseli obrazka. Zaw­sze warto spróbować zredukować rozmiar pliku JPEG poprzez zmniejszanie war­toś­ci Quality, którą możesz także wpisać bezpośrednio w polu tekstowym. Algorytm kom­presji JPEG jest tak dobry, że rozmiary prawie wszystkich obrazków, które za­wie­ra­ją przejścia tonalne, można zmniejszyć bez zauważalnej utraty jakości (rysunek 15.19). Rysunek 15.19. W każdym z czterech podglądów zostały wykorzystane inne ustawienia jakości formatu JPEG. Dopiero po znacznym zmniejszeniu jakości obrazek (w prawym dolnym rogu) stał się nie do przyjęcia Z drugiej strony - zwiększanie wartości Quality ponad jej początkową wartość nie daje żadnych rezultatów. Algorytm JPEG doskonale radzi sobie z odrzucaniem pik­se­li i re­du­kowaniem rozmiarów plików, ale nie można dodać pikseli, aby zwiększyć ja­kość obrazka (zwiększysz jedynie rozmiar pliku i czas jego pobierania z Internetu). Po wykorzystaniu algorytmu JPEG, mała kompresja nie powoduje za­uwa­żalnej utraty jakości obrazka. Najpierw zanikają subtelne różnice w jasności i zabarwieniu grafiki. Im większa kompresja, tym obrazek sta­je się ciemniejszy i ma coraz mniejszy zakres kolorów.   Dobrym sposobem na porównanie różnych ustawień kompresji obrazków JPEG jest wy­korzystanie podglądu 4-Up. W lewym górnym panelu podglądu wyświetlany jest ory­ginalny dokument, który można potraktować jako punkt odniesienia dla wszystkich po­równań. W innym panelu podglądu możesz zredukować jakość do około 75%. Jeśli obra­zek nadal jest do zaakceptowania, w innym panelu zredukuj jakość do 50%. Przy ta­kich wartościach zaczniesz prawdopodobnie zauważać niepożądane efekty, więc w czwar­tym panelu możesz użyć pośrednich ustawień jakości, na przykład 65%. Upew­­nij się, że obrazek jest wyświetlany w naturalnych wymiarach. Powinieneś oglą­dać go tak sa­mo, jak będzie wyświetlany u internautów. Pamiętaj, że możesz rozciągnąć okno dokumentu, aby zwiększyć roz­mia­ry paneli podglądu.   Jakość selektywna Ustawienie Selective Quality funkcjonuje jak ustawienie Quality, z tą różnicą, że jego wartość ma zastosowanie tylko do obszarów zakrytych maską JPEG. Pozwala to na odizolowanie obszarów planu pierwszego i zastosowanie do nich wysokich ustawień Selective Quality, równocześnie stosując niskie ustawienia jakości dla pozostałej części obrazka. Mówiąc krótko, poświęcamy jakość mniej istotnych obszarów obrazka na rzecz wyższej jakości elementów ważniejszych. Fireworks 4 w wielu przypadkach umożliwia tworzenie jeszcze mniejszych obrazków JPEG, przy wykorzystaniu kombinacji dwóch ustawień - Selective Quality dla tekstu, przycisków i określonych obszarów określanych maską JPEG, oraz Quality dla reszty obrazka.   Maskę JPEG można utworzyć przy użyciu zaznaczenia Marquee, wybierając Modify Selective JPEG Save Selection as JPEG Mask. Fireworks przedstawia maskę JPEG, zgodnie z ustawieniem domyślnym, jako różową przeświecającą nakładkę (rysunek 15.20) Rysunek 15.20. Po dokonaniu konwersji zaznaczenia prostokątnego na maskę JPEG, program koloruje ją na różowo Jeżeli wcześniej już tworzyłeś obrazek JPEG zawierający tekst lub grafikę w jednolitym kolorze, wiesz, że proces kompresji JPEG wywiera niszczący wpływ na obrazki typu GIF. Tekst i obszary jednolitego koloru zmieniają się, tworząc brzydką mieszaninę. Ustawienia Selective Quality można dobrać tak, aby były one stosowane do obiektów tekstowych i do Button Symbols (symboli przycisków) naszych dokumentów, bez potrzeby indywidualnego zasłaniania maską JPEG każdego elementu. W tym celu należy wybrać polecenie Modify Selective JPEG Settings, aby wyświetlić okno dialogowe Selective JPEG Settings (rysunek 15.21), a następnie zaznaczyć pole Preserve Text Quality (Zachowaj jakość tekstu) i (lub) pole Preserve Button Quality (Zachowaj jakość przycisków). W tym samym oknie można również włączyć i wyłączyć ustawienia Selective Settings   Rysunek 15.21. W oknie dialogowym Selective JPEG Settings określamy, czy ustawienie Selective Setting ma obejmować również tekst i przyciski   Aby otworzyć okno dialogowe Selective JPEG Settings można również kliknąć przycisk Edit Selective Quality Options, pojawiający się w palecie Optimize, gdy jest ona ustawiona na JPEG. Rysunek 15.22. Tekst i obszar pod maską JPEG są wyraźne i ostre, gdyż ich ustawienia Selective Quality wynoszą 90. Pozostała część obrazka jest zaciemniona w związku z ustawieniem Quality wynoszącym 25 Wyostrzanie krawędzi Grafiki internetowe często są połączeniem fotografii, ilustracji i tekstu. JPEG jest właś­ci­wym formatem dla obrazków posiadających wiele przejść tonalnych, takich jak fo­to­gra­fie, ale tekst nakładany na zdjęcia może być w tym formacie nieostry, gdyż JPEG o wie­le lepiej radzi sobie z kompresją stopniowego przejścia koloru niż z kompresją obrazków, posiadających ostre kra­wę­dzie i nagłe zmiany kolorów. Przeszkody te pozwala przezwyciężyć opcja Fireworks - Sharpen JPEG Edges (Wyostrzanie krawędzi JPEG), którą można znaleźć w roz­wi­ja­nym menu palety Optimize Jak wskazuje nazwa tej opcji, Sharpen JPEG Edges przywraca niektóre ostre kra­wę­dzie, które mogły zostać utracone podczas kompresji JPEG. Wyostrzanie to jest naj­bar­dziej zauważalne w tekście i prostych obiektach graficznych, takich jak prostokąty, któ­re są nakładane na fotografie (rysunek 15.23). Wyostrzanie krawędzi jednak znacznie zwiększa rozmiary plików i czasami lepiej jest po prostu podnieść wartość ustawienia Quality dla całego obrazka. Rysunek 15.23. Dla obrazków fotograficznych zawierających ostre krawędzie, jak np. tekst, w celu uniknięcia zbyt dużego rozmycia warto zastosować opcję Sharpen JPEG Edges, znajdująca się w menu rozwijanym palety Optimize Wygładzanie Im bardziej JPEG zostanie skompresowany, tym więcej będzie w nim "klocków". W mia­rę wzrostu kompresji, algorytm JPEG odrzuca coraz więcej podobnych pikseli i w pewnym momencie zostają utracone stopniowe przejścia pomiędzy kolorami, a w zamian pow­stają bloki jednolitych kolorów. Funkcja Smoothing (Wygładzanie) lekko rozmywa cały obrazek tak, aby powstające w cza­sie kompresji zabłąkane piksele były jak najmniej zauważalne. Zakres wartości znaj­dującej się w palecie Optimize opcji Smoothing to 0-8. Wygładzanie daje dwie ko­rzyś­ci: redukuje liczbę "klocków" powstających czasami w wyniku kompresji JPEG i nie­co zmniejsza rozmiar pliku. Podobnie jak opcja Sharpen JPEG Edges sprawdza się najlepiej w obrazkach zawie­ra­ją­cych wiele prostych linii i tekstu, opcja Smoothing pracuje doskonale z grafikami za­wie­rającymi wiele linii krzywych i gładkich kształtów. Progresywny JPEG Dla wielu osób, głównym zastosowaniem opcji Progressive JPEG (Progresywny JPEG) jest stopniowe wy­świetlanie obrazków, czyli takie samo, jakie ma opcja Interlaced w formacie GIF. Dos­tępna w rozwijanym menu palety Optimize opcja Progressive JPEG ma jednak dużo wię­cej możliwości: oferuje algorytm kompresji drugiej generacji, który w wielu przy­pad­kach przy zachowaniu tej samej jakości pozwala osiągnąć mniejsze rozmiary plików. Pro­gre­syw­ny JPEG został opracowany przez firmę Netscape, ale jest obsługiwany także przez now­sze wersje przeglądarek Microsoft. Internet Explorer obsługuje progresywne JPEG, ale nie wyświetla ich rów­nolegle w trakcie pobierania ich z Internetu. Dla użytkownika obrazek taki wy­da­je się zwykłym JPEG.   W praktycznych zastosowaniach opcja Progressive JPEG wielokrotnie umożliwiła mi osiąg­nięcie mniejszych rozmiarów plików, ale nie było to regułą. Wybór tej opcji uza­leż­niałem przeważnie od tego, czy klient chciał, aby obrazek był wyświetlany stop­nio­wo w trakcie pobierania z Internetu, czy też najpierw został pobrany, a dopiero wtedy wy­świetlony. PNG 32 i PNG 24 PNG jako format internetowy dopiero wchodzi w użycie, jeśli wziąć pod uwagę jego obsłu­gę przez główne przeglądarki internetowe. Format ten daje jednak wiele możli­wość grafice internetowej. łącząc grafikę bitmapową i wektorową, PNG ma mało strat­ny algorytm kompresji (jak GIF) i może obsługiwać miliony kolorów (jak JPEG). Co wię­cej - PNG oferuje metodę przeplotu pozwalającą na szybsze wyświetlanie obrazków niż oferowane przez formaty GIF i JPEG oraz obsługę przezroczystości przewyższającą in­ne formaty plików. Jednym z najbardziej wartościowych aspektów PNG jest to, że zapisane w tym formacie ob­razki wyglądają bardzo podobnie w różnych systemach komputerowych. Przeważnie gra­fiki tworzone w Windows są jaśniejsze w MacOS, zaś grafiki tworzone w MacOS w Win­dows są ciemniejsze. PNG oferuje obsługę korekcji gamma, która jest odpo­wie­dzial­na za wygląd obrazka wyświetlanego w różnych systemach operacyjnych. Jeszcze do niedawna przeglądarki internetowe obsługiwały format PNG jedynie za po­mo­cą rozszerzeń. Kiedy PNG został uznany jako nowy internetowy format graficzny przez World Wide Web Consortium (W3C), w czwartych wersjach przeglądarek Nets­cape i Microsoft została zawarta obsługa tego nowego formatu. Prawdopodobnie naj­waż­niejsze jest jednak to, że program do tworzenia stron WWW firmy Macromedia - Dream­weaver oferuje źródłową obsługę PNG. Wstawiane w tym formacie obrazki mo­gą być oglądane w oknie dokumentu, jak obrazki w formatach GIF i JPEG. Powstał rów­nież program Fireworks, który nie tylko umożliwia eksportowanie tworzonej w nim grafiki w for­macie PNG, ale używa PNG jako własnego formatu plików. Mimo że popularność PNG ciągle rośnie, obsługa zapewniana przez przeglądarki jest zbyt mało rozpowszechniona, aby zapewnić całkowitą niezależność tego formatu. PNG po­siada wiele funkcji, na przykład przezroczystość alfa, które nie są w pełni obsłu­gi­wa­ne przez najważniejsze przeglądarki internetowe. Dość interesujące jest to, iż Fireworks wy­przedził większość innych programów graficznych w możliwościach obsługi PNG. Greg Roelofs, jeden z twórców formatu PNG nazwał Fireworks "najlepszym z dos­tępnych edytorów obsługujących PNG". W przeciwieństwie do indeksowanej przezroczystości, w której wybrane piksele mogą być tylko całkowicie przezroczyste lub całkowicie nieprzezroczyste, przezro­czys­tość alfa umożliwia tworzenie pośrednich przezroczystości, które mogą posiadać jeden z dwu­stu pięćdziesięciu sześciu odcieni. Funkcja ta umożliwia łatwe komponowanie 32-bi­towych obrazków z innymi. Mimo że PNG nie jest jeszcze najlepszym wyborem dla grafiki in­ternetowej, doskonale sprawdza się w tworzeniu grafiki przeznaczonej dla prezentacji mul­timedialnych, takich jak filmy Shockwave i Flash, gdzie animowane obiekty często są umieszczane jeden nad drugim lub komponowane z tłem. Aplikacje Director i Flash umo­żliwiają importowanie tworzonych w Fireworks plików PNG oraz ich nagłówków. Źródłowy format PNG Fireworks jest formatem rozszerzonym, gdyż mo­że zawierać dodatkowe efekty, tekst i inne dane zawarte w nagłówku każ­dego pliku. Inne programy umożliwiające wyświetlanie plików PNG mo­gą obsługiwać podstawowy obrazek Fireworks, ale nie pozwalają na jego edycję. Aby format PNG wyświetlić w Internecie, najlepiej jest wy­eks­portować obrazek w podstawowym formacie PNG, który traci wszys­tkie dodatkowe informacje dla Fireworks i maksymalnie zmniej­sza rozmiar pliku.   Inne formaty plików Zagadnienie związane z eksportem obrazków PNG 24 i PNG 32 są aktualne także przy eksportowaniu z Fireworks obrazków w formatach TIFF, BMP i PICT (tylko w MacOS). Eksport tych plików jest bardzo prosty i wymaga jedynie zdefiniowania pa­ra­metru Matte Praca w oknie Export Preview Optymalizacja i podgląd obrazków bezpośrednio w środowisku roboczym Fireworks jest wygodnym rozwiązaniem, ale wszystkie funkcje eksportu można znaleźć również w jed­nym, centralnym punkcie programu - w oknie dialogowym Export Preview (Podgląd eks­portu) (rysunek 15.24). Oferuje ono również kilka dodatkowych funkcji nie­do­stęp­nych w środowisku roboczym. W oknie Export Preview znajdują się trzy zakładki: u         Options (Opcje). Główny panel służący do optymalizacji obrazków. Możesz w nim zdefiniować format pliku, głębię bitową, kompresję, przezroczystość i inne pa­ra­me­try grafiki. Znajdują się tu także kontrolki, dotyczące obsługi kolorów, które umo­żliwiają ich blokowanie, edytowanie i usuwanie. Wszystkie kontrolki dzia­ła­ją tak samo jak te dostępne w paletach Optimize i Color Table u         File (Plik). Pozwala sterować dwoma właściwościami eksportowanych plików: ska­lowaniem i parametrycznym kadrowaniem. Eksportowane obrazki można ska­lować zarówno za pomocą wartości procentowych, jak i bardziej pre­cy­zyj­nie - w pikselach. Kadrowanie grafiki odbywa się poprzez wpisanie współ­rzęd­nych X i Y lewego górnego wierzchołka oraz szerokości i wysokości no­we­go ob­szaru. Eksportowane obrazki można także kadrować wizualnie w obszarze pod­glądu. Rysunek 15.24. Okno dialogowe Export Preview skupia w jednym miejscu wszystkie funkcje eksportu Fireworks i oferuje kilka dodatkowych opcji, niedostępnych w środowisku roboczym Tabbed panels - Panele z zakładkami Optimization ... - Ustawienie optymalizacji Current ... - Bieżące ustawienia Preview auto-update - Automatyczne aktualizowanie podglądu Saved ... - Lista zapisanych ustawień Preview Area - Obszar podglądu Pointer ... - Wskaźnik (Rączka) Crop - Kadrowanie Zoom - Powiększenie Single ... - Pojedynczy podgląd/Wiele podglądów Frame ... - Sterowanie klatkami u         Animation (Animacja). Zawiera wszystkie ustawienia dotyczące animo­wa­nych GIF-ów, takie jak czas trwania poszczególnych klatek, metodę usuwania kla­tek oraz zapętlanie. Większość tych opcji dostępnych jest także w palecie Frames (Klatki), w trakcie pracy w obszarze roboczym. Zawsze widoczny obszar podglądu pozwala wizualnie porównać różne ustawienia eks­por­tu oraz kadrować grafikę. Znajdują się tutaj także narzędzia przewijania (Wskaźnik), powię­kszania (lupka) oraz kontrolki, podobne do tych spotykanych w magnetowidach, umo­żliwiające odtwarzanie animacji i innych wieloklatkowych plików. Przyglądając się funk­cjom dostępnym w oknie Export Preview możesz doświadczyć déjá vu. Większość z tych kontrolek jest taka sama lub podobna do tych, których używałeś w trakcie pracy w obszarze roboczym. Ma to swoje uzasadnienie - nie musisz uczyć się od samego po­cząt­ku obsługi okna Export Preview Jak zostało wcześniej wspomniane, w oknie dialogowym Export Preview znajdują się do­datkowe, specjalne funkcje eksportu, takie jak kadrowanie i skalowanie ekspor­to­wa­nych obrazków. Kadrowanie Narzędzie Export Area (Eksportowany obszar), znajdujące się w palecie narzędziowej, wydaje się logicznym miejscem definiowania ekspor­to­wa­nych obszarów w oknie dokumentu, ale użycie tego narzędzia w oknie Export Preview jest dopiero pierwszym krokiem na drodze do eksportowania obrazków. Innymi słowy - mi­mo że narzędzie Export Area jest stosowane w oknie dokumentu, nie jest ono ele­mentem bezpośredniego podglądu i eksportu. Istnieją dwie metody eksportowania skadrowanych wersji dokumentów. Możesz na­ry­so­wać ramkę kadrowania w oknie dokumentu za pomocą narzędzia Export Area i klik­nąć dwukrotnie ten obszar, aby otworzyć okno Export Preview lub najpierw otworzyć ok­no Export Preview i tam skadrować obrazek w obszarze podglądu. Po kliknięciu przy­cis­ku Export Area, znajdującego się w obszarze podglądu Export Preview, obrazek zos­ta­nie otoczony znaną już ramką kadrowania (rysunek 15.25). Eksportowany obszar jest ogra­niczany za pomocą ośmiu uchwytów. Oryginalny obrazek w czasie eksportu nie jest kadrowany ani modyfikowany w żaden sposób.   Rysunek 15.25. W Fireworks możesz wizualnie kadrować obrazki bezpośrednio w oknie Export Preview   W przeciwieństwie do narzędzia Crop znajdującego się w palecie na­rzę­dziowej, narzędzie do kadrowania dostępne w oknie Export Preview nie może być używane do powiększania obszaru roboczego. Możesz także kadrować obrazki poprzez stworzenie ramki kadro­wa­nia w oknie dokumentu za pomocą narzędzia Export Area (aparat foto­gra­ficzny, który znajduje się w grupie narzędzia Pointer) i dwukrotne klik­nięcie powstałego obszaru. Zostanie wówczas otwarte okno dia­lo­go­we Export Preview, w którym będziesz mógł wyeksportować ska­dro­wa­ny obrazek bez żadnego wpływu na jego oryginalną wersję.   Aby wizualnie skadrować obrazek: 13. Wybierz narzędzie Export Area, znajdujące się poniżej obszaru podglądu lub op­cję Export Area w zakładce File. Obrazek zostanie otoczony ramką z uchwy­ta­mi kadrowania. 14. Przeciągnij uchwyty w nowe położenia tak, aby w obszarze podglądu wy­świe­tla­ny był ten fragment obrazka, który chcesz wyeksportować. 15. Wybierz dowolne narzędzie (Pointer lub Zoom) lub kliknij przycisk Set De­faults (Ustaw wartości domyślne) albo Next, aby zatwierdzić kadrowanie. Aby numerycznie skadrować obrazek: 16. W zakładce File zaznacz opcję Export Area 17. Zdefiniuj nowe współrzędne lewego górnego wierzchołka grafiki poprzez wpi­sa­nie nowych wartości w polach tekstowych X i (lub) Y, a następnie wciśnij kla­wisz Tab, aby zatwierdzić te wartości. 18. Zdefiniuj nowe wymiary obrazka poprzez wpisanie nowych wartości w polach teks­towych W (Width - Szerokość) i H (Height - Wysokość), a następnie wciś­nij klawisz Tab, aby zatwierdzić te wartości. Obie metody kadrowania: wizualną i numeryczną można wykorzystywać razem lub nie­zależnie od siebie. Kliknij zakładkę File, wybierz narzędzie Export Area i wizualnie ska­druj eksportowany obszar. Po zwolnieniu przycisku myszy automatycznie zostaną uak­tualnione numeryczne wartości wyświetlane w zakładce File. I odwrotnie - zmiana war­tości numerycznych spowoduje utworzenie nowej ramki kadrowania. Skalowanie eksportowanych obrazków Zbyteczna wydaje się uwaga, że "grafika internetowa występuje w wielu kształtach i roz­­miarach", ale należy jednak wspomnieć, że ta sama grafika internetowa często występuje w różnych kształtach i rozmiarach. Wielokrotne wykorzystywanie tych samych ele­men­tów graficznych jest często spotykaną praktyką we wszystkich mediach, a szczególnego zna­czenia technika ta nabiera w projektowaniu dla Internetu. Fireworks i jego okno dia­lo­gowe Export Preview pozwalają na łatwe eksportowanie grafik utworzonych poprzez ska­lowanie lub kadrowanie głównego pliku. Kontrolki skalowania znajdziesz na zakładce File okna dialogowego Export Preview. Gra­fikę można przeskalować, podając wartości procentowe lub jej dokładne wymiary w pik­selach. Domyślnie skalowanie odbywa się z zachowaniem niezmiennych proporcji po­między wysokością i szerokością grafiki, ale możesz wyłączyć opcję Constrain i zmie­­niać te wymiary niezależnie. Aby przeskalować obrazek: 19. Kliknij zakładkę File okna dialogowego Export Preview 20. Aby procentowo przeskalować obrazek, użyj suwaka % lub wpisz odpowiednią war­tość bezpośrednio w polu tekstowym. Wartości suwaka % należą do zakresu od 1 do 200%, ale w polu tekstowym mo­żesz wpisać dowolną inną wartość. 21. Aby przeskalować obrazek do dokładnych wymiarów, wpisz odpowiednie war­toś­ci w polach tekstowych W (Width - Szerokość) i (lub) H (Height - Wyso­kość). Jeżeli zaznaczona jest opcja Constrain, wpisz wartość tylko w jednym polu teks­towym i wciśnij klawisz Tab. Drugi wymiar zostanie automatycznie obli­czo­ny na podstawie oryginalnych proporcji obrazka. 22. Aby zmienić proporcje obrazka, usuń zaznaczenie opcji Constrain i powtórz po­przednią czynność. Jedną z moich ulubionych metod optymalizacji jest skalowanie obraz­ków przed eksportem do 50% ich oryginalnej wielkości i umie­szcza­nie na stronie WWW w dwa razy większym rozmiarze. Podwojenia rozmiarów gra­fiki można dokonać za pomocą znacznika img. Działania takie wy­wo­łują przeważnie łatwe do zauważenia zniekształcenia obrazka, ale częs­to są one do przyjęcia, zwłaszcza w przypadku obrazków posia­da­ją­cych duże obszary jednolitych kolorów. Jedno jest pewne - nie ma szyb­szego sposobu na zmniejszenie rozmiarów eksportowanego pli­ku. Wypróbuj tę technikę i zobacz, czy sprawdzi się w Twoich zasto­so­waniach.   Korzystanie z kreatorów eksportu Fireworks posiada ogromną liczbę różnych funkcji eksportu, która może być niekiedy przy­tłaczająca dla początkujących projektantów grafiki internetowej. Jeśli nie jesteś pe­wien, jak najlepiej rozpocząć optymalizację swoich obrazków, pozwól, aby przez cały pro­ces poprowadził Cię kreator eksportu (Export Wizard). Oprócz oryginalnego kreatora Ex­port Wizard, który jest bardzo pomocny przy wyborze właściwego formatu pliku, Fire­works posiada także kreatora Export to Size Wizard (Kreator eksportu do rozmiaru), umo­żliwiającego ograniczanie rozmiarów plików. Jeśli jesteś gotów do wyeksportowania swojej grafiki, ale nie wiesz jak to zrobić, wy­wo­łaj kreatora eksportu Fireworks, który nie tylko pomoże Ci określić najlepszy dla Two­ich zastosowań format pliku, ale dostarczy wielu innych wskazówek. Doświadczeni pro­jektanci grafiki także mogą korzystać z kreatora eksportu, aby szybko przygotować so­bie grunt pod dalszą optymalizację. Bez względu na wybór dokonany przez kreatora eksportu, zawsze poprowadzi on użyt­kow­nika do okna Export Preview, opisywanego szczegółowo w poprzednich podroz­dzia­łach. Możesz zaakceptować ustawienia proponowane przez kreatora eksportu (i klik­nąć przycisk Next, aby zakończyć operację) lub przed eksportem zmodyfikować nie­które ustawienia. Oto trzy główne zastosowania kreatora eksportu: u         Pomoc w wyborze odpowiedniego formatu pliku. u         Przedstawianie sugestii dotyczących optymalizacji obrazka, prezentowanych po dokonaniu wyboru for­matu pliku. u         Rekomendacja trybów eksportu, które umożliwiają zredukowanie pliku do okre­ślonych rozmiarów. Aby użyć kreatora eksportu do wybrania właściwego formatu pliku: 23. Wybierz z menu polecenie File Export Wizard Zostanie wyświetlony początkowy ekran kreatora eksportu (rysunek 15.26). Rysunek 15.26. Kreator eksportu jest dobrym punktem wyjścia przy wyborze parametrów eksportu 24. Pozostaw zaznaczoną opcję Select an export format (Wybierz format eksportu) i kliknij przycisk Continue 25. Pojawi się kolejny ekran kreatora eksportu pozwalający wybrać przeznaczenie grafiki: u The Web (Internet). Ogranicza opcje eksportu do najpopularniejszych for­ma­tów internetowych: GIF i JPEG. u An image-editing application (Aplikacja do edycji grafiki bitmapowej). Wy­biera najlepszy format dla edycji obrazka w innej aplikacji, na przykład Pho­toshopie. Najczęściej Fireworks wybiera format TIFF. u  Desktop publishing application (Aplikacja do składu komputerowego). Wy­biera format najlepiej sprawdzający się w druku, a jest to przeważnie TIFF. u Dreamweaver. Tak samo jak opcja The Web, ogranicza opcje eksportu do naj­popularniejszych formatów internetowych: GIF i JPEG. Jeśli dokument składa się z klatek, kreator eksportu zapyta Cię, czy chcesz go wyeksportować jako animowanego GIF-a, przycisk rea­gu­jący na zdarzenia myszy obsługiwane przez JavaScript czy też jako po­jedynczy obrazek.   26. Po dokonaniu wyboru kliknij przycisk Continue Fireworks wyświetli wyniki analizy obrazka wraz z sugestiami, dotyczącymi moż­liwości późniejszego zawężenia selekcji, jeśli zaproponowany zostanie wię­cej niż jeden format pliku. Jeśli dla dokumentu, który składa się z wielu klatek, wybierzesz for­mat Animated GIF (Animowany GIF), będziesz musiał kliknąć okno Pre­view, aby w palecie Options wyświetlić szczegółowe informacje o pli­ku.   27. Kliknij przycisk Exit, aby otworzyć okno dialogowe Export Preview i do­koń­czyć proces eksportu. Jeśli jako miejsce przeznaczenia dla eksportowanego pliku wybierzesz opcję The Web lub Dreamweaver, Fireworks przedstawi porównanie dwóch formatów plików: GIF i JPEG. Plik wyświetlany w górnej części okna Preview ma najmniejszy rozmiar fizyczny. Fire­works jest dość ostrożny w tej części kreatora eksportu i nie próbuje drastycznie zre­du­ko­wać rozmiaru pliku kosztem jakości obrazka. Jeśli chciałbyś, aby program ograniczył eksportowany format pliku do określonych roz­mia­rów, zaznacz wyświetlaną w pierwszym ekranie kreatora eksportu opcję Target Export File Size (Docelowy rozmiar eksportowanego pliku). Po włączeniu tej opcji bę­dziesz musiał w odpowiednim polu tekstowym wpisać docelowy rozmiar pliku, który zaw­sze mierzony jest w kilobajtach. Po zdefiniowaniu rozmiaru pliku kliknij przycisk Con­tinue, aby Fireworks mógł obliczyć pozostałe ustawienia eksportu. Gdy Fireworks próbuje dostosować ustawienia eksportu grafiki do określonego roz­mia­ru pliku, eksportuje obrazek nawet do dwunastu razy, aby osiągnąć jak najlepszy roz­miar pli­ku przy jak najmniejszej kompresji. Mimo że metoda ta jest bardzo szybka, pro­ces eks­por­tu dużej grafiki może potrwać nawet kilka minut. Dla grafiki przeznaczonej do wy­ko­rzys­ta­nia w Internecie, Fireworks proponuje do wyboru dwa pliki o roz­miarach równych lub mniejszych od zdefiniowanych. Oprócz możliwości określenia rozmiaru pliku w kreatorze Export Wizard, możesz także za pomocą przycisku, znajdującego się w panelu Options okna dialogowego Export Pre­view, wywołać kreatora Export to File Size Wizard (Kreator eksportu do rozmiaru). Kre­ator ten otwiera proste okno dialogowe, w którym możesz wpisać żądany rozmiar pli­ku. Za­sadnicza różnica pomiędzy nim a opcją Export File Size kreatora Export Wizard po­le­ga na tym, że kreator Export to File Size pracuje jedynie z bieżącym formatem pliku (nie są oferowane żadne alternatywy). W konsekwencji kreator Export to File Size jest szyb­szym narzędziem, ale przeznaczonym dla zaawansowanych użytkowników, którzy ro­zu­mieją różnice pomiędzy formatami plików. Dodatkowe opcje eksportu W większości przypadków grafika jest eksportowana z Fireworks w postaci pojedynczych obrazków, dokumentów HTML z osobnymi plastrami obrazka lub jako pozycja Deamweaver Library. Fire­works oferuje jednak kilka dodatkowych opcji eksportu. Eksportować można: u         Warstwy, klatki lub plastry Fireworks jako warstwy kaskadowego arkusza stylów (CSS) w dokumencie HTML, które można wykorzystywać w prze­glądarkach obsługujących dynamiczny HTML (DHTML). u         Warstwy lub plastry Fireworks jako dokument HTML dla łatwego importu do Macromedia Director. u         Warstwy dokumentu Fireworks jako osobne pliki obrazków. u         Ramki Fireworks jako osobne pliki obrazków. u         Cztery ramki przycisku reagującego na zdarzenia myszy jako format Image Well, który jest używany przez Lotus Domino Designer. u         Grafikę wektorową jako film Flash. u         Grafikę wektorową w formacie Adobe Illustrator. u         Cały dokument Fireworks jako wielowarstwowy dokument Photoshopa, odpowiedni dla dalszej edycji w Photoshopie. Wszystkie dodatkowe metody eksportu znajdują się na liście opcji Save as type Save As w MacOS) w oknie dialogowym Export (rysunek 15.27). Aby otworzyć okno dialogowe Export, wybierz polecenie File Export   Rysunek 15.27. Lista opcji Save as type (Save As) w oknie dialogowym Export jest pomocna w wielu różnych sytuacjach   Niezależnie od tego, którą funkcję eksportu chcesz wyko­rzystać, format pliku i inne ustawienia optymalizacji determinowane są bieżącymi ustawieniami palety Optimize.   Pozycje HTML and Images oraz Dreamweaver Library, znajdujące się na liście opcji Save as type w oknie dialogowym Export, są opisane w rozdziale 21. Rysunek 15.28. Widoczne na rysunku przyciski zostały wyeksportowane z Fireworks jako oddzielne warstwy CSS i są animowane w Dreamweaverze Aby wyeksportować elementy grafiki Fireworks jako warstwy CSS: 28. W palecie Optimize określ format pliku i ustawienia optymalizacji. 29. Wybierz z menu polecenie File Export Zostanie otwarte okno dialogowe Export 30. Z listy Save as type Save As) wybierz CSS Layers Program przedstawi dalsze opcje związane z eksportowaniem warstw CSS. 31. Z listy opcji Source wybierz elementy Fireworks, które chcesz eksportować jako warstwy CSS. Do wyboru masz: Fireworks Layers (War­stwy), Fireworks Slices (Plastry) lub Fireworks Frames (Klatki). 32. Zaznacz opcję Trim Images, aby eksportowane elementy miały jak najmniejsze roz­miary obszarów roboczych. Jeżeli opcja Trim Images nie będzie zaznaczona, każdy z eksportowanych pli­ków będzie miał wielkość oryginalnego obrazka. 33. Jeżeli eksportujesz ramki, zaznacz pole Current Frame Only, aby ograniczyć operację eksportu tylko do bieżącej ramki. 34. Zaznacz pole Put Images in Subfolder, aby program umieścił pliki obrazków w ich własnym katalogu. Kliknij przycisk Browse, aby wybrać odpowiedni katalog. 35. Kliknij przycisk Save Po ukończeniu procesu eksportu otrzymasz pojedyncze obrazki i kod HTML wymagany do rozmieszczenia ich na własnych warstwach CSS. Aby użyć warstw na stronie WWW, musisz dołączyć do niej wygenerowany przez Fireworks kod HTML. Zadanie to możesz wykonać w dowolnym programie do tworzenia stron WWW, który oferuje bez­pośredni dostęp do kodu HTML. Początkowo wygląd kodu może Cię przerażać, ale ważne są tylko otwierające i zamykające go zdania wyrażone w prostym języku angielskim. W dogodnym dla Ciebie edytorze tekstu lub HTML zaznacz kod występujący między wierszem <! ---------- BEGIN COPYING THE CODE HERE ---------- > i wierszem <! ---------- STOP COPYING THE CODE HERE ---------- > Po zaznaczeniu skopiuj go, a następnie otwórz stronę HTML i wklej zawartość schowka w dowolnym miejscu części <body>. Teraz możesz już manipulować warstwami w pro­gra­mie do tworzenia stron WWW. Użytkownicy Dreamweavera nie muszą wykorzystywać okna HTML Sour­ce (Źródło HTML) ani żadnego innego narzędzia tekstowego, aby ko­piować i wklejać kod generowany przez Fireworks. W Dream­wea­verze wystarczy znaleźć znaczniki Invisible Elements (Niewidzialne ele­men­ty) otaczające kod nowej warstwy, a po obu stronach warstwy zos­tanie wyświetlony symbol reprezentujący w Dreamweaverze ko­men­tarz języka HTML. Zaznacz wszystkie takie symbole, a następnie sko­piuj je i wklej do dokumentu. Aby użyć tej techniki, musisz włączyć op­cję Invisible Elements. Eksportowanie dla programu Director Fireworks stanowi główny element w Director Shockwave Internet Studio firmy Macromedia i jako taki zawiera dodatkowe funkcje upraszczające tworzenie i edytowanie bitmap do wykorzystania w programie Director. Przyciski i elementy reagujące na zdarzenia myszy stworzone w Fireworks mogą być eksportowane jako obrazki i HTML, które mogą być następnie importowane do Macromedia Director. Program Director konwertuje następnie behawiory Fireworks na behawiory programu Director. Dodatkowo każdy obiekt lub każda warstwa Fireworks w programie Director ma swój anti-aliasing i przezroczystość alfa. Eksportowanie do programu Director było uprzednio możliwe jako dodatek do Fireworks 3, teraz w Fireworks 4 jest standardem.   Aby wyeksportować dokument Fireworks dla programu Director: 36. Wybierz polecenie File Export Pojawi się okno dialogowe Export 37. Z listy opcji Save as type Save As) wybierz Director (.htm). 38. Z listy Source wybierz Firework Frames lub Fireworks Layers 39. Zaznacz opcję Trim images, aby eksportować poszczególne elementy na jak najmniejszym rozmiarze obszaru roboczego. 40. Kliknij przycisk Save (Zapisz). Do importowania kodów HTML generowanych w Fireworks niezbędny jest Director 7 lub nowszy, a czasami również Director Xtra. Sprawdź dokumentację programu Director lub stronę WWW Macromedia.   Eksportowanie plików Niekiedy będziesz musiał podzielić elementy składowe twojej grafiki (warstwy i klatki) na pojedyncze pliki graficzne. Niektóre z tych elementów będziesz praw­do­po­dob­nie musiał wykorzystać w innych częściach witryny internetowej lub przetworzyć w in­nej aplikacji przed ich ponownym umieszczeniem w Fireworks. Jakikolwiek jednak był­by powód takiego działania, Fireworks oferuje prostą metodę generowania poje­dyn­czych plików graficznych. W rozdziale 20. dowiesz się jak eksportować pojedynczy plaster jako plik obrazka.   Aby wyeksportować elementy dokumentu Fireworks jako oddzielne pliki: 41. W palecie Optimize określ format pliku i ustawienia optymalizacji. 42. Wybierz z menu polecenie File Export Zostanie otwarte okno dialogowe Export 43. Aby eksportować ramki jako pliki, z listy Save as type Save As) wybierz Frames to Files; aby eksportować warstwy jako pliki, wybierz Layers to Files 44. Zaznacz opcję Trim Images, aby eksportowane elementy miały jak najmniejsze roz­miary obszarów roboczych. Jeżeli opcja Trim Images nie będzie zaznaczona, każdy z eksportowanych pli­ków będzie miał wielkość oryginalnego obrazka. 45. Kliknij przycisk Save Ustawiając w odpowiednich paletach widzialność warstw i klatek, mo­żesz decydować o tym, które z nich zostaną wyeksportowane. Wi­dzial­ność jest reprezentowana za pomocą ikony oka znajdującej się w skraj­nej lewej kolumnie palety, obok nazwy klatki lub warstwy. Jeśli przed wybraniem polecenia Export warstwa lub klatka była nie­widzialna - nie zostanie wyeksportowana.   Rysunek 15.29. Grafika wyeksportowana w formacie Image Well może być wykorzystywana w programie Lotus Domino Designer do tworzenia elementów reagujących na zdarzenia myszy   Obrazek zapisany w formacie Image Well jest bardzo podobny do czte­rech stanów przycisku w Fireworks, ale nie jest taki sam. Dwa ostatnie sta­ny przycisku: pod wskaźnikiem myszy i wciśnięty pod wskaźnikiem my­szy są umieszczone odwrotnie niż w Fireworks. Fireworks "ro­zu­mie" tę różnicę i eksportuje obrazki Image Wells w odpowiednim for­macie. 46. W palecie Optimize określ format pliku i ustawienia optymalizacji. 47. Wybierz z menu polecenie File Export Zostanie otwarte okno dialogowe Export 48. Z listy Save as type Save As) wybierz Flotus Domino Designer 49. Wybierz Fireworks Frames Fireworks Layers lub Fireworls Slices z listy opcji Source, aby utworzyć Image Well odpowiednio z klatek, warstw lub plastrów. 50. Zaznacz opcję Trim Images, aby eksportowane elementy miały jak najmniejsze roz­miary obszarów roboczych. Jeżeli opcja Trim Images nie będzie zaznaczona, każdy z eksportowanych pli­ków będzie miał wielkość oryginalnego obrazka. 51. Kliknij przycisk Save Fireworks zapisze dokument jako Image Well w formacie, określonym w palecie Optimize Eksportowanie wektorów Obiekty wektorowe mogą być eksportowane jako filmy Flash SWF lub jako dokumenty Adobe Illustratora. Format Flash może być oglądany bezpośrednio w większości przeglądarek internetowych, natomiast format Illustratora może być importowany do większości aplikacji do rysowania, jak Adobe Illustrator czy Macromedia FreeHand. Pamiętać należy o tym, że w Fireworks podczas pracy z wektorami program wy­ko­rzys­tuje wektorowe linie tylko jako "szkielet", na którym umieszczane są bitmapy i efekty bit­mapowe, takie jak zewnętrzne cienie i fazy. Możliwość eksportu szkieletu grafiki jest przy­datną funkcją, ale eksportowane obiekty są najczęściej tylko trochę zbliżone do ich odpo­wiedników w Fireworks (rysunek 15.30). Rysunek 15.30. Obiekt Fireworks (po lewej) jest kształtem wektorowym, ale jego wygląd jest uzależniony od efektów i ustawień obrysu. Po wyeksportowaniu w formacie Flash SWF, w obiekcie pozostają jedynie wektorowe linie Aby wyeksportować kształt wektorowy z Fireworks: 52. Wybierz File Export Program wyświetli okno dialogowe Export 53. Aby wyeksportować jako plik Flash, wybierz Macromedia Flash SWF z listy Save as type Save As Aby wyeksportować w formacie Illu­stra­to­ra, wybierz Illustrator 7 Eksport dla Illustratora jest zgodny z Adobe Illustratorem 7 i może nie dawać oczekiwanych rezultatów w przypadku aplikacji korzystających z wcześniejszych lub późniejszych wersji formatu Illustratora.   54. Kliknij przycisk Option, aby ustawić opcje eksportu, specyficzne dla danego formatu. Fireworks wyświetli okno dialogowe specyficzne dla eksportowanego formatu (ry­sunek 15.31). Rysunek 15.31. W zależności od wybranego formatu plików ustaw opcje eksportu wektorów w oknie dialogowym Macromedia Flash SWF Export Options (po lewej) lub w oknie Illustrator Export Options 55. Jeśli chcesz wyeksportować grafikę jako plik Macromedia Flash SWF, ustaw następujące opcje: u W sekcji Objects (Obiekty) wybierz opcję Paths (Ścieżki), aby wyeks­por­to­wać ścieżki lub opcję Maintain Appearance (Utrzymaj wygląd), aby wyeks­por­tować obrazki JPEG. Jeżeli wybierzesz opcję Maintain Appearance, za po­mocą suwaka JPEG Quality możesz zdefiniować jakość eksportowanych JPEG-ów. u W sekcji Text (Tekst) określ, czy chcesz utrzymać możliwość edycji tekstu (Maintain Editability) czy też przekonwertować go na ścieżki (Convert to Paths u W sekcji Frames określ, czy chcesz wyeksportować wszystkie klatki doku­men­tu (All) czy też jedynie ich zakres (From:...to u W polu tekstowym Frame Rate wpisz docelowe tempo odtwarzania klatek lub skorzystaj z ustawienia domyślnego, wynoszącego 15. Kliknij przycisk OK 56. Jeśli chcesz wyeksportować grafikę jako dokument Illustratora 7, ustaw na­stępujące opcje: u W sekcji Frames (Klatki) określ, czy chcesz wyeksportować jedynie bie­żą­cą klatkę dokumentu (Export Current Frame Only) czy też wszystkie klatki Fireworks jako warstwy Illustratora (Convert Frames to Layers u Jeżeli będziesz chciał wykorzystać eksportowany plik w programie Macro­me­dia FreeHand, zaznacz pole wyboru FreeHand 8 Compatible Kliknij OK 57. W oknie dialogowym Export kliknij przycisk Save Kształty wektorowe znajdujące się w Twoim dokumencie zostaną wyeksportowane w wy­­branym formacie. Jeśli posiadasz odtwarzacz Flash Player, kliknij dwukrotnie plik Flash SWF, aby go otwo­rzyć. Jeśli nie masz tego odtwarzacza, możesz obejrzeć plik Flash SWF za pomocą przeglądarki internetowej, która jest wyposażona w rozszerzenie Flash Player lub w QuickTime Player. Jeśli wyeksportujesz wektory jako dokument Illustratora 7, będziesz mógł go otworzyć w programie Illustrator, FreeHand lub innej aplikacji wektorowej. Eksportowanie dokumentów Photoshopa Eksportowanie dokumentów Fireworks w formacie Photoshopa umożliwia ich otwieranie i edycję w Photoshopie, przy równoczesnym zachowaniu możliwości edycji pojedynczych obiektów, obiektów tekstowych i efektów Live Effects. Można później ponownie zaimportować dokument Photoshopa do Fireworks, w celu dalszej edycji i optymalizacji. Jest to bezcenna funkcja, gdy korzystamy z obu aplikacji lub gdy korzystają z nich członkowie tej samej grupy roboczej. Eksportowanie formatu Photoshopa jest nowością w Fireworks 4.   Aby wyeksportować dokument Fireworks jako dokument Photoshopa: Wybierz File Export Program wyświetli okno dialogowe Export Z listy Save as type Save As) wybierz Photoshop PSD. PSD odnosi się do PhotoShop Document i jest również standardowym rozszerzeniem dokumentów Photoshopa: ".psd". Z listy Settings wybierz jedno z poniższych: u Opcja Maintain Editability over Appearance (Zachowaj możliwość edycji) prowadzi do bezpośredniej konwersji elementów Fireworks na elementy Photoshopa, ale nasza praca po otwarciu w Photoshopie może wyglądać nieco odmiennie. Opcja ta jest ustawiona jako domyślna i najczęściej daje najlepsze rezultaty. Zawsze, nawet po dokonaniu eksportu do formatu Photoshopa, warto zachować kopię oryginalnego dokumentu Fireworks. Szczególnie należy o tym pamiętać, wybierając opcję inną niż Maintain Editability over Appearance, gdyż wszystkie te opcje powodują odrzucenie lub spłaszczenie informacji edytowalnych.   u Opcja Maintain Firework Appearance (Zachowaj wygląd) konwertuje obiekty Fireworks na warstwy Photoshopa, ale renderuje efekty i przekształca obiekty tekstowe na obrazy bitmapowe, dzięki czemu kosztem możliwości edycji uzyskujemy zachowanie wyglądu grafiki. u Opcja Smaller Photoshop File (Mały plik Photoshopa) dokonuje konwersji warstw Fireworks na warstwy Photoshopa, spłaszczając wszystkie obiekty na każdej warstwie Fireworks. u Opcja Custom (Ustawienia użytkownika) umożliwia wybranie, czy zachować, czy spłaszczyć warstwy, oraz czy zachować, czy renderować tekst i efekty. Po zakończeniu kliknij Save Fireworks wyeksportuje dokument Photoshopa, gotowy do otwarcia w tym programie. Importowanie plików zawierających ponad 100 warstw wymaga stosowania Photoshopa 6 lub nowszego. Korzystając z Photoshopa 5.5 lub starszego, należy spłaszczyć lub usunąć z dokumentu Fireworks niektóre obiekty lub warstwy.   Podsumowanie Każda grafika utworzona lub zmodyfikowana w Fireworks może być wyeksportowana i wy­korzystana w Internecie lub innej aplikacji. Przy tworzeniu grafiki internetowej klu­czo­wą sprawą jest zredukowanie rozmiaru pliku, dlatego też Fireworks oferuje szeroki za­kres różnych funkcji eksportu. Podczas optymalizacji i eksportowania grafiki po­wi­nie­neś pamiętać o następujących rzeczach: u         Dobrze jest zatrzymać co najmniej dwie ostatnie wersje tworzonego pliku: jed­ną w formacie PNG Fireworks jako kopię główną i drugą w dowolnym formacie eksportowanym do wykorzystania w Internecie. u         Głównym celem eksportu grafiki jest utworzenie jak najlepiej wyglądającego obrazka o jak najmniejszym rozmiarze pliku. Na tym właśnie polega opty­ma­li­za­cja grafiki. u         Fireworks oferuje teraz dostęp do wszystkich opcji optymalizacji i eksportu bez­pośrednio w obszarze roboczym. Jest to możliwe dzięki paletom Optimize Color Table i Frames oraz zakładkom okna dokumentu. Optymalizację i eks­port grafiki możesz również przeprowadzić za pomocą okna dialogowego Ex­port Preview, wyświetlanego po wybraniu z menu polecenia File Export Preview u         Fireworks oferuje możliwość porównania czterech różnych ustawień eks­por­to­wa­nej grafiki, co pozwala na szybkie ocenienie wyglądu grafiki oraz rozmiaru jej pliku i przybliżonego czasu pobierania. u         Każdy z dwóch najważniejszych formatów graficznych używanych w Inter­ne­cie: GIF i JPEG najlepiej sprawdza się z innym typem obrazków. Format GIF jest najlepszym wyborem dla grafiki z dużymi obszarami jednolitych kolorów, w których ważnym parametrem jest przezroczystość, na przykład logo. Format JPEG sprawdza się doskonale w obrazkach, które posiadają wiele poziomów to­nalnych i płynne przejścia kolorów, takich jak fotografie. u         Inny format grafiki - PNG - jest coraz szerzej akceptowany w Internecie, ale nie jest w pełni obsługiwany przez żadną przeglądarkę internetową. Format ten po­siada wiele zalet, na przykład pełną obsługę przezroczystości alfa i korekcji gam­ma, które zacierają różnice w wyświetlaniu grafiki na różnych platformach sprzę­towych. u         W czasie eksportu obrazków za pomocą okna dialogowego Export Preview moż­na je łatwo skalować i kadrować. u         Zaawansowane możliwości sterowania kolorem w Fireworks umożliwiają blo­ko­wanie lub zastępowanie kolorów w indeksowanych paletach. u         Fireworks oferuje kreatory eksportu, pomocne w eksportowaniu grafiki. u         Oprócz eksportowania standardowych obrazków, Fireworks umożliwia także eks­portowanie na wiele sposobów poszczególnych elementów grafiki, takich jak warstwy, klatki i plastry. Fireworks pozwala nawet na wyeksportowanie we­k­to­rowych obiektów jako plików Flash SWF lub dokumentów Adobe Illu­stratora. u         Fireworks umożliwia eksportowanie do formatu Adobe Photoshopa, z zachowaniem możliwości edytowania poszczególnych elementów. W następnym rozdziale dowiesz się, jak zapewnić spójny wygląd grafiki internetowej za pomocą stylów Fireworks. Document Info Accesari: 2521 Apreciat: Comenteaza documentul: Nu esti inregistrat Trebuie sa fii utilizator inregistrat pentru a putea comenta Creaza cont nou A fost util? Daca documentul a fost util si crezi ca merita sa adaugi un link catre el la tine in site Copiaza codul: in pagina web a site-ului tau. <a href="https://www.scritub.com/limba/poloneza/Eksport-i-optymalizacja1411381515.php" target="_blank" title="Eksport i optymalizacja - https://www.scritub.com">Eksport i optymalizacja</a> eCoduri.com - coduri postale, contabile, CAEN sau bancare Politica de confidentialitate | Termenii si conditii de utilizare Copyright © Contact (SCRIGROUP Int. 2024 )