GIMP: tworzenie grafiki na potrzeby WWW (czêœæ 5)

Strona 1

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

GIMP: tworzenie grafiki na potrzeby WWW

(część 5)

Włodzimierz Gajda

Po szczegółowym omówieniu selekcji, ścieŜek oraz warstw nadszedł czas na połączenie wszystkich elementów.

Dzisiejszy zestaw ćwiczeń zaprezentuje podstawowe techniki projektowania szaty graficznej witryny WWW.

1 kwietnia 2004 r.

Spis treści

1. Selekcje, ścieŜki oraz warstwy

2. Nagłówek strony WWW

2.1 Ćwiczenie 1

2.2 Ćwiczenie 2

3. Projekt szaty graficznej witryny WWW

3.1 Ćwiczenie 3

3.2 Ćwiczenie 4

3.3 Ćwiczenie 5

3.4 Ćwiczenie 6

3.5 Ćwiczenie 7

3.6 Ćwiczenie 8

3.7 Ćwiczenie 9

3.8 Ćwiczenie 10

3.9 Ćwiczenie 11

3.10 Ćwiczenie 12

Strona 2

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

4. Podsumowanie

1. Selekcje, ścieŜki oraz warstwy

Kluczem do opanowania GIMPa jest biegłe posługiwanie się selekcjami, ścieŜkami oraz warstwami. KaŜde z tych

narzędzi znajduje swoje zastosowanie podczas tworzenia witryn internetowych i jest konieczne przy bardziej

złoŜonych projektach.

Zanim przejdziemy do wykonywania ćwiczeń, zatrzymajmy się przy operacjach łączących ścieŜki, warstwy i

selekcje.

Rozpocznijmy od przekształcania selekcji w warstwę i na odwrót.

Przekształcenie selekcji w warstwę moŜemy wykonać na dwa sposoby: stosując operację kopiuj/wklej lub

wykorzystując technikę ciągnij-upuść. W obydwu przypadkach mamy do czynienia z tzw. pływającym

zaznaczeniem. Pływające zaznaczenie moŜemy zakotwiczyć (tj. umieścić) na aktywnej warstwie lub przekształcić w

nową warstwę.

Tworzenie pływającej selekcji często wprawia początkujących uŜytkowników GIMPa w zakłopotanie. Pamiętajmy,

e operacja cofnij usunie wszelkie zmiany w rysunku przywracając poprzedni jego stan.

Zwróćmy równieŜ uwagę, Ŝe operacja kopiuj/wklej umoŜliwia skopiowanie zawartości aktywnej warstwy lub warstw

widocznych. Po wklejeniu, w obrazie pojawia się pływająca selekcja o kształcie i zawartości odpowiadającej

bieŜącemu zaznaczeniu.

Przejdźmy do przekształcenia warstwy w selekcję. Przekształcenie warstwy w selekcje ma na celu zaznaczenie całej

nieprzezroczystej zawartości warstwy. SłuŜy do tego opcja Warstwy | Zaznaczenie z kanału alfa.

Drugim rodzajem przekształceń jest konwersja zaznaczenia w ścieŜkę i na odwrót.

Do tego słuŜą przyciski Tworzy zaznaczenie ze ścieŜki oraz Tworzy ścieŜkę z zaznaczenia dostępne w oknie

dialogowym ścieŜek.

Strona 3

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

Łącząc przekształcenia zaznaczenia w warstwy oraz ścieŜek w zaznaczenia moŜemy oczywiście uzyskać

przekształcenie ścieŜki w warstwę i na odwrót.

W celu przekształcenia ścieŜki w warstwę wystarczy ścieŜkę przekształcić w zaznaczenie, a następnie wykonać

operacje kopiuj/wklej. W ten sposób otrzymamy warstwę o kształcie odpowiadającym kształcie ścieŜki.

Przekształcenie odwrotne, warstwy w ścieŜkę przebiega następująco: zaznaczamy całą warstwę (Warstwy |

Zaznaczenie z kanału alfa), a następnie przekształcamy zaznaczenie w ścieŜkę. Otrzymana ścieŜka będzie miała

identyczny kształt jak aktywna warstwa.

Jak praktycznie wykorzystać opisane przekształcenia? Na przykład do tworzenia ścieŜek o kształcie okręgu lub

kwadratu. PoniewaŜ bardzo łatwo otrzymać selekcję okrągłą lub kwadratową, zatem najprostsza metoda otrzymania

cieŜki o takim kształcie polega na uzyskaniu zaznaczenia i przekształceniu go w ścieŜkę.

Tyle, jeśli chodzi o przekształcenia. Przejdźmy do drugiej waŜnej sprawy, jaką jest zapamiętywanie selekcji.

Wprawdzie kształt selekcji moglibyśmy zapamiętać w ścieŜce, nie jest to jednak wygodne, poniewaŜ powoduje

utracenie części informacji dotyczących zaznaczenia. Zaznaczenia charakteryzują się dwoma cechami: kształtem oraz

gładkością. Zapamiętanie selekcji w postaci ścieŜki powoduje utratę informacji o gładkości. Do zapamiętywania

selekcji naleŜy wykorzystać kanały. Dodatkową zaletą jest moŜliwość łatwego łączenia zapamiętanych ścieŜek.

Klawisze Ctrl oraz Shift pomogą uzyskać sumę, róŜnicę lub część wspólną kilku zapamiętanych zaznaczeń.

Zapamiętanie bieŜącej selekcji wykonamy klikając opcję Zaznaczenie | Zapisz do kanału.

Ostatnią waŜną rzeczą, na jaką chciałbym zwrócić uwagę we wstępie jest fakt, Ŝe wszystkie operacje edytorskie

dotyczą aktualnej selekcji oraz warstwy.

Jeśli na przykład malujemy pędzlem, wówczas ślady pędzla zostają umieszczone na warstwie aktywnej nawet, jeśli

jest ona niewidoczna. Ponadto pędzel nie wyjedzie poza brzeg aktywnej warstwy ani bieŜącej selekcji.

Narzędzia edycyjne (np. pędzel, ołówek, wypełnianie farbą) malują po aktywnej warstwie.

Dzieje się tak nawet wówczas, gdy jest ona niewidoczna. Zasięg narzędzia jest ograniczony

przez rozmiar aktywnej warstwy oraz selekcji.

Strona 4

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

cieŜki moŜemy przekształcać w selekcje, zaś selekcje - w ścieŜki. Ponadto moŜliwe jest

dokonanie konwersji zaznaczenia w kształt warstwy oraz nieprzezroczystej zawartości

warstwy w zaznaczenie.

Selekcje charakteryzuje kształt oraz miękkość krawędzi. Do zapisywania selekcji słuŜą

kanały. Kilka selekcji zapisanych w kanałach łatwo połączyć wykonując sumę, róŜnicę

bądź część wspólną za pomocą klawiszy Ctrl oraz Shift.

2. Nagłówek strony WWW

Wykonanie przedstawionych nagłówków wymaga umiejętności operowania warstwami, dodawania efektu cienia oraz

tworzenia ozdobnych napisów skryptami Script-Fu | Loga.

2.1 Ć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. KaŜdy z tych

elementów umieszczamy na osobnej warstwie. Łącznie obraz posiada więc pięć warstw: białe tło, napis tytułowy

oraz trzy warstwy ze zdjęciami.

Napis "FOTOGALERIA" wykonujemy przy uŜyciu 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.

Następnie przystępujemy do wklejenia trzech miniaturowych fotografii. ZauwaŜmy, Ŝe kaŜda z fotografii posiada

niewielką niebieską krawędź. Krawędź dodamy do obrazu korzystając ze skryptu Script-Fu | Dekoracje | Dodaj

krawędź. Kolejno dla kaŜdej fotografii wykonujemy następująca procedurę: otwieramy obraz, skalujemy do

rozmiarów 200x150 pikseli, dodajemy jednopikselową krawędź, spłaszczamy obraz (krawędź znajduje się na

Strona 5

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

osobnej warstwie), kopiujemy i wklejamy do przygotowywanego nagłówka. Po wklejeniu skalujemy wklejoną

warstwę zmniejszając nieco jej rozmiary w taki sposób, by kaŜda z wklejonych miniatur miała inny rozmiar. Do

skalowania warstw słuŜy narzędzie przekształceń: Obracanie, skalowanie, ścinanie, perspektywa. Domyślnie

aktywną opcją jest obracanie. Działanie narzędzia zmienimy podwójnie klikając w jego przycisk w oknie głównym

GIMPa.

Rysunek 1. Baner serwisu "Fotogaleria"

2.2 Ćwiczenie 2

Wykonaj nagłówek serwisu poświęconego 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. KaŜdy z tych

elementów posiada cień umieszczony na osobnej warstwie, co daje łącznie osiem warstw. Dodatkowo rysunek

posiada białe tło oraz warstwę zawierającą wypełnienie szarym gradientem.

Po utworzeniu nowego rysunku dodajemy do niego nową pustą warstwę o rozmiarze równym rozmiarowi rysunku.

Warstwę tę wypełniamy szarym gradientem liniowym. Następnie dodajemy do obrazu napisy. Wykorzystany skrypt

to ponownie Dodatki | Script-Fu | Loga | Proste I, zaś czcionka to Comic Sans MS.

Po wklejeniu napisów przystępujemy do wycięcia samolotu oraz helikoptera z instrukcji Lego. Do wycięcia

elementów wykorzystujemy ścieŜki. Gdy ścieŜka jest gotowa, przekształcamy ją w zaznaczenie, po czym

wykonujemy operację kopiuj/wklej. Po wklejeniu helikoptera skalujemy go do odpowiednich rozmiarów. Podobnie

postępujemy z samochodem.

Strona 6

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

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 następnie 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.

Rysunek 2. Nagłówek witryny "Lego Technic"

3. Projekt szaty graficznej witryny WWW

3.1 Ć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 prezentującego nazwę firmy.

Pracę rozpoczynamy od przygotowania tła. Na nowym, pustym rysunku umieszczamy prowadnice wyznaczające

rodek koła stanowiącego tło. Następnie zaznaczamy duŜe koło, po czym wykorzystując operację łączenia zaznaczeń

dodajemy do koła prostokąt. 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ą. Powinniśmy otrzymać niebieski łuk

stanowiący tło.

Strona 7

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

Teraz przystępujemy do dodania opcji "Informacje", "Usługi", "Serwis", "Sklep". Opcje dodajemy za pomocą

narzędzia tekstowego. W dokładnym pozycjonowaniu napisów pomogą nam prowadnice.

Kolejny element strony to czarne kropki znajdujące się z lewej strony opcji. Kropki te wykonujemy za pomocą

zaznaczenia eliptycznego. Klawisze Ctrl oraz Shift modyfikują działanie narzędzia 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, następnie zaznaczamy koło i wypełniamy je

farbą.

Ostatni element strony to nazwa firmy "BEST". Logo firmy tworzymy wykorzystując narzędzie tekstowe. Po

dodaniu na osobnej warstwie napisu "BEST" tworzymy zaznaczenie z kanału alfa obejmujące cały napis.

Zaznaczenie powiększamy, a następnie wypełniamy niebieską farbą (na nowej warstwie). Tak powstaje niebieskie tło

nazwy firmy.

Strona 9

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

Rysunek 3. Strona firmy "BEST"

3.2 Ćwiczenie 4

Przygotuj szkielet strony studia fotograficznego przedstawiony na rysunku 4.

Strona "Studio fotograficzne" zawiera: tło składające się z kratki ilustracji, łuk z lewej strony, cień łuku oraz

ozdobny napis.

Pierwszym etapem naszej pracy będzie przygotowanie kratki szesnastu miniaturowych ilustracji. Ćwiczenie to

zostało szczegółowo opisane w poprzednim odcinku.

Następnie do strony dodajemy łuk. Tworzymy nową warstwę, pomniejszamy kilkukrotnie widok (klawisz -), i

zaznaczamy koło o środku leŜącym na lewo od rysunku i o duŜym promieniu. Tak uzyskane zaznaczenie

odwracamy, i wypełniamy białą farbą. Jeśli zmniejszymy nieprzepuszczalność warstwy do około 80%, oraz

wyłączymy widoczność innych warstw (Shift-klik w wybraną warstwę), wówczas powinniśmy otrzymać obraz

przedstawiony na rysunku 4.b.

Kolejnym etapem pracy jest dodanie cienia rzucanego przez łuk. Ponownie zaznaczamy łuk wykonując operację

zaznaczenie z kanału alfa (dla warstwy z łukiem), po czym odwracamy zaznaczenie. Teraz wykonujemy skrypt

rzucający cień.

Strona 11

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

Przygotuj stronę firmy "Maszyny" przedstawioną na rysunku 5.

Strona składa się z nagłówka oraz menu. Nagłówek strony zawiera dwa długie prostokąty rzucające cień, na których

umieszczono miniaturowe fotografie oraz napisy. Menu strony zawiera kilka prostokątów rzucających cień i napisy.

Główną trudność w wykonaniu strony stanowią prostokąty. Prostokąty tworzymy za pomocą selekcji prostokątnej z

wykorzystaniem prowadnic. Pracę rozpoczynamy od dokładnego ustawienia prowadnic, po czym kolejno

zaznaczamy prostokąty tak jak to pokazano na rysunku 5.b.

Prostokąty wypełniamy gradientem liniowym, a następnie dodajemy do rysunku cień.

Kolejnym krokiem jest dodanie do rysunku miniaturowych fotografii koparki oraz lokomotywy. Otwieramy plik

przedstawiający 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

wykorzystując opcję Narzędzia | Przekształcenia | Przekształć (w zaleŜności od ustawień programu moŜe być

konieczna zmiana bieŜącego przekształcenia Narzędzia | Okna dialogowe | Opcje narzędzia).

Po przeskalowaniu zdjęcia koparki do Ŝądanych rozmiarów zmieniamy kolorystykę warstwy stosując najpierw opcję

Obraz | Kolory | Desaturacja, a następnie okno dialogowe Obraz | Kolory | Balans kolorów. Pamiętajmy, Ŝe

zarówno desaturacja jak i balans kolorów odnoszą się do bieŜącej warstwy.

Po dodaniu miniaturki z lokomotywą pozostało nam jedynie umieszczenie napisów i efektu cienia, jaki rzucają

napisy. Stosujemy narzędzie tekstowe oraz skrypt Rzucany cień.

Strona 13

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

Strona składa się z kilku napisów, ramki tworzącej 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 ścieŜek. Ustalamy prowadnice tak jak to przedstawiono na rysunku 6.c, po

czym dodajemy do rysunku ścieŜkę widoczną na rysunku 6.b. Gdy ścieŜka jest gotowa, przekształcamy ją w

zaznaczenie, a następnie wypełniamy kolorem ciemnoniebieskim. Po wypełnieniu kolorem obrysowujemy ścieŜkę

naciskając przycisk Rysuje ścieŜkę znajdujący się w dolnej części okna dialogowego ścieŜek. Ponownie

przekształcamy ścieŜkę w zaznaczenie i dodajemy efekt cienia.

Pozostało nam jeszcze dodanie napisów opcji. Skorzystanie z narzędzia tekstowego i dodanie efektu cienia do

napisów kończy ćwiczenie.

Strona 15

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

Rysunek 6. Zbiór zadań z języka Logo

3.5 Ćwiczenie 7

Przygotuj stronę tytułową serwisu poświęconego językowi "Logo" przedstawioną na rysunku 7.

wiczenie to wykonujemy niemal identycznie jak ćwiczenie poprzednie.

Rozpoczynamy od tła. Strona posiada tło zawierające dwuliniowy gradient przechodzący od koloru Ŝółtego poprzez

biały z powrotem do Ŝółtego. Po wyświetleniu okna dialogowego modyfikującego właściwości gradientu ustalamy

Gradient: dwuliniowy.

Gdy tło jest gotowe dodajemy do rysunku ścieŜkę. Kształt ścieŜki został przedstawiony na rysunku 7.b. Gotową

cieŜkę przekształcamy w zaznaczenie i wypełniamy kolorem Ŝółtym, po czym dodajemy efekt cienia.

Na zakończenie, wykorzystując narzędzie tekstowe dodajemy nazwy opcji.

Strona 17

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

wiczenie numer 8 zawiera następujące 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.

Następnie rysujemy czarny pas. Wykorzystujemy do tego zaznaczenie prostokątne oraz wypełnianie farbą. W celu

dodania delikatnego cienia, jaki rzuca czarny pas, wykonujemy skrypt Rzucany cień.

Teraz przechodzimy do cienkich kresek. Rysujemy je wykorzystując ścieŜki. Dodajemy do rysunku sześć ścieŜek,

będących liniami prostymi tak, by po wykonaniu operacji Rysuj ścieŜkę 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 tworzący cień zaznaczenia. W ten sposób kreski zostaną wzbogacone o cień.

Ostatni etap pracy to dwukolorowy napis "NotH". Napis ten tworzymy następująco. Dodajemy czarny napis "NotH"

na osobnej warstwie. Zaznaczamy cały napis stosując opcję Zaznaczenie z kanału alfa. Wykorzystując prowadnice,

zaznaczenie prostokątne oraz klawisz Ctrl usuwamy górną połowę zaznaczenia. Dodajemy nową warstwę, po czym

wypełniamy na niej selekcję (pokrywająca w tym momencie dolną część napisu "NotH") kolorem białym.

Powinnyśmy otrzymać napis dwukolorowy.

Cień napisu "NotH" dodajmy zaznaczając cały napis (ponownie selekcja z kanału alfa dla warstwy z czarnym

napisem "NotH") i uruchamiając skrypt Rzucany cień

wiczenie kończymy dodając napis "gajdaw" w lewej części strony.

Strona 19

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

Rysunek 8. Strona programu "NotH"

3.7 Ćwiczenie 9

Przygotuj witrynę sklepu "Animal" widoczną na rysunku 9.

wiczenie to prezentuje wykorzystanie wspomnianej we wstępie 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 części strony zostały umieszczone napisy "gady",

"ptaki", itd.

Tło strony wykonamy wykorzystując kanały. Wykonujemy zaznaczenie widoczne na rysunku 9.b. Zaznaczenie to

jest duŜym okręgiem, którego środek leŜy daleko poza prawą krawędzią obrazu. Wykonane zaznaczenie odwracamy

(Zaznaczenie | Odwróć), a następnie na nowej warstwie wypełniamy kolorem czerwonym. Powinniśmy otrzymać

obraz widoczny na rysunku 9.b. BieŜące zaznaczenie zapisujemy wykonując operację Zaznaczenie | Zapisz do

kanału.

Strona 20

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

Przechodzimy do łuku widocznego na rysunku 9.c. Wykonujemy zaznaczenie eliptyczne o kształcie koła, którego

rodek leŜy daleko poniŜej dolnej krawędzi obrazu. Następnie 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 naroŜnik namalujemy wykonując część wspólna dwóch zapamiętanych zaznaczeń. Przechodzimy do

okna kanałów: Warstwy | Warstwy, kanały i ścieŜki, zakładka Kanały (skrót: Ctrl+L). Wybieramy jedną z

zapamiętanych selekcji i naciskamy przycisk Tworzy zaznaczenie z kanału dostępny w dolnej części okna

dialogowego. Powinniśmy otrzymać pierwszą selekcję. Następnie przechodzimy na drugą selekcję i przytrzymując

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 naroŜnikowi.

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 zapamiętanych kanałów, po czym przechodzimy do drugiego kanału i przytrzymując

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.

Powinniśmy otrzymać cztery warstwy, które przedstawiają tło widoczne na rysunku 9.d.

Obrócone napisy "Animal" oraz "sklep zoologiczny" wykonujemy stosując narzędzie tekstowe i umieszczając napisy

na osobnych warstwach. Do obracania warstwy słuŜy narzędzie Obracanie, skalowanie, ścinanie, perspektywa.

Strona 22

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

Rysunek 9. Witryna sklepu "Animal"

3.8 Ćwiczenie 10

Przygotuj stronę WWW poświęconą literaturze przedstawioną na rysunku 10.

Strona ta składa się z następujących elementów:

tło przedstawiające obrócony tekst opowiadania "Zew krwi",

Strona 23

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

brązowe tło rozjaśnione w miejscach przeznaczonych na opcje i blednące ku dołowi,

brązowe kreski oddzielające 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). Zwiększamy okno edytora na cały ekran, a następnie kopiujemy wygląd okna do

schowka naciskając 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 powieści równieŜ ramkę okna i menu główne, zatem zaznaczamy fragment obrazu zawierający

wyłącznie tekst utworu, kopiujemy i wklejamy do przygotowywanej witryny. Wklejony obraz umieszczamy na

osobnej warstwie. Następnie warstwę nieco obracamy i zmniejszamy jej nieprzepuszczalność.

W ten sposób otrzymaliśmy tło witryny zawierające tekst opowiadania.

Przystępujemy do dodania brązowej poświaty znikającej ku dołowi. Wykorzystując odpowiednio rozmieszczone

prowadnice tworzymy zaznaczenie przedstawione na rysunku 10.b. Zaznaczenie to składa się z trzech prostokątów.

Po otrzymaniu zaznaczenia będącego sumą trzech prostokątów wygładzamy zaznaczenie (Zaznaczenie | Wygładź), po

czym je odwracamy. Teraz zaznaczony obszar wypełniamy gradientem zmieniającym się od brązowego do białego.

Następnie wykorzystując prowadnice i ścieŜki dodajemy do rysunku brązowe kreski.

wiczenie kończymy umieszczając napisy "Literatura", "Autorzy", "Utwory", "Proza" oraz "Poezja" wykonane

skryptami z menu Loga.

Strona 25

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

Najtrudniejszym elementem są dwa zielone łuki. Łuk dolny wykonamy zaznaczając koło o duŜym promieniu i o

rodku leŜącym duŜo poniŜej dolnej krawędzi obrazu. Współrzędna X środka zaznaczenia wypada w połowie

szerokości obrazu.

Po otrzymaniu zaznaczenia wypełniamy je na osobnej warstwie kolorem zielonym.

Górny łuk otrzymamy kopiując łuk dolny i odpowiednio przekształcając. Zduplikujmy warstwę zawierającą dolny

łuk, a następnie odbijmy ją pionowo (Narzędzia | Przekształcenia | Odbij; naleŜy przytrzymać klawisz Ctrl). Jeśli

teraz przesuniemy otrzymaną warstwę do góry i umieścimy na środku strony wówczas otrzymamy obraz

przedstawiony na rysunku 11.b i składający się z trzech warstw: białego tła, dolnego łuku i górnego łuku.

Stosując narzędzie tekstowe dodajemy do rysunku napis "TIK-TAK".

Ostatni etap pracy stanowi dodanie czterech kwadratowych fotografii. Dla kaŜdej fotografii z osobna wykonujemy

następującą procedurę:

otwieramy zdjęcie,

skalujemy obraz (Obraz | Skaluj obraz) tak, by interesujący nas fragment fotografii mieścił się w kwadracie

150x150 pikseli,

wykorzystując narzędzie Kadrowanie i zmiana rozmiaru zmieniamy rozmiar obrazu na 148x148 pikseli,

dodajemy jednopikselową ramkę do obrazu (Script-Fu | Dekoracje | Dodaj krawędź); dodanie ramki

jednopiselowej zwiększy 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ęć.

Strona 27

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

Witryna nadleśnictwo składa się z tła, napisu "Nadleśnictwo" i kwadratów znajdujących się z lewej strony, z trzech

pionowych fotografii drzew, napisów "Zasoby", "Ludzie", "Lasy" znajdujących się na tle wypełnionym gradientem

oraz białego kwadratu przeznaczonego na treść strony.

Tło strony stanowi zdjęcie o bladozielonych kolorach. Na warstwie tło umieszczamy fotografię, następnie dodajemy

warstwę, którą wypełniamy kolorem zielonym. Warstwa zielona przysłania warstwę ze zdjęciem. Zmniejszając

nieprzezroczystość warstwy zielonej osiągniemy efekt widoczny na tle strony "Nadleśnictwo".

Teraz wklejamy trzy wycięte fotografie drzew o wymiarach 100x300 pikseli. Za pomocą narzędzia tekstowego pod

fotografiami umieszczamy napisy. Tło kaŜdego z napisów stanowi prostokąt wypełniony gradientem. Zaznaczamy

prostokąt 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.

Rysunek 12. Strona "Nadleśnictwo"

Strona 28

GIMP: tworzenie grafiki na potrzeby WWW (część 5)

2008-02-27 19:44:36

http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html

4. Podsumowanie

Dzisiejsza seria ćwiczeń łączy operacje na warstwach, selekcjach i ścieŜkach. Płynne wykonywanie zadań takich jak

kopiowanie i wklejanie fragmentów, precyzyjne pozycjonowanie warstw, selekcji i ścieŜek za pomocą prowadnic,

skalowanie rysunków do Ŝądanych rozmiarów w taki sposób, by wymagany fragment ilustracji był w całości

umieszczony na przeskalowanym obrazie stanowi abecadło pracy projektanta strony WWW.