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