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 8

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

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

2008-02-27 19:44:36

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

Ostatnim elementem, jaki dodajemy do rysunku jest napis "Fotogaleria" tworzony jednym ze skryptów Dodatki |

Script-Fu | Loga.

Rysunek 4. Serwis studia fotograficznego

3.3 Ćwiczenie 5

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 12

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 5. Strona spółki "Maszyny S. C."

3.4 Ćwiczenie 6

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

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 14

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

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 7. Druga wersja zbioru zadań "Logo"

3.6 Ćwiczenie 8

Przygotuj stronę poświęcona programowi "NotH" widoczną na rysunku 8.

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 18

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

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

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 10. Serwis poświęcony literaturze

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

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 26

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 11. Witryna "TIK-TAK"

3.10 Ćwiczenie 12

Przygotuj witrynę "Nadleśnictwo" przedstawioną na rysunku 12.

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.