Strona 1
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
Projekt witryny pt. „Oko”
Włodzimierz Gajda
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.
1 marca 2006 r.
Spis treści
1. Krok 1: oko
2. Krok 2: obramowanie
3. Krok 3: elementy
4. Krok 4: kółka
5. Krok 5: ciemne kółka
6. Krok 6: księŜyce
7. Krok 7: napisy
Strona 2
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
Rysunek 1. Zaczynamy od tych obrazĂłw
Strona 3
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
Rysunek 2. Otrzymujemy ten obraz
1. Krok 1: oko
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.
Strona 4
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
Rysunek 4.
Teraz narzędziem
Warstwa →→→→ Kolory →→→→ Barwienie
nadajemy ilustracji kolorystykę w odcieniach zielono-
niebieskich:
Strona 5
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
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
).
Strona 6
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
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.
Strona 7
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
Rysunek 8.
2. Krok 2: obramowanie
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.
Strona 8
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
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.
Strona 9
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
Rysunek 11.
3. Krok 3: elementy
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.
4. Krok 4: kółka
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
Strona 10
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
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.
Strona 11
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
Rysunek 14.
Z racji na 40-to procentowe krycie kół, widać przez nie fragmenty oka oraz ramy U.
Strona 12
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
Rysunek 15.
5. Krok 5: ciemne kółka
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.
Strona 13
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
Rysunek 17.
W ten sposób koła akcentujące przedmioty otrzymają delikatną poświatę.
Strona 14
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
Rysunek 18.
6. Krok 6: księŜyce
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.
Strona 15
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
Rysunek 20.
7. Krok 7: napisy
Na koniec dodajemy podpisy opcji.
Napis wykonujemy ciemnym kolorem zielonym (pobranym zakraplaczem z ramy U).
Strona 16
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
Rysunek 21.
Identyczny napis wykonujemy kolorem białym.
Rysunek 22.
Strona 17
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
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:
Strona 18
Projekt witryny pt. „Oko”
2008-02-27 19:56:30
http://www.gajdaw.pl/gimp/witryna-oko/print.html
Rysunek 24.
lp.
Przykład
1.
Dane
2.
Projekt
3.
Wybrane/niewybrane
4.
Rollover
Tabela 1. Przykłady do pobrania