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.
Rysunek 1. Do wykonania ćwiczenia wykorzystamy narzędzia zaznaczone na rysunku
Do wykonania ćwiczenia wykorzystamy narzędzia zaznaczone na rysunku
Rysunek 2.
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.
Rysunek 4.
Otwórz obraz gitara.jpg.
Rysunek 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.
Rysunek 7.
Do nowego obrazu o wymiarach 800×600 wklej skopiowaną ilustrację gitary o wymiarach 500×254. Wklejony obraz umieść na nowej warstwie.
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.
Rysunek 9.
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ę.
Rysunek 11.
Gdy maska jest otoczona zieloną obwódką, w oknie obrazu widać wyłącznie maskę. Dodaj do obrazu jedną poziomą prowadnicę.
Rysunek 12.
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.
Rysunek 14.
Jeśli teraz, w oknie warstw, klikniesz maskę przytrzymując klawisz Alt, to zdjęcie gitary zostanie zmaskowane.
Rysunek 15.
Wypełnij warstwę tła kolorem czarnym.
Rysunek 16.
Otrzymany obraz zawiera dwie warstwy i jedną maskę. W oknie warstw wybierz warstwę gitara. Ikona warstwy powinna zostać otoczona białą obwódką.
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.
Rysunek 19.
Otrzymany obraz ma wymiary 800×230 i przedstawia znikające zdjęcie gitary na czarnym tle.
Rysunek 20.
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.
Rysunek 22.
Napisy opcji poddajemy przekształceniu. Dodajemy białą poświatę.
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.
Rysunek 24.
Napis CHORDS zostanie otoczony markizą selekcji.
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.
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.
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.
| lp. | Przykład |
|---|---|
| 1. | Zdjęcie |
| 2. | Projekt XCF |
Tabela 1. Przykłady do pobrania
