Strona 1

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

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

Strona 2

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

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ę

Strona 3

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

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.

Strona 4

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

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 obraz

gitara.jpg

.

Rysunek 5.

Strona 5

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

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.

Strona 6

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

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.

Strona 7

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

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.

Strona 8

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

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ę.

Strona 9

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/index.html

Rysunek 11.

Gdy maska jest otoczona zieloną obwódką, w oknie obrazu widać wyłącznie maskę. Dodaj do obrazu jedną poziomą

prowadnicę.

Strona 10

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

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ót

l

) wypełnij maskę w taki sposób, by brzegi były czarne, a środek — biały.

Strona 11

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

Rysunek 14.

Jeśli teraz, w oknie warstw, klikniesz maskę przytrzymując klawisz Alt, to zdjęcie gitary zostanie zmaskowane.

Strona 12

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

Rysunek 15.

7. KROK 5

Wypełnij warstwę tła kolorem czarnym.

Strona 13

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

Rysunek 16.

Otrzymany obraz zawiera dwie warstwy i jedną maskę. W oknie warstw wybierz warstwę gitara. Ikona warstwy

powinna zostać otoczona białą obwódką.

Strona 14

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

Rysunek 17.

Teraz, korzystając z narzędzia do przesuwania warstw i zaznaczeń (skrót

m

) 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.

Strona 15

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

Rysunek 19.

Otrzymany obraz ma wymiary 800×230 i przedstawia znikające zdjęcie gitary na czarnym tle.

Strona 16

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

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.

Strona 17

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

Rysunek 22.

9. KROK 7

Napisy opcji poddajemy przekształceniu. Dodajemy białą poświatę.

Strona 18

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

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

.

Strona 19

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

Rysunek 24.

Napis CHORDS zostanie otoczony markizą selekcji.

Strona 20

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

Rysunek 25.

Selekcję zwiększamy o dwa piksele i zaokrąglamy o pięć pikseli. W tym celu najpierw wybieramy opcję

Zaznaczenie →→→→ Powiększ

, a następnie

Zaznaczenie →→→→ Zaokrągl

.

Rysunek 26.

Otrzymaną selekcję wypełniamy na nowej warstwie białym kolorem.

Rysunek 27.

Strona 21

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

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.

Strona 22

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

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.

Strona 23

Przygotowanie ilustracji do efektu rollover

2008-02-27 20:02:06

http://www.gajdaw.pl/gimp/przygotowanie-obrazow-rollover/print.html

lp.

Przykład

1.

Zdjęcie

2.

Projekt XCF

Tabela 1. Przykłady do pobrania