Z minulých dílů (1., 2., 3.) máme připravenu strukturu stránky a můžete mi začít hrát se vzhledem. Profesionální webový grafik by asi řekl, že vzhledem tvorba stránek začíná. V Photoshopu nebo Inkscape, že připravíme celkový vzhled a na ten pak napasujme kód stránky. Já ale nejsem webdesignér ani neovládám html, php, css, javascript apod. Takže postupuji způsobem který zvládnu.

Úvodem bych chtěl provést drobnou úpravu. V minulých dílech jsem hlavičku (logo) stránky umístil v kódu dovnitř divu „obal“. To teď napravím protože k tomu není důvod a bránilo by mě to v dalších úpravách co jsem chtěl v budoucnu provádět. Takže v html umístíme vše co se týká divu „hlavička“ před začátek divu „obal“. Z toho důvodu pak musíme upravit ve stylech její umístění přidáním do její deklarace

V Gimpu si tedy začnu připravovat pozadí pro hlavičku. Zvolím stejnou velikost obrázku jako velikost hlavičky, takže 900×240. V úvodu prvního dílu jsem psal, že výsledkem mají být stránky o sériových vrazích, takže jako základ volím vlastní fotku uschlého listu: Jako symbolický objekt umístím do hlavičky Lišaje Smrtihlava (můra co má na zádech útvar připomínají lidskou lebku – je např. na přebalu filmu Mlčení jehňátek). Na internetu je volně ke stažení celá řada jeho fotografií. Otevřeme foto v Gimpu a pokusíme se odstranit z fotografie vše co s můrou nesouvisí pomocí funkce přibližný výběr Co zůstalo odstraníme pomocí gumy. Pro další práci si však ponecháme můru i se stínem který vrhá! Ctrl+L si zobrazíme okno vrstev. Pomocí stejné funkce dáme znovu vybrat (tentokrát se nám již vybere vše krom můry a jejího stínu) a v menu – Vybrat – Invertovat, tím je vybrána můra se stínem. Výměr zkopírujeme do schránky (Ctrl+C) a dáme vložit (Ctrl+V). V okně vrstev se nám zobrazí nová vrstva nazvaná „Plovoucí výběr“. Klikneme na ni pravým tlačítkem a zadáme Nová vrstva. Jak vidíte je vše krom můry a jejího stínu průhledné (to jsou ty „kostičky“ ). Vrstvu nazvěte např. „mura“. Opět přes pravé tlačítko tuto vrstvu duplikujeme (K duplikované vrstvě se vrátíme za chvíli – můžete ji zatím nazvat „stín“). Teď již smažeme i stín kolem můry (postupujeme pečlivě – na ty její chlupaté nohy pozor!). Můra je tedy hotova. Překlikneme se do vrstvy stín a dáme z menu – Barvy – Odbarvit. Po dokončení zajedeme do menu – Vrstva – Průhlednost – Barva do alfy. Ponecháme vybranou bílou barvu a potvrdíme. Pokud máte vrstvu „stín“ pod vrstvou „mura“ měl by výsledek vypadat takto: Sloučíme vrstvy a výsledek zkopírujeme a vložíme do souboru s listím. Opět jako novou vrstvu. Podobný postup provedu s dalšími prvky které chci v hlavičce mít. V tomto případě, ještě zakrvácenou ruku, krvavou skvrnu a kresbu lebky. Všechny tyto prvky postupně upravuji pomocí Škálování, Rotace, Překlápění a Perspektivy do takové pozice a tvaru, který požaduji. Na závěr ještě přidám průhlednou vrstvu kde vytvořím černý rámeček a pomocí Filtry – Rozostření – Gaussovské rozostření ho upravím. Výsledný soubor uložím jako hlavicka_pozadi.jpg. Zdrojový soubor ve formátu xcf si můžete stahnout: http://j0hn.hys.cz/wp-content/uploads/tutorialweb/tutorial-web-4.xcf.

Připravíme si v Gimpu nový prázdný obrázek, v tomto případě o velikosti 300×100 pixelů. Další postup bude obdobný jako u pozadí. Pokud si nechceme tvořit písmo sami dá se na internetu sehnat celá řada fontů ve formě obrázků. Doporučuji obrázky ve formátu png nebo gif, ideálně již z průhledným pozadím. Pokud není – nevadí výběr jednotlivých písmen z obrázku provedeme opět za pomoci funkce „Přibližný výběr“ s přiměřeně nastaveným „Práh“ Písmena co potřebujeme vložíme do připraveného obrázku, opět pomocí Ctrl+V a ve vrstvách ji zadáme jakou novou vrstvu. V menu Vrstva – Změnit velikost vrstvy změníme její velikost, aby nám vyhovovala. To provedeme se všemi písmeny. Smažeme původní vrstvu a tím získáme průhlednost. Pokud máme všechna písmena seřazena jako potřebujeme sloučíme je v okně Vrstvy (pravým tlačítkem a Sloučit dolů). Budeme chtít k nápisu přidat i stín, proto si ponecháme z té strany kde ho chceme trochu místa. Protože chci nápis v bílé barvě dám z menu Barvy – Invertovat. V okně Vrstvy dám přes pravé tlačítko myši duplikovat vrstvu. Tuto kopii vrstvy přesunu v okně Vrstvy pod tu původní. Opět u ní invertuji barvy a pomocí tlačítka Přesun ji posunu požadovaným směrem. Ještě můžu přes menu Barvy – Jas a kontrast, trochu zvýšit jas a přes menu Vrstva – Průhlednost – Barva do alfy, udělat stín trochu průhledný. Výsledný soubor uložím jako napis.png (png abych udržel požadovanou průhlednost). Zdrojový soubor ve formátu xcf si můžete stahnout: http://j0hn.hys.cz/wp-content/uploads/tutorialweb/napis.xcf.