Efekt rollover ze wskaz
nikiem wybranej opcji Strona 1
Efekt rollover ze wskaz
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 wskaz
nik wybranej opcji.
1 paz
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
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 2
Rysunek 1.
Obrazy, od których rozpoczynamy
Rysunek 2.
Obraz, jaki nale\
y otrzymać
1. Etap 1: ikony
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 3
Rysunek 3.
Utwórz nowy obraz o wymiarach 760x600 i wklej do niego pięć ikon.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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 wprowadz
szerokość 32.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 7
Rysunek 7.
Po przeskalowaniu pięciu ikon do szerokości 32 pikseli otrzymasz obraz przedstawiony na powy\
szym rysunku.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 8
Rysunek 8.
Warstwa Kolory Desaturacja
Zmień kolorystykę ka\
dej z ikon. Najpierw wykonaj odbarwienie ( ), a



następnie barwienie o parametrach 240, 60, 40.
Rysunek 9.
Po zmianie barwienia ikony będą miały ciemnoniebieską barwę.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 10
Rysunek 12.
Otrzymasz niebieskie ikony o dość intensywnych kolorach i du\
ym kontraście.
2. Etap 2: tło
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 11
Rysunek 13.
Wybierz gradient o nazwie Brushed Aluminium. Znajdziesz go w oknie właściwości gradientu.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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 nazwijtło1.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 13
Rysunek 15.
Zduplikuj warstwę tło1, a duplikat nazwijtło2. Na warstwietło2wykonaj filtr Filtry Zniekształcenia




Grawerowanie o parametrze 4.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 14
Rysunek 16.
Zmniejsz krycie warstwtło1oraztło2do 20.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 15
Rysunek 17.
Warstwa Kolory Barwienie
Na warstwietło1wykonaj operację zmiany barwienia ( ). Podaj wartości:



300, 80 oraz 40.
Rysunek 18.
Na warstwietło2wykonaj równie\
operację zmiany barwienia. Tym razem o wartościach 150, 80, 80. Otrzymasz
obraz przedstawiony na rysunku.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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.
Warstwa Wyrównaj widoczne warstwy
Przy u\
yciu operacji wyrównywania warstw ( ) rozmieść ka\
dą



z ikon na środku odpowiadającego jej kwadratu.
4. Etap 4: obrys ikon
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 20
Rysunek 24.
Zaznaczenie Powiększ
Otrzymane zaznaczenie powiększ o trzy piksele ( ), a następnie zaokrągl równie\
o



Zaznaczenie Zaokrągl
trzy piksele ( ).



http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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,
Rysowanie wzdłuż ścieżki
naciśnij przycisk dostępny w oknie dialogowym ście\
ek.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 22
Rysunek 27.
Zmniejsz krycie warstwy z obrysem do 30.
5. Etap 5: poświata ikon
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 24
Rysunek 30.
Następnie zaznaczenie skopiuj z białego tła i wklej na nową warstwę. Warstwę tę nazwijstrona główna -
biała poświata.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 25
Rysunek 31.
Skopiuj warstwę z białą poświatą. Duplikat nazwijstrona 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.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 27
Rysunek 35.
Prostokąt ten skopiuj z białego tła i wklej na nową warstwę.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 28
Rysunek 36.
Warstwa Kolory Inwersja
Odwróć kolory prostokąta ( ), 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
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 31
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
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 33
Rysunek 42.
Powiel pionową strzałkę. Duplikaty umieść pod pozostałymi ikonami.
9. Etap 9: prostokąt przysłaniający
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 34
Rysunek 43.
Dodaj do obrazu du\
y biały prostokąt.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 35
Rysunek 44.
Prostokąt wzbogać o maskę, która płynnie usunie jego górną krawędz
.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 36
Rysunek 45.
Prostokąt ten ma przysłaniać jednolitą część obrazu poni\
ej ikon.
10. Etap 10: napisy
Rysunek 46.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji 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.
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09
Efekt rollover ze wskaz
nikiem wybranej opcji Strona 38
lp. Przykład
1. Dane
2. Szablon w formacie XCF
Tabela 1.
Przykłady do pobrania
http://www.gajdaw.pl/gimp/rollover-ze-wskaznikiem/print.html 2008-02-27 20:10:09