Jak nastavit design / layout 4

13. července 2013 v 15:20 | MAKY.OREL |  Návody
"Jdeme dál?" S tímhle článkem se skutečně pohnete z místa, jestli na něm stále stojíte a nevíte, jak s tím dál hnout... ;-)
Opravdu upřímně vás zdravím! A u čeho? Nadpis napovídá dobře - snad si ještě pamatujete na dávný slib, že tahle šikovná série článků pro všechny tápající blogery bude mít pokračování! A je to tady. Poslední asi nejpracnější a určitě asi také nejrozsáhlejší, s nejvíce detaily a hlavně velice žádaný díl letí k vám. A co v něm bude? Jak rozklikat záhlaví, jak přenastavit šablonu a jak na to celé plácnout nový supa čupa layout. A hádejte, kdo nás provede?



ONE DIRECTION XD Ano, je to tak a není to nijaký druh odplaty autorákům nebo vtírání se fanouškům, tento lay byl a bude totiž nejlepším příkladem všech otázek a problémů okolo toho nejtěžšího, co se nastavování layoutů týká. A proto byl zvolen právě on. Protože je jeden z mých asi nejlepších celebritních layů, nebo určitě nepropracovanějších, a navíc si našel mnoho příznivců i mezi odpůrci One Direction. (A kdo ho chce mít na blogu, stahuje TADY!) Takže mu věřím - ale dost keců a hurá na to! (PS.: Screeny jsou vloženy v plné velikosti a zvětšíte je poklepem pravým tlačidlem myši a otevřít v novém okně, nebo si je můžete pro pohodlí i uložit.)

Protože už je to čtvrtá část našeho seriálu, tak tentokrát začneme úplně od píky. Otevřete si váš blog - a dejme mu status "nově založený blog", na kterém je vzhledem jedna ze šablon. A dejme tomu, že tou šablonou je tahle:


Tuhle šablonu budeme nejprve potřebovat úplně odstranit, aby se nám nemontovala do nového layoutu, který chceme nastavit. Pokud tedy s nastavováním začínáte, raději si vždy vyčistěte pole a teprve poté nastavujte jiný layout. Nebudete v tom mít zmatek a žádná část se vám nebude nikam plést. Takže pojďme na to… Začneme se zásadní věcí a tou je nastavení stránky. Vlevo vidíte původní nastavení, vpravo to nové:


Je nutné vyrušit opravdu vše, co je součástí layoutu a to do puntíku. Fajn a uložíme to - teď se mrknem, co nám z toho vypadlo:


Tak zatím je to jen stránka, takže leccos nám zůstává, ale to samosebou zmizí záhy. Vrhneme se hned na několik věcí a těmi jsou záhlaví, logo, zápatí a drobečková navigace. Něco stačí zrušit, něco upravit:



Zpátky na blog a… už to máme hotovo! Starý layout je kompletně pryč a teď je tedy na čase dát se do nastavení nového. A ten vypadá takhle: KLIKNI SEM! To bychom měli a vy už víte, jak by to mělo vypadat. A jak tenhle lay vypadá, když ho rozřežete na jednotlivé kusy? Tak potom vypadá následovně:


Všechny jeho součástky tedy nahrajeme do galerie blogu a hurá na to. Můžeme začít nastavovat - pečlivě si prohlédněte všechny položky a miniatury vložených souborů. Základ jsou vždy jako už v předchozím díle vnější okraje a pozadí v kartě stránky. Složitější layout s více prvky si ale žádá také větší využití v nastavení. Menu se nám přesouvá do volitelného menu boxu (barvu písma a odkazů ovšem stále ovládáme přes nastavení menu - žádné obarvování písma v editoru!!!) a přibývají popisky. Volitelný menu box je nutné si nejprve nastavit kartě Položky menu a zároveň kromě Rubrik vyhodit z menu všechny další položky. Rubriky si zatím necháváme viditelné kvůli tvorbě rozcestníků. Záhlaví jsme nuceni zrušit, jinak bychom nemohli využít všechny odkazy v záhlaví layoutu. A to je další důležitá věc - do volitelného horního boxu si vložíme celkem 10 průhledných obrázků ve formátu png.


------------------------------------------------------------------
Proč robíme take kraviny? Každý png obrázek reprezentuje jeden z odkazů v záhlaví. Jak? Takhle:


Pro každý text, který chci, aby se na něj dalo kliknout, je vytvořen přesný výřez bez obsahu uložený jako png, tedy tak, aby zůstal průhledný (protože format jpg by ho změnil na bílý). Tyto obrázky (i když ve skutečnosti to vlastně není nic víc než mezera, protože jsou průhledné) naskládám pěkně popořadě do vol. horního boxu. První čtyři zarovnám do prava, odentruju, vložím velký obrázek, kde bude odkaz na úvodní stránku blogu (home), pak odentruju znovu a vložím zbytek odkazů zarovnaných do leva. A o zbytku si povíme níže…
Nuže jak z těch obrázků, které ani pořádně nevidíme, teda uděláme ten odkaz? Následný návod vám pomůže. Jak vidíte, i když nic nevidíte, tak po označení se vám jasně ukáže, že obrázky ve vol. hor. boxu jsou. A dobrá rada - pokud využíváte odkazy na různé socka sítě (v našem případě budeme do první řádky obrázků vkládat odkazy na socka sítě One Direction), je fajn mít je někde pohromadě. Třeba jako to já dělám, že si je nejdřív nashromáždím, vložím do programu blok (máte všichni windowsáci v pc) a založím si je do složky s layoutem.
Odtamtud si je vybírám, kopíruju (ctrl+c) a vkládám do obrázků následným způsobem: klik na obrázek (vybrat obrázek) - horní lišta editoru: vložit/upravit odkaz - vložte odkaz a nastavte nejlépe otevřít ve stejném okně (hlavně v případě odkazů na rubriky přímo na vašem blogu). Takhle to proveďte se všemi vloženými obrázky… A uložte… Stejným způsobem dejde do kupy i zápatí ve volitelném dolním boxu.


--------------------------------------------------------------------


Pak nás čeká ještě si ve vol. dolním boxu poskládat zápatí - přesně vyřezané kousky, ze kterých budeme dělat odkazy. Proč ho neskládáme přímo v editoru zápatí? Pro uživatelské pohodlí a lepší manipulaci… A to by zatím bylo. Nové nastavení všech položek máme zde:


Mimochodem jak zjistit rychle a s přehledem, jak velké má být menu a stránka? Jednoduše to odhadnete podle velikosti obrázků. Ve složce v PC si na obrázek poklikněte a dole na liště si informace přečtěte, nebo pravým myši na obrázek a vlastnosti.


A teď se už podíváme, jak naše snažení dopadlo:


Jsou tam chyby, malé ale jsou, a chyby my si opravíme, neboť to musí grafik umět, protože blog si dělá, co chce, a navíc nic není dokonalé, ani když se sebevíc snažíte. Takže v čem je problém? Černá čára po straně naznačuje, že vnější okraje stránky jsou špatně zarovnané a odskočily nám v tomto případě o pixel stranou. Takže je vrátíme a to podle následujícího klíče - v nastavení - stránka - vnější okraje si vždy vybere protější stranu od té, kde je defekt (máme čáru na levo, takže budeme používat pravý okraj) a do kolonky vepíšeme číslo podle odhadu. V našem případě je jasně vidět, že je to pouze jeden pixel, ale pokud by byl layout špatně vycentrovaný již při výrobě, mohlo by to být i víc.
A pak tu máme ty čáry přes záhlaví - kde se tam vzali? Haha, hádejte? Nic? Volitelný horní box má nastavení položek jako barva písma, podtržení odkazů stejné jako stránka. Takže? Takže si přejdeme do nastavení stránky a vypneme podtržení odkazů! Voala!


Bhůům! Jejky máme to hotové! Ano, skoro všecko všecičko už máme po kupě! Sami se můžete podívat, jak je to fešné (ehm, až na to odskočené zápatí, nějak mi to zhaprovalo v photoshopu, dělejte, že to nevidíte…):


A co nám zbývá? Úpravy v menu a to konkrétně vylepšení zarovnání textu a rozklikání odkazů na rubriky. Jak si tedy pohrát s textem? Často se vám při tvoření zajímavějších layoutů stane, že bude velikost menu větší, než jak velký je box pro něj v layoutu vyhrazený. To není žádná tragédie ale běžná praxe. Řešíme to tak, že text ve volitelném menu boxu odentrováváme v řádkách zhruba o šířce popisků. (Pokud jsou popisky přes celý box jako tady, pak jsou řádky menší.) Text je vhodné zarovnávat do bloku, ale už z taktických důvodů psát tak, aby byly všechny řádky zhruba stejně dlouhé. Často kvůli tomu i měním slova v popisu na různá synonyma o odlišné délce. Je to puntičkářství, ale přispívá k nesmírně estetickému výsledku!
Co je pak třešínkou na dortu, jsou odrážky - pokud máte v menu hodně rubrik, nějaké zprávy, novinky, pak vše můžete pro přehlednost a stylový vzhled sdělovat v bodech. Stačí si vytvořit v grafickém programu nějakou úplně jednoduchou odrážku (malý tvar jedné barvy, případně zdobený přechodem) ladící s layoutem nebo si ji někde stáhnout. Vkládejte ji pak vedle textu, ten zarovnávejte do leva a používejte v horní liště textového editoru tlačítko Zvětšit odsazení (čtvrtá ikona zprava v horní řádce) pro odsazení textu od kraje. A výsledek? Sami se podívejte - má to šmrnc.


Pak si rozklikáme rubriky. Stačí přejít na blog a kliknout na odkaz dané rubriky, nahoře v okně prohlížeče poté zkopírovat URL adresu, přejít si do volitelného horního boxu a vložit odkaz do toho správného textu… Viz. malý návod… A nezapomeňte poté přejít v nastavení do položek menu a rubriky opět skrýt, aby na blogu nestrašily (neznám nic trapnějšího než rozklikané menu s popisky a pod tím výčet dvaceti neskrytých rubrik).



A věřte mi, že těžší už to nebude a ani není. Přiznávám, že nastavit celý lay i se všemi bonusy je někdy hrozná práce a skoro větší než jeho výroba. Ale je to dobrá investice, a pokud laye často neměníte, hodně se vám vyplatí. Vždyť jeden pořádný lay na půl roku je někdy lepší než dvacet ale obyčejných. Na rozdíl od dvaceti ale nápaditých - aji jednoduchý lay může být stylový, ale musí se to umět. Ale což. O tom, jak si lay vytvořit, si totiž taky povíme - ale někdy příště. Mám rozdělanou celou sérii návodů jak tvořit lay v bezplatném programu Gimp a opět to bude návod určený i pro úplné grafické a blogové negramoty!

Držte vlnu s MAKY.OREL - má toho hodně co říct a čím poradit. A mezitím, než přidá něco nového, naučte se s ní nastavovat i složité laye ;-)
 

4 lidé ohodnotili tento článek.

Komentáře

1 photo-by-veronica photo-by-veronica | E-mail | Web | 25. září 2013 v 19:04 | Reagovat

jo tak to se hodí musím to zkusit chtěla jsem dess aby menu bylo takhle v záhlaví jen jsem nevěděla jak na to... :)

Nový komentář

Přihlásit se
  Ještě nemáte vlastní web? Můžete si jej zdarma založit na Blog.cz.
 

Aktuální články

Reklama