Strona 1

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

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: wskaźnik wybranej opcji

6. Etap 6: obłe prostokąty z prawego górnego narożnika

7. Etap 7: podpisy opcji

8. Etap 8: wskaźnik przewijania rekordów

9. Etap 9: obrys

Strona 2

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 1. Obrazy, od ktĂłrych rozpoczynamy

Rysunek 2. Obraz wynikowy z odznaczonymi opcjami

Strona 3

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 3. Obraz wynikowy z zaznaczonymi opcjami

1. Etap 1: tło

Strona 4

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

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.

Strona 5

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 6.

Zaznacz prostokąt wyznaczony przez prowadnice.

Strona 6

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 7.

Zaokrągl narożniki zaznaczenia. Wykonaj opcję

Zaznaczenie →→→→ Zaokrąglenie

o parametrze 10.

Strona 7

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

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

Strona 8

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 9.

Dodaj do obrazu napisy magazyn INTERNET.

3. Etap 3: pozioma linia

Strona 9

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

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.

Strona 10

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

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.

Strona 11

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 12.

Po włączeniu działania maski i zmniejszeniu krycia warstwy długiego prostokąta otrzymasz delikatną linię.

Strona 12

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 13.

Zadaniem długiego prostokąta jest oddzielenie nagłówka od treści strony.

4. Etap 4: ikony

Strona 13

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

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.

Strona 14

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

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.

Strona 15

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 18.

Wklejone ikony umieść nad czarnymi kwadratami.

Rysunek 19.

Wyłącz widoczność czerwonych prostokątów i czarnych kwadratów.

5. Etap 5: wskaźnik wybranej opcji

Strona 16

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

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.

Strona 17

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

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

Strona 18

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 24.

Zaznacz dość duży prostokąt.

Rysunek 25.

Strona 19

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Zaokrągl narożniki prostokąta (

Zaznaczenie →→→→ Zaokrąglenie

) 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

koloru wykorzystaj pipetę o skrócie o (

Pobieranie koloru z obrazu

).

Strona 20

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

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.

Strona 21

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 29.

Dodaj kolejno napisy autorzy, artykuły, roczniki, numery, rubryki oraz podrubryki. Napisy te umieść na osobnych

warstwach.

8. Etap 8: wskaź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.

Strona 22

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 31.

Powiel obły prostokąt. Duplikat przesuń do dołu.

Rysunek 32.

Strona 23

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

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ę.

Strona 24

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 34.

Wklejony element wypełnij jednolitym kolorem pobranym z tła.

Rysunek 35.

Powiel cztery ikony ze strzałkami. Warstwy z duplikatami przekształć w obrazy czarno-białe (

Warstwa →→→→

Kolory →→→→ Desaturacja

).

Strona 25

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 36.

Zmniejsz krycie czterech czarno-białych strzałek do 20.

9. Etap 9: obrys

Strona 26

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 37.

Przekształć duży zaokrąglony prostokąt w zaznaczenie (

Warstwa →→→→ Przezroczystość →→→→ Kanał alfa na

zaznaczenie

).

Strona 27

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 38.

Zaznaczenie przekształć na ścieżkę (

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

).

Strona 28

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 39.

Obrysuj ścieżkę na nowej przezroczystej warstwie dwupikselową linią koloru zielonego.

Strona 29

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 40.

Zaznacz duży prostokąt obejmujący swoim obszarem górną część obrysu aż do poziomej linii (włącznie z poziomą

linią).

Strona 30

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Rysunek 41.

Usuń górną część obrysu:

warstwą bieżącą uczyń obrys,

naciśnij skrót Ctrl+K (

Edycja →→→→ Wyczyść

).

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

Strona 31

Szablon witryny magazyn INTERNET

2008-02-27 20:12:10

http://www.gajdaw.pl/gimp/szablon-witryny-magazyn-internet/print.html

Tabela 1. Przykłady do pobrania