23 GIMP SzablonWWW wykonany w oparciu o obłe prostokąty


Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 1
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
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 2
Rysunek 1.
Utwórz nowy biaÅ‚y obraz o wymiarach 800×600 pikseli, po czym dodaj cztery prowadnice.
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 3
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 -).
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 4
Rysunek 3.
Gdy zaznaczysz ju\ prostokąt, wygładz jego kształt. Wykonaj operację Zaznaczenie Zaokrąglenie podając




jako parametr promień zaokrąglenia równy 20.
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 5
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ę.
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 6
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 .
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 7
Rysunek 8.
Obróć napis o -90 stopni, po czym przesuń w lewo.
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 8
Rysunek 9.
Zaznacz prostokÄ…t obejmujÄ…cy napis  magazyn .
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 9
Rysunek 10.
Zaznaczenie skopiuj z warstwy z obłym prostokątem, wklej na nową warstwę i wypełnij kolorem czarnym.
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 10
Rysunek 11.
Warstwa Kolory Inwersja
Zmień kolor napisu  magazyn z czarnego na biały: .



http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 11
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
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 12
Rysunek 13.
Dodaj do obrazu napis  INTERNET .
Rysunek 14.
Kanał alfa na zaznaczenie
Napis przekształć w 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.
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 13
Rysunek 16.
Dodaj czarną poświatę napisu  INTERNET :
Kanał alfa na zaznaczenie
zaznacz napis  INTERNET ( ),
Zaznaczenie Powiększ
zaznaczenie powiększ o kilka pikseli ( ),



Zaznaczenie ZaokrÄ…gl
zaokrÄ…gl zaznaczenie ( ),



otrzymane zaznaczenie skopiuj z białego tła i wklej na nową warstwę,
Warstwa Kolory Inwersja
odwróć kolory otrzymanej warstwy ( ),



zmniejsz krycie wklejonej warstwy.
4. Krok czwarty: opcje
Rysunek 17.
Dodaj do obrazu podpisy opcji:  AUTORZY ,  ARTYKUAY ,  ROCZNIKI , itd.
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 14
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 .
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 15
Rysunek 20.
Zaznacz prostokÄ…t wyznaczony przez prowadnice.
Rysunek 21.
ZaokrÄ…gl zaznaczenie wykonujÄ…c operacjÄ™ Zaznaczenie ZaokrÄ…glenie
. Ustal promień równy 50.



http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 16
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.
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 17
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
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24
Szablon witryny WWW wykonany w oparciu o obłe prostokąty Strona 18
Tabela 1.
Przykłady do pobrania
http://www.gajdaw.pl/gimp/oble-prostokaty/print.html 2008-02-27 20:07:24


Wyszukiwarka