IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Macromedia Fireworks 8.
Oficjalny podrcznik
Autor: Patti Schulze
Tumaczenie: Marcin Miklas
ISBN: 83-246-0314-X
Tytu oryginau: Macromedia Fireworks 8:
Training from the Source
Format: B5, stron: 296
rdo informacji o programie Fireworks 8 ksika polecana przez firm Macromedia
Skorzystaj z narzdzi bitmapowych i wektorowych
Wprowad do projektu elementy tekstowe i interaktywne
Zoptymalizuj parametry grafiki
Wyeksportuj witryn do programu Dreamweaver
Macromedia Fireworks 8 to najnowsza wersja aplikacji sucej do projektowania grafiki
dla potrzeb publikacji multimedialnych i witryn WWW. Fireworks umoliwia korzystanie
zarwno z grafiki wektorowej, jak i bitmapowej, pozwala na tworzenie interaktywnych
przyciskw, menu rozwijanych oraz animacji w formacie GIF. Dziki rozbudowanym
funkcjom eksportu gotowy projekt mona zapisa w plikach o rnych formatach,
a nastpnie wygenerowa kod HTML i JavaScript niezbdny do umieszczenia grafiki na
stronie WWW. Fireworks doskonale integruje si z innym produktem firmy Macromedia
-- Dreamweaverem, tworzc tym samym wydajne rodowisko pracy dla projektantw
witryn WWW.
Macromedia Fireworks 8. Oficjalny podrcznik to kompletny zbir wiadomoci o tym
programie, przygotowany we wsppracy z pracownikami dziau pomocy technicznej
firmy Macromedia i dokadnie przez nich sprawdzony. Wykonujc wiczenia zawarte
w 11 lekcjach, poznasz wszystkie funkcje Fireworksa pozwalajce tworzy grafik
dla stron WWW. Nauczysz si korzysta z narzdzi, filtrw i funkcji eksportu.
Narzdzia do edycji grafiki bitmapowej
Praca z obiektami wektorowymi
Korzystanie z warstw i efektw
Umieszczanie elementw tekstowych w dokumencie
Tworzenie elementw interaktywnych
Definiowanie patw i obszarw aktywnych
Optymalizacja i eksport grafiki
Tworzenie animowanych GIF-w
Stosowanie masek do tworzenia menu rozwijanego
Integracja Fireworksa z Dreamweaverem
Najlepszym sposobem poznania nowej aplikacji jest wykonanie konkretnych zada.
Przekonaj si, jak szybko mona opanowa Fireworksa, korzystajc z podrcznika
polecanego przez producenta.

Wstp ................................................................................................................................................................................................... 11
Lekcja 1. Edycja grafiki bitmapowej ..................................................................................................................................... 15
Przegld narzdzi panelu Tools programu Fireworks 8 ...................................................................................... 17
Strona startowa .......................................................................................................................................................... 18
Grupy paneli swobodnych i dokowanych ............................................................................................................. 18
Panel Properties .........................................................................................................................................................20
Edycja obiektw bitmapowych ...............................................................................................................................20
Zmiana powikszenia widoku ................................................................................................................................. 21
Zmiana koloru obszaru roboczego .........................................................................................................................22
Uycie narzdzia Crop ............................................................................................................................................. 23
Uycie panelu Info ....................................................................................................................................................24
Uycie narzdzia Magic Wand ................................................................................................................................ 25
Zapisywanie zaznaczenia ..........................................................................................................................................28
Dostosowywanie poziomw ....................................................................................................................................29
Podgld ustawie korekcji gamma .......................................................................................................................... 31
Uycie narzdzi Lasso i Polygon Lasso ................................................................................................................... 32
Dodawanie i odejmowanie zaznacze .................................................................................................................... 33
Tworzenie nowego dokumentu ............................................................................................................................... 35
Skalowanie obrazu .................................................................................................................................................... 36
Zmiana rozmiarw obrazu ...................................................................................................................................... 38
Kopiowanie zaznaczenia ..........................................................................................................................................40
Uycie narzdzia Rubber Stamp ............................................................................................................................. 41
Uycie narzdzia Smudge ........................................................................................................................................ 43
Uycie narzdzia Eraser ............................................................................................................................................ 45
Uycie narzdzia Red Eye Removal ........................................................................................................................ 45
Uycie narzdzi Marquee .........................................................................................................................................47
Przesuwanie zaznaczenia ..........................................................................................................................................49
Dodatkowe opcje zaznaczania ................................................................................................................................. 50

Lekcja 2. Uywanie narzdzi wektorowych ....................................................................................................................... 53

Wywietlanie miarek i prowadnic ........................................................................................................................... 54
Uycie narzdzia Ellipse ........................................................................................................................................... 57
Uycie narzdzia Rectangle ..................................................................................................................................... 59
Uycie narzdzia Polygon ........................................................................................................................................ 59
Uycie narzdzia Scale .............................................................................................................................................. 61
Kopiowanie ................................................................................................................................................................ 62
Obracanie obiektu ..................................................................................................................................................... 63
Korzystanie z panelu History .................................................................................................................................. 64
Maskowanie obiektw poleceniem Paste Inside ................................................................................................... 67
Dodawanie filtrw aktywnych ................................................................................................................................. 69
Stosowanie filtrw jako filtrw aktywnych ...........................................................................................................70
Uycie polecenia Save As Style ................................................................................................................................ 71
Grupowanie obiektw ..............................................................................................................................................72
Importowanie grafiki ................................................................................................................................................ 73
Przycinanie obszaru roboczego ............................................................................................................................... 75

Lekcja 3. Praca z warstwami ..................................................................................................................................................... 77

Uycie panelu Layers ................................................................................................................................................78
Dodawanie i nazywanie warstw ............................................................................................................................... 81
Ustawianie rozmiaru i pooenia obiektu ............................................................................................................. 83
Zmiana nazwy warstwy .............................................................................................................................................84
Blokowanie warstwy ..................................................................................................................................................84
Wywietlanie i ukrywanie warstwy .......................................................................................................................... 85
Wybieranie kolorw .................................................................................................................................................. 86
Rysowanie zaokrglonych prostoktw .................................................................................................................88
Uycie autoksztatw ................................................................................................................................................89
Dodawanie tekstury i cienia .....................................................................................................................................92
Zmiana kolejnoci obiektw na warstwie .............................................................................................................. 93
Uycie trybu edycji pojedynczej warstwy ...............................................................................................................94
Ustawianie kolorw domylnych ............................................................................................................................ 96
Wyrwnywanie pooenia obiektw ......................................................................................................................98

Lekcja 4. Dodawanie tekstu ................................................................................................................................................... 103

Dodawanie tekstu .................................................................................................................................................... 104
Wyrwnywanie i tworzenie wci w tekcie ......................................................................................................... 109
Sprawdzanie pisowni ...............................................................................................................................................110
Importowanie tekstu ................................................................................................................................................112
Uycie narzdzia Text Editor .................................................................................................................................113
6

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

Uycie narzdzia Line ..............................................................................................................................................114

Uycie narzdzia Subselection ...............................................................................................................................115
Uycie polecenia Paste Attributes ..........................................................................................................................116
Dodawanie grotw strzaek .....................................................................................................................................117

Lekcja 5. Techniki zaawansowane ...................................................................................................................................... 119

czenie ksztatw ................................................................................................................................................... 120
Powielanie obiektw za pomoc polecenia Repeat ............................................................................................ 124
Tworzenie pyty CD ................................................................................................................................................ 128
Dodawanie wypenienia gradientowego .............................................................................................................. 130
Zmiana przezroczystoci .........................................................................................................................................133
Dopasowanie tekstu do cieki .............................................................................................................................. 135
Uycie polece Intersect i Crop ............................................................................................................................ 139
Przeksztacanie tekstu w cieki ............................................................................................................................. 140
Stosowanie przeksztace ........................................................................................................................................141

Lekcja 6. Tworzenie przyciskw ........................................................................................................................................... 145

Uycie narzdzia Button Editor ............................................................................................................................ 146
Dodawanie nowego przycisku ................................................................................................................................151
Zmienianie przyciskw .......................................................................................................................................... 154
Dodawanie nazwy i cza do przyciskw ............................................................................................................. 154
Importowanie przyciskw ...................................................................................................................................... 155
Zamienianie grafiki na przyciski .......................................................................................................................... 158

Lekcja 7. Tworzenie patw i obszarw aktywnych ................................................................................................... 161

Tworzenie mapy obrazka ....................................................................................................................................... 163
Praca z warstw Web Layer ..................................................................................................................................... 166
Dzielenie obrazu na paty ...................................................................................................................................... 167
Dodawanie patu ..................................................................................................................................................... 168
Tworzenie rozcznych obszarw aktywnych ..................................................................................................... 170
Dodawanie klatek .....................................................................................................................................................171
Dodawanie behawiorw ......................................................................................................................................... 172
Podgld penoekranowy ......................................................................................................................................... 174
Dodawanie kolejnych patw ................................................................................................................................ 175

Lekcja 8. Optymalizacja i eksportowanie ...................................................................................................................... 177

Uywanie narzdzia Export Wizard ..................................................................................................................... 178
Wybieranie formatu obrazu .................................................................................................................................. 182
Uycie przycisku podgldu 4-Up .......................................................................................................................... 183
Uycie wzorcw ustawie optymalizacji .............................................................................................................. 186
SPIS TRECI

Eksportowanie obrazw JPEG .............................................................................................................................. 186

Wywietlanie podgldu w przegldarce ................................................................................................................ 189
Eksportowanie pliku jako HTML ..........................................................................................................................191
Uycie przycisku Quick Export ............................................................................................................................ 195

Lekcja 9. Tworzenie animacji GIF ....................................................................................................................................... 197

Tworzenie animacji ................................................................................................................................................. 198
Uycie techniki skrki cebuli ............................................................................................................................ 201
Wspuytkowanie warstwy ...................................................................................................................................204
Uycie symboli animacji ........................................................................................................................................205
Kontrolowanie odtwarzania ..................................................................................................................................208
Eksportowanie animacji GIF ................................................................................................................................. 210
Uycie polecenia Export Preview dla animacji ....................................................................................................211
Uywanie animacji automatycznej ....................................................................................................................... 214
Animacja automatyczna efektw .......................................................................................................................... 216

Lekcja 10. Maskowanie i menu rozwijane ...................................................................................................................... 219

Tworzenie szablonu ................................................................................................................................................ 221
Maskowanie obrazu ................................................................................................................................................222
Maskowanie za pomoc panelu Layers ................................................................................................................ 226
Uycie tekstu jako maski ........................................................................................................................................228
Tworzenie patu tekstu ...........................................................................................................................................229
Dodawanie menu ....................................................................................................................................................232
Edycja menu .............................................................................................................................................................237
Przetwarzanie seryjne ..............................................................................................................................................240
Zapisywanie skryptw ............................................................................................................................................243

Lekcja 11. Integracja z programem Dreamweaver 8 ................................................................................................. 247

Programy Fireworks i Dreamweaver .....................................................................................................................249
Eksportowanie stron do programu Dreamweaver .............................................................................................250
Tworzenie lokalnej witryny w programie Dreamweaver ...................................................................................252
Wywietlanie stron w programie Dreamweaver ..................................................................................................257
Ustawianie preferencji programu Dreamweaver ................................................................................................259
Wywietlanie strony w przegldarce ..................................................................................................................... 261
Dodawanie czy ...................................................................................................................................................... 261
Optymalizacja w programie Fireworks ................................................................................................................ 263
Edycja w programie Fireworks z poziomu programu Dreamweaver ............................................................... 265
Tworzenie szablonw w programie Dreamweaver .............................................................................................267
Tworzenie strony na podstawie szablonu ............................................................................................................269

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

Dodawanie tekstu w programie Dreamweaver ....................................................................................................270

Importowanie z programu Word ..........................................................................................................................272
Modyfikowanie szablonu .......................................................................................................................................273
Przypisywanie szablonu do strony ........................................................................................................................275
Przemieszczanie plikw w panelu Files ................................................................................................................276
Edycja menu utworzonego w Fireworks ..............................................................................................................277
Zakoczenie .............................................................................................................................................................278

Skorowidz ....................................................................................................................................................................................... 279

SPIS TRECI

Warstwy s narzdziem, ktre pomaga ci zarzdza i organizowa obiekty na stronie. Warstwy

to przezroczyste paszczyzny, na ktrych moesz tworzy i przechowywa obiekty. Za ich pomoc
kontrolujesz kolejno obiektw uoonych jeden na drugim, przemieszczajc je w gr i w d.
Moesz take zablokowa i ukry warstwy, aby atwiej byo tworzy skomplikowane obiekty.
Podczas tej lekcji utworzysz stron internetow i uyjesz warstw do kontrolowania pooenia
obiektw na stronie.

Czego si nauczysz
Po tej lekcji bdziesz potrafi:
uywa panelu Layers;
dodawa i nazywa warstwy;

 uywa panelu Properties do dokadnego pozycjonowania i zmiany rozmiarw obiektw;

zmienia nazw i blokowa warstw;
wywietla i ukrywa warstw;
uywa narzdzia Rounded Rectangle Auto Shape (autoksztat zaokrglony prostokt);
dodawa tekstur i cie;
zmienia kolejno warstw;
uywa trybu edycji pojedynczej warstwy;
uywa domylnych kolorw konturu i wypenienia;
wyrwnywa obiekty.

Czas wykonania
Lekcja zajmie okoo godziny.

Materiay do lekcji
Pliki multimedialne:
Lekcja03\Media\basic_colors.png
Pliki startowe:
Lekcja03\Start\start.png
Gotowy projekt:
Lekcja03\Completed\home_page.png

Uycie panelu Layers

Wyobra sobie warstw jako przezroczyst paszczyzn, na ktrej tworzysz i umieszczasz obiekty.
Warstwy umoliwiaj ci podzielenie materiau graficznego przy budowaniu skomplikowanych
lub zoonych obrazw. Poszczeglne czci obrazu mog by przechowywane na rnych warstwach i w razie potrzeby wywietlane i ukrywane. Pomoe ci to wydzieli cz, nad ktr pracujesz. Warstwy mog zawiera obiekty wektorowe, bitmapowe lub ich kombinacj.
Panel Layers w programie Fireworks jest podobny do paneli warstw w innych programach graficznych
takich jak Macromedia FreeHand lub Adobe Photoshop, zawiera jednak dodatkowe informacje.
Na kadej z warstw moesz umieci jeden lub wiele obiektw. Jeli umiecisz wiele obiektw na tej
samej warstwie, kady z nich zostanie uoony na stosie jako osobny obiekt. Nowe obiekty
78

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

s umieszczane pocztkowo na wierzchu. Miniaturka przedstawiajca obiekt wywietlana jest

po lewej stronie nazwy obiektu na panelu Layers. Kolejno obiektw w stosie moesz zmieni,
uywajc polece Modify/Arrange/Bring to Front (modyfikacja/rozmieszczanie/przesu na wierzch),
Modify/Arrange/ Bring Forward (modyfikacja/rozmieszczanie/przesu do przodu), Modify/Arrange/
Send to Back (modyfikacja/rozmieszczanie/przesu pod spd), Modify/Arrange/Send Backward
(modyfikacja/rozmieszczanie/przesu do tyu). Moesz te uy panelu Layers, aby przecign
obiekt w nowe pooenie w stosie, lub przenie obiekt na now warstw.
Warstwy pozwalaj ci organizowa rysunki na rnych poziomach, ktre mona edytowa jak
pojedyncze elementy i ukry w razie potrzeby. Nastpne wiczenie pokazuje, jak uywa panelu
Layers, aby doda nowe warstwy, przesuwa obiekty midzy warstwami, ukrywa i blokowa warstwy.
1. Zacznij od utworzenia nowego dokumentu. Ustaw szeroko na 800, wysoko na 600

pikseli i biay kolor ta.

Dokument ten bdzie stron startow witryny internetowej tworzonej podczas tych lekcji.
W pocztkowych dniach Internetu wikszo uytkownikw posiadaa monitory 13 calowe.
Teraz ceny monitorw znacznie spady i teraz przewaaj monitory 17 calowe. Dzi prawie
wszyscy projektanci witryn internetowych tworz strony dla wikszego rozmiaru 17 cali:
800600 pikseli. Tworzc strony internetowe, musisz okreli najmniejszy rozmiar ekranu
uytkownikw i odpowiednio je zaprojektowa.
Faktycznie widoczny obszar monitora o rozdzielczoci 800600 wynosi 760420 co jest spowodowane obecnoci elementw przegldarki, takich jak panel statusu i paski przewijania. Jeli
chcesz, by caa strona bya widoczna na mniejszych monitorach, dostosuj rozmiar strony.
2. Zapisz dokument jako home_page.png w katalogu Projects.

Nazwa, jak nadasz dokumentowi w programie Fireworks, jest uywana dla eksportowanej
strony HTML. Wybierajc nazw musisz o tym pamita i przestrzega podstawowych zasad:
Uywaj maych liter w nazwach plikw. Niektre serwery internetowe rozrniaj

wielko liter, inne wymagaj uycia tylko maych.

W nazwach plikw nie uywaj spacji. Zastp je znakami podkrelenia lub mylnikami.

Na przykad, uyj nazwy home_page.htm zamiast home page.htm.

Uywaj liter i cyfr, a nie znakw specjalnych, takich jak %, * lub /.

3. Wybierz polecenie Window/Layers (okno/warstwy).

Jeli panel Layers by zamknity, zostanie otwarty. Znacznik wyboru obok nazwy panelu
w licie menu wskazuje, e panel jest otwarty. Jeeli zobaczysz panel w grupie paneli z prawej
strony ekranu, moesz rwnie klikn strzak rozwijania, aby otworzy go lub zamkn.

LEKCJA 3.
Praca z warstwami

79

4. Przesu wskanik na pasek tytuowego panelu, ktry znajduje si bezporednio pod

panelem Layers.
Kiedy wskanik znajdzie si nad paskiem tytuowym panelu pod otwartym panelem, zmieni
si w strzak wskazujc w gr i w d (PC) lub strzak skierowan w d (Mac). Nastpnie
przecignij wskanik w d, by zwikszy lub zmniejszy wysoko panelu znajdujcego si
powyej. Kiedy zaczniesz dodawa warstwy, bdziesz chcia zwikszy rozmiar panelu Layers.

Moesz zwikszy lub zmniejszy panel tylko jeli otwarte s dwa panele.

80

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

Dodawanie i nazywanie warstw

Kiedy tworzysz nowy dokument, tworzone s domylnie dwie warstwy: Layer 1 i Web Layer.
Na warstwie Web Layer s przechowywane paty i obszary aktywne. Opisane s one w jednej
z nastpnych lekcji.
Wszystkie obiekty i obrazy zostan pocztkowo umieszczone na warstwie Layer 1. Jeli nie utworzysz dodatkowej warstwy, wszystkie obiekty w dokumencie pozostan na warstwie Layer 1.
W przypadku pojedynczych rysunkw, takich jak logo utworzone w lekcji 2, wszystkie elementy
mog zosta na tej samej warstwie.
Natomiast w przypadku obrazw zoonych, uycie kilku warstw pomaga w organizacji i zarzdzaniu rnymi elementami, ktre utworzysz. Moesz zablokowa kad warstw, co pozwala pracowa z jedn stron bez przypadkowego przemieszczania lub usuwania obiektw, albo ukry warstw, aby nie przeszkadzaa w tworzeniu kolejnej czci strony.
1. Rozwi menu Options usytuowane w prawej grnej czci paska tytuowego panelu Layers.

Nastpnie wybierz polecenie New Layer (nowa warstwa) z menu panelu.

Menu Options panelu Layers zawiera kilka polece sucych do modyfikowania lub
kontrolowania warstw. Wszystkie panele (nie tylko panel Layers) wywietlaj ikon menu
Options, gdy panel jest otwarty.

2. Wpisz Logo w oknie dialogowym New Layer i kliknij przycisk OK.

LEKCJA 3.
Praca z warstwami

81

Nad warstw Layer 1 pojawi si nowa warstwa nazwana Logo.

Nowa warstwa zostanie zaznaczona. Jeli spojrzysz na panel Layers, zobaczysz ikon owka,
ktra wskazuje aktywn warstw. Wszystko, co dodasz do dokumentu, bdzie umieszczone
na tej warstwie.
Moesz rwnie klikn ikon New Layer w dolnej czci panelu Layers. Utworzona zostanie
nowa warstwa o domylnej nazwie Layer n, w ktrej n oznacza numer kolejnej dostpnej warstwy.
Gdy dodasz warstw tym sposobem, nie pojawi si okno dialogowe do wpisywania jej nazwy.
W jednym z kolejnych podrozdziaw tej lekcji Zmiana nazwy warstwy nauczysz si zmienia
domylne nazwy warstw.

82

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

3. Wybierz polecenie File/Import (plik/importuj), znajd plik sweet_creations_logo.png,

ktry utworzye w lekcji 2, a nastpnie kliknij przycisk OK.

Jeli nie moesz znale tego pliku, uyj pliku z katalogu Lekcja02\Completed.
4. Kliknij, gdy zobaczysz wskanik wstawiania w ksztacie strzaki w prawo.

Logo zostanie umieszczone w miejscu kliknicia. Chcesz, aby znalazo si ono w lewej grnej
czci strony.
Logo jest usytuowane na warstwie Logo.
5. Kliknij warstw Layer 1 z panelu Layers, aby j zaznaczy.

Warstwa Layer 1 jest warstw domyln. Poniewa znajduje si ona pod warstw Logo,
wszystko, co umiecisz na tej warstwie, bdzie pod obrazem logo.
6. Wybierz narzdzie Rectangle z panelu Tools i narysuj prostokt w grnej czci strony.

Prostokt powinien by tak szeroki jak strona.

Zauwa, e prostokt znajduje si pod logo. Nie przejmuj si kolorem prostokta; zmienisz
go pniej.

Ustawianie rozmiaru i pooenia obiektu

Czsto bdziesz chcia ustawia i odczytywa rozmiar narysowanego obiektu. W tym wiczeniu
na stronie masz prostokt. Chcesz go umieci na grze obrazka i nada mu dokadnie szeroko
strony w tym przypadku 800 pikseli.
Majc zaznaczony prostokt, spjrz na panel Properties. Lewa cz tego panelu wywietla informacje
o rozmiarze i pooeniu prostokta na stronie.
1. W panelu Properties wpisz warto 800 dla szerokoci i 118 dla wysokoci prostokta.

Wysoko prostokta powinna by wiksza od wysokoci logo cukierka. W przeciwnym razie

musisz dostosowa wysoko prostokta.

LEKCJA 3.
Praca z warstwami

83

2. W panelu Properties wpisz 0 (zero) dla wartoci X i Y prostokta. Wcinij klawisz Enter (PC)

lub Return (Mac) lub kliknij poza panelem, aby ustawi wartoci.
Czynno ta spowoduje umieszczenie prostokta w lewej grnej czci strony.

Zmiana nazwy warstwy

Warstwa prostokta nosi nazw Layer 1. Jeli dodajesz wicej warstw do dokumentu, pomocne bdzie nadanie kadej warstwie nazwy opisowej.
1. Kliknij dwukrotnie nazw warstwy w panelu.

2. W oknie dialogowym Layer Name (nazwa warstwy) wpisz Header, a nastpnie wcinij klawisz

Enter (PC) lub Return (Mac).

Moesz rwnie klikn poza oknem Layer Name, aby przyporzdkowa nazw warstwie.

Blokowanie warstwy
Blokowanie warstwy jest przydatne, gdy chcesz zobaczy na niej wszystkie obiekty, ale chcesz
unikn przypadkowego przemieszczania lub usuwania obiektw. Blokowanie warstwy zapobiega
take dodawaniu na niej nowych obiektw.
1. Zaznacz logo.

Kiedy zaznaczasz logo zauwa, e w panelu Layers zostaje zaznaczona warstwa Logo.

84

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

2. Zmie rozmiar logo i przesu je, aby dopasowao si do wysokoci prostokta.

Moesz uy narzdzia Scale, ktre poznae w lekcji 2, lub narzdzia Pointer, aby przecign
jeden z naronych uchwytw w celu zmiany rozmiaru. Poniewa wszystkie elementy w obrazie
logo s zgrupowane, ich rozmiary zostan zmienione jednoczenie.
Jeli uyjesz narzdzia Scale, wystarczy przecign jeden z naronych uchwytw, aby zmieni
rozmiar logo. Natomiast jeli skorzystasz z narzdzia Pointer, musisz przytrzyma klawisz Shift
podczas przecigania uchwytu naronego, aby proporcjonalnie zmieni rozmiar.
3. Kliknij kolumn Lock (blokuj) wywietla ona rysunek owka z lewej strony warstwy

Logo, aby obiekty tej warstwy nie day si przemieci lub usun.
W kolumnie pojawi si ikona kdki. Zaznaczona jest teraz warstwa nad warstw zablokowan.

Jeli warstwa jest aktualnie zaznaczona, kolumna Lock wywietla ikon owka. Kiedy klikniesz
owek, kolumna Lock wywietli kdk. Puste miejsce w kolumnie Lock oznacza, e warstwa
nie zostaa zaznaczona. Aby odblokowa warstw, kliknij ikon kdki w panelu Layers.
Przytrzymaj klawisz Alt (PC) lub Option (Mac) i kliknij kolumn Lock, aby zablokowa lub odblokowa wszystkie warstwy jednoczenie.

Wywietlanie i ukrywanie warstwy

Jeli twj obraz jest zoony, wygodnie jest wywietli tylko te czci rysunku, nad ktrymi aktualnie pracujesz. W ten sposb nie przesuwasz ani nie usuwasz przypadkowo obiektw, ktre mogyby zachodzi na obiekty przez ciebie zmieniane.
1. Zaznacz warstw Header (nagwek) i kliknij kolumn Show/Hide (ikona z rysunkiem oka).

Prostokt zostanie ukryty.

LEKCJA 3.
Praca z warstwami

85

2. Kliknij ponownie kolumn Show/Hide, aby wywietli obiekty na warstwie.

Przytrzymaj klawisz Alt (PC) lub Option (Mac) podczas klikania ikony Show/Hide, aby wszystkie warstwy stay si widoczne.

Wybieranie kolorw
Na stronach internetowych moesz uywa kolorw z ustalonej palety lub kolorw dowolnych.
Jeli chcesz ograniczy barwy do kolorw linii produktu lub firmy, moesz utworzy dokument
zawierajcy tylko te kolory.
1. Otwrz plik basic_colors.png z katalogu Lekcja03\Media.

Dokument otworzy si na wierzchu ju istniejcego obrazu. Skada si z zestawu pl

o rnych barwach.

2. Wybierz polecenie Window/Tile Vertical (okno/rozmie w pionie).

Oba okna zostan tak uoone, aby mieciy si obok siebie na monitorze. Mona byo
zrobi to rcznie, ale polecenie dziaa szybciej.
86

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

Moge rwnie wybra polecenie Tile Horizontal (okno/rozmie w poziomie), aby zmieni
rozmiar i przenie jedno okno poniej drugiego. Jeli chcesz przywrci oryginalny rozmiar
i pooenie okien, wybierz polecenie Window/Cascade (okno/rozmie kaskadowo).
3. Zaznacz prostokt na swojej stronie startowej.

Chcesz zmieni kolor wypenienia prostokta na czerwony (kolor numer 11) w pliku
basic_colors.png.
Jeeli nie widzisz prostokta, kliknij kolumn Show w panelu Layers.
4. Kliknij pole koloru wypenienia w panelu Properties i przesu kroplomierz nad kolor

czerwony w pliku basic_colors.png. Kliknij, aby wybra ten kolor.

Wypenienie prostokta przyjmie barw ciemnoczerwon.
Moge rwnie uy pola koloru wypenienia w panelu Tools, aby zmieni kolor. Pola
kolorw znajduj si w kilku miejscach: na panelu Properties, panelu Tools i panelu Colors.
5. Odblokuj warstw Logo.

Kliknij ikon kdki na warstwie Logo, aby j odblokowa.

6. Zaznacz logo i wybierz polecenie Modify/Ungroup (modyfikacja/rozgrupuj). Kliknij poza

logo, eby usun zaznaczenie, a nastpnie zaznacz tekst Sweet Creations. Zmie kolor
tekstu na biay.
Zostaw warstw Logo odblokowan.
W systemie Windows, gdy okno dokument jest zmaksymalizowane, moesz przecza si miedzy
wieloma dokumentami, uywajc zakadek dokumentw widocznych w grnej czci okna. Uoenie
okien ssiadujco oddziela pliki, usuwajc zakadki dokumentw. Powiksz jeden z dokumentw,
aby poczy dokumenty i przywrci ich zakadki.

LEKCJA 3.
Praca z warstwami

87

Rysowanie zaokrglonych prostoktw

W panelu Properties moesz zmieni stopie zaokrglenia rogw prostokta. W tym wiczeniu bdziesz dodawa kolejne elementy do logo: patyk do cukierka (jak patyk do lodw). Patyk to nic innego jak prostokt z zaokrglonymi rogami.
1. Z pliku basic_colors.png wybierz drugie pole znajdujce si z lewej strony.

Uyj narzdzia Pointer, aby wybra pole. Jest ono opatrzone numerem 2. Kiedy je wybierzesz,
pola koloru wypenienia w panelu Tools i panelu Properties zmieni si, aby odzwierciedli
kolor wybranego obiektu.
2. Wr do pliku home_page.png i wybierz warstw Logo. Uyj narzdzia Rectangle, aby narysowa

pionowy prostokt w lewej czci strony.

Prostokt jest umieszczony na wybranej warstwie Logo. Program Fireworks zapamituje
ostatni kolor, ktrego uye dla obiektu. Kolory z wybranego przez ciebie pola
w wiczeniu 1. zostan uyte dla wypenienia prostokta.

Po narysowaniu prostokta moesz przenie go w nowe pooenie. Masz rwnie dostpn opcj
przesuwania obiektu w trakcie rysowania. Przytrzymaj klawisz spacji podczas przecigania. Teraz
moesz przesun prostokt w nowe pooenie, zanim pucisz przycisk myszy. Kiedy zwolnisz
klawisz spacji, prostokt zostanie zablokowany i moesz dalej zmienia jego rozmiar. Moesz
rwnie zastosowa ten sposb przy uywaniu narzdzi rysowania prostokta, elipsy i zaznaczenia
bitmapowego.
3. Ustaw suwakiem Rectangle Roundness (zaokrglenie prostokta) w panelu Properties warto 90.
88

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

Moesz wpisa dowoln warto w polu tekstowym. Wcinij klawisz Enter (PC) lub Return
(Mac), aby zatwierdzi stopie zaokrglenia naronikw dla prostokta.
4. Wybierz narzdzie Pointer i przecignij patyk nad cukierek w logo. Zmie rozmiar

prostokta, aby by proporcjonalny do cukierka.

Moesz zmieni rozmiar patyka, przecigajc jeden z uchwytw z narzdziem Pointer.

5. Zapisz plik.

Uycie autoksztatw
Autoksztaty to zgrupowane obiekty wektorowe, zawierajce pewne reguy i warunki potrzebne do
narysowania ksztatw. W przeciwiestwie do innych rysowanych obiektw, autoksztaty, oprcz
czterech punktw naronych, posiadaj take punkty kontrolne w ksztacie rombu. Kady punkt
kontrolny jest zwizany z jak wasnoci wizualn ksztatw. Przecigajc go, zmieniasz odpowiedni wasno. Na przykad, w przypadku narzdzia Rounded Rectangle Auto Shape (autoksztat zaokrglony prostokt), moesz edytowa zaokrglenie wszystkich rogw, tak jak w poprzednim
wiczeniu za pomoc ustawie zaokrglenia lub moesz zmieni zaokrglenie pojedynczego rogu.

LEKCJA 3.
Praca z warstwami

89

W tym wiczeniu wyprbujesz niektre z narzdzi Auto Shapes. Stwrz nowy dokument dla tego
wiczenia.
1. Wybierz narzdzie Rounded Rectangle Auto Shape.

Jest ono umieszczone w tej samej grupie, co narzdzie Rectangle.

2. Przecignij wskanik, aby narysowa pionowy prostokt, jak w poprzednim wiczeniu.

Obiekt utworzony za pomoc narzdzia Auto Shape Rounded Rectangle ma te same uchwyty
zmiany rozmiaru, jak wczeniej utworzony prostokt, ale rwnie punkty kontrolne
w ksztacie rombu. Gdy wskanik myszy znajdzie si nad punktem kontrolnym, pojawi si
okienko z podpowiedzi, ktre pomoe ci przy zmianie ksztatu.

3. Przytrzymaj klawisz Alt (PC) lub Option (Mac) i przecignij prawy grny punkt kontrolny

na lew stron. Wykonaj t czynno ponownie dla prawego dolnego punktu kontrolnego.
Przeciganie punktw kontrolnych zmienia zaokrglenia poszczeglnych rogw.

90

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

4. Powtrz czynnoci z punktu 3., przecigajc lewy, grny i dolny punkt kontrolny na lew

stron.
Warto zaokrglenia lewych rogw ulegnie zmianie.

Moesz rwnie wyprbowa inne narzdzia z grupy Auto Shape. Na przykad, uyj narzdzia
Arrow Auto Shape (autoksztat strzaka) do narysowania strzaek i edytuj je, przecigajc jeden
z punktw kontrolnych. I teraz okienko z podpowiedzi pomoe ci nada ksztat obiektom,
ktre rysujesz.

5. Wybierz polecenie Window/Auto Shape Properties.

Panel Auto Shape Properties umoliwia zmienianie rnych atrybutw wybranego obiektu Auto
Shape. Na przykad, jeli narysowae gwiazdk Auto Shape, moesz zmieni ilo ramion oraz
ich kty i wielko zaokrglenia.

LEKCJA 3.
Praca z warstwami

91

6. Jeli utworzye obiekty w pliku home_page.png, moesz je usun lub zamkn dokument

z autoksztatami bez zapisywania.

Dodawanie tekstury i cienia

Teraz dodasz tekstur drewna, aby patyk wyglda bardziej realistycznie. Tekstury s obrazami
w odcieniach szaroci, ktre symuluj powierzchni poczon z wypenieniem obiektu. Dodanie
tekstury zmienia intensywno wypenienia. Tekstura o wartoci zero procent nie wpywa na obraz. Zwikszanie wartoci tekstury wzmacnia efekt wypenienia. Tekstury mog by stosowane do
wzorw, wypenie jednolitych, gradientowych, a nawet konturw.
1. Wybierz opcj Wood (drewno) z menu Texture (tekstura) w panelu Properties.

Prbka tekstury zostanie wywietlona w menu.

2. Przecignij suwak wartoci, aby zmieni intensywno tekstury.

Na przykad, wpisz 50 procent.

Kade wypenienie ma dostosowan tekstur. Kiedy jej warto wynosi zero procent, tekstura jest
niewidoczna.
3. Dodaj cie do patyka.

92

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

W lekcji 2. dodawae efekt Bevel do cukierka. Cie dodasz w ten sam sposb. Kliknij przycisk
Add Filters (dodaj filtr) w panelu Properties. Wybierz z listy opcj Shadow and Glow/Drop Shadow
(cie i powiata/cie). Dostosuj ustawienia.

Zmiana kolejnoci obiektw na warstwie

Porzdek, wedug ktrego obiekty pojawiaj si na stosie, zaley od kolejnoci ich utworzenia.
Tak jak w innych programach graficznych, ostatni utworzony obiekt znajduje si na wierzchu.
Moesz zmieni kolejno poszczeglnych obiektw, uywajc podmenu Arrange (z menu Modify).
Kolejno na warstwie rni si od kolejnoci warstw. Obiekt moe jednoczenie znajdowa si
na wierzchu listy obiektw z jednej warstwy, a pod obiektem z warstwy wyszej. Wybierz polecenie Modify/Arrange/Bring to Front, aby wycign obiekt na wierzch lub Modify/Arrange/Send to Back,
aby przenie go pod spd. Wybierz polecenie Modify/Arrange/Bring Forward, aby umieci obiekt
nad innym obiektem z tej samej warstwy lub Modify/Arrange/Send Backward, aby przesun go
pod spd. W systemie Windows moesz rwnie uy paska narzdzi Modify zamiast tych polece menu.
W panelu Layers na warstwie Logo masz teraz trzy obiekty: cukierka, tekst Sweet Creations i patyk.
Kady z tych obiektw pojawia si w innym miejscu na stosie warstwy. Patyk zosta utworzony jako
ostatni, wic jest na wierzchu. Chcesz, aby znalaz si pod cukierkiem.

1. Zaznacz patyk. Przenie go nad cukierek.

Jest to obiekt, ktry chcesz przenie.

LEKCJA 3.
Praca z warstwami

93

2. Wykonaj jedn z nastpujcych czynnoci:

Wybierz polecenie Modify/Arrange/Send to Back.

Patyk przesunie si pod spd cukierka, ale nad czerwony prostokt. Prostokt znajduje si
na innej warstwie (Header), ktra jest poniej warstwy Logo.
lub
Przecignij obiekt (nazwany Rectangle na warstwie Logo) poniej zgrupowanego obiektu
cukierka w panelu Layers.
Podczas przecigania obiektu na warstwie, pojawi si czarna linia nad lub pod innymi obiektami.
Obiekt, ktry przesuwasz, znajdzie si w miejscu czarnej linii, kiedy pucisz przycisk myszy.
Uwaaj, by nie przesun obiektu prostokta na warstw Header. Jeli tak si stanie, przesu
go z powrotem na warstw Logo.
Blokujc inne warstwy (w tym przypadku Header), zapobiegasz przypadkowemu przenoszeniu na
nie obiektw.

Uycie trybu edycji pojedynczej warstwy

Opcja Single Layer Editing (edycja jednej warstwy), dostpna z menu Options panelu Layers, sprawia,
e tylko aktualnie wybrana warstwa jest dostpna do edycji. Obiekty z innych warstw nie mog zosta wybrane. Rni si to troch od blokowania warstwy i moe by bardzo uyteczne podczas
pracy nad skomplikowanym obrazem, skadajcym si z wielu warstw. Gdy blokujesz warstw, nie
moesz zaznacza, edytowa lub zmienia obiektw znajdujcych si na niej, dopki jej nie odblokujesz. W trybie edycji pojedynczej warstwy moesz edytowa obiekty tylko na zaznaczonej warstwie. Inne warstwy zachowuj si jak zablokowane. Aby zaznaczy na nich obiekty, musisz zaznaczy warstw w panelu Layers.
94

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

1. Uyj menu Options z panelu Layers, aby wybra opcj Single Layer Editing.

Znacznik wyboru pojawi si obok polecenia, wskazujc, e jest ono wybrane. Ta opcja jest
przecznikiem. Aby j wyczy, wybierz j ponownie z menu Options panelu Layers.

2. Gdy na stronie nie ma zaznaczonych obiektw, zaznacz warstw Header z panelu Layers.

Wybierz polecenie Select/Deselect lub kliknij poza stron (ale w oknie dokumentu), aby
odznaczy wszystkie obiekty. Sprbuj zaznaczy cukierek lub tekst Sweet Creations. Majc
zaznaczon warstw Header w panelu Layers, nie moesz zaznaczy obiektu z innej warstwy.
3. Uaktywnij warstw Logo na panelu Layers.

Teraz sprbuj zaznaczy prostokt z warstwy Header. Znw nie moesz go zaznaczy,
gdy znajduje si na niezaznaczonej warstwie.
4. Wycz tryb edycji pojedynczej warstwy.

Chocia tryb edycji pojedynczej warstwy jest bardzo przydatny, moe by take kopotliwy, jeli nie
wiesz, e zosta wczony. Jeli masz trudnoci z zaznaczaniem obiektw na stronie, sprawd, czy
warstwa nie jest zablokowana i czy opcja Single Layer Editing nie jest aktywna.
5. Zapisz plik.

LEKCJA 3.
Praca z warstwami

95

wiczenie samodzielne
Utwrz now warstw i nazwij j Specials. Narysuj na niej pionowy prostokt z zaokrglonymi rogami. Ustaw szeroko prostokta na 199 pikseli, a wysoko na 305 oraz zaokrglenie rogw na 16.
Przesu prostokt na praw stron. Ustaw kolor wypenienia na jasnoszary lub wybierz kolor numer 3 z pliku basic_colors.png. Dodaj tekstur Piano Keys (klawiatura pianina) i ustaw jej warto na
50 procent.

Ustawianie kolorw domylnych

Odkrye moe, e program Fireworks zachowuje ustawienia konturu i wypenienia ostatnio tworzonego obiektu i uywa ich dopki nie zostan zmienione. Waciwo ta jest bardzo przydatna
zwaszcza, gdy dodajesz wiele obiektw. W programie Fireworks znajduj si take ustawienia
domylnego koloru wypenienia i konturu. Domylnym kolorem wypenienia jest biay, a konturu
czarny. Moesz atwo zmieni te kolory. Aby to zrobi, wybierz polecenie Edit/Preferences (PC) lub
Fireworks/Preferences (Mac). Na zakadce General okna dialogowego Preferences kliknij pola koloru Stroke
(kontur) lub Fill (wypenienie) i wybierz nowy kolor domylny.

96

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

Ostatnio utworzonym obiektem by szary prostokt wypeniony tekstur Piano Keys. Jeeli narysujesz kolejny prostokt, otrzyma on ten sam kolor konturu i wypenienia. Mgby narysowa kwadrat, a potem zmieni kolor wypenienia, ale dla uproszczenia wybierzesz kolory domylne przed
narysowaniem nowego obiektu.
1. Kliknij przycisk Default Colors (kolory domylne) w panelu Tools.

Kolor wypenienia zmieni si na biay (lub kolor, ktry zdefiniowae zmieniajc

ustawienia), a kolor konturu na czarny (lub inny kolor, ktry wybrae).

2. Kliknij przycisk Swap Default Colors (zamie kolory domylne) w panelu Tools.

Kolory wypenienia i konturu zostan zamienione. W nastpnym wiczeniu chcesz

wprowadzi biay kolor wypenienia i czarny konturu, wic ponownie kliknij przycisk
Swap Default Colors.

LEKCJA 3.
Praca z warstwami

97

Nacinij klawisz D, aby wybranemu obiektowi nada kolory domylne. Nacinij klawisz X, aby
zamieni kolor wypenienia z kolorem konturu w wybranym obiekcie.

Wyrwnywanie pooenia obiektw

Gdy tworzysz kilka obiektw na stronie, czsto chcesz je wyrwna wzgldem siebie lub wzgldem
strony, lub rozmieci je rwnomiernie.
1. Narysuj kwadrat na warstwie Specials. Uyj narzdzia Rectangle i trzymaj klawisz Shift podczas

rysowania, aby powsta kwadrat.

Kwadrat powinien by biay z czarnym konturem. Jeeli w poprzednim wiczeniu nie ustawie
kolorw na domylne, uyj Super wskazwki i nacinij klawisz D, aby ustawi je teraz.
2. Uyj panelu Properties, aby zmieni rozmiar kwadratu na 165 pikseli.

Powiniene zmieni zarwno wysoko, jak i szeroko prostokta na 165 pikseli, aby
otrzyma kwadrat.
3. Przesu kwadrat nad prostokt utworzony w wiczeniu samodzielnym. Umie go w dolnej

czci prostokta. Zaznacz oba obiekty.

Moesz klikn oba obiekty, trzymajc klawisz Shift, lub uy zaznaczania prostoktnego.
Gdy klikniesz i przecigniesz mysz, na stronie pojawi si ramka zaznaczenia prostoktnego.
Wszystkie obiekty wewntrz ramki zostan zaznaczone, gdy pucisz przycisk myszy.

98

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

4. Wybierz polecenie Modify/Align/Center Vertical (modyfikacja/wyrwnanie/wyrodkuj

w pionie).
Kwadrat i prostokt zostan wyrodkowane w pionie.
Program Fireworks wyrwnuje obiekty do lewej strony wedug obiektu najbardziej
wysunitego na lewo, a do prawej strony wedug obiektu znajdujcego si najbardziej
na prawo. Obiekt na grze kontroluje zachowanie polecenia Align Top (wyrwnaj do gry),
a obiekt na dole kontroluje polecenie Align Bottom (wyrwnaj do dou). Po wybraniu
polecenia Distribute Widths (rozmie szerokoci) Fireworks umieszcza obiekty w rwnych
odstpach midzy praw krawdzi lewego obiektu i lew krawdzi prawego. Po wybraniu
polecenia Distribute Heights (rozmie wysokoci) Fireworks umieszcza obiekty w rwnych
odstpach midzy doln krawdzi najwyszego obiektu i grn krawdzi dolnego.
W systemie Windows moesz take uy przyciskw wyrwnania znajdujcych si w panelu Modify.
Jeeli nie jest on widoczny, wybierz polecenie Window/Toolbars/Modify. Panel ten moe zachowywa si jak niezalene okno; moesz go rwnie przecign i doczy na grze lub dole okienka
aplikacji.
Moesz uy take panelu Align do wyrwnywania obiektw. Wybierz polecenie
Window/Align, aby otworzy panel. Zawiera on wszystkie polecenia wyrwnywania z menu
Modify, a take polecenia do wyrwnywania obiektw na stronie, tworzenia jednakowych
odstpw midzy obiektami i dopasowywania szerokoci lub wysokoci obiektw.

Panel Align jest dodatkowym rozszerzeniem programu Fireworks, Aby znale wicej rozszerze,
wybierz polecenie Commands/Manage Extensions (polecenia/zarzdzaj rozszerzeniami). Otworzy
si okno Macromedia Extension Manager (zarzdzanie rozszerzeniami firmy Macromedia). Wybierz polecenie File/Go to Macromedia Exchange (plik/przejd do strony Macromedia Exchange).
Otworzy si przegldarka internetowa ze stron firmy Macromedia, gdzie bdziesz mg poszuka
nowych rozszerze dla programw Macromedia Flash, Fireworks oraz Dreamweaver.

LEKCJA 3.
Praca z warstwami

99

5. Wybierz polecenie File/Import i znajd plik start.png, utworzony podczas lekcji 1.

Przedstawia on obraz dziewczyny z czekoladkami, o owalnej, rozmytej krawdzi. Jeli nie

moesz znale utworzonego pliku, moesz wykorzysta plik z katalogu Lekcja03\Start.
6. Powiniene wybra warstw Specials przed umieszczeniem obrazu na biaym kwadracie.

Uyj narzdzia Scale lub przytrzymaj klawisz Shift, przecigajc naronik, aby dopasowa
rozmiar obrazu do kwadratu.

Obraz jest bitmap, co oznacza, e mona go zmniejszy, ale nie powinno si go powiksza. Rozdzielczo obrazu wynosi 72 piksele warto standardowa dla obrazw internetowych. Obraz
o mniejszej rozdzielczoci nie zawiera wystarczajcej iloci pikseli, by mg zwikszy rozmiar obrazu. Zwikszenie obrazu negatywnie wpynie na jego jako.
7. Zapisz plik.

Zostaw plik otwarty, uyjesz go podczas nastpnej lekcji.

100

MACROMEDIA FIREWORKS 8
Oficjalny podrcznik

Podsumowanie
Podczas tej lekcji nauczye si:
tworzy nowe warstwy i umieszcza na nich obiekty (strony 78 83);
uywa panelu Properties, aby przesuwa i zmienia rozmiary obiektw na stronie

(strony 83 84);

zmienia nazwy warstw (strona 84);

blokowa warstw, aby zachowa jej zawarto (strony 84 85);
zmienia zaokrglenie rogw prostokta (strony 88 89);
uywa narzdzia Auto Shape (strony 89 92);
dodawa tekstur i cie do obiektu (strony 92 93);
przesuwa obiekty na warstwie, aby zmieni ich kolejno (strony 93 94);
uywa trybu edycji pojedynczej warstwy (strony 94 96);
ustawia domylne kolory (strony 96 98);
wyrwnywa pooenie obiektw na stronie (strony 98 100).

LEKCJA 3.
Praca z warstwami

101