Gimp: tworzenie szablonów stron WWW cz. 4

Szablon z opcjami graficznymi

Rys. 1. Menu po wskazaniu opcji lorem ipsum Szablon przedstawiony na rys. 1 zawiera jedno menu z pięcioma opcjami. Jest to szablon stałej szerokości wykonany w oparciu o udawane kolumny (ang. faux columns), ujemne marginesy (ang. negative margins) oraz technikę wymiany obrazów FIR (ang. Fahrner Image Replacement). Menu wykorzystuje efekt rollover. Po wskazaniu kursorem myszki wybrana opcja zostaje oznaczona z prawej strony kwiatkiem.

Szablon z opcjami tekstowymi

Menu oraz nagłówek witryny mogą być wykonane w postaci tekstowej. Zaletą takiego rozwiązania jest oczywiście modyfikowalność: dodanie oraz zmiana opcji menu sprowadzi się do modyfikacji kodu XHTML. Postać tekstowa menu pozwala również na skalowanie tekstu opcjami przeglądarki Widok / Rozmiar tekstu.

Rys. 2. Obraz XCF służący do wykonania szablonu

Obraz w GIMP-ie

Pracę nad szablonem rozpoczynamy od narysowania obrazu XCF w programie GIMP. Obraz, jaki należy wykonać jest widoczny na rys. 2.

Kształt: kilka prostokątów

Tworzymy nowy obraz o wymiarach 800 x 600 pikseli. Dodajemy prowadnice odcinające pas 20 pikseli z każdej strony. Otrzymamy przestrzeń roboczą o wymiarach 760 x 540. Tworzony szablon będzie miał szerokość 760 pikseli.

Wykonujemy pięć białych prostokątów przeznaczonych na opcje menu oraz jeden prostokąt przeznaczony na tytuł. Dodajemy do obrazu pionowy prostokąt leżący pomiędzy opcjami menu a nagłówkiem. Łączymy warstwy z prostokątami. Otrzymamy figurę wyznaczającą kształt szablonu.

Opcje menu możemy równo rozłożyć wykorzystując prowadnice. Innym rozwiązaniem, które często stosuję, jest dodanie do obrazu specjalnych prostokątów oraz kwadratów o charakterystycznym kolorze. Jedyną rolą czerwonych figur widocznych na rysunku jest ułatwienie pozycjonowania białych prostokątów menu.

Rys. 3. Prostokąty opcji menu i nagłówka	Rys. 4. Prostokąt łączący menu i nagłówek
Rys. 5. Figura wyznaczająca kształt szablonu	Rys. 6. Czerwone prostokąty ułatwiają równe ułożenie opcji menu