Strona 1

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Szablon witryny WWW wykonany w oparciu o

obłe prostokąty

Włodzimierz Gajda

Omawiany szablon witryny „magazyn INTERNET” jest wykonany przy użyciu podstawowych narzędzi i opcji

GIMP-a: zaznaczeń prostokątnych, gradientu, operacji zaokrąglania zaznaczenia, obracania warstwy oraz zmiany

stopnia krycia warstwy.

1 listopada 2006 r.

Spis treści

1. Krok pierwszy: obły prostokąt

2. Krok drugi: napis magazyn

3. Krok trzeci: napis INTERNET

4. Krok czwarty: opcje

5. Krok piąty: prostokąty do efektu rollover

6. Krok szósty: prostokąt przeznaczony na tło

1. Krok pierwszy: obły prostokąt

Strona 2

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 1.

Utwórz nowy biały obraz o wymiarach 800×600 pikseli, po czym dodaj cztery prowadnice.

Strona 3

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 2.

Prowadnice umieść w obrazie tak, by zaznaczany przy ich użyciu prostokąt miał wymiary 760×140 pikseli. Wymiary

zaznaczanego prostokąta możesz obserwować w dolnej części okna z obrazem. Jeśli zaznaczany obszar ma inny

wymiar, usuń zaznaczenie (Ctrl+Shift+A), przesuń prowadnice, i spróbuj ponownie zaznaczyć prostokąt. Postępuj

tak aż otrzymasz prostokąt o podanych wymiarach. Być może pomocne okaże się powiększanie i pomniejszanie

widoku obrazu (skróty: + oraz -).

Strona 4

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 3.

Gdy zaznaczysz już prostokąt, wygładź jego kształt. Wykonaj operację

Zaznaczenie →→→→ Zaokrąglenie

podając

jako parametr promień zaokrąglenia równy 20.

Strona 5

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 4.

Otrzymasz zaznaczenie w kształcie prostokąta o zaokrąglonych narożnikach.

Rysunek 5.

Zaznaczenie to skopiuj z białego tła i wklej na nową warstwę.

Strona 6

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 6.

Otrzymany obły prostokąt wypełnij delikatnym beżowym gradientem.

2. Krok drugi: napis magazyn

Rysunek 7.

Dodaj do obrazu napis „magazyn”.

Strona 7

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 8.

Obróć napis o -90 stopni, po czym przesuń w lewo.

Strona 8

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 9.

Zaznacz prostokąt obejmujący napis „magazyn”.

Strona 9

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 10.

Zaznaczenie skopiuj z warstwy z obłym prostokątem, wklej na nową warstwę i wypełnij kolorem czarnym.

Strona 10

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 11.

Zmień kolor napisu „magazyn” z czarnego na biały:

Warstwa →→→→ Kolory →→→→ Inwersja

.

Strona 11

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 12.

Dodaj jednopikselowy biały prostokąt oddzielający czarny obszar od beżowego. Prostokąt taki możesz wykonać

następująco:

zaznacz prostokąt,

skopiuj zaznaczenie z białego tła i wklej na nową warstwę.

3. Krok trzeci: napis INTERNET

Strona 12

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 13.

Dodaj do obrazu napis „INTERNET”.

Rysunek 14.

Napis przekształć w zaznaczenie (

Kanał alfa na zaznaczenie

), po czym zaznaczenie zamień na ścieżkę

Zaznaczenie →→→→ Przekształć na ścieżkę

. Otrzymaną ścieżkę obrysuj — na nowej przezroczystej warstwie —

cienkim pisakiem.

Rysunek 15.

Zmniejsz krycie napisu oraz obrysu.

Strona 13

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 16.

Dodaj czarną poświatę napisu „INTERNET”:

zaznacz napis „INTERNET” (

Kanał alfa na zaznaczenie

),

zaznaczenie powiększ o kilka pikseli (

Zaznaczenie →→→→ Powiększ

),

zaokrągl zaznaczenie (

Zaznaczenie →→→→ Zaokrągl

),

otrzymane zaznaczenie skopiuj z białego tła i wklej na nową warstwę,

odwróć kolory otrzymanej warstwy (

Warstwa →→→→ Kolory →→→→ Inwersja

),

zmniejsz krycie wklejonej warstwy.

4. Krok czwarty: opcje

Rysunek 17.

Dodaj do obrazu podpisy opcji: „AUTORZY”, „ARTYKUŁY”, „ROCZNIKI”, itd.

Strona 14

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 18.

W wyrównaniu napisów pomogą ci prowadnice oraz czarne kwadraty.

5. Krok piąty: prostokąty do efektu rollover

Rysunek 19.

Dodaj do obrazu prowadnice, które wyznaczą położenie prostokąta podświetlającego napis „AUTORZY”.

Strona 15

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 20.

Zaznacz prostokąt wyznaczony przez prowadnice.

Rysunek 21.

Zaokrągl zaznaczenie wykonując operację

Zaznaczenie →→→→ Zaokrąglenie

. Ustal promień równy 50.

Strona 16

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 22.

Zaokrąglony prostokąt skopiuj z białego tła i wklej na nową warstwę.

Rysunek 23.

W identyczny sposób wykonaj prostokąty podświetlające pozostałe opcje.

Strona 17

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Rysunek 24.

Połącz wszystkie prostokąty podświetlające w jedną warstwę. Zmniejsz krycie warstwy do 40.

6. Krok szósty: prostokąt przeznaczony na tło

Rysunek 25.

Powiel obły beżowy prostokąt. Duplikat przesuń do dołu i wypełnij jednolitym beżowym kolorem.

lp. Przykład

1.

Szablon

Strona 18

Szablon witryny WWW wykonany w oparciu o obłe prostokąty

2008-02-27 20:07:24

http://www.gajdaw.pl/gimp/oble-prostokaty/print.html

Tabela 1. Przykłady do pobrania