Gdy znamy podstawowe cechy GIMP-a, umiemy pracować z warstwami, wprawnie operujemy selekcjami oraz wybranymi narzędziami możemy przystąpić do pracy nad bardziej wyrafinowanymi projektami. W kolejnym spotkaniu z GIMP-em zajmiemy się przygotowaniem witryny WWW.
Rysunek 1. Zaczynamy od tych obrazĂłw
Rysunek 2. Otrzymujemy ten obraz
Pracę rozpoczynamy od przygotowania oka — tła całej witryny. Otwieramy obraz oko.jpg i wycinamy z niego fragment o wymiarach 800×600 pikseli.
Rysunek 3.
Następnie wzmacniamy ostrość szczegółów. Dwukrotnie wykonujemy filtr Filtry → Uwydatnianie → Wzmocnienie z parametrami 0.5, 5 oraz 0.
Rysunek 4.
Teraz narzędziem Warstwa → Kolory → Barwienie nadajemy ilustracji kolorystykę w odcieniach zielono-niebieskich:
Rysunek 5.
po czym czarnym pędzlem zamalowujemy refleksy lampy błyskowej:
Rysunek 6.
Za pomocą selekcji eliptycznej zaokrąglonej promieniem 10 pikseli dodajemy źrenicę. W otrzymanym obrazie modyfikujemy jasność, kontrast (narzędzie Warstwa → Kolory → Jasność i kontrast) oraz poziomy kolorów (narzędzie Warstwa → Kolory → Poziomy).
Rysunek 7.
Na zakończenie zmieniamy krycie warstwy przedstawiającej oko na 60 procent, a pod spód dodajemy nieprzezroczystą warstwę o kolorze białym.
Rysunek 8.
W kroku drugim tworzymy obramowanie w kształcie litery U.
Rozpoczynamy od zaznaczenia obszaru wypełnionego na poniższej ilustracji czarnym kolorem. Obszar ten składa się z elipsy i prostokąta. Zadanie ułatwimy sobie umieszczając w obrazie prowadnice wyznaczające środek elipsy oraz boki prostokąta.
Rysunek 9.
Zaznaczenie rozmywamy promieniem około 5 pikseli po czym z warstwy oka kopiujemy zaznaczony fragment i umieszczamy na osobnej warstwie.
Rysunek 10.
Ramka o kształcie U ma krycie 100 procent, oko — 60 procent, zaś biała warstwa znajdująca się w tle — 100 procent.
Rysunek 11.
W kolejnym etapie do obrazu wklejamy przedmioty: aparat fotograficzny, wtyczkę, samochód, śrubki oraz ludzika Lego. Elementy te powinny mieć zbliżony rozmiar. W razie niezgodności wykorzystujemy narzędzie do skalowania. Przedmioty umieszczamy na krawędzi obramowania U.
Rysunek 12.
Przedmioty akcentujemy umieszczając je na kołach wypełnionych gradientem. Pierwsze koło wykonujemy stosując selekcję eliptyczną. Po zaznaczeniu koła, wypełniamy je (na nowej przezroczystej warstwie) gradientem o dwóch kolorach pobranych zakraplaczem z tła przedstawiającego oko lub z ramki U. Gdy pierwsze koło jest gotowe, kopiujemy je tak, by wymiar zawierającej je warstwy był możliwie minimalny (jest to kwadrat obejmujący swym zasięgiem koło). Na warstwie zawierającej nowoutworzone koło wykonujemy operację Kanał alfa na zaznaczenie, po czym otrzymane zaznaczenie kopiujemy i wklejamy do obrazu. Wklejona warstwa ma krycie 40-to procentowe. Warstwę z kołem kopiujemy 4 razy.
Rysunek 13.
Koła umieszczamy pod elementami. Przedmioty wystające poza koło skalujemy do mniejszych rozmiarów.
Rysunek 14.
Z racji na 40-to procentowe krycie kół, widać przez nie fragmenty oka oraz ramy U.
Rysunek 15.
Koła akcentujące elementy wzmacniamy i dodajemy im rozmytą otoczkę.
Każde koło duplikujemy; wszystkie duplikaty scalamy w jedną warstwę.
Rysunek 16.
Na warstwie zawierającej duplikaty zaznaczamy wszystkie koła (Kanał alfa na zaznaczenie), po czym selekcję rozmywamy promieniem 20 pikseli. Tak otrzymany obszar wypełniamy jednolitym ciemnym kolorem. Warstwie tej nadajemy 50 procentowe krycie.
Rysunek 17.
W ten sposób koła akcentujące przedmioty otrzymają delikatną poświatę.
Rysunek 18.
Ostatnią modyfikacją kół jest dodanie półksiężyców.
Pojedynczy półksiężyc wykonujemy jako różnicę dwóch kół (selekcji eliptycznych). Selekcja ta jest zaokrąglona (promień około 10 pikseli) i wypełniona białym kolorem. Możemy również poeksperymentować z kryciem warstwy. Pierwszy wykonany półksiężyc umieszczamy na nowej warstwie. Warstwę tą kopiujemy czterokrotnie i przesuwamy w odpowiednie miejsca.
Rysunek 19.
Półksiężyce akcentują kształt poszczególnych opcji.
Rysunek 20.
Na koniec dodajemy podpisy opcji.
Napis wykonujemy ciemnym kolorem zielonym (pobranym zakraplaczem z ramy U).
Rysunek 21.
Identyczny napis wykonujemy kolorem białym.
Rysunek 22.
Oba napisy umieszczamy obok siebie przemieszczając je w pionie o jeden piksel, a w poziomie — o dwa.
Rysunek 23.
Otrzymany obraz stanowi szablon, który możemy wykorzystać przy tworzeniu kolejnej witryny WWW:
Rysunek 24.
| lp. | Przykład |
|---|---|
| 1. | Dane |
| 2. | Projekt |
| 3. | Wybrane/niewybrane |
| 4. | Rollover |
Tabela 1. Przykłady do pobrania
