Strona 1

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Nagłówki stron WWW

Włodzimierz Gajda

Kolejne spotkanie z GIMP-em jest poświęcone banerom stron WWW. Nauczymy się przygotowywać logo o stałej

szerokości, logo o tle wypełniającym całe okno przeglądarki oraz logo z ilustracją powielaną dowolną liczbę razy.

1 kwietnia 2006 r.

Spis treści

1. Witryna Autokomis

2. Witryna HTML

3. Witryna firmy Talar

Strona 2

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 1.

W ćwiczeniach wykorzystamy między innymi narzędzie do pobierania koloru, przycisk do zamiany koloru

pierwszoplanowego i koloru tła, wypełnianie gradientem oraz odbijanie warstwy lub zaznaczenia.

1. Witryna Autokomis

Rysunek 2.

Tworzymy nowy obraz o wymiarach 800×187 pikseli. Do obrazu tego wklejamy wycięte zdjęcie samochodu.

Strona 3

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 3.

Warstwę z samochodem powielamy trzykrotnie. Otrzymane cztery samochody skalujemy do malejących rozmiarów i

przesuwamy na prawą stronę.

Rysunek 4.

Wykorzystując narzędzie do pobierania z obrazu koloru, pobieramy dwa odcienie koloru niebieskiego z dowolnego z

samochodów. Najpierw wybieramy warstwę aktywną (narzędzie do pobierania koloru działa w odniesieniu do

aktywnej warstwy!). Pobieramy kolor. Następnie zamieniamy kolor tła i kolor pierwszoplanowy (skrót klawiszowy

X), po czym pobieramy drugi z kolorów. Gdy oba kolory są ustalone, to tworzymy nową warstwę i wypełniamy ją

gradientem liniowym.

Strona 4

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 5.

Dodajemy do obrazu warstwę białą i umieszczamy na niej napis Bryka.

Rysunek 6.

Warstwę białą z czarnym napisem rozmywamy algorytmem Gaussa o parametrach 5, 5 (

Filtry →→→→ Rozmycie →→→→

Rozmycie Gaussa

).

Strona 5

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 7.

Na warstwie zawierającej gradient wytłaczamy rozmyty napis Bryka. Warstwą aktywną powinien być gradient.

Wykonujemy filtr

Filtry →→→→ Odwzorowania →→→→ Mapowanie wypukłości

.

Rysunek 8.

Tekst Bryka wypełniamy gradientem liniowym o odwrotnym kierunku.

Strona 6

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 9.

Wytłoczony napis Bryka wyraźnie odróżnia się teraz od tła.

Rysunek 10.

Dodajemy jeszcze jeden napis oraz czarne prostokąty przysłaniające obszar pod samochodami.

Strona 7

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 11.

Włączamy widoczność odpowiednich warstw. Baner jest skończony.

Rysunek 12.

2. Witryna HTML

Strona 8

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 13.

W narzędziówce podwójnie klikamy narzędzie

Wypełnienie gradientem koloru

. Ujrzymy okno dialogowe

umożliwiające ustalenie właściwości gradientu. Z listy dostępnych gradientów wybieramy gradient o nazwie Horizon

2.

Strona 9

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 14.

Gradientem tym wypełniamy obraz o wymiarach 800×89.

Rysunek 15.

Do obrazu dodajemy nową przezroczystą warstwę. Na warstwie tej umieszczamy poziomą siatkę. Wykorzystujemy

do tego filtr

Filtry →→→→ Renderowanie →→→→ Deseń →→→→ Siatka

.

Strona 10

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 16.

Zmieniamy przezroczystość warstwy na 40 procent oraz rodzaj krycia (oznaczony jako

Tryb

w oknie warstw) na

Wydobycie ziarna

.

Rysunek 17.

Dodajemy do obrazu niebieski napis HTML.

Rysunek 18.

Strona 11

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Dodajemy jeszcze napis HTML w kolorze białym.

Rysunek 19.

Napis niebieski umieszczamy powyżej białego. Tekst biały przesuwamy o jeden piksel do dołu i o dwa piksele w

prawo (wykorzystujemy do tego narzędzie do przesuwania warstw oraz klawisze strzałek na klawiaturze).

Rysunek 20.

Teraz z listy dostępnych warstw wybieramy warstwę z niebieskim napisem HTML. Zaznaczamy nieprzezroczyste

piksele niebieskiego napisu: w oknie warstw klikamy warstwę z niebieskim napisem prawym guzikiem myszy; z

menu kontekstowego wybieramy operację

Kanał alfa na zaznaczenie

. Otrzymamy zaznaczenie

odpowiadające niebieskiemu napisowi. Zaznaczenie powiększamy o kilka pikseli (

Zaznaczenie →→→→ Powiększ

),

po czym rozmywamy (

Zaznaczenie →→→→ Zaokrągl

). Tak otrzymane zaznaczenie wypełniamy czarnym kolorem na

nowej, przezroczystej warstwie.

Strona 12

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 21.

Obraz zawiera trzy warstwy z napisem HTML: niebieską, białą oraz czarne rozmycie.

Rysunek 22.

Włączamy widoczność warstwy z gradientem oraz warstwy z siatką. Baner jest skończony.

Rysunek 23.

Strona 13

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Ostatnim krokiem jest przygotowanie obrazów tła. Z otrzymanego banera wycinamy plasterek o szerokości kilku

pikseli i o pełnej wysokości (z obszaru leżącego poza napisem HTML). Zaznaczamy odpowiedni prostokąt, po czym

wykonujemy operację

Skopiuj widoczne

oraz

Wklej jako nowy

. Otrzymany obraz zapisujemy do pliku

tlo-gora.png

.

Rysunek 24.

Górne tło odbijamy w pionie i zapisujemy do pliku

tlo-dol.png

.

Strona 14

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 25.

W podobny sposób wykonujemy ćwiczenia zatytułowane Bazy danych, CSS, Gimp, JavaScript oraz PHP.

Strona 15

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 26.

3. Witryna firmy Talar

Strona 16

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 27.

Rozpoczynamy od przygotowania tła. Z ilustracji przedstawiającej monety wycinamy interesujący fragment.

Rysunek 28.

Wycięte monety wklejamy kilkukrotnie do nowego białego obrazu. Każdą wklejoną kupkę monet umieszczamy na

osobnej warstwie. Warstwy układamy tak, by granica pomiędzy poszczególnymi kupkami monet była niewidoczna.

Strona 17

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 29.

Przygotowujemy tło, które będzie powielane w nieskończoność. Długą kupkę monet rozcinamy na dwa fragmenty A

oraz B. Fragment A przesuwamy na prawo, fragment B — na lewo. Fragmenty nasuwamy na siebie tak, by otrzymać

obraz o wymaganej szerokości (np. 800 pikseli). Środek obrazu musi dawać efekt płynnego przejścia z fragmentu A

na B.

Rysunek 30.

Otrzymany obraz może być przyklejany do siebie dowolną liczbę razy dając efekt nieskończonej kupki monet. Obraz

zapisujemy do pliku

tlo-gora.png

.

Strona 18

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 31.

Plik

tlo-gora.png

kopiujemy. Przystępujemy do wykonania banera, ale zachowujemy niezmienione tło. W

witrynie będą potrzebne zarówno tło jak i baner. W banerze, na tle umieszczamy napisy Talar usługi finansowe.

Rysunek 32.

Dodajemy dwie nowe warstwy: jedną z białym prostokątem, drugą z czarną obwódką.

Strona 19

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 33.

Zmniejszamy krycie warstwy z białym prostokątem.

Rysunek 34.

Dodajemy podobny prostokąt z obwódką przeznaczony na opcje witryny.

Rysunek 35.

Wprowadzamy nazwy opcji.

Strona 20

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

Rysunek 36.

Na zakończenie dodajemy czarne prostokąty, które posłużą do wykonania efektu rollover.

Rysunek 37.

lp.

Przykład

1.

Autokomis

2.

HTML

3.

Bazy danych

4.

CSS

5.

GIMP

6.

JavaScript

Strona 21

Nagłówki stron WWW

2008-02-27 19:59:16

http://www.gajdaw.pl/gimp/naglowki-stron-www/print.html

7.

PHP

8.

Talar

Tabela 1. Przykłady do pobrania