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