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 MX 2004.
Oficjalny podrcznik
Autor: Patti Schulze
Tumaczenie: Magorzata Koziej
ISBN: 83-7361-535-0
Tytu oryginau: Macromedia Fireworks
MX 2004: Training from the Source
Format: B5, stron: 272
Macromedia Fireworks MX 2004 to aplikacja suca do przygotowywania grafiki
do publikacji multimedialnych i witryn WWW. czy w sobie moliwoci programu
do edycji grafiki wektorowej i bitmapowej, umoliwia tworzenie przyciskw, menu
rozwijanych oraz animowanych GIF-w. Rozbudowane funkcje eksportu pozwalaj
na zapis grafiki w wielu formatach oraz wygenerowanie kodu HTML i JavaScript
niezbdnego do umieszczenia grafiki na stronie WWW. Fireworks doskonale integruje
si z innym produktem firmy Macromedia Dreamweaverem.
Macromedia Fireworks MX 2004. Oficjalny podrcznik to kompletny zbir informacji
o tym programie, przygotowany przy wsppracy z pracownikami dziau pomocy
technicznej firmy Macromedia i dokadnie przez nich sprawdzony. Wykonujc wiczenia
zawarte w 11 lekcjach, poznasz wszystkie funkcje Fireworks wykorzystywane przy
tworzeniu grafiki dla stron WWW. Nauczysz si korzysta z narzdzi, filtrw i funkcji
eksportu.
Edycja grafiki bitmapowej
Praca z narzdziami wektorowymi
Korzystanie z warstw i efektw
Umieszczanie tekstu w dokumencie
Tworzenie elementw interaktywnych
Optymalizacja i eksport grafiki
Tworzenie animowanych GIF- w
Maski
Integracja Fireworks MX z Dreamweaverem MX

Spis treci
Wstp........................................................................................................................................................................................................ 9
Lekcja 1. Edycja grafiki bitmapowej ...................................................................................................................................... 13
Przegld narzdzi panelu Tools programu Fireworks MX 2004 ......................................................................... 15
Strona startowa ........................................................................................................................................................... 16
Grupy paneli swobodnych i dokowanych .............................................................................................................. 16
Panel Properties .......................................................................................................................................................... 18
Edycja obiektw bitmapowych ................................................................................................................................ 18
Zmiana powikszenia widoku.................................................................................................................................. 19
Zmiana koloru obszaru roboczego..........................................................................................................................20
Uycie narzdzia Crop .............................................................................................................................................. 21
Uycie panelu Info.....................................................................................................................................................22
Uycie narzdzia Magic Wand ................................................................................................................................. 23
Zapisywanie zaznaczenia .......................................................................................................................................... 26
Dostosowywanie poziomw..................................................................................................................................... 26
Podgld ustawie korekcji gamma ..........................................................................................................................28
Uycie narzdzi Lasso i Polygon Lasso ...................................................................................................................29
Dodawanie i odejmowanie zaznacze..................................................................................................................... 30
Tworzenie nowego dokumentu................................................................................................................................ 31
Skalowanie obrazu ..................................................................................................................................................... 33
Zmiana rozmiarw obrazu ....................................................................................................................................... 35
Kopiowanie zaznaczenia........................................................................................................................................... 37
Uycie narzdzia Rubber Stamp .............................................................................................................................. 38
Uycie narzdzia Smudge .........................................................................................................................................40
Uycie narzdzia Eraser............................................................................................................................................. 41
Uycie narzdzia Red Eye Removal......................................................................................................................... 41
Uycie narzdzi Marquee.......................................................................................................................................... 43
Przesuwanie zaznaczenia...........................................................................................................................................44
Dodatkowe opcje zaznaczania.................................................................................................................................. 46

Lekcja 2. Uywanie narzdzi wektorowych........................................................................................................................ 49

Wywietlanie miarek i prowadnic............................................................................................................................ 50
Uycie narzdzia Ellipse............................................................................................................................................ 53

Uycie narzdzia Rectangle ...................................................................................................................................... 55

Uycie narzdzia Polygon ......................................................................................................................................... 55
Uycie narzdzia Scale............................................................................................................................................... 57
Kopiowanie ................................................................................................................................................................. 58
Obracanie obiektu ..................................................................................................................................................... 59
Korzystanie z panelu History ................................................................................................................................... 60
Maskowanie obiektw poleceniem Paste Inside .................................................................................................... 63
Dodawanie efektw aktywnych................................................................................................................................ 64
Stosowanie filtrw jako efektw aktywnych........................................................................................................... 66
Uycie polecenia Save As Style ................................................................................................................................. 67
Grupowanie obiektw ............................................................................................................................................... 68
Importowanie grafiki................................................................................................................................................. 69
Przycinanie obszaru roboczego................................................................................................................................ 71

Lekcja 3. Praca z warstwami....................................................................................................................................................... 73

Uycie panelu Layers .................................................................................................................................................74
Dodawanie i nazywanie warstw................................................................................................................................ 76
Ustawianie rozmiaru i pooenia obiektu ..............................................................................................................79
Zmiana nazwy warstwy..............................................................................................................................................80
Blokowanie warstwy...................................................................................................................................................80
Wywietlanie i ukrywanie warstwy........................................................................................................................... 81
Wybieranie kolorw...................................................................................................................................................82
Rysowanie zaokrglonych prostoktw ................................................................................................................. 83
Uycie autoksztatw ................................................................................................................................................. 85
Dodawanie tekstury i cienia......................................................................................................................................87
Zmiana kolejnoci obiektw na warstwie ...............................................................................................................88
Uycie trybu edycji pojedynczej warstwy ................................................................................................................90
Ustawianie kolorw domylnych............................................................................................................................. 91
Wyrwnywanie pooenia obiektw ....................................................................................................................... 93

Lekcja 4. Dodawanie tekstu ....................................................................................................................................................... 97

Dodawanie tekstu.......................................................................................................................................................98
Wyrwnywanie i tworzenie wci w tekcie .......................................................................................................... 103
Sprawdzanie pisowni ............................................................................................................................................... 104
Importowanie tekstu................................................................................................................................................ 106
Uycie narzdzia Text Editor ................................................................................................................................. 106
Uycia narzdzia Line.............................................................................................................................................. 108
Uycie narzdzia Subselection ............................................................................................................................... 109
Uycie polecenia Paste Attributes...........................................................................................................................110

MACROMEDIA FIREWORKS MX 2004

Oficjalny podrcznik

Lekcja 5. Techniki zaawansowane ....................................................................................................................................... 113

czenie ksztatw.....................................................................................................................................................114
Powielanie obiektw za pomoc polecenia Repeat ..............................................................................................118
Tworzenie pyty CD..................................................................................................................................................121
Dodawanie wypenienia gradientowego ............................................................................................................... 123
Zmiana przezroczystoci......................................................................................................................................... 126
Dopasowanie tekstu do cieki............................................................................................................................... 128
Uycie polece Intersect i Crop ............................................................................................................................. 130
Przeksztacanie tekstu w cieki...............................................................................................................................131
Stosowanie przeksztace........................................................................................................................................ 132

Lekcja 6. Tworzenie przyciskw ............................................................................................................................................ 135

Uycie narzdzia Button Editor............................................................................................................................. 136
Dodawanie nowego przycisku.................................................................................................................................141
Zmienianie przyciskw ........................................................................................................................................... 144
Dodawanie nazwy i cza do przyciskw .............................................................................................................. 144
Importowanie przyciskw ...................................................................................................................................... 145
Zamienianie grafiki na przyciski ........................................................................................................................... 148

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

Tworzenie mapy obrazka ........................................................................................................................................ 153
Praca z warstw Web Layer...................................................................................................................................... 156
Dzielenie obrazu na paty ....................................................................................................................................... 157
Dodawanie patu ...................................................................................................................................................... 158
Tworzenie rozcznych obszarw aktywnych ...................................................................................................... 160
Dodawanie klatek......................................................................................................................................................161
Dodawanie behawiorw .......................................................................................................................................... 162
Podgld penoekranowy .......................................................................................................................................... 164
Dodawanie kolejnych patw ................................................................................................................................. 165

Lekcja 8. Optymalizacja i eksportowanie ........................................................................................................................ 167

Uywanie narzdzia Export Wizard ...................................................................................................................... 168
Wybieranie formatu obrazu ................................................................................................................................... 172
Uycie przycisku podgldu 4-Up ........................................................................................................................... 174
Uycie wzorcw ustawie optymalizacji............................................................................................................... 177
Eksportowanie obrazw JPEG ............................................................................................................................... 177
Wywietlanie podgldu w przegldarce................................................................................................................. 180
Eksportowanie pliku jako HTML...........................................................................................................................181
Uycie przycisku Quick Export ............................................................................................................................. 185

SPIS TRECI

Lekcja 9. Tworzenie animacji GIF ........................................................................................................................................ 187

Tworzenie animacji.................................................................................................................................................. 188
Uycie techniki skrki cebuli ..............................................................................................................................191
Wspuytkowanie warstwy.................................................................................................................................... 193
Uycie symboli animacji ......................................................................................................................................... 194
Kontrolowanie odtwarzania................................................................................................................................... 197
Eksportowanie animacji GIF.................................................................................................................................. 199
Uycie polecenia Export Preview dla animacji ....................................................................................................200
Uywanie animacji automatycznej ........................................................................................................................203
Animacja automatyczna efektw...........................................................................................................................204

Lekcja 10. Maskowanie i menu rozwijane ....................................................................................................................... 207

Tworzenie szablonu .................................................................................................................................................209
Maskowanie obrazu ................................................................................................................................................. 210
Maskowanie za pomoc panelu Layers ................................................................................................................. 214
Uycie tekstu jako maski ......................................................................................................................................... 215
Tworzenie patu tekstu ............................................................................................................................................ 216
Dodawanie menu ..................................................................................................................................................... 219
Edycja menu..............................................................................................................................................................223

Lekcja 11. Integracja z programem Dreamweaver MX .............................................................................................. 227

Programy Fireworks MX 2004 i Dreamweaver MX 2004 ...................................................................................229
Eksportowanie stron do programu Dreamweaver ..............................................................................................230
Tworzenie lokalnej witryny w programie Dreamweaver ....................................................................................232
Wywietlanie stron w programie Dreamweaver...................................................................................................237
Ustawianie preferencji programu Dreamweaver MX 2004 ................................................................................238
Wywietlanie strony w przegldarce ......................................................................................................................240
Dodawanie czy....................................................................................................................................................... 241
Optymalizacja w programie Fireworks .................................................................................................................243
Edycja w programie Fireworks z poziomu programu Dreamweaver................................................................244
Tworzenie szablonw w programie Dreamweaver ..............................................................................................246
Tworzenie strony na podstawie szablonu .............................................................................................................248
Dodawanie tekstu w programie Dreamweaver.....................................................................................................249
Modyfikowanie szablonu .......................................................................................................................................252
Przypisywanie szablonu do strony.........................................................................................................................254
Przemieszczanie plikw w panelu Files................................................................................................................. 255
Edycja menu utworzonego w Fireworks ............................................................................................................... 256

Skorowidz ....................................................................................................................................................................................... 259

MACROMEDIA FIREWORKS MX 2004

Oficjalny podrcznik

Praca z warstwami

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.

74

MACROMEDIA FIREWORKS MX 2004

Oficjalny podrcznik

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

75

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 (Windows) lub strzak skierowan w d (Mac OS).
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.

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

MACROMEDIA FIREWORKS MX 2004

Oficjalny podrcznik

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.

Nad warstw Layer 1 pojawi si nowa warstwa nazwana Logo.

LEKCJA 3.
Praca z warstwami

77

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.

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.

78

MACROMEDIA FIREWORKS MX 2004

Oficjalny podrcznik

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

79

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

(Windows) lub Return (Mac OS) 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 (Windows) lub Return (Mac OS).

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

80

MACROMEDIA FIREWORKS MX 2004

Oficjalny podrcznik

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 naronego uchwytu, 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 (Windows) lub Option (Mac OS) 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

81

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

Przytrzymaj klawisz Alt (Windows) lub Option (Mac OS) 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.
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 czerwon.

82

MACROMEDIA FIREWORKS MX 2004

Oficjalny podrcznik

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.

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.
LEKCJA 3.
Praca z warstwami

83

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 do wyboru 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.

84

MACROMEDIA FIREWORKS MX 2004

Oficjalny podrcznik

Moesz wpisa dowoln warto w polu tekstowym. Wcinij klawisz Enter (Windows)
lub Return (Mac OS), 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.
W tym wiczeniu wyprbujesz niektre z narzdzi Auto Shape. Stwrz nowy dokument dla tego
wiczenia.
1. Wybierz narzdzie Rounded Rectangle Auto Shape.

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

LEKCJA 3.
Praca z warstwami

85

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 (Windows) lub Option (Mac OS) 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.

86

MACROMEDIA FIREWORKS MX 2004

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. Jeli utworzye obiekty w pliku home_page.png, moesz je usun lub zamkn bez zapisywania

dokumentu z prbami narzdzi Auto Shapes.

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.

LEKCJA 3.
Praca z warstwami

87

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.

W lekcji 2. dodawae efekt Bevel do cukierka. Cie dodasz w ten sam sposb. Kliknij przycisk
Add Effects (dodaj efekt) 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.
88

MACROMEDIA FIREWORKS MX 2004

Oficjalny podrcznik

1. Zaznacz patyk. Przenie go nad cukierek.

Jest to obiekt, ktry chcesz przenie.

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.

LEKCJA 3.
Praca z warstwami

89

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

MACROMEDIA FIREWORKS MX 2004

Oficjalny podrcznik

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.

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
LEKCJA 3.
Praca z warstwami

91

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 (Windows)
lub Fireworks/Preferences (Mac OS). Na zakadce General okna dialogowego Preferences kliknij pola koloru Stroke (kontur) lub Fill (wypenienie) i wybierz nowy kolor domylny.

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.

92

MACROMEDIA FIREWORKS MX 2004

Oficjalny podrcznik

Nacinij klawisz D, aby nada kolory domylne wybranemu obiektowi. 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 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.

LEKCJA 3.
Praca z warstwami

93

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

94

MACROMEDIA FIREWORKS MX 2004

Oficjalny podrcznik

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

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

wykorzysta plik z katalogu Lekcja03\Start, jeli nie moesz znale utworzonego pliku.
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.

LEKCJA 3.
Praca z warstwami

95

Podsumowanie
Podczas tej lekcji nauczye si:

tworzy nowe warstwy i umieszcza na nich obiekty (strony 74 79);

uywa panelu Properties, aby przesuwa i zmienia rozmiary obiektw na stronie (strona 79);

zmienia nazwy warstw (strona 80);

blokowa warstw, aby zachowa jej zawarto (strony 80 81);

zmienia zaokrglenie rogw prostokta (strony 83 85);

uywa narzdzia Auto Shape (strony 85 87);

dodawa tekstur i cie do obiektu (strony 87 88);

przesuwa obiekty na warstwie, aby zmieni ich kolejno (strony 88 89);

uywa trybu edycji pojedynczej warstwy (strony 90 91);

ustawia domylne kolory (strony 91 92);

wyrwnywa pooenie obiektw na stronie (strony 93 95).

96

MACROMEDIA FIREWORKS MX 2004

Oficjalny podrcznik