Jak začít tvořit layout

12. března 2013 v 12:45 | © Nonsiie |  rady, tipy, návody

Přeji hezký den,
včera večer jsem dávala dohromady tento návod, který myslím využije více lidí. Stejně mi ale někdy připadá, jako bych vás "vítala ve světě Nonsiie" - myslím to tak, že všichni layouty takhle nenastavují, ale je to každopádně správný způsob. A teď už se do toho pusťme :D


Návod je rozdělen do 4 částí (A,B,C,D).

A: ŠABLONA


Na začátek bych Vám ukázala šablonu, kterou si vždy otevřu a teprve na ní začínám tvořit layout. Takže tohle je takový "základ". Zelený obdélník je box (můžete mít i jiný tvar, ale na začátek doporučuji tento tvar, kolečko je těžší na rozřezávání) a bílý obdélník je stránka.

Tuhle šablonku si stáhněte zde:
01 pro photoshop: KLIK(formát psd, tudíž s vrstavami)
02 pro photofiltre: KLIK(formát png, obyčejný obrázek, jen si ho uložte)

NOVĚ!
03 pro photoshop S MŘÍŽKAMI: KLIK (formát psd, vrstvy, mřížky - více o nich zde)

Na tom můžete začít tvořit vaše layouty, ale není od věci si přečíst i zbytek článku, kde vám poradím, jak nepřijít o nervy a mít layout správně rozvržený a třeba z toho více pochopíte rozřezávání layoutu.

B: BAREVNÉ ZÓNY

Vůbec se toho obrázku nelekejte. Teď vám vysvětlím, co znamenají ty barevné zóny. (vytvořila jsem "barevné zóny" na předešlé šabloně)

červená:
1) pouze zde můžete mít popisky v záhlaví (např. homepage, site, ...)
2) nesmíte je mít v hnědé zóně! > tam by nešly nastavit

hnědá:
1) zde a na červené zóně můžete mít záhlaví (obrázky, efekty, welcome zprávu a všechno možné, co vás napadne)
2) na hnědé zóně NEMŮŽOU BÝT POPISKY (můžou jen částečně přesahovat)

žlutá:
1) zde nesmí být nic ze záhlaví (myslím obrázky a zůzné efekty), pouze pozadí
2) může tu být pouze nějaká část boxu - např. dekorace, část efektu

zelená:
1) nesmíte mít nějaký vzor na boxu - např. proužky
2) nejlepší je mít jen jednu barvu boxu (v tomhle případě je to zelená)

bílá:
1) to je stránka, tu necháme být jak je - třeba jen změňte barvu

světle modrá:
1) sem můžete napsat nápis - např. news&updates
2) cokoli tu bude, může sahat pouze do červené zóny

fiaová:
1) zde je zápatí a to může být pouze na fialové zóně, nesmí zasahovat do jiné

C: ROZVRŽENÍ LAYOUTU

A nakonec jsem si pro vás nechala nejvícehrůzunahánějící obrázek, ale zato hraje všemi barvami :D

Myslela jsem si, že byste tak mohli lépe pochopit, jak to funguje v nastavování. Ty části co mám zarámované pak takto rozřežu a pak nastavím. Jednotlivé části máte popsané. (některé pojmenování částí můžete znát z těchto návodů - Jak rozřezat layout, Jak nastavit boxy v menu a pak z free layoutů: pokud jste si ode mě někdy stáhli)

U toho "Volitelný horní box/záhlaví" je to takhle napsané proto, že záleží, zda váš layout obsahuje popisky:
a) pokud obsahuje popisky, tak je to volitelný horní box - tu oranžově zarámovanou oblast ještě rozdělíte na tolik obdélníků, kolik tam máte popisků, při nastavování všechny obdélníky dáte do "Volitelný horní box"

b) žádné popisky nebo jedna popiska "homepage" - pak je to záhlaví - jednoduché nastavení, stačí oříznou oranžově zarámovanou oblast a dát jí v "nastavení" do "Záhlaví"

D: PŘÍKLADY

Zde už jen několik příkladů, jak mít layout rozložený (na některých náhledech to mám totiž posunuté, ale na těhle ne):



Můžete si oddechnout, už jste na konci. Doufám, že návod někomu aspoň trochu pomůže. Já už nevím, jak bych to více vysvětlila, jedině ještě zkusit to video... :) Co se týče návodů ohledně layoutů, mohl by se tu objevit další návod(y) :)
 

14 lidí ohodnotilo tento článek.

Komentáře

1 Tien Tien | Web | 12. března 2013 v 12:56 | Reagovat

wow, hned jsem to lépe pochopila:) Jinak poslala jsem ti e-mail:) :D
P.S. máš boží designy

2 Malenka... Malenka... | Web | 12. března 2013 v 15:25 | Reagovat

super nápad tohle udelat,urcite zkusím ;) moc mi to pomůže

3 Bubli-Fook Bubli-Fook | Web | 12. března 2013 v 15:45 | Reagovat

ha! :D děkuji že jsi vyslechla mé prosby! :DDD moc děkuju :3

4 H. H. | E-mail | Web | 12. března 2013 v 16:09 | Reagovat

myslím si, že jsi návod napsala úplně super !! :) pochopila jsem to i já !! :D záleží potom už na zručnosti toho, kdo to bude zkoušet :D :D u mě to je tak, že návod pochopím, ale u toho dalšího pohořím, protože se prostě někde zaseknu a mám hotovo !! :D ale určitě to někdy zkusím ;) vypadá to vážně super napsané a myslím si, že by to nemělo být tak složité :) dobře vysvětluješ :P

5 H. H. | E-mail | Web | 12. března 2013 v 16:11 | Reagovat

a k tvému komentu: nemáš za co, pochvaly si zasloužíš :) vážně se mi tvoje grafika líbí a ráda sem chodím, třeba jenom proto, abych se podívala na něco nového :) jinak email jsem nečetla, promiň, ale hnedka ti odpovím ;)

6 Cece Cece | 12. března 2013 v 16:17 | Reagovat

Týýý jo, tak takhle se to dělá, vždycky jsem to dělala zvlášť já trdlo.. takže už to budu vědět, díky mocccccccccccccccccccccccccccccc O_O

7 Caitlin. Caitlin. | Web | 12. března 2013 v 19:22 | Reagovat

tyjo ty vždycky používáš takhle šablonku jo?:D tyjo:D já vždycky dělám všechno nově s jinýma rozměrama a tak:D haha:)):D

a děkuju mooc♥

8 my-perfect-lifetime my-perfect-lifetime | Web | 12. března 2013 v 21:05 | Reagovat

woow děkuju moc!

9 Peťula** AFFS ;) Peťula** AFFS ;) | Web | 12. března 2013 v 23:34 | Reagovat

pěkně zpracované :)
povedlo se ti to

10 Katule213 Katule213 | Web | 13. března 2013 v 14:49 | Reagovat

Super návod, ale sice jsem dess takto udělala, ale neumim to pak správně nastavit a rozřetávat se mi to nechce :D

11 Anett Anett | Web | 13. března 2013 v 14:56 | Reagovat

Jo takhlee:D Já to vždycky zkoušela jinak.:)

12 Hay-Lin-VěrušQka Hay-Lin-VěrušQka | Web | 24. března 2013 v 15:19 | Reagovat

Na mě složitý :D

13 Klaudia Klaudia | E-mail | 31. března 2013 v 16:26 | Reagovat

Ahoj. Prosím nenapíšeš mi na mail ako robíš tie bodky okolo tvojho designu? Ja to totiž neviem nájsť. Mám PS3. Ďakujem :)

14 Ns Ns | 23. dubna 2013 v 20:58 | Reagovat

ahoj, chtěla jsem si stáhnout tu šablonu layoutu, ale chce to po mě telefoní číslo, ale já ho nechci uvést, nemohla bys mi to třeba poslat na mail?

15 Nonsiie Nonsiie | E-mail | Web | 23. dubna 2013 v 21:24 | Reagovat

[14]: Opravdu to po tobě chce tel. číslo? O_O Ale šablonku ti klidně pošlu, napiš jestli s mřížkama nebo bez a svůj email :-)  ;-)

16 Ns Ns | 24. dubna 2013 v 20:26 | Reagovat

Už je to v pohodě, já klikla na blbé ,,Dowload" ale už to mám stáhlé, ale i tak díky :D

17 Lady M. Lady M. | Web | 22. května 2013 v 17:04 | Reagovat

Další super návod! :D

18 Lucka Lucka | Web | 29. května 2013 v 19:58 | Reagovat

moc jsi mi pomohla dík a to video udělej :-)  :-)

19 Kath♥(Horalka) Kath♥(Horalka) | E-mail | Web | 2. června 2013 v 15:06 | Reagovat

Návod je úžasný :) Jdu zkusit něco vytvořit :)
Btw: To video by nebylo špatné :)

20 ♥Zendaya♥ ♥Zendaya♥ | Web | 6. června 2013 v 14:17 | Reagovat

ahoj,návod jsem skusila a je moc dobrý.....hed jsem to pochopila :D a chci se zeptat jestli bys mi mohla zkopčit nebo poslat mailem styly do photoshopu cs4.......ja ho mam a nemuzu najit styly........děkuji moc
můj email:janakostalov@seznam.cz

21 ♥Zendaya♥ ♥Zendaya♥ | Web | 6. června 2013 v 14:19 | Reagovat

jo a byla bych moc ráda kdyby jsi mi navštívila blog......dikdo mi nam nechodí:(

22 ♥Zendaya♥ ♥Zendaya♥ | Web | 6. června 2013 v 16:01 | Reagovat

jo a uděláš mě pls dess?????????

23 Leiny Leiny | 10. července 2013 v 10:13 | Reagovat

Máš nádherné layouty!! Popravdě nejlepší co jsem kdy viděla.

24 cats-planet-a cats-planet-a | Web | 10. října 2013 v 15:41 | Reagovat

robíš tak krásne super vymakané a neviem ešte aké všelijaké, máš naozaj talent, aj na zladenie farieb, čo sa kde hodí atď určite s týmto neskonči skoro bola by to škoda

25 Nienna Nienna | Web | 25. října 2013 v 21:33 | Reagovat

Tak to zkusím.. Konečně návod, který vypadá nadějně :) Jinak moc hezké designy..

26 graphics--howrse graphics--howrse | 27. října 2013 v 9:29 | Reagovat

Ahoj.Kde si mužu stáhnout PhotoShop

27 KoníčekDia-graphics--howrse.blog.cz KoníčekDia-graphics--howrse.blog.cz | 28. října 2013 v 7:45 | Reagovat

A jaký používáš??????CS5,CS6...

28 Sweet Lexis Sweet Lexis | E-mail | Web | 8. listopadu 2013 v 18:32 | Reagovat

Konečně srozumitelné návody! :) Opravdu, s tvou pomocí se mi poprvé povedlo vytvořit něco přijatelného, jen jsem si ukousla příliš velké sousto a udělala pozadí stránky vzorované, tak mi části do sebe moc nezapadaly a nakonec se mi lay ani nepodařilo nastavit :D Jo to jsem celá já. :D Hmmm tak to zkusím ještě jednou.
A ještě jednou díky, že děláš takové návody, nevím, co bych bez tebe dělala. :)

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