Jak nastavit design / layout 2

13. července 2013 v 15:00 | MAKY.OREL |  Návody
… nejjednoduší základy pro všechny začátečníky a radysinevědící

Jelikož můj první návod jak na věc alias odkazy v záhlaví, kterou málokdo ovládá dost dobře, nebyl úspěšný nebo spíš byl nepochopen (což já až tak docela nechápu, podle mě stačí trochu číst a přemýšlet u toho), tak se vracím do základů. Back to basics. Je na čase soustředit se na jednoduché věci, které musí znát všichni a ne každý je skutečně ovládá. Tentokráte bude náš seriál tedy spíše o tom jak si design upravit tak, aby se dal použít. Ale co by to bylo za návod bez ukázky užití… Ukážu vám jak rozřezávat i jak nastavovat a to vše s průvodními kecy a screeny na ukázku.



Klasika končí
Běžné designy se dělají tak, že si nastavíte pozadí záhlaví - tam bude ústřední motiv. Stránka má jako pozadí pouze barvu nebo vzorek a menu taktéž. Co se týče okraje stránky, též mívají jen barvu. Je to klasický způsob jak udělat design a hodně lidí je dodnes "nuceno" ho využívat. Sami jistě víte, o čem mluvím - ukázky snad netřeba.

Ovšem doba pokročila - takovéhle designy už dávno neplatí. Co se změnilo? Pokud chcete pořádný lay-out musíte nejprve při nastavování zapomenout na pozadí záhlaví. Ani samotné záhlaví se vpodstatě nepoužívá a nahrazují ho větší či menší nápisy home či menší plochy, než jaká záhlaví obvykle bývají. Takovéhle vychytávky se tvoří právě díky průhledným obrázkům s odkazy, o kterých byl můj předešlý článek. Takový lay pak vypadá asi takhle:


Skutečně tam není záhlaví - není totiž kam ho dát, neboť abyste umístili na příslušná místa některé odkazy, jako zde třeba zde gallery, youtube apod., potom musíte záhlaví zrušit. Jinak by se vám nikdy nepovedlo dát odkazy do téhle pozice. Ale jak je možné mít cosi jako záhlaví a přitom mít na blogu záhlaví vypnuté? V tom spočívá kouzlo. Tady vidíte, jaké jsou jednotlivé části takového kouzelného lay-outu:


Dole je pozadí vnějších okrajů - nahoře je pozadí stránky (orientuju se podle nových názvů v nastavení). Obojí bylo vytvořené v photoshopu tak, aby bylo zarovnání stránky přesně na střed. Teď mi bude stačit nastavit dané obrázky do příslušných míst a do vol. horního boxu naskládat průhledné obrázky s odkazy. Když lay-out nastavím a scrollnu myší, pozadí vnějších okrajů, které je vlastně pozadím stránky i s textem odjede a odkryje obrázek pod sebou - má to stejný efekt jako záhlaví jen to má lepší využití a dává to víc možností.
Pro tenhle lay-out bylo vytvořeno i zápatí, ačkoli obvykle používám jen png podpis do volitelného dolního boxu, s čímž je méně práce, ale není tak efektivní. Pokud je lay váš je přeci jen vždy dobrý podpis, zvláště děláte-li jako já lay-outy na objednávku. Hodí se tam i uvést zdroje obrázků a jiného náčiní, které jste použili při tvorbě - jen tak ze slušnosti k autorovi a jako informaci pro ostatní, kteří by třeba zrovna nějakou takovou vychytávku potřebovali, tak aby věděli, kde hledat. Ačkoli ani já to nedělám vždy - uvádět zdroje u fotek je často zdlouhavé máte-li vůbec adresu autora a u pngéček mě obvykle příjde trochu ujeté, ale když vím, že na nich měl někdo hodně práce a ne jen klikání na kouzelnou hůlku a delete, tak taky uvedu zdroj.

Jak tedy nastavovat?
Tohle by byl takový nutný úvod od věci, který musí všichni vědět, neboť je to něco, bez čeho se neobejdou. Málokterý design, který vypadá pořádně, se dnes dá nastavit pomocí záhlaví, které bude mít své pozadí - má to spoustu omezení zamířených proti vaší kreativitě, neboť nemůžete motivy nijak příliš roztahovat, hrát si s nimi apod. Záhlaví je prostě daný box, ze kterého nesmí nic přečuhovat a to mnoha lidem chybělo, tak vymysleli výše zmíněný trik.

Takže už víme, že se budeme pohybovat v základní rovině o dvou prvcích nastavení - vnější okraje a obrázek pozadí - tam budou ty hlavní obrázky tvořící lay. V nastavení blogu je to vše zde:



A teď? Jak si vyzkoušet praxi tak, abyste něco pochopili?

Vymyslela jsem následující: ukážu vám několik druhů designů z mé dílny a to vše s popisem, jak jsem došla k jejich nastavení. Poté se podle jednotlivých druhů designů můžete už sami orientovat a najít si, co potřebujete zrovna vy. Jaký druh vám dělá potíže, co konkrétně vám nejde. Snad tu najdete řešení a inspiruje vás to k vlastní práci na lepším vzhledu blogu. K tomu vám může pomoct další seriál již vyšlý v této rubrice - Pěkný design snadno a rychle - tam se pro změnu dozvíte, jak lay vytvořit a jak rozličný může být.


Příklad č. 1 - nejjednoduší je středovka
Máme následující design. Rozřezali jsme ho na následující části již ukázané výše. Tak co teď s ním? Čeho si všimneme jako první je, že stránka je zarovnaná do středu - nepochybně je to skutečně přesný střed. Z toho vyplívá, že v nastavení budeme všechny obrázky a stránku orientovat uprostřed.


--------------------------------------------------------------------------------------------------------------------------------------
Poznámka pod čarou: Jak jsme lay rozřezali? Jednoduše. Následující krátká ukázka vám poradí. Otevřete si uložený lay ve vašem programu (víte že já pracuju v PS ale nevadí - většina programů bude pracovat stejně, mám ovšem výhodu vrstev takže mám možnost dělat chyby a následně je opravit).



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

Začneme od nuly - máme na blogu nastavený jeden lay-out z předloh. Třeba následující...:


Na nás teď je vyčistit si pole. Co to znamená? Současný lay-out do puntíku odstranit, abyste mohli vše nahradit novým. Půjdeme tedy do nastavení a zrušíme všechno - zmizet musí všechna pozadí, barvy, rámečky! Jediné, co ponecháme, abychom mohli pracovat je bílá barva v pozadí stránky a černá barva textu. Zatím nerušíme číselné údaje! Necháme všechny velikosti, jak jsou až pchopitelně na položky jako okraje popř. velikosti písma.


Máme začátek - nuže teď nevíme, jaké velikosti mají jednotlivé součásti nového lay-outu. To nevadí! Vše zjistíme záhy, až části nastavíme. Otevřeme nastavení blogu - položku stránka a dole je pozadí - otevřeme a vložíme největší obrázek. A teď nastavíme kolonky pod ním. Víme, že je uprostřed a asi logicky ho dáme nahoru - tak to navolíme.


Teď je na nás, jestli dáme neopakovat nebo opakovat. Když si váš lay otevře někdo s velkou obrazovkou, bude mít po okrajích bílo, tudíž opakovat se může hodit, ale je to na vás. Chceme, aby písmo rolovalo po pozadí, takže dáme položku uchytit.
Teď druhý menší obrázek - dáme ho do vnějších okrajů (které chápejte spíš jako vnitřní okraje, protože nevím, co by měly mít společného se slovem vnější) a opět víme, že bude uprostřed, dáme ho též nahoru a dáme pro změnu neopakovat a posunovat, aby po scrollnutí myši zmizel. A podíváme se na blog, co nám vzniklo.


Fůůůůůůj! XD To je humáč co? Je na čase vyrazit to spravit vážení. Co jsme to zapomněli zrušit? Přece záhlaví, rámečky v menu a jistě jsme taky zapomněli zrušit zápatí a logo, že? Hurá na to! A jak na to - no já to udělala prozatímně takhle:


Takže myslím, že z nejhoršího jsme venku. Jak se říká hlavní průšvihy stavby odstraněny. Detaily však dělají celek že? Výsledek tedy ještě není finální - to vidíte sami níže:


Co opravit? Zvětšit záhlaví, kterému jsme sebrali pozadí - tenhle lay nemá žádné tlačítko home, takže prostě vyrobíme záhlaví klasické, ale průhledné. Dále zmenšíme velikost stránky, aby sedla do boxu. Je vidět, že momentální velikost 770 pixelů je moc. A nezapomeneme uvádět všechny velikosti v pixelech a ne v procentech! To je moc důležité. Písmo si zmenšíme - to uděláme tak, že místo znaky si u velikosti navolíme pixely a a dáme asi tak 13 pixelů, to bude stačit.
Takhle postupně ubíráme velikost stránky, dokud se nám přesně netrefí tam, kde má být. Potom si můžeme případně upravit menu - třeba ho chceme větší. No a vuala je to!


Zbývá jen otevřít si vol. dolní box a vložit do textového editoru průhledný kopirájt autora. V mém případě je to tenhle png obrázek - ten zarovnáme na střed:

Takže shrneme to - záhlaví má teď velikost 410 pixelů, menu 150 pixelů. Vše nám sedí, takže jsme správně ořezali jednotlivé součásti a když scrollneme myší zůstává nám tam pozadí. Můžeme však udělat ještě jednu vychytávku - najdeme nastavení - stránka - pozadí - a zaškrtneme místo použitého uchycení posunovat a spolu s tím nezapomene nastavit opakovat nebo opakovat vertikálně. A dopadne to takhle - kousek scrollnu myší a ukážu vám to na screenech:


U prvního původního nastavení se okraje stránky drží tam, kde byly - u druhého nám zničehonic vyběhly ze spoda a když scrollnu víc pojedou postupně nahoru a tak pořád dokola do zblbnutí. Zdá se to zbytečné, ale u některých lay-outů je to docela příjemné.


Takže jste to zvládli - už umíte nastavit ten nejjednoduší lay-out jaký je. V další části seriálu vám ukážu pár dalších druhů složitějších lay-outů. Budou dva a budou chtít vaši trpělivost. Výsledek ale bude stát za to! Těšte se!
 

Buď první, kdo ohodnotí tento článek.

Komentáře

1 timetable timetable | 21. července 2013 v 16:34 | Reagovat

skvělé, moc mi mi to pomohlo!!!!!!
Díky*

2 Osimso Osimso | Web | 27. října 2013 v 15:12 | Reagovat

Ahoj, mám problém.
Konečně jsem se naučila udělat design z png obrázků, ale teď mi bohužel nejde jedna věc. viz obrázek:
http://www.imagehosting.cz/images/ahojwrw.png

Prosím, odepiš mi na blog, na kterém je design i nastaven. Je to jen testovací blog, ale pomoz mi,prosím. Dělá se mi to takhle u každého layoutu

3 Osimso Osimso | Web | 28. října 2013 v 13:43 | Reagovat

Už je to v pořádku, děkuji. :)

4 toffs toffs | Web | 5. října 2016 v 16:49 | Reagovat

pujčky o víkendu ;-)

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