Connect with us

Cześć, czego szukasz?

Internet Maker

GIMP i webmastering: Przygotowanie obrazów do efektu rollover

Często wykorzystywanym efektem, stosowanym szczególnie w menu, jest reakcja na wskazanie wybranej opcji wskaźnikiem myszki. Wskazana opcja zmienia kolor, kształt lub 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 JavaScripcie, nazywana efektem rollover.

Etap 1

{tlo_1}

Otwieramy obraz gitara.jpg.

{/tlo}

{tlo_0}

Korzystając z narzędzia Kadrowanie lub zmiana wymiarów obrazu (skrót Shift+C) wycinamy ze zdjęcia fragment przedstawiający gitarę.

{/tlo}

{tlo_1}

Po naciśnięciu (w oknie narzędzia Kadrowanie lub zmiana wymiarów obrazu) przycisku Zmień rozmiar otrzymamy obraz o mniejszych wymiarach, który przedstawia wybrany fragment. Obraz ten skalujemy do szerokości ok. 500 pikseli. Szerokość obrazu 500 x 254 jest widoczna na belce tytułowej.

{/tlo}

Etap 2

{tlo_0}

Do nowego obrazu o wymiarach 800 x 600 wklejamy skopiowaną ilustrację gitary o wymiarach 500 x 254. Wklejony obraz umieszczamy na nowej warstwie.

{/tlo}

{tlo_1}

Wklejoną warstwę nazwiemy \”gitara\”. W tym celu podwójnie klikamy nazwę warstwy (pierwotną nazwą jest Wklejona warstwa) w oknie warstw. Do okna warstw przechodzimy naciskając skrót Ctrl+L.

{/tlo}

Etap 3

{tlo_1}

Dodajemy maskę warstwy \”gitara\”. W tym celu klikamy prawym przyciskiem myszy nazwę warstwy \”gitara\” w oknie warstw, a następnie z menu kontekstowego wybieramy opcję Dodaj maskę warstwy.

{/tlo}

{tlo_0}

W oknie warstw obok ikony warstwy \”gitara\” pojawi się ikona maski. Klikamy maskę warstwy, przytrzymując klawisz Alt. Maska otrzyma (w oknie warstw) zieloną obwódkę.

{/tlo}

{tlo_1}

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

{/tlo}

Etap 4

{tlo_0}

Maskę warstwy \”gitara\” należy wypełnić gradientem dwuliniowym. Najpierw zamieniamy kolor tła i kolor pierwszoplanowy. Naciskamy kilkakrotnie klawisz X i obserwujemy okno główne GIMP-a.

Następnie klikamy 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 ustalamy kształt na dwuliniowy.

{/tlo}

{tlo_1}

Po wybraniu narzędzia gradientu (skrót L) wypełniamy maskę w taki sposób, by brzegi były czarne, a środek biały.

{/tlo}

{tlo_0}

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

{/tlo}

Etap 5

{tlo_1}

Wypełniamy warstwę tła kolorem czarnym.

{/tlo}

{tlo_0}

Otrzymany obraz zawiera dwie warstwy i jedną maskę. W oknie warstw wybieramy warstwę \”gitara\”. Ikona warstwy powinna zostać otoczona białą obwódką.

{/tlo}

{tlo_1}

Korzystając z narzędzia do przesuwania warstw i zaznaczeń (skrót M) przesuwamy warstwę \”gitara\” w lewy górny róg obrazu. (Warstwa jest przesuwana wraz z maską!)

{/tlo}

{tlo_0}

Ponownie wykorzystujemy narzędzie Kadrowanie lub zmiana wymiarów obrazu. Wycinamy górny fragment obrazu o wysokości około 200 pikseli.

{/tlo}

{tlo_1}

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

{/tlo}

Etap 6

{tlo_0}

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.

{/tlo}

{tlo_1}

Napisy umieszczamy 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.

{/tlo}

Etap 7

{tlo_1}

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

{/tlo}

{tlo_0}

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.

{/tlo}

{tlo_1}

Napis CHORDS zostanie otoczony markizą selekcji.

{/tlo}

{tlo_0}

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ąglij.

{/tlo}

{tlo_1}

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

{/tlo}{tlo_1}

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.

{/tlo}

{tlo_0}

Identyczne przekształcenie wykonujemy na pozostałych dwóch napisach SONGS oraz TABS.

{/tlo}

{tlo_1}

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.

Aby uzyskać pierwszą wynikową ilustrację wyłączamy widoczność warstwy z rozmytą białą poświatą oraz trzech czarnych warstw z napisami.

Uzyskanie drugiej ilustracji wiąże się z włączeniem widoczności wszystkich warstw.

{/tlo}

Efekt końcowy

{tlo_0}

Obraz przedstawia wygląd menu strony WWW, gdy wskaźnik myszy nie wskazuje żadnej z opcji CHORDS, SONGS czy TABS.

{/tlo}

{tlo_1}

Na drugim obrazie opcje CHORDS, SONGS oraz TABS wyglądają tak, jakby były wskazane przez wskaźnik myszy.

{/tlo}

Może cię też zainteresować

Internet Maker

BaseKit ma stworzyć dynamiczne strony z plików Photoshopa. Jeśli wydaje cie się, że otrzymasz Dreamwavera działającego w przeglądarce to masz rację. Wydaje ci się.

Internet Maker

Adobe Photoshop to bezsprzecznie najlepszy edytor grafiki. Za świetne narzędzie trzeba jednak zapłacić, a w przypadku Photoshopa mówimy już nie o setkach, a tysiącach złotych. Może warto więc sprawdzić, jakie bezpłatne aplikacje...

Internet Maker

Prezentowany szablon bazuje na układzie stałej szerokości. Wykorzystano w nim trzy triki: kafelkowanie (ang. sprites), pozycjonowanie względnie bezwzględne oraz FIR (ang. Fahrner Image Replacement).

Internet Maker

Szablon ten prezentuje menu z efektem rollover oraz wskaźnikiem wybranej opcji. Oba efekty są wykonane w CSS z wykorzystaniem kafelkowania (ang. sprites). Wskaźnik wybranej opcji wymaga dodania do kodu XHTML...