20 GIMP Projekt witryny pt OKO


Projekt witryny pt.  Oko Strona 1
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
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 2
Rysunek 1.
Zaczynamy od tych obrazłw
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 3
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.
Filtry Uwydatnianie
Następnie wzmacniamy ostrość szczegółów. Dwukrotnie wykonujemy filtr



Wzmocnienie z parametrami 0.5, 5 oraz 0.
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 4
Rysunek 4.
Teraz narzędziem Warstwa Kolory Barwienie nadajemy ilustracji kolorystykę w odcieniach zielono-




niebieskich:
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 5
Rysunek 5.
po czym czarnym pędzlem zamalowujemy refleksy lampy błyskowej:
Rysunek 6.
Za pomocÄ… selekcji eliptycznej zaokrÄ…glonej promieniem 10 pikseli dodajemy zrenicÄ™. W otrzymanym obrazie
Warstwa Kolory Jasność i kontrast
modyfikujemy jasność, kontrast (narzędzie ) oraz poziomy



kolorów (narzędzie Warstwa Kolory Poziomy
).



http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 6
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.
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 7
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.
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 8
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.
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 9
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
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 10
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.
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 11
Rysunek 14.
Z racji na 40-to procentowe krycie kół, widać przez nie fragmenty oka oraz ramy U.
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 12
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.
Kanał alfa na zaznaczenie
Na warstwie zawierającej duplikaty zaznaczamy wszystkie koła ( ), po czym
selekcję rozmywamy promieniem 20 pikseli. Tak otrzymany obszar wypełniamy jednolitym ciemnym kolorem.
Warstwie tej nadajemy 50 procentowe krycie.
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 13
Rysunek 17.
W ten sposób koła akcentujące przedmioty otrzymają delikatną poświatę.
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 14
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.
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 15
Rysunek 20.
7. Krok 7: napisy
Na koniec dodajemy podpisy opcji.
Napis wykonujemy ciemnym kolorem zielonym (pobranym zakraplaczem z ramy U).
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 16
Rysunek 21.
Identyczny napis wykonujemy kolorem białym.
Rysunek 22.
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 17
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:
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30
Projekt witryny pt.  Oko Strona 18
Rysunek 24.
lp. Przykład
1. Dane
2. Projekt
3. Wybrane/niewybrane
4. Rollover
Tabela 1.
Przykłady do pobrania
http://www.gajdaw.pl/gimp/witryna-oko/print.html 2008-02-27 19:56:30


Wyszukiwarka