Gimp: tworzenie szablonów stron WWW cz. 6

Obróbka XCF-a, przygotowanie tekstu i krojenie pliku

Teksty

Dodajemy dwa napisy Lorem ipsum. Jeden z nich wykonujemy kolorem białym, natomiast drugi czarnym. Obrazy przesuwamy względem siebie o jeden lub dwa piksele.

Pasek zakładek

Zaznaczamy w obrazie długi, niewysoki prostokąt wyznaczony przez prowadnice. Prostokąt ten zaokrąglamy (Zaznaczenie → Zaokrąglenie) o 70, a następnie kopiujemy z białego tła i wklejamy na nową warstwę. Wklejony prostokąt wypełniamy jasnym niebieskim gradientem liniowym, po czym zmniejszamy krycie jego warstwy do 30.

Stopka

Wykonujemy kopię warstwy z długim jasnym prostokątem. Duplikat przesuwamy na dół obrazu.

Lewy panel

Wykonujemy jeszcze jeden obły prostokąt. Tym razem zaokrąglenie wynosi 10. Prostokąt ten wypełniamy jednolitym jasnoniebieskim kolorem.

Opcje menu

Na zakończenie wykonujemy tło opcji menu. Zaznaczamy prostokąt i wypełniamy go liniowym gradientem niebieskim. Zmniejszamy krycie warstwy do 50, po czym wykonujemy jej duplikat. Opcja w stanie nieaktywnym będzie miała tło, w którym widoczny jest tylko jeden prostokąt. Tło opcji wskazanej wskaźnikiem myszki będzie wykonane po włączeniu widoczności obu prostokątów.

Efekt końcowy

Powinniśmy otrzymać obraz taki, jak na rysunku.

Krojenie

Z gotowego obrazu XCF wycinamy cztery mniejsze obrazy PNG. Wykorzystujemy opcje Edycja → Kopiuj widoczne oraz Edycja → Wklej jako nowy.

Powinniśmy otrzymać obrazy przedstawione na rysunku.

• header-left.png (280×180)
• header-right.png (480×180)
• footer-left.png (280×180)
• footer-right.png (480×180)

Następnie wycinamy obrazy:
• option.png (240×30)
• option-on.png (240×30)
przeznaczone do wykonania menu poziomego.

Obrazy te są przedstawione obok.

Przedłużanie

Obrazy header-rigth.png oraz footer-right.png należy wydłużyć. Ich szerokość powinna wynosić 1200 pikseli.

Do przedłużenia obrazu wykorzystujemy opcje:

• Obraz → Wymiary płótna
• Edycja → Kopiuj
• Edycja → Wklej
• Przesuwanie warstwy

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.