GIMP: tworzenie grafiki na potrzeby WWW (cz 5) Włodzimierz Gajda Po szczegółowym omówieniu selekcji, cieek oraz warstw nadszedł czas na połczenie wszystkich elementów. Dzisiejszy zestaw wicze zaprezentuje podstawowe techniki projektowania szaty graficznej witryny WWW. Selekcje, cieki oraz warstwy Kluczem do opanowania GIMPa jest biegłe posługiwanie si selekcjami, ciekami oraz warstwami. Kade z tych narzdzi znajduje swoje zastosowanie podczas tworzenia witryn internetowych i jest konieczne przy bardziej złoonych projektach. Zanim przejdziemy do wykonywania wicze, zatrzymajmy si przy operacjach łczcych cieki, warstwy i selekcje. Rozpocznijmy od przekształcania selekcji w warstw i na odwrót. Przekształcenie selekcji w warstw moemy wykona na dwa sposoby: stosujc operacj kopiuj/wklej lub wykorzystujc technik cignij-upu. W obydwu przypadkach mamy do czynienia z tzw. pływajcym zaznaczeniem. Pływajce zaznaczenie moemy zakotwiczy (tj. umieci) na aktywnej warstwie lub przekształci w now warstw. Tworzenie pływajcej selekcji czsto wprawia pocztkujcych uytkowników GIMPa w zakłopotanie. Pamitajmy, e operacja cofnij usunie wszelkie zmiany w rysunku przywracajc poprzedni jego stan. Zwrómy równie uwag, e operacja kopiuj/wklej umoliwia skopiowanie zawartoci aktywnej warstwy lub warstw widocznych. Po wklejeniu, w obrazie pojawia si pływajca selekcja o kształcie i zawartoci odpowiadajcej biecemu zaznaczeniu. Przejdmy do przekształcenia warstwy w selekcj. Przekształcenie warstwy w selekcje ma na celu zaznaczenie całej nieprzezroczystej zawartoci warstwy. Słuy do tego opcja Warstwy Zaznaczenie z kanału alfa. Drugim rodzajem przekształce jest konwersja zaznaczenia w ciek i na odwrót. Do tego słu przyciski Tworzy zaznaczenie ze cieki oraz Tworzy ciek z zaznaczenia dostpne w oknie dialogowym cieek. Łczc przekształcenia zaznaczenia w warstwy oraz cieek w zaznaczenia moemy oczywicie uzyska przekształcenie cieki w warstw i na odwrót. W celu przekształcenia cieki w warstw wystarczy ciek przekształci w zaznaczenie, a nastpnie wykona operacje kopiuj/wklej. W ten sposób otrzymamy warstw o kształcie 1
odpowiadajcym kształcie cieki. Przekształcenie odwrotne, warstwy w ciek przebiega nastpujco: zaznaczamy cał warstw (Warstwy Zaznaczenie z kanału alfa), a nastpnie przekształcamy zaznaczenie w ciek. Otrzymana cieka bdzie miała identyczny kształt jak aktywna warstwa. Jak praktycznie wykorzysta opisane przekształcenia? Na przykład do tworzenia cieek o kształcie okrgu lub kwadratu. Poniewa bardzo łatwo otrzyma selekcj okrgł lub kwadratow, zatem najprostsza metoda otrzymania cieki o takim kształcie polega na uzyskaniu zaznaczenia i przekształceniu go w ciek. Tyle, jeli chodzi o przekształcenia. Przejdmy do drugiej wanej sprawy, jak jest zapamitywanie selekcji. Wprawdzie kształt selekcji moglibymy zapamita w ciece, nie jest to jednak wygodne, poniewa powoduje utracenie czci informacji dotyczcych zaznaczenia. Zaznaczenia charakteryzuj si dwoma cechami: kształtem oraz gładkoci. Zapamitanie selekcji w postaci cieki powoduje utrat informacji o gładkoci. Do zapamitywania selekcji naley wykorzysta kanały. Dodatkow zalet jest moliwo łatwego łczenia zapamitanych cieek. Klawisze Ctrl oraz Shift pomog uzyska sum, rónic lub cz wspóln kilku zapamitanych zaznacze. Zapamitanie biecej selekcji wykonamy klikajc opcj Zaznaczenie Zapisz do kanału. Ostatni wan rzecz, na jak chciałbym zwróci uwag we wstpie jest fakt, e wszystkie operacje edytorskie dotycz aktualnej selekcji oraz warstwy. Jeli na przykład malujemy pdzlem, wówczas lady pdzla zostaj umieszczone na warstwie aktywnej nawet, jeli jest ona niewidoczna. Ponadto pdzel nie wyjedzie poza brzeg aktywnej warstwy ani biecej selekcji. Narzdzia edycyjne (np. pdzel, ołówek, wypełnianie farb) maluj po aktywnej warstwie. Dzieje si tak nawet wówczas, gdy jest ona niewidoczna. Zasig narzdzia jest ograniczony przez rozmiar aktywnej warstwy oraz selekcji. cieki moemy przekształca w selekcje, za selekcje - w cieki. Ponadto moliwe jest dokonanie konwersji zaznaczenia w kształt warstwy oraz nieprzezroczystej zawartoci warstwy w zaznaczenie. Selekcje charakteryzuje kształt oraz mikko krawdzi. Do zapisywania selekcji słu kanały. Kilka selekcji zapisanych w kanałach łatwo połczy wykonujc sum, rónic bd cz wspóln za pomoc klawiszy Ctrl oraz Shift. 2
Nagłówek strony WWW Wykonanie przedstawionych nagłówków wymaga umiejtnoci operowania warstwami, dodawania efektu cienia oraz tworzenia ozdobnych napisów skryptami Script-Fu Loga. wiczenie 1 Wykonaj nagłówek strony www "Fotogaleria" przedstawiony na rysunku 1. Przedstawiony nagłówek składa si z czterech elementów: napisu oraz trzech małych fotografii. Kady z tych elementów umieszczamy na osobnej warstwie. Łcznie obraz posiada wic pi warstw: białe tło, napis tytułowy oraz trzy warstwy ze zdjciami. Napis "FOTOGALERIA" wykonujemy przy uyciu skryptu Dodatki Script-Fu Loga Proste I. Wybrana czcionka to Tachoma o kolorze niebieskim. Po wykonaniu napisu, wyłczamy widoczno warstwy tło, spłaszczamy obraz i kopiujemy do przygotowywanego nagłówka. Nastpnie przystpujemy do wklejenia trzech miniaturowych fotografii. Zauwamy, e kada z fotografii posiada niewielk niebiesk krawd. Krawd dodamy do obrazu korzystajc ze skryptu Script-Fu Dekoracje Dodaj krawd. Kolejno dla kadej fotografii wykonujemy nastpujca procedur: otwieramy obraz, skalujemy do rozmiarów 200x150 pikseli, dodajemy jednopikselow krawd, spłaszczamy obraz (krawd znajduje si na osobnej warstwie), kopiujemy i wklejamy do przygotowywanego nagłówka. Po wklejeniu skalujemy wklejon warstw zmniejszajc nieco jej rozmiary w taki sposób, by kada z wklejonych miniatur miała inny rozmiar. Do skalowania warstw słuy narzdzie przekształce: Obracanie, skalowanie, cinanie, perspektywa. Domylnie aktywn opcj jest obracanie. Działanie narzdzia zmienimy podwójnie klikajc w jego przycisk w oknie głównym GIMPa. Rys. 1. Baner serwisu "Fotogaleria". wiczenie 2 Wykonaj nagłówek serwisu powiconego klockom Lego. Nagłówek ten jest nieco bardziej skomplikowany od nagłówka fotogalerii. Posiada on łcznie 10 warstw: dwie warstwy na napisy "Lego" oraz "technic", dwie warstwy na rysunki helikoptera i samochodu. Kady z tych elementów posiada cie umieszczony na osobnej warstwie, co daje łcznie osiem warstw. Dodatkowo rysunek posiada białe tło oraz warstw zawierajc wypełnienie szarym gradientem. 3
Po utworzeniu nowego rysunku dodajemy do niego now pust warstw o rozmiarze równym rozmiarowi rysunku. Warstw t wypełniamy szarym gradientem liniowym. Nastpnie dodajemy do obrazu napisy. Wykorzystany skrypt to ponownie Dodatki Script-Fu Loga Proste I, za czcionka to Comic Sans MS. Po wklejeniu napisów przystpujemy do wycicia samolotu oraz helikoptera z instrukcji Lego. Do wycicia elementów wykorzystujemy cieki. Gdy cieka jest gotowa, przekształcamy j w zaznaczenie, po czym wykonujemy operacj kopiuj/wklej. Po wklejeniu helikoptera skalujemy go do odpowiednich rozmiarów. Podobnie postpujemy z samochodem. Teraz pozostało ju tylko dodanie cienia czterech elementów: samolotu, samochodu oraz dwóch napisów. Ustalamy aktywn warstw warstw z napisem "Lego", a nastpnie wykonujemy zaznaczenie z kanału alfa, po czym uruchamiamy skrypt Script-Fu Cie Rzucany cie. W identyczny sposób dodajemy cie pozostałym trzem elementom. Rys. 2. Nagłówek witryny "Lego Technic". Projekt szaty graficznej witryny WWW wiczenie 3 Przygotuj stron tytułow firmy "BEST" przedstawion na rysunku 3. Przedstawiona strona składa si z niebiesko-białego tła, nazwy opcji, czarnych kropek umieszczonych przy opcjach oraz napisu prezentujcego nazw firmy. Prac rozpoczynamy od przygotowania tła. Na nowym, pustym rysunku umieszczamy prowadnice wyznaczajce rodek koła stanowicego tło. Nastpnie zaznaczamy due koło, po czym wykorzystujc operacj łczenia zaznacze dodajemy do koła prostokt. Teraz zaznaczony obszar powinien odpowiada białemu fragmentowi tła strony. Rysunek 3.b przedstawia dwa zmniejszone zaznaczenia, które tworz białe tło. W celu wypełnienia niebieskiego obszaru farb odwracamy zaznaczenie, po czym dodajemy now, przezroczyst warstw i wypełniamy zaznaczenie na nowej warstwie niebiesk farb. Powinnimy otrzyma niebieski łuk stanowicy tło. Teraz przystpujemy do dodania opcji "Informacje", "Usługi", "Serwis", "Sklep". Opcje dodajemy za pomoc narzdzia tekstowego. W dokładnym pozycjonowaniu napisów pomog nam prowadnice. 4
Kolejny element strony to czarne kropki znajdujce si z lewej strony opcji. Kropki te wykonujemy za pomoc zaznaczenia eliptycznego. Klawisze Ctrl oraz Shift modyfikuj działanie narzdzia do zaznaczania eliptycznych obszarów w taki sposób, e zaznaczane jest koło o zadanym rodku. Wszystkie kropki umieszczamy na jednej warstwie. Po dodaniu do rysunku nowej warstwy ustawiamy prowadnice, nastpnie zaznaczamy koło i wypełniamy je farb. Ostatni element strony to nazwa firmy "BEST". Logo firmy tworzymy wykorzystujc narzdzie tekstowe. Po dodaniu na osobnej warstwie napisu "BEST" tworzymy zaznaczenie z kanału alfa obejmujce cały napis. Zaznaczenie powikszamy, a nastpnie wypełniamy niebiesk farb (na nowej warstwie). Tak powstaje niebieskie tło nazwy firmy. 5
Rys. 3. Strona firmy "BEST". 6
wiczenie 4 Przygotuj szkielet strony studia fotograficznego przedstawiony na rysunku 4. Strona "Studio fotograficzne" zawiera: tło składajce si z kratki ilustracji, łuk z lewej strony, cie łuku oraz ozdobny napis. Pierwszym etapem naszej pracy bdzie przygotowanie kratki szesnastu miniaturowych ilustracji. wiczenie to zostało szczegółowo opisane w poprzednim odcinku. Nastpnie do strony dodajemy łuk. Tworzymy now warstw, pomniejszamy kilkukrotnie widok (klawisz -), i zaznaczamy koło o rodku lecym na lewo od rysunku i o duym promieniu. Tak uzyskane zaznaczenie odwracamy, i wypełniamy biał farb. Jeli zmniejszymy nieprzepuszczalno warstwy do około 80%, oraz wyłczymy widoczno innych warstw (Shift-klik w wybran warstw), wówczas powinnimy otrzyma obraz przedstawiony na rysunku 4.b. Kolejnym etapem pracy jest dodanie cienia rzucanego przez łuk. Ponownie zaznaczamy łuk wykonujc operacj zaznaczenie z kanału alfa (dla warstwy z łukiem), po czym odwracamy zaznaczenie. Teraz wykonujemy skrypt rzucajcy cie. Ostatnim elementem, jaki dodajemy do rysunku jest napis "Fotogaleria" tworzony jednym ze skryptów Dodatki Script-Fu Loga. 7
Rys. 4. Serwis studia fotograficznego. wiczenie 5 Przygotuj stron firmy "Maszyny" przedstawion na rysunku 5. Strona składa si z nagłówka oraz menu. Nagłówek strony zawiera dwa długie prostokty rzucajce cie, na których umieszczono miniaturowe fotografie oraz napisy. Menu strony zawiera kilka prostoktów rzucajcych cie i napisy. Główn trudno w wykonaniu strony stanowi prostokty. Prostokty tworzymy za pomoc selekcji prostoktnej z wykorzystaniem prowadnic. Prac rozpoczynamy od dokładnego ustawienia prowadnic, po czym kolejno zaznaczamy prostokty tak jak to pokazano na rysunku 5.b. 8
Prostokty wypełniamy gradientem liniowym, a nastpnie dodajemy do rysunku cie. Kolejnym krokiem jest dodanie do rysunku miniaturowych fotografii koparki oraz lokomotywy. Otwieramy plik przedstawiajcy kopark, zaznaczamy cało (Ctrl+A), kopiujemy (Ctrl+C), wklejamy do tworzonej strony firmy "Maszyny" (Ctrl+V) i umieszczamy na osobnej warstwie (Ctrl+L, Ctrl+N). Tak umieszczon warstw skalujemy wykorzystujc opcj Narzdzia Przekształcenia Przekształ (w zalenoci od ustawie programu moe by konieczna zmiana biecego przekształcenia Narzdzia Okna dialogowe Opcje narzdzia). Po przeskalowaniu zdjcia koparki do danych rozmiarów zmieniamy kolorystyk warstwy stosujc najpierw opcj Obraz Kolory Desaturacja, a nastpnie okno dialogowe Obraz Kolory Balans kolorów. Pamitajmy, e zarówno desaturacja jak i balans kolorów odnosz si do biecej warstwy. Po dodaniu miniaturki z lokomotyw pozostało nam jedynie umieszczenie napisów i efektu cienia, jaki rzucaj napisy. Stosujemy narzdzie tekstowe oraz skrypt Rzucany cie. 9
Rys. 5. Strona spółki "Maszyny S. C.". wiczenie 6 Przygotuj stron tytułow serwisu powiconego jzykowi "Logo" przedstawion na rysunku 6. Strona składa si z kilku napisów, ramki tworzcej menu i posiada niebieskie tło. Po utworzeniu nowego obrazu, zaznaczamy cał warstw tło (Ctrl+A) i wypełniamy j kolorem niebieskim (Skrót Ctrl+.). Ramk wykonujemy z wykorzystaniem cieek. Ustalamy prowadnice tak jak to przedstawiono na rysunku 6.c, po czym dodajemy do rysunku ciek widoczn na rysunku 6.b. Gdy cieka jest gotowa, przekształcamy j w zaznaczenie, a nastpnie wypełniamy kolorem ciemnoniebieskim. Po wypełnieniu kolorem obrysowujemy ciek naciskajc 10
przycisk Rysuje ciek znajdujcy si w dolnej czci okna dialogowego cieek. Ponownie przekształcamy ciek w zaznaczenie i dodajemy efekt cienia. Pozostało nam jeszcze dodanie napisów opcji. Skorzystanie z narzdzia tekstowego i dodanie efektu cienia do napisów koczy wiczenie. 11
Rys. 6. Zbiór zada z jzyka Logo. 12
wiczenie 7 Przygotuj stron tytułow serwisu powiconego jzykowi "Logo" przedstawion na rysunku 7. wiczenie to wykonujemy niemal identycznie jak wiczenie poprzednie. Rozpoczynamy od tła. Strona posiada tło zawierajce dwuliniowy gradient przechodzcy od koloru ółtego poprzez biały z powrotem do ółtego. Po wywietleniu okna dialogowego modyfikujcego właciwoci gradientu ustalamy Gradient: dwuliniowy. Gdy tło jest gotowe dodajemy do rysunku ciek. Kształt cieki został przedstawiony na rysunku 7.b. Gotow ciek przekształcamy w zaznaczenie i wypełniamy kolorem ółtym, po czym dodajemy efekt cienia. Na zakoczenie, wykorzystujc narzdzie tekstowe dodajemy nazwy opcji. 13
Rys. 7. Druga wersja zbioru zada "Logo". wiczenie 8 Przygotuj stron powicona programowi "NotH" widoczn na rysunku 8. wiczenie numer 8 zawiera nastpujce elementy: czarny poziomy pas, cienk, czarn kresk pionow z poziomymi odnogami, dwukolorowy napis "NotH" oraz napis gajdaw. wiczenie rozpoczynamy od umiejscowienia prowadnic tam, gdzie ma si znale czarny poziomy pas i cienkie czarne kreski. Umiejscowienie prowadnic ilustruje rysunek 8.c. 14
Nastpnie rysujemy czarny pas. Wykorzystujemy do tego zaznaczenie prostoktne oraz wypełnianie farb. W celu dodania delikatnego cienia, jaki rzuca czarny pas, wykonujemy skrypt Rzucany cie. Teraz przechodzimy do cienkich kresek. Rysujemy je wykorzystujc cieki. Dodajemy do rysunku sze cieek, bdcych liniami prostymi tak, by po wykonaniu operacji Rysuj ciek otrzyma kreski przedstawione na rysunku 8.b. Po narysowaniu cienkich czarnych kresek na osobnej warstwie wykonujemy operacj Zaznaczenie z kanału alfa, po czym wykonujemy skrypt tworzcy cie zaznaczenia. W ten sposób kreski zostan wzbogacone o cie. Ostatni etap pracy to dwukolorowy napis "NotH". Napis ten tworzymy nastpujco. Dodajemy czarny napis "NotH" na osobnej warstwie. Zaznaczamy cały napis stosujc opcj Zaznaczenie z kanału alfa. Wykorzystujc prowadnice, zaznaczenie prostoktne oraz klawisz Ctrl usuwamy górn połow zaznaczenia. Dodajemy now warstw, po czym wypełniamy na niej selekcj (pokrywajca w tym momencie doln cz napisu "NotH") kolorem białym. Powinnymy otrzyma napis dwukolorowy. Cie napisu "NotH" dodajmy zaznaczajc cały napis (ponownie selekcja z kanału alfa dla warstwy z czarnym napisem "NotH") i uruchamiajc skrypt Rzucany cie wiczenie koczymy dodajc napis "gajdaw" w lewej czci strony. 15
Rys. 8. Strona programu "NotH". 16
wiczenie 9 Przygotuj witryn sklepu "Animal" widoczn na rysunku 9. wiczenie to prezentuje wykorzystanie wspomnianej we wstpie metody zapisywania zaznacze w kanałach. Głównym elementem strony jest ółto-czerwone tło. Ponadto strona składa si z napisów tytułowych "Animal" oraz "sklep zoologiczny". Napisy te s nieco obrócone. W dolnej czci strony zostały umieszczone napisy "gady", "ptaki", itd. Tło strony wykonamy wykorzystujc kanały. Wykonujemy zaznaczenie widoczne na rysunku 9.b. Zaznaczenie to jest duym okrgiem, którego rodek ley daleko poza praw krawdzi obrazu. Wykonane zaznaczenie odwracamy (Zaznaczenie Odwró), a nastpnie na nowej warstwie wypełniamy kolorem czerwonym. Powinnimy otrzyma obraz widoczny na rysunku 9.b. Biece zaznaczenie zapisujemy wykonujc operacj Zaznaczenie Zapisz do kanału. Przechodzimy do łuku widocznego na rysunku 9.c. Wykonujemy zaznaczenie eliptyczne o kształcie koła, którego rodek ley daleko poniej dolnej krawdzi obrazu. Nastpnie zaznaczenie odwracamy i zapisujemy do kanału (Zaznaczenie Zapisz do kanału). Teraz dodajemy now warstw i wypełniamy j kolorem czerwonym. Górny ółty naronik namalujemy wykonujc cz wspólna dwóch zapamitanych zaznacze. Przechodzimy do okna kanałów: Warstwy Warstwy, kanały i cieki, zakładka Kanały (skrót: Ctrl+L). Wybieramy jedn z zapamitanych selekcji i naciskamy przycisk Tworzy zaznaczenie z kanału dostpny w dolnej czci okna dialogowego. Powinnimy otrzyma pierwsz selekcj. Nastpnie przechodzimy na drug selekcj i przytrzymujc klawisze Ctrl oraz Shift (w stosunku do selekcji klawisze te tworz cz wspóln) ponownie naciskamy guzik Tworzy zaznaczenie z kanału. Otrzymane zaznaczenie powinno odpowiada górnemu, lewemu naronikowi. Dodajemy now warstw i wypełniamy zaznaczenie kolorem ółtym. Dolny ółty fragment strony to odwrócona suma dwóch pierwszych zaznacze przedstawionych na rysunkach 9.b oraz 9.c. Zatem usuwamy zaznaczenie (Ctrl+Shift+A) i przechodzimy do okna kanałów (Ctrl+L). Uzyskujemy zaznaczenie z pierwszego z zapamitanych kanałów, po czym przechodzimy do drugiego kanału i przytrzymujc klawisz Shift, który powoduje sumowanie zaznacze, naciskamy przycisk Tworzy zaznaczenie z kanału. Po odwróceniu, otrzymane zaznaczenie powinno pokrywa dolny ółty fragment strony. Dodajmy now warstw i wypełniamy zaznaczenie kolorem ółtym. Powinnimy otrzyma cztery warstwy, które przedstawiaj tło widoczne na rysunku 9.d. Obrócone napisy "Animal" oraz "sklep zoologiczny" wykonujemy stosujc narzdzie tekstowe i umieszczajc napisy na osobnych warstwach. Do obracania warstwy słuy narzdzie Obracanie, skalowanie, cinanie, perspektywa. 17
Rys. 9. Witryna sklepu "Animal". 18
wiczenie 10 Przygotuj stron WWW powicon literaturze przedstawion na rysunku 10. Strona ta składa si z nastpujcych elementów: tło przedstawiajce obrócony tekst opowiadania "Zew krwi", brzowe tło rozjanione w miejscach przeznaczonych na opcje i blednce ku dołowi, brzowe kreski oddzielajce nagłówek strony, lewe oraz prawe menu, napisy. Wykonanie wiczenia rozpoczynamy od tła strony. Otwieramy plik tekstowy z opowiadaniem "Zew krwi" dowolnym edytorem (np. programem notatnik). Zwikszamy okno edytora na cały ekran, a nastpnie kopiujemy wygld okna do schowka naciskajc klawisze Alt- PrintScreen. Zawarto okna została skopiowana do schowka. Teraz w programie GIMP wykonujemy operacj wklejania ze schowka: Edycja Wklej ze schowka. Poniewa wklejony obraz zawiera oprócz tekstu powieci równie ramk okna i menu główne, zatem zaznaczamy fragment obrazu zawierajcy wyłcznie tekst utworu, kopiujemy i wklejamy do przygotowywanej witryny. Wklejony obraz umieszczamy na osobnej warstwie. Nastpnie warstw nieco obracamy i zmniejszamy jej nieprzepuszczalno. W ten sposób otrzymalimy tło witryny zawierajce tekst opowiadania. Przystpujemy do dodania brzowej powiaty znikajcej ku dołowi. Wykorzystujc odpowiednio rozmieszczone prowadnice tworzymy zaznaczenie przedstawione na rysunku 10.b. Zaznaczenie to składa si z trzech prostoktów. Po otrzymaniu zaznaczenia bdcego sum trzech prostoktów wygładzamy zaznaczenie (Zaznaczenie Wygład), po czym je odwracamy. Teraz zaznaczony obszar wypełniamy gradientem zmieniajcym si od brzowego do białego. Nastpnie wykorzystujc prowadnice i cieki dodajemy do rysunku brzowe kreski. wiczenie koczymy umieszczajc napisy "Literatura", "Autorzy", "Utwory", "Proza" oraz "Poezja" wykonane skryptami z menu Loga. 19
Rys. 10. Serwis powicony literaturze. wiczenie 11 Przygotuj witryn "TIK-TAK" przedstawion na rysunku 11. Witryna "TIK-TAK" składa si dwóch zielonych łuków, napisu "TIK-TAK" oraz czterech fotografii. Najtrudniejszym elementem s dwa zielone łuki. Łuk dolny wykonamy zaznaczajc koło o duym promieniu i o rodku lecym duo poniej dolnej krawdzi obrazu. Współrzdna X rodka zaznaczenia wypada w połowie szerokoci obrazu. Po otrzymaniu zaznaczenia wypełniamy je na osobnej warstwie kolorem zielonym. 20
Górny łuk otrzymamy kopiujc łuk dolny i odpowiednio przekształcajc. Zduplikujmy warstw zawierajc dolny łuk, a nastpnie odbijmy j pionowo (Narzdzia Przekształcenia Odbij; naley przytrzyma klawisz Ctrl). Jeli teraz przesuniemy otrzyman warstw do góry i umiecimy na rodku strony wówczas otrzymamy obraz przedstawiony na rysunku 11.b i składajcy si z trzech warstw: białego tła, dolnego łuku i górnego łuku. Stosujc narzdzie tekstowe dodajemy do rysunku napis "TIK-TAK". Ostatni etap pracy stanowi dodanie czterech kwadratowych fotografii. Dla kadej fotografii z osobna wykonujemy nastpujc procedur: otwieramy zdjcie, skalujemy obraz (Obraz Skaluj obraz) tak, by interesujcy nas fragment fotografii miecił si w kwadracie 150x150 pikseli, wykorzystujc narzdzie Kadrowanie i zmiana rozmiaru zmieniamy rozmiar obrazu na 148x148 pikseli, dodajemy jednopikselow ramk do obrazu (Script-Fu Dekoracje Dodaj krawd); dodanie ramki jednopiselowej zwikszy rozmiar obrazu do wymiarów 150x150px, spłaszczamy obraz, usuwamy kolory: Obraz Kolory Desaturacja, zmieniamy balans kolorów Obraz Kolory Balans kolorów, kopiujemy obraz i wklejamy do przygotowywanej strony. Po wklejeniu czterech jednobarwnych obrazów o rozmiarach 150x150 pikseli pozostało jedynie dodanie prowadnic i odpowiednie rozmieszczenie wklejonych zdj. 21
Rys. 11. Witryna "TIK-TAK". wiczenie 12 Przygotuj witryn "Nadlenictwo" przedstawion na rysunku 12. Witryna nadlenictwo składa si z tła, napisu "Nadlenictwo" i kwadratów znajdujcych si z lewej strony, z trzech pionowych fotografii drzew, napisów "Zasoby", "Ludzie", "Lasy" znajdujcych si na tle wypełnionym gradientem oraz białego kwadratu przeznaczonego na tre strony. Tło strony stanowi zdjcie o bladozielonych kolorach. Na warstwie tło umieszczamy fotografi, nastpnie dodajemy warstw, któr wypełniamy kolorem zielonym. Warstwa 22
zielona przysłania warstw ze zdjciem. Zmniejszajc nieprzezroczysto warstwy zielonej osigniemy efekt widoczny na tle strony "Nadlenictwo". Teraz wklejamy trzy wycite fotografie drzew o wymiarach 100x300 pikseli. Za pomoc narzdzia tekstowego pod fotografiami umieszczamy napisy. Tło kadego z napisów stanowi prostokt wypełniony gradientem. Zaznaczamy prostokt o odpowiednim kształcie, dodajemy now przezroczyst warstw i wypełniamy j gradientem. Tak otrzymane tło przesuwamy pod warstw z napisem. Ostatni element witryny to biały kwadrat o rozmytym brzegu. Zaznaczamy selekcj kwadratow, rozmywamy jej brzeg, po czym na nowej warstwie wlewamy w ni kolor biały. Rys. 12. Strona "Nadlenictwo". Podsumowanie Dzisiejsza seria wicze łczy operacje na warstwach, selekcjach i ciekach. Płynne wykonywanie zada takich jak kopiowanie i wklejanie fragmentów, precyzyjne pozycjonowanie warstw, selekcji i cieek za pomoc prowadnic, skalowanie rysunków do danych rozmiarów w taki sposób, by wymagany fragment ilustracji był w całoci umieszczony na przeskalowanym obrazie stanowi abecadło pracy projektanta strony WWW. 23