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