GIMP_ tworzenie grafiki na potrzeby WWW _(część 6_).pdf

GIMP: tworzenie grafiki na potrzeby WWW (część 6)

Strona 1

GIMP: tworzenie grafiki na potrzeby WWW

(część 6)

Włodzimierz Gajda

DuŜa część witryn WWW stosuje tła. Przemawiają za tym nie tylko względy estetyczne, ale równieŜ praktyczne.

Strona wykorzystująca tła łatwiej podlega modyfikacjom, niŜ witryna zawierająca jedynie znaczniki IMG. Dzieje się

tak dlatego, Ŝe zwiększenie ilości treści na stronie lub w komórkach tabeli powoduje automatyczne "wydłuŜenie" tła.

1 maja 2004 r.

Spis treści

1. Style definiujące tło

1.1 Ć wiczenie 1

1.2 Ćwiczenie 2

1.3 Ć wiczenie 3

2. Płynne nałoŜenie obrazu

2.1 Ć wiczenie 4

2.2 Ćwiczenie 5

2.3 Pionowe powielanie obrazu

2.4 Ćwiczenie 6

2.5 Poziome powielanie obrazu

2.6 Ćwiczenie 7

3. Jednopikselowe plasterki

3.1 Ćwiczenie 8

3.2 Ć wiczenie 9

http://www.gajdaw.pl/gimp/kurs-tla/print.html

2008-02-27 19:47:05

GIMP: tworzenie grafiki na potrzeby WWW (część 6)

Strona 2

4. Obrazy z jednolitymi brzegami

4.1 Ć wiczenie 10

5. Podsumowanie

1. Style definiujące tło

Ustalenie tła realizujemy za pośrednictwem arkuszy stylów. Atrybut background-image określa adres URL pliku

stanowiącego tło. Dodatkowymi właściwościami, jakie moŜemy modyfikować w odniesieniu do tła są

background-repeat - powielanie tła,

background-position - połoŜenie tła,

background-attachment - unieruchomienie tła.

Atrybut background-repeat ustala sposób powielania tła. To właśnie automatyczne powielanie tła obrazu

ułatwia pracę webmastera. Dopuszczalnymi wartościami atrybutu background-repeat są repeat , repeat-

y , repeat-x oraz no-repeat . Wartością domyślną jest repeat . W takim przypadku obraz tła jest powielany w

poziomie i w pionie. Wartość no-repeat powoduje, Ŝe obraz w ogóle nie będzie powielany. Natomiast wartości

repeat-x oraz repeat-y powodują powielanie tła wyłącznie w poziomie lub w pionie, odpowiednio.

PołoŜenie tła zmieniamy modyfikując atrybut background-position . Dopuszczalne są wartości procentowe

oraz wyraŜające połoŜenie w pikselach. Ponadto predefiniowane stałe left, center, right oraz top,

center, bottom umoŜliwiają wyrównanie tła do krawędzi okna przeglądarki.

Ostatni atrybut background-attachment posiada dwie dopuszczalne wartości scroll oraz fixed . Wartość

fixed powoduje, Ŝe tło nie będzie przewijane podczas przewijania zawartości strony.

1.1 Ćwiczenie 1

Przygotuj stronę WWW o tle przedstawionym na rysunku 1. Wykorzystana fotografia jest zapisana w pliku

krzak.jpg .

http://www.gajdaw.pl/gimp/kurs-tla/print.html

2008-02-27 19:47:05

GIMP: tworzenie grafiki na potrzeby WWW (część 6)

Strona 3

Rozwiązaniem ćwiczenia jest strona zawierająca style łączące opisane atrybuty. Dodatkowo, kolor zielony tła

uzyskamy wykorzystując atrybut background

background: green;

background-image: url(krzak.jpg);

background-repeat: repeat-y;

background-position: 55px 300px;

background-attachment: fixed;

ZauwaŜmy, Ŝe zgodnie z wartością atrybutu background-repeat obraz tła jest powielany w pionie.

Przeglądarka przedstawia trzy fotografie jedna nad drugą. Jeśli zdjęcia nie poddamy specjalnej obróbce, wówczas

granica pomiędzy fotografiami jest wyraźna.

Rysunek 1. Pionowe powielanie tła

1.2 Ćwiczenie 2

http://www.gajdaw.pl/gimp/kurs-tla/print.html

2008-02-27 19:47:05

GIMP: tworzenie grafiki na potrzeby WWW (część 6)

Strona 4

Przygotuj stronę WWW o tle widocznym na rysunku 2.

Rozwiązanie ćwiczenia wymaga ustalenia następujących stylów

background: lightblue url(krzak.jpg) repeat-x

center fixed;

Jest to alternatywna składnia definicji stylu zawierająca kilka atrybutów oddzielonych białymi znakami.

UŜyto tutaj atrybutu background , nadając mu pięć wartości. PoniewaŜ pośród wartości atrybutu background

wystąpiła wartość repeat-x , zatem tło zostało powielone w poziomie. Podobnie jak i w pierwszym przykładzie

przejście pomiędzy fotografiami nie jest płynne.

Rysunek 2. Poziome powielanie tła

1.3 Ćwiczenie 3

Określ style, które zastosowano do przygotowania witryny widocznej na rysunku 3.

http://www.gajdaw.pl/gimp/kurs-tla/print.html

2008-02-27 19:47:05

GIMP: tworzenie grafiki na potrzeby WWW (część 6)

Strona 5

Jeśli definicja stylu nie zawiera wartości repeat

background: url(krzak.jpg);

wówczas tło zostanie powielone zarówno w poziomie jak i w pionie. W tym przypadku przejście pomiędzy

fotografiami jest jeszcze bardziej widoczne. Powielenie fotografii w poziomie i w pionie uwypukla granicę pomiędzy

fotografiami.

Rysunek 3. Tło powielane w poziomie i w pionie

2. Płynne nałoŜenie obrazu

Powielając obraz w poziomie i w pionie zazwyczaj otrzymamy efekt kratki. Granica przejścia pomiędzy kolejnymi

ilustracjami jest bardzo wyraźna. Widać to na kaŜdej z ilustracji od 1 do 3. W celu płynnego sklejenia powielonego

obrazu tła naleŜy uŜyć efektu Filtry | Odwzorowanie | Płynne nałożenie .

http://www.gajdaw.pl/gimp/kurs-tla/print.html

2008-02-27 19:47:05

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: