Szablon witryny magazyn INTERNET Strona 1
Szablon witryny magazyn INTERNET
WÅ‚odzimierz Gajda
Przygotowywana w tym odcinku witryna wykorzystuje: prowadnice, gradienty, zaznaczenia, ście\
ki, warstwy i
maski, wklejanie elementów do obrazu oraz zaokrąglone prostokąty. Do dokładnego uło\
enia ikon opcji menu
u\
yłem kwadratów i prostokątów. Metoda ta gwarantuje, \
e ka\
da z ikon zajmie dokładnie tyle samo miejsca (bez
względu na rozmiar) oraz to, \
e ikony będą równoodległe, co ma znaczenie podczas przygotowywania kodu HTML
witryny.
1 grudnia 2006 r.
Spis treści
1. Etap 1: tło
2. Etap 2: napisy
3. Etap 3: pozioma linia
4. Etap 4: ikony
5. Etap 5: wskaz
nik wybranej opcji
6. Etap 6: obłe prostokąty z prawego górnego naro\
nika
7. Etap 7: podpisy opcji
8. Etap 8: wskaz
nik przewijania rekordów
9. Etap 9: obrys
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 2
Rysunek 1.
Obrazy, od kt
Å‚rych rozpoczynamy
Rysunek 2.
Obraz wynikowy z odznaczonymi opcjami
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 3
Rysunek 3.
Obraz wynikowy z zaznaczonymi opcjami
1. Etap 1: tło
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 4
Rysunek 4.
Utwórz nowy obraz o wymiarach 800×600. Obraz ten wypeÅ‚nij gradientem liniowym przechodzÄ…cym od koloru
ciemniejszego na górze do koloru jaśniejszego na dole. Wypełnienie powinno być dokładnie pionowe. Ułatwisz sobie
pracÄ™ wykorzystujÄ…c prowadnicÄ™ pionowÄ….
Rysunek 5.
Dodaj dwie prowadnice poziome w miejscach o współrzędnych 20 i 580 oraz dwie prowadnice pionowe w miejscach
o współrzędnych 20 i 780. Dodane cztery prowadnice powinny w obrazie wyznaczyć prostokąt o wymiarach
560×760 oraz 20 pikselowe obramowanie.
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 5
Rysunek 6.
Zaznacz prostokÄ…t wyznaczony przez prowadnice.
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 6
Rysunek 7.
Zaznaczenie ZaokrÄ…glenie
ZaokrÄ…gl naro\
niki zaznaczenia. Wykonaj opcjÄ™ o parametrze 10.



http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 7
Rysunek 8.
Otrzymany prostokÄ…t o zaokrÄ…glonych naro\
nikach skopiuj z tła, wklej na nową warstwę i wypełnij jednolitym
zielonym kolorem. Na zakończenie zmniejsz krycie warstwy z zaokrąglonym prostokątem.
2. Etap 2: napisy
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 8
Rysunek 9.
Dodaj do obrazu napisy magazyn INTERNET.
3. Etap 3: pozioma linia
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 9
Rysunek 10.
Zaznacz cienki długi prostokąt poni\
ej napisu INTERNET. ProstokÄ…t ten powinien swoimi pionowymi bokami
dotykać prostokąta o zaokrąglonych naro\
nikach. Zaznaczony prostokąt skopiuj z tła, wklej na nową warstwę i
wypełnij jednolitym kolorem o odcieniu zielonym.
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 10
Rysunek 11.
Dodaj maskę dla warstwy z długim prostokątem. Maskę tą wypełnij dwuliniowym gradientem czarno-białym.
Gradient ten powinien być uło\
ony pionowo (wykorzystaj prowadnicę!). W środkowej części prostokąta gradient
maski powinien być czarny i rozjaśniać się w kierunku poziomych boków długiego prostokąta.
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 11
Rysunek 12.
Po włączeniu działania maski i zmniejszeniu krycia warstwy długiego prostokąta otrzymasz delikatną linię.
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 12
Rysunek 13.
Zadaniem długiego prostokąta jest oddzielenie nagłówka od treści strony.
4. Etap 4: ikony
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 13
Rysunek 14.
Wklej do obrazu siedem małych ikon. Ikony umieść na osobnych warstwach.
Rysunek 15.
W celu wyrównania ikon dodamy do obrazu serię czarnych kwadratów i czerwonych prostokątów.
Dodaj czarny kwadrat le\
Ä…cy na osobnej warstwie i obejmujÄ…cy pierwszÄ… z ikon:
zaznacz kwadrat obejmujący ikonę (podczas zaznaczania prostokąta przytrzymaj klawisz Shift, wówczas
zaznaczenie będzie przyjmowało kształt kwadratu),
zaznaczenie skopiuj z tła i wklej na nową warstwę,
wklejony kwadrat wypełnij kolorem czarnym.
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 14
Rysunek 16.
W podobny sposób dodaj do obrazu czerwony prostokąt. Pamiętaj, \
e prostokąt ten musi być umieszczony na
osobnej warstwie. Jego szerokość wyznaczy odstęp pomiędzy ikonami.
Rysunek 17.
Powiel czarny kwadrat i czerwony prostokąt. Powielone figury rozłó\
równo obok siebie. Wykorzystaj narzędzie do
przesuwania warstw (skrót m) oraz strzałki na klawiaturze.
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 15
Rysunek 18.
Wklejone ikony umieść nad czarnymi kwadratami.
Rysunek 19.
Wyłącz widoczność czerwonych prostokątów i czarnych kwadratów.
5. Etap 5: wskaz
nik wybranej opcji
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 16
Rysunek 20.
Zaznacz prostokąt o szerokości identycznej jak pierwszy z czarnych kwadratów. Prostokąt ten powinien le\
eć ponad
czarnym kwadratem i swoim obszarem sięgać powy\
ej brzegu zaokrÄ…glonego prostokÄ…ta.
Rysunek 21.
ZaokrÄ…gl zaznaczenie. Wykonaj operacjÄ™ Zaznaczenie ZaokrÄ…glenie z parametrem 50.




http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 17
Rysunek 22.
Wklej do obrazu zieloną strzałkę. Umieść ją na nowej warstwie i przesuń na środek małego prostokąta o
zaokrÄ…glonych naro\
nikach.
Rysunek 23.
Powiel strzałkę i mały zielony prostokąt. Duplikaty przesuń nad kolejne ikony menu głównego.
6. Etap 6: obłe prostokąty z prawego górnego naro\
nika
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 18
Rysunek 24.
Zaznacz dość du\
y prostokÄ…t.
Rysunek 25.
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 19
Zaznaczenie ZaokrÄ…glenie
ZaokrÄ…gl naro\
niki prostokÄ…ta ( ) o 50%.



Rysunek 26.
Otrzymany prostokąt skopiuj z tła i wypełnij jednolitym kolorem zielonym. Kolor wypełnienia powinien być
identyczny, jak kolor górnej części obrazu (tła wypełnionego gradientem w pierwszym etapie). Do pobrania z obrazu
Pobieranie koloru z obrazu
koloru wykorzystaj pipetę o skrócie o ( ).
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 20
Rysunek 27.
Wykonany prostokąt przesuń w prawy górny róg obrazu.
7. Etap 7: podpisy opcji
Rysunek 28.
Dodaj do obrazu napis strona główna. Napis ten umieść w obszarze wyznaczonym przez prostokąt wykonany w
poprzednim etapie.
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 21
Rysunek 29.
Dodaj kolejno napisy autorzy, artykuły, roczniki, numery, rubryki oraz podrubryki. Napisy te umieść na osobnych
warstwach.
8. Etap 8: wskaz
nik przewijania rekordów
Rysunek 30.
Wklej do obrazu pięć ikon przedstawiających strzałki. Wklejane elementy umieść na osobnych warstwach, po czym
rozmieść w prawym górnym naro\
niku obrazu nieco powy\
ej poziomej linii.
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 22
Rysunek 31.
Powiel obły prostokąt. Duplikat przesuń do dołu.
Rysunek 32.
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 23
Powiększ widok obrazu i zaznacz prostokąt przylegający do brzegu du\
ego obłego prostokąta oraz do poziomej linii.
Do dokładnego wykonania zaznaczenia wykorzystaj prowadnice.
Rysunek 33.
Zaznaczenie skopiuj z małego obłego prostokąta i wklej na nową warstwę.
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 24
Rysunek 34.
Wklejony element wypełnij jednolitym kolorem pobranym z tła.
Rysunek 35.
Warstwa
Powiel cztery ikony ze strzałkami. Warstwy z duplikatami przekształć w obrazy czarno-białe (



Desaturacja
Kolory ).



http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 25
Rysunek 36.
Zmniejsz krycie czterech czarno-białych strzałek do 20.
9. Etap 9: obrys
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 26
Rysunek 37.
Warstwa Przezroczystość Kanał alfa na
Przekształć du\
y zaokrÄ…glony prostokÄ…t w zaznaczenie (



zaznaczenie
).
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 27
Rysunek 38.
Zaznaczenie Przekształć na ścieżkę
Zaznaczenie przekształć na ście\
kÄ™ ( ).



http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 28
Rysunek 39.
Obrysuj ście\
kÄ™ na nowej przezroczystej warstwie dwupikselowÄ… liniÄ… koloru zielonego.
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 29
Rysunek 40.
Zaznacz du\
y prostokąt obejmujący swoim obszarem górną część obrysu a\
do poziomej linii (włącznie z poziomą
liniÄ…).
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 30
Rysunek 41.
Usuń górną część obrysu:
warstwÄ… bie\
ącą uczyń obrys,
Edycja Wyczyść
naciśnij skrót Ctrl+K ( ).



lp. Przykład
1. Ikony menu głównego
2. Ikony następny/poprzedni
3. Szablon witryny w formacie XCF
4. Szablon witryny w formacie PNG
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10
Szablon witryny magazyn INTERNET Strona 31
Tabela 1.
Przykłady do pobrania
http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html 2008-02-27 20:12:10