GIMP_Przygotowanie ilustracji do efektu rollover.pdf

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 obraz gitara.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

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: