Gimp: tworzenie szablonów stron WWW cz. 1

Artykuł ten rozpoczyna nowy cykl poświęcony przygotowywaniu szablonów witryn WWW w programie GIMP. W każdym odcinku będzie szczegółowo opisany jeden szablon. W dzisiejszym spotkaniu przygotujemy wizytówkę firmy z branży motoryzacyjnej.

Zdjęcia, od których rozpoczynamy

Szablon witryny narysowany w programie GIMP

Witryna WWW

Witryna WWW wykonana przy użyciu szablonu z powyzszego rysunku, jest przedstawiona niżej. Witryna ta może służyć jako wizytówka firmy z branży motoryzacyjnej.

Menu główne witryny zawiera pięć opcji: Lorem, Ipsum, Dolor, Sit oraz Amet. Po wybraniu opcji menu wymieniana jest treść witryny, zaś menu oczywiście pozostaje niezmienione.

Menu witryny jest graficzne i wykorzystuje efekt rollover. Na rys. 6 są przedstawione trzy pierwsze opcje, po naprowadzeniu wskaźnika myszy.

Dostosowanie szablonu do potrzeb indywidualnych sprowadza się do:

• zmiany logo firmy (białe napisy Lorem Ipsum oraz czerwony napis Dolor),
• zmiany nazwy opcji menu głównego (Lorem, Ipsum, Dolor, Sit oraz Amet),
• ewentualnej zmiany liczby opcji menu głównego (zamiast pięciu opcji może być od 3 do 10, ale wówczas konieczne będzie przeskalowanie zdjęć tworzących menu).

Przygotowanie obrazu XCF

Krok 1: czarny obraz z wklejonymi miniaturami

{tlo_1}

Tworzymy nowy obraz o wymiarach 1040 x 600 i wklejamy do niego pięć miniaturowych zdjęć przeskalowanych do szerokości 100 x 75.

{/tlo}
{tlo_0}

Do obrazu dodajemy cztery identyczne białe prostokąty. Prostokąty te wyznaczą odległość pomiędzy opcjami menu. Wykorzystując prowadnice oraz cztery białe prostokąty rozmieszczamy opcje menu tak jak to ilustruje rysunek.

{/tlo}
{tlo_1}

Wygładzamy brzeg wklejonych fotografii. Najpierw robimy kopie pięciu warstw przedstawiających wklejone zdjęcia.

Następnie kolejno dla każdej fotografii:

• przekształcamy kanał alfa w zaznaczenie,
• zmniejszamy zaznaczenie o 2 piksele (Zaznaczenie | Zmniejsz),
• zaokrąglamy zaznaczenie o 5 pikseli (Zaznaczenie | Zaokrąglij),
• odwracamy zaznaczenie (Zaznaczenie | Odwróć),
• czyścimy zaznaczenie (Zaznaczenie | Wyczyść).

{/tlo}
{tlo_0}

W kolejnym kroku dodajemy jednopikselowe obramowanie każdego zdjęcia. Wykorzystując zdjęcia o ostrych krawędziach (duplikaty wykonane przed zmiękczeniem krawędzi) dla każdego z nich:

• przekształcamy kanał alfa na zaznaczenie,
• otaczamy zaznaczenie ramką o grubości jednego piksela (Zaznaczenie | Obramuj)
• kopiujemy zaznaczenie z czarnego tła,
• wklejamy skopiowany fragment na nową warstwę,
• odwracamy kolory wklejonej warstwy (Warstwa | Kolory | Inwersja).

{/tlo}
{tlo_1}

Wykonujemy duplikaty jednopikselowych ramek. Ustalamy krycie oryginałów na 60, a duplikatów na 40.

{/tlo}

Krok 2: wtopione zdjęcie dźwigni do zmiany biegów

{tlo_0}

Wklejamy do obrazu zdjęcie przedstawiające dźwignię do zmiany biegów. Wklejone zdjęcie skalujemy do rozmiarów widocznych na rysunku.

{/tlo}
{tlo_1}

Wykorzystując odręczne zaznaczanie obszarów zaznaczamy fragment znajdujący się z lewej strony oraz na dole zdjęcia. Zaznaczenie zaokrąglamy o 20 pikseli i czyścimy (Edycja | Wyczyść).

{/tlo}
{tlo_0}

Następnie dodajemy maskę warstwy ze zdjęciem dźwigni do zmiany biegów. Maskę wypełniamy czarno-białym liniowym gradientem widocznym na rysunku.

{/tlo}
{tlo_1}

Po zastosowaniu maski zdjęcie dźwigni do zmiany biegów będzie płynnie wtopione w czarne tło.

{/tlo}

Krok 3: logo witryny

{tlo_0}

Dodaj do obrazu logo: Lorem Ipsum Dolor.

{/tlo}
{tlo_1}

Wykonujemy delikatne prostokątne obramowanie:

• zaznaczamy prostokąt wyznaczający kształt obramowania,
• wykonujemy jednopikselowe obramowanie (Zaznaczenie | Obramuj),
• kopiujemy zaznaczenie z tła,
• wklejamy skopiowany fragment na nową warstwę,
• odwracamy kolory wklejonego elementu (Warstwa | Kolory | Inwersja),
• zmniejszamy krycie białej ramki do 35.

{/tlo}

Krok 4: podpisy opcji menu

{tlo_0}

Dodajemy podpisy opcji: Lorem, Ipsum, Dolor, Sit, Amet.

{/tlo}
{tlo_1}

Dodajemy maski warstw z napisami opcji. Maski wypełniamy tak, by usunąć pierwsze litery etykiet opcji menu.

{/tlo}
{tlo_0}

Następnie dodajemy nieco większe inicjały opcji menu. Inicjały wykonujemy czerwonym kolorem i umieszczamy na osobnych warstwach.

{/tlo}

Krok 5: biała kreska

{tlo_1}

Na zakończenie dodajemy do obrazu jednopikselową białą kreskę poziomą. Warstwę z kreską wzbogacamy o maskę wypełnioną dwuliniowym gradientem, który spowoduje znikanie kreski w kierunkach prawej i lewej krawędzi ekranu.

{/tlo}

Warstwy otrzymanego obrazu

Otrzymany obraz składa się z następujących warstw:

• czterech białych prostokątów służących do równego rozmieszczenia opcji menu,
• logo witryny:
  • napisy Lorem, ipsum, dolor,
  • delikatna biała ramka o kształcie prostokąta,
  • cienka, jednopikselowa biała kreska znikająca w kierunku lewej i prawej krawędzi ekranu,
  • wtopione zdjęcie dźwigni do zmiany biegów,
• zdjęć widocznych w menu witryny, pięć opcji, każda zawiera:
  • zdjęcie o ostrym brzegu,
  • zdjęcie o rozmytym brzegu,
  • jednopikselowe białe obramowanie o kryciu 40,
  • jednopikselowe białe obramowanie o kryciu 60,
• opcji menu witryny, pięć sztuk, każda zawiera:
  • napis z usuniętą (przy użyciu maski) pierwszą literą,
  • czerwoną pierwszą literę napisu
• czarnego tła.

Przygotowanie szablonu strony WWW

Krojenie pliku XCF

{tlo_1}

Wykorzystując prowadnice kroimy plik XCF na siedem fragmentów: logo.png, lewy.png, lorem-off.png, ipsum-off.png, dolor-off.png, sit-off.png, amet-off.png, dol.png.

Wykorzystujemy do tego opcje: Edycja | Kopiuj widoczne oraz Edycja | Wklej jako nowy.

Obraz XCF ma 1040 x 600 pikseli, zaś tworzony szablon ma szerokość 1000 pikseli. Dodajemy do obrazu prowadnice pionowe w punktach 20 oraz 1020 i prowadnice poziome w punktach 20 oraz 580. Pozwoli to na wycięcie szablonu o wymiarach 1000 x 560 (oczywiście wysokość szablonu nie ma żadnego znaczenia; długość strony będzie wynikała z zawartej treści).

{/tlo}
{tlo_0}

Następnie zmieniając widoczność warstw wykonujemy opcje menu (po wskazaniu kursorem myszy). Obrazy: lorem-on.png, ipsum-on.png, dolor-on.png, sit-on.png, amet-on.png mają identyczne wymiary, jak ich odpowiedniki z końcówkami -off.

Obrazy z końcówką -on:

• mają czerwony inicjał,
• pierwsza (biała) litera napisu jest ukryta,
• ramka otaczająca wtopione zdjęcie jest mocniejsza.

{/tlo}

Sklejenie pokrojonych obrazów w jedną stronę WWW

Pokrojone obrazy wykorzystujemy do przygotowania witryny WWW. Szablon strony ma stałą szerokość wynoszącą 1000 pikseli (na monitorach pracujących w rozdzielczości od 1024 x 768 wzwyż nie pojawia się poziomy pasek przewijania). Kod XHTML wykorzystuje jeden element div o identyfikatorze pojemnik, podzielony dalej (poziomo) na elementy div o identyfikatorach {stala}#logo{/stala}, {stala}#menu{/stala}, {stala}#tekst{/stala}, {stala}#kreska{/stala} oraz {stala}#stopka{/stala}, co ilustruje listing 1.

… Lorem ipsum dolor sit amet… Curabitur non turpis quis felis… …

?Lorem ipsum

Pojemnik {stala}div#pojemnik{/stala} ma stałą szerokość i jest wyśrodkowany na stronie dzięki stylom:

body, html {
    margin        : 0px;
    padding       : 0px;
    text-align    : center;
    margin-bottom : 30px;
}
#pojemnik {
    margin : 0px auto;
    width  : 1000px;
}

Opcje menu są sklejone w jedną całość dzięki trzem atrybutom: width, height i line-height:

#logo {
    width       : 1000px;
    height      : 84px;
    line-height : 0%;
}
#menu {
    width       : 1000px;
    height      : 132px;
    line-height : 0%;
}

Hiperłącza i efekt rollover

Pokrojone obrazy menu zamieniamy na hiperłącza z efektem rollover. Kod XHTML dwóch pierwszych opcji menu jest widoczny na listingu 2.

Pamiętajmy, by element body wzbogacić o atrybut:

oraz dołączyć do strony skrypty JS odpowiedzialne za wymianę obrazów:

Oczywiście w pliku rollover.js musimy wprowadzić nazwy plików zamienianych w ramach efektu rollover:

var rollovers_count = 5;
var filenames_off = new Array;
filenames_off[0] = \"img/lorem-off.png\";
filenames_off[1] = \"img/ipsum-off.png\";
...
var filenames_on = new Array;
filenames_on[0] = \"img/lorem-on.png\";
filenames_on[1] = \"img/ipsum-on.png\";
...

Pamiętajmy także, by usunąć białe znaki pomiędzy opcjami menu. Wykorzystajmy do tego funkcję strip szablonów Smarty:

{strip}

{/strip}

Wymiana treści witryny

Za wymianę treści witryny odpowiada skrypt index.php oraz szablon index.tpl.

W skrypcie PHP należy poddać sprawdzeniu zmienną URL wykorzystaną w menu. Zmienna ta w skrypcie nazywa się {stala}$_GET[\’id\’]{/stala} i jest dołączana na końcu adresów URL w formie:

index.php?id=2
index.php?id=3
...

Po sprawdzeniu poprawności zmiennej {stala}$_GET[\’id\’]{/stala} jej wartość jest wstawiana do zmiennej {stala}$akcja:{/stala}

$akcja = $_GET[\'id\'];

która z kolei jest przekazywana do szablonu Smarty:

$s->assign(\'akcja\', $akcja);

W szablonie index.tpl, na podstawie zmiennej {stala}$akcja{/stala} wstawiamy odpowiedni plik:

Treść podstron witryny pochodzi z plików lorem.tpl, ipsum.tpl, dolor.tpl, sit.tpl oraz amet.tpl.