Przygotowanie ilustracji do efektu rollover Strona 1
Przygotowanie ilustracji do efektu rollover
WÅ‚odzimierz Gajda
Często wykorzystywanym efektem stosowanym szczególnie w menu, jest reakcja na wskazanie wybranej opcji
kursorem myszki. Opcja wskazana myszką zmienia kolor, kształt, czy zostaje wzbogacona o strzałkę, informującą o
wyborze. Do tego rodzaju trików stosowane są dwa rozwiązania. Jednym z nich jest pseudoklasa a:hover
w
arkuszach stylów, a drugim  wymiana obrazów wykonywana w JavaScript nazywana w \
argonie efektem rollover.
W artykule opiszę, w jaki sposób przygotować w GIMP-ie obrazy przeznaczone do wykonania takiego
interaktywnego menu.
1 czerwca 2006 r.
Spis treści
1. Obraz, od którego rozpoczynamy pracę
2. Obrazy wynikowe
3. KROK 1
4. KROK 2
5. KROK 3
6. KROK 4
7. KROK 5
8. KROK 6
9. KROK 7
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 2
Rysunek 1.
Do wykonania ćwiczenia wykorzystamy narzędzia zaznaczone na rysunku
Do wykonania ćwiczenia wykorzystamy narzędzia zaznaczone na rysunku
1. Obraz, od którego rozpoczynamy pracę
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 3
Rysunek 2.
2. Obrazy wynikowe
Wynikiem wykonania ćwiczenia mają być dwa obrazy ró\
niące się wyglądem opcji menu. Pierwszy z obrazów
przedstawia wyglÄ…d menu strony WWW, gdy kursor myszy nie wskazuje \
adnej z opcji CHORDS, SONGS czy
TABS.
Rysunek 3.
Na drugim obrazie wszystkie trzy opcje CHORDS, SONGS oraz TABS wyglądają tak, jakby wyły wskazane przez
kursor myszy.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 4
Rysunek 4.
Omówione w tym artykule przykłady znajdują się na płycie CD i w naszym serwisie
internetowym www.mi.com.pl. Dodatkowo niespodzianka: darmowe zdjęcia w wysokiej
rozdzielczości, do dowolnego wykorzystania (prywatnego i komercyjnego).
3. KROK 1
Otwórz obrazgitara.jpg.
Rysunek 5.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 5
Korzystając z narzędzia Kadrowanie lub zmiana wymiarów obrazu (skrót: Shift+C), wytnij ze zdjęcia
fragment przedstawiajÄ…cy gitarÄ™.
Rysunek 6.
Po naciśnięciu  w oknie narzędzia Kadrowanie lub zmiana wymiarów obrazu  przycisku Zmień
Rozmiar
otrzymasz obraz o mniejszych wymiarach, przedstawiajÄ…cy jedynie wybrany fragment. Obraz ten
przeskaluj do szerokoÅ›ci okoÅ‚o 500 pikseli. Szerokość obrazu, 500×254 jest widoczna w belce tytuÅ‚owej.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 6
Rysunek 7.
4. KROK 2
Do nowego obrazu o wymiarach 800×600 wklej skopiowanÄ… ilustracjÄ™ gitary o wymiarach 500×254. Wklejony obraz
umieść na nowej warstwie.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 7
Rysunek 8.
Wklejoną warstwę nazwij gitara. W tym celu podwójnie kliknij nazwę warstwy (pierwotną nazwą jest Wklejona
warstwa) w oknie warstw. Do okna warstw przejdziesz naciskając skrót Ctrl+L.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 8
Rysunek 9.
5. KROK 3
Następnie dodaj maskę warstwy gitara. W tym celu kliknij prawym guzikiem myszy nazwę warstwy gitara w oknie
warstw, a następnie z menu kontekstowego wybierz opcję Dodaj maskę warstwy.
Rysunek 10.
W oknie warstw, obok ikony warstwy gitara pojawi siÄ™ ikona maski. Kliknij maskÄ™ warstwy, przytrzymujÄ…c klawisz
Alt. Maska otrzyma (w oknie warstw) zieloną obwódkę.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 9
Rysunek 11.
Gdy maska jest otoczona zieloną obwódką, w oknie obrazu widać wyłącznie maskę. Dodaj do obrazu jedną poziomą
prowadnicÄ™.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/index.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 10
Rysunek 12.
6. KROK 4
MaskÄ™ warstwy gitara nale\
y wypełnić gradientem dwuliniowym. Najpierw zamień kolor tła i kolor
pierwszoplanowy. Naciśnij kilkukrotnie klawisz x, i obserwuj okno główne GIMP-a. Następnie kliknij podwójnie
ikonę narzędzia Wypełnianie gradientem koloru w oknie głównym programu GIMP. Jest to jedna z metod
wyświetlenia okna dialogowego narzędzia Gradient
. W oknie tym ustal kształt na dwuliniowy.
Rysunek 13.
Po wybraniu narzędzia gradientu (skrótl) wypełnij maskę w taki sposób, by brzegi były czarne, a środek  biały.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 11
Rysunek 14.
Jeśli teraz, w oknie warstw, klikniesz maskę przytrzymując klawisz Alt, to zdjęcie gitary zostanie zmaskowane.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 12
Rysunek 15.
7. KROK 5
Wypełnij warstwę tła kolorem czarnym.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 13
Rysunek 16.
Otrzymany obraz zawiera dwie warstwy i jednÄ… maskÄ™. W oknie warstw wybierz warstwÄ™ gitara. Ikona warstwy
powinna zostać otoczona białą obwódką.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 14
Rysunek 17.
Teraz, korzystając z narzędzia do przesuwania warstw i zaznaczeń (skrótm) przesuń warstwę gitara w lewy górny
rób obrazu. (Warstwa jest przesuwana wraz z maską!)
Rysunek 18.
Ponownie wykorzystujemy narzędzie Kadrowanie lub zmiana wymiarów obrazu
. Wycinamy górny
fragment obrazu o wysokości około 200 pikseli.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 15
Rysunek 19.
Otrzymany obraz ma wymiary 800×230 i przedstawia znikajÄ…ce zdjÄ™cie gitary na czarnym tle.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 16
Rysunek 20.
8. KROK 6
Obraz wzbogacamy o napis YOUNG GUITARIST'S SITE oraz o opcje menu: CHORDS, SONGS, TABS. Czcionka
wykorzystana w przykładzie nazywa się wofGlif. Napisy są wykonane białym kolorem i mają wielkość 40 oraz 25
punktów.
Rysunek 21.
Napisy umieść na osobnych warstwach. Otrzymany napis powinien składać się z sześciu warstw: czarnego tła,
znikającego zdjęcia gitary, napisu tytułowego YOUNG GUITARIST'S SITE oraz trzech napisów opcji.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 17
Rysunek 22.
9. KROK 7
Napisy opcji poddajemy przekształceniu. Dodajemy białą poświatę.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 18
Rysunek 23.
W tym celu nale\
y napis przekształcić w selekcję. W oknie warstw wybieramy warstwę z napisem CHORDS.
WarstwÄ™ tÄ… klikamy (w oknie warstw) prawym przyciskiem myszy i z menu kontekstowego wybieramy opcjÄ™
Kanał alfa na zaznaczenie
.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 19
Rysunek 24.
Napis CHORDS zostanie otoczony markizÄ… selekcji.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 20
Rysunek 25.
Selekcję zwiększamy o dwa piksele i zaokrąglamy o pięć pikseli. W tym celu najpierw wybieramy opcję
Zaznaczenie Powiększ Zaznaczenie Zaokrągl
, a następnie .



Rysunek 26.
Otrzymaną selekcję wypełniamy na nowej warstwie białym kolorem.
Rysunek 27.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 21
Na koniec dodajemy czarny napis (o kształcie identycznym jak napis biały). Najłatwiej to wykonać duplikując
warstwę z napisem CHORDS i wykonując na niej efekt inwersji kolorów Warstwa Kolory Inwersja
.



Rysunek 28.
Identyczne przekształcenie wykonujemy na pozostałych dwóch napisach SONGS oraz TABS.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 22
Rysunek 29.
Otrzymany obraz ma  oprócz wymienionych ju\
sześciu warstw  warstwę o nazwie rozmyta (zawiera ona białą
poświatę) oraz trzy warstwy z czarnymi napisami.
Rysunek 30.
Do uzyskania pierwszej wynikowej ilustracji wyłączamy widoczność warstwy z rozmytą białą poświatą oraz trzech
czarnych warstw z napisami.
Do uzyskania drugiej ilustracji włączamy widoczność wszystkich warstw.
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06
Przygotowanie ilustracji do efektu rollover Strona 23
lp. Przykład
1. Zdjęcie
2. Projekt XCF
Tabela 1.
Przykłady do pobrania
http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html 2008-02-27 20:02:06