GIMP_ tworzenie grafiki na potrzeby WWW _(część 6_).pdf
(
630 KB
)
Pobierz
GIMP: tworzenie grafiki na potrzeby WWW (czêœæ 6)
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:
dobby
Inne pliki z tego folderu:
JakToZrobic_w_GIMP.pdf
(1328 KB)
GIMP_Efekt rollover ze wskaźnikiem wybranej opcji.pdf
(684 KB)
GIMP_Baner witryny 33 i 1_3.pdf
(600 KB)
GIMP_Animowane GIF-y.pdf
(602 KB)
GIMP_ tworzenie grafiki na potrzeby WWW _(część 6_).pdf
(630 KB)
Inne foldery tego chomika:
Photoshop
Zgłoś jeśli
naruszono regulamin