Aktuálny stav rozloženia by mal byť približne takýto:
Doteraz boli vložené logo a horné menu. Pokračujeme s väčším obrázkom, ktorý by mal byť viditeľný priamo pod navigáciou.
Princíp vytvárania nových vrstiev bol už popísaný v predchádzajúcom návode. Preto by som vám teraz radšej ukázal niečo iné. Priamo pod horným menu by sa mal zobraziť väčší obrázok. Výsledok bude vyzerať nasledovne:
Obrázok by mal byť - ak ho vložíte - v správnych rozmeroch. Ak má byť upravený, spravte to predtým. Následne otvorte Súbor>Otvoriť a vyberte obrázok. Zvolený obrázok sa potom zobrazí v novom okne. Stlačte klávesovú skratku Ctrl+C, aby sa obrázok skopíroval do schránky. Takto môžete ľahko vložiť obrázok ako vrstvu, ktorá bude mať správne rozmery, pomocou Upraviť>Vložiť ako>Nová vrstva. Nová vrstva tak bude mať automaticky rozmery obrázka a môžete ju ľahko presunúť na vhodné miesto. Týmto spôsobom môžete zaviesť všetky obrázky, ktoré chcete do rozloženia vložiť a umiestniť ich tam.
Následne vložte texty na miesta, kde sa majú neskôr skutočne zobraziť. Počas návrhu sa používa tzv. generovaný text.
Skôr ako sa posadíte a budete písať divoko "test, test, test", odporúčam vám stránku http://www.blindtextgenerator.de/.
Tam si môžete nechať automaticky generovať rôzne druhy generovaných textov. Texty potom môžete jednoducho vložiť do návrhu pomocou funkcie Kopírovať & Vložiť. V tomto kontexte vám odporúčam aj stránku http://dummyimage.com/. Na tejto stránke môžete generovať falošné obrázky ľubovoľnej veľkosti. Tieto falošné obrázky môžete napríklad použiť ako náhradu za ešte nevytvorené originálne grafiky vo vašich rozloženiach.
Problém s priehľadnými vrstvami
Ak vložíte texty, budú sa skladať z viacerých prvkov, ako sú nadpisy, odseky textu a pod. Preto by ste mali zoskupiť príslušné texty do vlastných vrstiev. Takto ich môžete vždy presúvať ako celok. Prejdite na Vrstvy>Nová vrstva. Následne priradte vrstve požadované rozmery a možno aj pozadie. Obyčajne však budete potrebovať priehľadné pozadie. Problémom je však to, že priehľadné vrstvy je ťažké presúvať. Často sa totiž chytíte podradenej vrstvy. Tento problém sa však dá jednoducho obísť. Dôležité sú nastavenia v okne Panel nástrojov. Tu aktivujte Nástroj Presunúť. V dolnej časti okna musíte následne aktivovať možnosť Presunúť aktívnu vrstvu.
Takto môžete presúvať aj priehľadné vrstvy na akékoľvek miesto.
Vyrezávanie prvkov
Ak ste spokojní s rozložením, je čas pre praktickú implementáciu ako webová stránka HTML. V tomto bode prichádza na rad Vyrezávanie, teda rozdelenie layoutu do jednotlivých častí, ktoré neskôr budú znova spojené pomocou HTML a CSS. Musíte vyrezať všetky prvky, ktoré neskôr budú zobrazené samostatne. Vylúčené sú z toho samozrejme všetky obrázkové prvky, ktoré sú už tak či onak samostatne. Chcel by som vám najskôr ukázať, ako môžete vyrezávať prvky. Vytiahnite si Pomocné čiary okolo príslušného prvku. Tieto čiary v konečnom dôsledku určujú rezacie hrany. Dávajte teda pozor, aby ste ich správne umiestnili.
Teraz označte požadovanú oblasť a stlačte klávesovú skratku Ctrl+Shift+C. (Platí to mimochodom pre GIMP aj Photoshop). Následne vytvorte nový súbor. V aplikácii Photoshop má potom tento súbor automaticky správne rozmery. V GIMP to však nie je také jednoduché. Tu musíte jednoducho vytvoriť súbor s dostatočnými rozmermi. Pomocou Ctrl+V vložíte obsah z klipbordu.
Teraz prichádza na rad Nástroj na vyrezanie. Nad oblasťou, ktorú chcete vyrezať, zvoľte a stlačte následne kláves Enter. Obrázok sa potom zamaskuje do požadovanej oblasti. Aby ste uložili obrázok, použite možnosť Súbor>Uložiť ako.
Dôležitým štýlovým prvkom pre mnohé webové stránky je Odtieň, ako aj na ukázanom príklade rozloženia. Ak chcete vyrezať odtieň, vyberte úzku oblasť príslušného odtieňa. Skutočne stačí, keď nastavíte oblasť s šírkou jedného pixelu. Výška však musí zodpovedať skutočnej výške prvku. Pomocou CSS neskôr zabezpečíte, že sa tento obrázok horizontálne opakuje, kým sa nezaplní celý prvok. Samozrejme môžete použiť aj širšiu oblasť snímku. Avšak to by spomalilo výkon stránky. Pri vyrezávaní odtieňov teda zvoľte šírku jedného pixelu.
Pomocou Ctrl+Shift+C skopírujete snímok s jedným pixelom do schránky a znova ho vložíte ako nový obrázok. Nový obrázok uložíte potom, keď sa dostane na relevantné miesto.
S týmto by mal byť zrejmý základný princíp vyrezávania. Teda vyrežete všetky veci z layoutu, ktoré neskôr patria na webovú stránku. Ak máte už nejaké prvky na stránke, ktoré nemusíte znovu vyrezať, vezmite ich priamo, teda bez toho, aby ste sa vyrezávali.
