GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 1
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
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 2
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.
Przejdz
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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 3
A
ą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. Przejdz
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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 4
Ś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ądz
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. A
ą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ędz
. Krawędz
dodamy do obrazu korzystając ze skryptu Script-Fu | Dekoracje | Dodaj
krawędz
. Kolejno dla ka\
dej fotografii wykonujemy następująca procedurę: otwieramy obraz, skalujemy do
rozmiarów 200x150 pikseli, dodajemy jednopikselową krawędz
, spłaszczamy obraz (krawędz
znajduje się na
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 5
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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 6
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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 7
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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 8
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 9
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ń.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 10
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
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 11
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ń.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 12
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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 13
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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 14
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 15
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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 16
Rysunek 7.
Druga wersja zbioru zadań "Logo"
3.6 Ćwiczenie 8
Przygotuj stronę poświęcona programowi "NotH" widoczną na rysunku 8.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 17
Ć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ę znalez
ć 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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 18
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 19
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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 20
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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 21
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 22
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",
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 23
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ładz
), 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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 24
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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 25
Najtrudniejszym elementem są dwa zielone łuki. A
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ędz
); 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ęć.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 26
Rysunek 11.
Witryna "TIK-TAK"
3.10 Ćwiczenie 12
Przygotuj witrynę "Nadleśnictwo" przedstawioną na rysunku 12.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 27
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"
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36
GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 28
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.
http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36