Aktuální stav rozložení by měl vypadat přibližně takto:
Zatím bylo vloženo logo a horní menu. Pokračuje se s obrázkem větší velikosti, který by měl být viditelný přímo pod navigací.
Princip vytváření nových vrstev byl popsán v předchozím návodu. Proto bych vám zde chtěl ukázat ještě něco jiného. Přímo pod horním menu by měl být zobrazen větší obrázek. Výsledek bude vypadat následovně:
Když vložíte obrázek, měl by mít správné rozměry. Pokud je třeba, upravte ho předtím. Poté zvolte Soubor>Otevřít a vyberte obrázek. Zvolený obrázek se poté zobrazí v novém okně. Stiskněte Ctrl+C pro zkopírování obrázku do schránky. Takto můžete obrázek ihned vložit jako vrstvu s přesnými rozměry pomocí Úpravy>Vložit jako>Nová vrstva. Nová vrstva automaticky přijme rozměry obrázku a následně ji můžete snadno umístit na požadované místo. Tímto způsobem můžete přenést všechny obrázky, které chcete vložit, do rozložení a tam je umístit.
Následně vložte texty na místa, kde mají být skutečně vidět později. V návrhové fázi se obvykle používá tzv. placeholder text. Předtím, než se pustíte do psaní náhodného textu, doporučuji navštívit stránku http://www.blindtextgenerator.de/.
Na této stránce si můžete nechat automaticky generovat placeholder texty – mimochodem různých druhů. Tyto texty poté můžete snadno zkopírovat a vložit do návrhu. V souvislosti s tím vám také mohu doporučit stránku http://dummyimage.com/. Na této stránce si můžete generovat dummy obrázky libovolné velikosti. Tyto dummy obrázky můžete použít například jako zástupce pro ještě nevytvořené originální grafiky ve vašich rozloženích.
Problém s průhlednými vrstvami
Pokud vložíte texty, budou tyto skládat se z více prvků, jako jsou nadpisy, odstavce atd. Proto byste měli spojit související texty vždy do vlastních vrstev. Takto můžete tyto texty vždy posouvat najednou. Zvolte Vrstvy>Nová vrstva. Nastavte vrstvě požadované rozměry a případně barvu pozadí. Většinou však budete potřebovat průhledné pozadí. Problém nastane v okamžiku, kdy byste tato průhledná pozadí chtěli těžko posouvat. Často tak omylem chytíte podřazenou vrstvu. Tento problém se však dá snadno vyřešit. Rozhodující jsou nastavení v okně Nástroje. Zde aktivujte Nástroj Přesunout. V dolní části okna následně aktivujte možnost Přesunout aktivní vrstvu.
Takto můžete posunout i průhledné vrstvy na jakékoliv pozici.
Vyjmutí prvků
Pokud jste spokojeni s rozložením, je čas přejít k praktické implementaci jako webové stránky. V tomto okamžiku přichází na řadu slicing, tedy vyjmutí. Tato metoda spočívá ve rozdělení rozložení na jednotlivé části, které budou později sestaveny pomocí HTML a CSS. Musíte vyjmout všechny prvky, které by měly být následně zobrazeny jednotlivě. Výjimkou jsou samozřejmě všechny obrázkové prvky, které jsou tak či tak dostupné individuálně. Nejprve vám ukážu, jak můžete vyjmout prvky. Nakreslete si kolem daného prvku odměrné čáry. Jedná se o hrany, které následně tvoří řeznou hranu. Dbáte tedy na správné umístění těchto hran.
Následně označte požadovanou oblast a stiskněte kombinaci kláves Ctrl+Shift+C. (Stejně platí pro GIMP a Photoshop). Vytvořte následně nový soubor. V Photoshopu bude mít tento soubor automaticky správnou velikost. U GIMP to však není tak jednoduché. Zde vytvoříte nový soubor s dostatečnými rozměry. Pomocí Ctrl+V vložíte obsah ze schránky.
Nyní je na řadě nástroj pro vyjmutí. Určete tímto nástrojem oblast, kterou chcete vyjmout, a stiskněte klávesu Enter-. Obrázek bude následně oříznut na požadovanou oblast. Přes Soubor>Uložit jako uložíte obrázek.
Pro mnoho webů je důležitým stylistickým prvkem přechod barev. I na návrhovém rozložení zde je přítomen takový přechod. Chcete-li takový přechod vyjmout, zvolte si úzký pruh příslušného přechodu. Stačí zvolit oblast o šířce jednoho pixelu. Výška musí být však skutečná výška prvku. Pomocí CSS můžete později zajistit, že se tento obrázek horizontálně opakuje, dokud není celý prvek vyplněn. Samozřejmě byste mohli použít i širší výřez. To by však snížilo rychlost stránky. Pokud chcete proto použít přechody barev, zvolte šířku pixelu.
Pomocí Ctrl+Shift+C zkopírujte jednopixelový obrázek do schránky a vložte ho jako nový obrázek. Nový obrázek poté uložíte, jakmile jej přenesete na relevantní výřez.
Tím by měl být zřejmý základní princip slicingu. Tedy vyjmout všechny věci z rozložení, které budou patřit do webové stránky. Pokud máte již k dispozici jednotlivé prvky stránky, které nemusí být vyjmuty, vložte je přímo, bez vyjmutí.
Výsledek by měl nyní vypadat následovně: Všechny grafiky, které chcete později použít na stránce, máte k dispozici. Mezi ně patří například logo, pozadí, přechody barev atd. Když už jsme u přechodů barev: Samozřejmě mi je dobře známo, že přechody barev lze snadno vytvářet pomocí CSS3. Problém však spočívá v tom, že zatím nejsou podporovány všemi prohlížeči. A protože je slicing pěkně vidět na přechodu barev, rozhodl jsem se v tomto návodu použít grafiku k implementaci přechodů barev.
