GIMP i webmastering: Obrysowanie menu przy użyciu ścieżek

Obrazy tworzone w GIMP-ie mogą zawierać proste elementy wektorowe. Służą do tego ścieżki. Wykonując przykład zwróćmy szczególną uwagę na fakt, że ścieżki można przekształcać na zaznaczenia, a zaznaczenia na ścieżki. Daje to duże możliwości tworzenia kształtów i ich obrysowywania.

Omawiany przykład ma na celu wykonanie witryny, która wykorzystuje efekt rollover. Należy zatem wykonać dwa pliki graficzne o identycznych rozmiarach.

Pierwszy z nich będzie zawierał wygląd witryny, w której opcje są niezaznaczone.

Na drugim obrazie wszystkie opcje są zaznaczone. W GIMP-ie najłatwiej wykonać takie obrazy umieszczając efekty dotyczące wyboru opcji na osobnych warstwach.

Przygotowanie obrazów

Etap 1: Obły prostokąt

{tlo_1}

Utwórz nowy obraz o wymiarach 760 x 600, po czym zaznacz w nim prostokąt.

{/tlo}
{tlo_0}

Zaokrąglij narożniki prostokąta o 30%. Służy do tego opcja Zaznaczenie | Zaokrąglenie.

{/tlo}
{tlo_1}

Zaznaczenie to skopiuj z warstwy tła, wklej na nową warstwę i wypełnij czarnym kolorem.

{/tlo}

Etap 2: Ścieżka obrysowująca menu

{tlo_0}

Dodaj do obrazu wąski prostokąt, który rozciąga się od górnej do dolnej krawędzi obrazu. Prostokąt wykonaj następująco:

•zaznacz odpowiedni obszar

•skopiuj zaznaczenie z białego tła

•wklej skopiowane zaznaczenie na nową warstwę

•nową warstwę wypełnij kolorem czarnym.

{/tlo}
{tlo_1}

Gdy widoczne są oba czarne prostokąty, wybierz narzędzie do zaznaczania sąsiadujących obszarów (skrót: z), po czym kliknij czarny obszar dowolnego z prostokątów. Otrzymasz selekcję o kształcie pokazanym na rysunku.

{/tlo}
{tlo_0}

Otrzymaną selekcję przekształć na ścieżkę. Służy do tego opcja Zaznaczenie | Przekształć na ścieżkę. Otrzymasz ścieżkę widoczną na rysunku. Nie będzie ona jednak od razu widoczna na ekranie.

{/tlo}
{tlo_1}

Jeśli chcesz włączyć widoczność ścieżki, to zaznacz ikonę oka w oknie dialogowym Ścieżki. Następnie wybierz narzędzie Tworzenie i modyfikowanie ścieżek i kliknij ścieżkę.

{/tlo}
{tlo_0}

Gdy ujrzysz ścieżkę, należy dokonać jej modyfikacji. Usuń część węzłów. Do usuwania węzłów ścieżki służy kliknięcie z przytrzymanymi przyciskami Ctrl oraz Shift. Jeśli w identyczny sposób klikniesz odcinek łączący węzły ścieżki, to ścieżka zostanie rozcięta. Po usunięciu części węzłów należy jeszcze przesunąć dwa skrajne węzły, tak jak to zostało pokazane na rysunku. Do przesuwania węzłów służy technika ciągnij-upuść.

{/tlo}
{tlo_1}

Gdy ścieżka jest gotowa, należy ją obrysować. Dodaj do obrazu nową przezroczystą warstwę, po czym przejdź do okna dialogowego Ścieżki. Naciśnij zaznaczony na rysunku przycisk Rysowanie wzdłuż ścieżki.

{/tlo}
{tlo_0}

W oknie dialogowym ustal właściwości rysowanej linii.

{/tlo}
{tlo_1}

W obrazie pojawi się linia biegnąca wzdłuż ścieżki.

{/tlo}

Etap 3: Tło menu, tło tekstu

{tlo_0}

Po dodaniu linii zaznacz w obrazie obszar leżący po lewej stronie. Wystarczy pojedyncze kliknięcie magiczną różdżką do zaznaczania sąsiadujących obszarów. Zaznaczony obszar skopiuj z tła, wklej na nową warstwę, po czym wypełnij niebieskim kolorem.

{/tlo}
{tlo_1}

W podobny sposób zaznacz obszar leżący na prawo od obrysu ścieżki. Zaznaczony obszar wypełnij (na nowej warstwie) delikatnym gradientem przechodzącym od niebieskiego do białego. Jeśli gradient lub niebieski kolor są zbyt intensywne, to zmniejsz krycie odpowiednich warstw.

{/tlo}

Etap 4: opcje

{tlo_0}

Dodaj do obrazu cztery nazwy opcji.

{/tlo}
{tlo_1}

Powiększ widok obrazu, dodaj do obrazu prowadnice, po czym wykorzystując prowadnice utwórz ścieżkę.

Ścieżkę wykonasz w następujący sposób:

•wybierz narzędzie Tworzenie i modyfikowanie ścieżek

•kliknij kolejne wierzchołki trójkąta,

•do zamknięcia ścieżki służy operacja Ctrl+klik; należy przytrzymać przycisk Ctrl, po czym kliknąć pierwszy z wierzchołków ścieżki.

{/tlo}
{tlo_0}

Otrzymaną ścieżkę przekształć w zaznaczenie. Służy do tego przycisk zaznaczony na powyższym rysunku. Następnie:

• zaznaczenie skopiuj z tła

• skopiowany fragment wklej na nową warstwę

• wklejony element wypełnij kolorem czarnym

{/tlo}
{tlo_1}

Powinieneś otrzymać trójkąt widoczny na rysunku.

{/tlo}
{tlo_0}

Pod opcjami menu dodaj obły prostokąt wypełniony niebieskim kolorem. Obły niebieski prostokąt oraz czarny trójkąt powiel trzykrotnie. Wykorzystaj do tego operację duplikowania warstwy. Duplikaty przesuń pod pozostałe opcje menu.

{/tlo}

Etap 5: logo

{tlo_1}

Następnie dodaj do obrazu napisy tworzące logo.

{/tlo}
{tlo_0}

Napis INTERNET otocz dwupikselową obwiednią białą i trzypikselową obwiednią czarną. Obwiednie wykonasz następująco:

•zaznacz napis INTERNET (służy do tego opcja Kanał alfa na zaznaczenie dostępna w menu kontekstowym okna dialogowego Warstwy),

•zaznaczenie powiększ o dwa piksele (Zaznaczenie | Powiększ),

•otrzymaną selekcję skopiuj z białego tła i wklej na nową warstwę

W przypadku czarnej obwiedni zaznaczenie powiększ o trzy, a nie dwa piksele, zaś na samym końcu wypełnij czarnym kolorem.

{/tlo}

Zamiana obrazu XCF w stronę WWW

{tlo_1}

Przygotowany obraz XCF należy zamienić w stronę WWW. W tym celu musisz przygotować łącznie 13 obrazów o nazwach i wymiarach podanych na rysunku.

{/tlo}
{tlo_0}

Ułatwisz sobie zadanie dodając do obrazu prowadnice. Po dodaniu prowadnic należy po kolei zaznaczać odpowiednie prostokąty obrazu, po czym przekształcać je w nowy obraz. Przekształcenie to wykonasz wykorzystując dwie operacje: Edycja | Kopiuj widoczne, Edycja | Wklej jako nowy.

Pamiętaj o tym, by opcje zaznaczone na poprzednim rysunku żółtym tłem wykonać podwójnie: raz zaznaczone, a raz odznaczone. Skorzystaj z operacji zmiany widoczności warstw.

{/tlo}

Przygotowanie kodu HTML

Gdy przygotujesz pliki graficzne, pora na opracowanie kodu HTML. Witryna jest wykonana w oparciu o układ stałej szerokości. Główny element div o identyfikatorze strona zawiera wewnątrz cały kod witryny. Na ten kod składają się trzy elementy div o identyfikatorach naglowek, menu i tekst. Zarys kodu HTML witryny jest przedstawiony na listingu 1.

...
...
...

Interaktywne menu jest wykonane w postaci serii obrazów będących hiperłączami:

Obrazy są podmieniane po wskazaniu ich wskaźnikiem myszki. Wykonujemy to w skryptach JavaScript, wykorzystując zdarzenia onmouseout i onmouseover elementu img.

Zarys menu jest przedstawiony na listingu 2.

Oczywiście po ukończeniu kodu HTML należy jeszcze witrynę wzbogacić o skrypt JavaScript wymieniający obrazki oraz o style CSS.

...