Gimp: tworzenie szablonów stron WWW cz. 6

Obróbka XCF-a, edycja wyglądu grafiki chmur

Szablon

Gotowy szablon jest przedstawiony na rysunku. Szablon dzieli stronę na trzy poziome pasy: nagłówek, treść oraz stopkę. Nagłówek oraz stopka mają rozsuwane tła, dzięki czemu szablon wypełnia całe okno przeglądarki (od rozdzielczości 800×600 wzwyż).

W szablonie wykorzystane zostały fotografie chmur widoczne na rysunkach.

Szablon w formacie PNG jest przedstawiony na rys.

Rysujemy XCF-a

Początek

Tworzymy nowy biały obraz o wymiarach 800×600 pikseli. Korzystając z opcji Obraz → Prowadnice → Nowa prowadnica dodajemy do obrazu prowadnice:

• poziome: 20, 120, 130, 160, 180, 200, 380, 400, 470
• pionowe: 20, 300, 780

Nagłówek

Zaznaczamy prostokąt wyznaczony przez prowadnice w górnej części obrazu. Opcją Zaznaczenie . Zaokrąglenie zaokrąglamy narożniki prostokąta o 30. Prostokąt o obłych narożnikach kopiujemy z białego tła i wklejamy na nową warstwę. Wklejony obły prostokąt wypełniamy ciemnym kolorem niebieskim.

Zdjęcie chmur

Otwieramy pierwsze zdjęcie chmur. Narzędziem Kadrowanie lub Zmiana wymiarów obrazu wycinamy z niego poziomy pas. Pas ten skalujemy (opcja Obraz . Skaluj obraz) do wysokości 100 pikseli. Tak wykonane poziome zdjęcie o wysokości 100 pikseli, przedstawiające biały obłok, wklejamy do szablonu na nową warstwę, a następnie przycinamy do rozmiaru poziomego pasa. Przycięcie wykonujemy następująco:

• przechodzimy na warstwę z obłym prostokątem,
• zaznaczamy nieprzezroczyste piksele warstwy (Kanał alfa na zaznaczenie),
• odwracamy zaznaczenie,
• przechodzimy na warstwę ze zdjęciem chmur,
• wykonujemy operację Edycja → Wyczyść.

Dodajemy maskę warstwie przedstawiającej zdjęcie chmur. Maskę wypełniamy liniowym gradientem czarno-białym.

Po zastosowaniu maski zdjęcie chmur będzie znikało.

Włączamy widoczności obłego prostokąta oraz zdjęcia chmur.

Rozjaśnianie chmur

Wykonujemy duplikat warstwy z obłym prostokątem. Nową warstwę wypełniamy jasnoniebieskim gradientem liniowym.

Zmieniamy tryb i krycie warstwy z jasnoniebieskim obłym prostokątem. Ustalamy tryb Miękkie światło oraz Krycie 65.

1. Obróbka XCF-a, edycja wyglądu grafiki chmur
2. Obróbka XCF-a, przygotowanie tekstu i krojenie pliku
3. Przygotowanie kodu XHTML/CSS
4. Przygotowanie kodu XHTML/CSS c.d.