Efekt rollover ze wskaźnikiem wybranej opcji

Transkrypt

1 Strona 1 Efekt rollover ze wskaźnikiem wybranej opcji Włodzimierz Gajda Wykorzystując moŝliwości warstw, ścieŝek i selekcji zajmiemy się przygotowaniem szablonu witryny WWW. Szablon ten będzie wykorzystywał dwupunktowy efekt rollover oraz wskaźnik wybranej opcji. 1 października 2006 r. Spis treści 1. Etap 1: ikony 2. Etap 2: tło 3. Etap 3: wyrównanie ikon 4. Etap 4: obrys ikon 5. Etap 5: poświata ikon 6. Etap 6: pozioma kreska 7. Etap 7: pionowe kreski 8. Etap 8: strzałki 9. Etap 9: prostokąt przysłaniający 10. Etap 10: napisy

2 Strona 2 Rysunek 1. Obrazy, od których rozpoczynamy Rysunek 2. Obraz, jaki naleŝy otrzymać 1. Etap 1: ikony

3 Strona 3 Rysunek 3. Utwórz nowy obraz o wymiarach 760x600 i wklej do niego pięć ikon.

4 Strona 4 Rysunek 4. KaŜdą ikonę umieść na osobnej warstwie. Warstwy z ikonami nazwij tak jak opcje menu: strona główna, autorzy, roczniki, rubryki oraz podrubryki.

5 Strona 5 Rysunek 5. Ustal właściwości narzędzia do skalowania tak, by zachowane były stałe proporcje skalowanych warstw. W tym celu podwójnie kliknij ikonę narzędzia do skalowania w oknie głównym GIMP-a.

6 Strona 6 Rysunek 6. Przeskaluj kaŝdą ikonę do szerokości 32 pikseli: wybierz narzędzie do skalowania (skrót: Shift+T), ustal jako aktywną warstwę z ikoną, którą zamierzasz przeskalować, kliknij myszką w ikonę, w oknie dialogowym wprowadź szerokość 32.

7 Strona 7 Rysunek 7. Po przeskalowaniu pięciu ikon do szerokości 32 pikseli otrzymasz obraz przedstawiony na powyŝszym rysunku.

8 Strona 8 Rysunek 8. Zmień kolorystykę kaŝdej z ikon. Najpierw wykonaj odbarwienie (Warstwa Kolory Desaturacja), a następnie barwienie o parametrach 240, 60, 40. Rysunek 9. Po zmianie barwienia ikony będą miały ciemnoniebieską barwę.

9 Strona 9 Rysunek 10. Wykonaj na kaŝdej ikonie filtr Filtry Uwydatnianie Wyostrzanie o parametrze 50. Rysunek 11. Na zakończenie przekształć ikony filtrem Filtry Uwydatnianie Wzmocnienie o parametrach 5, 0,5 oraz 0.

10 Strona 10 Rysunek 12. Otrzymasz niebieskie ikony o dość intensywnych kolorach i duŝym kontraście. 2. Etap 2: tło

11 Strona 11 Rysunek 13. Wybierz gradient o nazwie Brushed Aluminium. Znajdziesz go w oknie właściwości gradientu.

12 Strona 12 Rysunek 14. Dodaj do obrazu prowadnice pionową oraz poziomą przebiegające w środku obrazu. Następnie dodaj nową przezroczystą warstwę. Wykorzystując prowadnicę pionową dodaną warstwę wypełnij gradientem Brushed Aluminium. Warstwę z gradientem nazwij tło1.

13 Strona 13 Rysunek 15. Zduplikuj warstwę tło1, a duplikat nazwij tło2. Na warstwie tło2 wykonaj filtr Filtry Zniekształcenia Grawerowanie o parametrze 4.

14 Strona 14 Rysunek 16. Zmniejsz krycie warstw tło1 oraz tło2 do 20.

15 Strona 15 Rysunek 17. Na warstwie tło1 wykonaj operację zmiany barwienia (Warstwa Kolory Barwienie). Podaj wartości: 300, 80 oraz 40. Rysunek 18. Na warstwie tło2 wykonaj równieŝ operację zmiany barwienia. Tym razem o wartościach 150, 80, 80. Otrzymasz obraz przedstawiony na rysunku.

16 Strona 16 Rysunek 19. Dodaj do obrazu niebieską warstwę przysłaniającą, o niewielkim kryciu, która zmodyfikuje nieco kolory całego obrazu. Warstwę tą nazwij warstwa przysłaniająca. 3. Etap 3: wyrównanie ikon

17 Strona 17 Rysunek 20. Zaznacz w obrazie kwadrat obejmujący pierwszą z ikon. Zaznaczenie skopiuj z białego tła i wklej na nową warstwę. W obrazie powinna pojawić się warstwa, której wymiar jest identyczny jak wymiar kwadratu.

18 Strona 18 Rysunek 21. Powiel kwadrat. Wykorzystując powiększanie widoku (skrót: +) oraz prowadnice ułóŝ kwadraty tak, by przylegały do siebie. Rysunek 22. Przy uŝyciu operacji wyrównywania warstw (Warstwa Wyrównaj widoczne warstwy) rozmieść kaŝdą z ikon na środku odpowiadającego jej kwadratu. 4. Etap 4: obrys ikon

19 Strona 19 Rysunek 23. Zaznacz obszar wyznaczony przez nieprzezroczyste piksele ikon: wyłącz widoczność wszystkich warstw poza ikonami, magiczną róŝdŝką do zaznaczania sąsiadujących obszarów (skrót: z) zaznacz obszar otaczający ikony, odwróć zaznaczenie.

20 Strona 20 Rysunek 24. Otrzymane zaznaczenie powiększ o trzy piksele (Zaznaczenie Powiększ), a następnie zaokrągl równieŝ o trzy piksele (Zaznaczenie Zaokrągl).

21 Strona 21 Rysunek 25. Przekształć zaznaczenie w ścieŝkę. SłuŜy do tego operacja Zaznaczenie Przekształć na ścieżkę. Rysunek 26. Obrysuj ścieŝkę niebieską linią o grubości jednego piksela: dodaj do obrazu nową przezroczystą warstwę i uczyń ją warstwą bieŝącą, usuń wszelkie zaznaczenia (Ctrl+Shift+A), zmień kolor narzędzia do rysowania na niebieski, naciśnij przycisk Rysowanie wzdłuż ścieżki dostępny w oknie dialogowym ścieŝek.

22 Strona 22 Rysunek 27. Zmniejsz krycie warstwy z obrysem do Etap 5: poświata ikon

23 Strona 23 Rysunek 28. Wyłącz widoczność wszystkich warstw poza pierwszą ikoną. Wykorzystując narzędzie do zaznaczania sąsiadujących obszarów, zaznacz nieprzezroczyste piksele ikony. Rysunek 29. Zaznaczenie powiększ i zaokrągl o trzy piksele.

24 Strona 24 Rysunek 30. Następnie zaznaczenie skopiuj z białego tła i wklej na nową warstwę. Warstwę tę nazwij strona główna - biała poświata.

25 Strona 25 Rysunek 31. Skopiuj warstwę z białą poświatą. Duplikat nazwij strona główna - czarna poświata, po czym odwróć jego kolory: Warstwa Kolory Inwersja. Rysunek 32. Zmniejsz krycie czarnej poświaty do 20, zaś białej do 70. Rysunek 33.

26 Strona 26 W identyczny sposób wykonaj poświaty pozostałych czterech ikon. 6. Etap 6: pozioma kreska Rysunek 34. Zaznacz w obrazie poziomy prostokąt o wysokości jednego piksela.

27 Strona 27 Rysunek 35. Prostokąt ten skopiuj z białego tła i wklej na nową warstwę.

28 Strona 28 Rysunek 36. Odwróć kolory prostokąta (Warstwa Kolory Inwersja), po czym otrzymaną figurę powiel kilkukrotnie. Rysunek 37. Prostokąty poprzesuwaj tak, by tworzyły ciągłą poziomą linię. Wykorzystaj do tego narzędzie do przesuwania i strzałki na klawiaturze. Gdy juŝ ułoŝysz prostokąty w linię to połącz je w jedną warstwę. 7. Etap 7: pionowe kreski

29 Strona 29 Rysunek 38. Zaznacz pionowy prostokąt o szerokości jednego piksela. Prostokąt ten skopiuj z białego tła, wklej na nową warstwę i zmień jego kolor na czarny.

30 Strona 30 Rysunek 39. Dodaj maskę warstwie przedstawiającej pionowy, jednopikselowy prostokąt. Maskę wypełnij dwuliniowym gradientem tak, by prostokąt znikał ku górze i ku dołowi.

31 Strona 31 Rysunek 40. Pionowy prostokąt powiel czterokrotnie. Pionowe prostokąty umieść pod ikonami, po czym zmniejsz krycie wszystkich jednopikselowych kresek do Etap 8: strzałki

32 Strona 32 Rysunek 41. Wklej do obrazu ikonę przedstawiającą strzałkę. Ikonę tą obróć o 90 stopni ku górze, a następnie zmień jej zabarwienie. UŜyj filtru Warstwa Kolory Barwienie o parametrach 240, 60, 30. Ikonę naleŝy umieścić na skrzyŝowaniu dwóch jednopikselowych prostokątów.

33 Strona 33 Rysunek 42. Powiel pionową strzałkę. Duplikaty umieść pod pozostałymi ikonami. 9. Etap 9: prostokąt przysłaniający

34 Strona 34 Rysunek 43. Dodaj do obrazu duŝy biały prostokąt.

35 Strona 35 Rysunek 44. Prostokąt wzbogać o maskę, która płynnie usunie jego górną krawędź.

36 Strona 36 Rysunek 45. Prostokąt ten ma przysłaniać jednolitą część obrazu poniŝej ikon. 10. Etap 10: napisy Rysunek 46.

37 Strona 37 Dodaj do obrazu napisy magazyn INTERNET. Rysunek 47. Napis INTERNET otocz delikatną czarną poświatą i wypełnij gradientem o nazwie Horizon 2. Rysunek 48. Na zakończenie dodaj po prawej stronie podpisy opcji menu: strona główna, autorzy, roczniki, rubryki i podrubryki. KaŜdy napis umieść na osobnej warstwie i otocz delikatną czarną poświatą. Na rysunku widoczny jest tylko podpis opcji strona główna.

38 Strona 38 lp. 1. Dane Przykład 2. Szablon w formacie XCF Tabela 1. Przykłady do pobrania