Tworzenie grafiki na potrzeby WWW

Tworzenie grafiki na potrzeby WWW
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.
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ę.
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.
Przekształcenie 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ę.
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.
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.
Ć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.
Wybrana czcionka dla napisu tytułowego to Tachoma o kolorze niebieskim.
Następnie przystępujemy do wklejenia trzech miniaturowych fotografii. Zauważmy, że każda
z fotografii posiada niewielką niebieską krawędź. Kolejno dla każdej fotografii wykonujemy
następująca procedurę: otwieramy obraz, skalujemy, dodajemy jednopikselową krawędź. Do
skalowania warstw służą narzędzia przekształceń: obracanie, skalowanie, ścinanie, perspektywa.
Ć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, czcionka to Comic Sans MS.
Po wklejeniu napisów przystępujemy do wycięcia samolotu oraz helikoptera. 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.
Teraz pozostało już tylko dodanie cienia czterech elementów: helikoptera, samochodu oraz
dwóch napisów. Ustalamy aktywną warstwę z napisem "Lego", a następnie
wykonujemy zaznaczenie z kanału alfa, po czym uruchamiamy filtr Rzucanie cienia.
W identyczny sposób dodajemy cień pozostałym trzem elementom.
Ć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.
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.
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.
Ćwiczenie 4
Przygotuj szkielet strony studia fotograficznego przedstawiony na rysunku 4.
Strona "Studio fotograficzne" zawiera: tło składające się z kratek ilustracji, łuk z lewej strony,
cień łuku oraz ozdobny napis.
Pierwszym etapem pracy będzie przygotowanie kratki szesnastu miniaturowych
Ilustracji. 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, wówczas powinniśmy otrzymać obraz
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 filtr rzucający cień.
Ostatnim elementem jaki dodajemy do rysunku jest napis "Fotogaleria".
Cwiczenie 5
Przygotuj stronę firmy „Maszyny” prpzedstawioną 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ścią 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. 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.
Po przeskalowaniu zdjęcia koparki do żądanych rozmiarów zmieniamy kolorystykę warstwy stosując
najpierw opcję Obraz -> Kolory -> Desaturacja, a następnie 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 filtr Rzucanie cienia.
Cwiczenie 6
Przygotuj stronę tytułową serwisu poświęconego językowi Logo, przedstawioną na rysunku 6.
Rys. 6
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 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 Rysuj
ścieżkę z zaznaczenia 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.
Cwiczenie 7
Przygotuj witrynę sklepu „Animal” przedstawioną na rysunku 7.
Rys. 7
Cwiczenie 8
Przygotuj grafikę na witrynę internetową pokazaną na rysunku 8.
Rys. 8