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.

<a title="\&quot;Lorem\&quot;" href="\&quot;index.php?id=2\&quot;"> <img id="\&quot;img0\&quot;" onmouseover="\&quot;rollover_o(\'img0\'," onmouseout="\&quot;rollover_off(\'img0\',0);\&quot;" src="\&quot;img/lorem-off.png\&quot;" alt="\&quot;Lorem\&quot;" /> </a>
<a title="\&quot;Ipsum\&quot;" href="\&quot;index.php?id=3\&quot;"> <img id="\&quot;img1\&quot;" onmouseover="\&quot;rollover_on(\'img1\'," onmouseout="\&quot;rollover_off(\'img1\',1);\&quot;" src="\&quot;img/ipsum-off.png\&quot;" alt="\&quot;Ipsum\&quot;" /> </a>

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-&gt;assign(\'akcja\', $akcja);

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

{if $akcja == 1} {include file=”error.tpl”} {elseif $akcja == 2} {include file=”lorem.tpl”} {elseif $akcja == 3} {include file=”ipsum.tpl”} {elseif $akcja == 4} … {/if}

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

Może Cię zainteresować:

O autorze

Włodzimierz Gajda

Więcej artykułów autorstwa Włodzimierz Gajda »

Internet Maker