Strona 1
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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
Strona 2
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 1. Obrazy, od których rozpoczynamy
Rysunek 2. Obraz, jaki naleŜy otrzymać
1. Etap 1: ikony
Strona 3
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 3.
Utwórz nowy obraz o wymiarach 760x600 i wklej do niego pięć ikon.
Strona 4
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 5
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 6
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 7
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 7.
Po przeskalowaniu pięciu ikon do szerokości 32 pikseli otrzymasz obraz przedstawiony na powyŜszym rysunku.
Strona 8
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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ę.
Strona 9
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 10
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 12.
Otrzymasz niebieskie ikony o dość intensywnych kolorach i duŜym kontraście.
2. Etap 2: tło
Strona 11
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 13.
Wybierz gradient o nazwie Brushed Aluminium. Znajdziesz go w oknie właściwości gradientu.
Strona 12
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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
.
Strona 13
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 15.
Zduplikuj warstwę
tło1
, a duplikat nazwij
tło2
. Na warstwie
tło2
wykonaj filtr
Filtry →→→→ Zniekształcenia →→→→
Grawerowanie
o parametrze 4.
Strona 14
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 16.
Zmniejsz krycie warstw
tło1
oraz
tło2
do 20.
Strona 15
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 16
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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
Strona 17
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 18
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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
Strona 19
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 20
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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
).
Strona 21
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 22
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 27.
Zmniejsz krycie warstwy z obrysem do 30.
5. Etap 5: poświata ikon
Strona 23
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 24
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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
.
Strona 25
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 26
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 27
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 35.
Prostokąt ten skopiuj z białego tła i wklej na nową warstwę.
Strona 28
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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
Strona 29
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 30
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 31
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 40.
Pionowy prostokąt powiel czterokrotnie. Pionowe prostokąty umieść pod ikonami, po czym zmniejsz krycie
wszystkich jednopikselowych kresek do 70.
8. Etap 8: strzałki
Strona 32
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 33
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 42.
Powiel pionową strzałkę. Duplikaty umieść pod pozostałymi ikonami.
9. Etap 9: prostokąt przysłaniający
Strona 34
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 43.
Dodaj do obrazu duŜy biały prostokąt.
Strona 35
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 44.
Prostokąt wzbogać o maskę, która płynnie usunie jego górną krawędź.
Strona 36
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
Rysunek 45.
Prostokąt ten ma przysłaniać jednolitą część obrazu poniŜej ikon.
10. Etap 10: napisy
Rysunek 46.
Strona 37
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
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.
Strona 38
Efekt rollover ze wskaźnikiem wybranej opcji
2008-02-27 20:10:09
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html
lp.
Przykład
1.
Dane
2.
Szablon w formacie XCF
Tabela 1. Przykłady do pobrania