Projekt witryny pt. Oko

Transkrypt

1 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

2 Strona 2 Rysunek 1. Zaczynamy od tych obrazăłw

3 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 pikseli. Rysunek 3. Następnie wzmacniamy ostrość szczegółów. Dwukrotnie wykonujemy filtr Filtry Uwydatnianie Wzmocnienie z parametrami 0.5, 5 oraz 0.

4 Strona 4 Rysunek 4. Teraz narzędziem Warstwa Kolory Barwienie nadajemy ilustracji kolorystykę w odcieniach zielononiebieskich:

5 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 źrenicę. W otrzymanym obrazie modyfikujemy jasność, kontrast (narzędzie Warstwa Kolory Jasność i kontrast) oraz poziomy kolorów (narzędzie Warstwa Kolory Poziomy).

6 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.

7 Strona 7 Rysunek 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.

8 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.

9 Strona 9 Rysunek 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 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

10 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.

11 Strona 11 Rysunek 14. Z racji na 40-to procentowe krycie kół, widać przez nie fragmenty oka oraz ramy U.

12 Strona 12 Rysunek 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.

13 Strona 13 Rysunek 17. W ten sposób koła akcentujące przedmioty otrzymają delikatną poświatę.

14 Strona 14 Rysunek 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.

15 Strona 15 Rysunek Krok 7: napisy Na koniec dodajemy podpisy opcji. Napis wykonujemy ciemnym kolorem zielonym (pobranym zakraplaczem z ramy U).

16 Strona 16 Rysunek 21. Identyczny napis wykonujemy kolorem białym. Rysunek 22.

17 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:

18 Strona 18 Rysunek 24. lp. Przykład 1. Dane 2. Projekt 3. Wybrane/niewybrane 4. Rollover Tabela 1. Przykłady do pobrania