Návod na jednoduchý design

17. března 2017 v 10:51 | Gaz |  Návody

Ahojky, tak je to tady! Vyvtořily jsme krátký tutoriál na jednoduchý design s oddělovaným menu a horním menu. Protože v naší anketě Co byste na našem blogu uvítali? návody na tvorbu grafiky jsou nejžádanější, a tak jsme tedy jeden takový udělaly. Designy tvoříme zásadně v Gimpu, ale podle téhož návodu můžete pracovat v Photoshopu nebo v jakémkoli grafickém editoru, který umožňuje pracvat s vrstvami. Návod předpokládá, že s něčím takovým umíte, tedy neobsahuje instrukce typu "kliknete sem a sem a vyberete tohle a tohle". Pokud však bude zájem, můžeme další design udělat podrobnější, ovšem tedy pro Gimp, Photoshop nemáme.

Postup se týká také pouze "skádání obrázků", nastavit design je zase o něčem jiném, o tom je v plánu další článek (tedy o tom, jak rozstříhat nastavit konkrétně design tohoto typu).

Je to jeden z mnoha možných přístupů a stylů designu, ne každému by se třeba rozvržením líbil, ale pro jednoduchost je takový, jaký je. Jedná se však o design, kde veškeré menu je spravováno v položce nastavení "Volitelný box menu", blogem předudělané položky použít lze, ale nebudou ladit nadpisy a je možné, že i text bude mimo požadovanou oblast. Design, který bude plně kompatibilní s nenahradiltenými položkami typu "Zpráva autorovi" uděláme někdy jindy.

Také je možné, že se někomu bude komentář zdát příliš jako "pro blbý", ale zde víe je lepší než méně, takže pokud shledáte některé postupy za nadbytečné, pracujte, jak jste zvyklí. Ale někomu, kdo se třebas bude pokoušet o design prvně, můžou naše tipy přijít vhod.


Základem tohoto designu je jeden jednoduchý obrázek - ideálně objekt spíš než třeba krajina. Ideálně nějaký obrázek nebo fotka s atributem "free", "stock" a podobně, nebo vlastní produkce. Obrázek se hodí sehnat v png verzi bez pozadí, nebo ho ostříhnout. My jsme si zde vybrali sýkorku.

Otevřeme si tedy nový obrázek - dostatečně velký, pro vlastní potřeby nejlépe v v rozměrech rozlišení vaší obrazovky. Vložíme vrstvu s obrázkem - motivem. Naším dobrým zvykem, zvlášť chceme-li stránku na střed, je na samostatnou vrstvu vybarvit obdélník, který je přesně uprostřed obrázku a vymezuje rozsah stránky s menu. Vyhnete se tak obtížím při nastavování (viz návod na nastavení designu).
Barva tohoto obdélníku je libovolná, ve vysledném designu nebude vidět vůbec. Barvu pozadí volíme nejlépe nějakou spíše bledou, syté barvy necháme na stránku, menu, písmo a případné ozdoby.


Nyní vytvoříme další vrstvu. Na ní vybarvíme stránku a menu. Barvy jsme volily takové, aby ladily k sýkorce, ideální je použít kapátko. Dáváme pozor, aby stránka ani menu nepřesahovaly kontrolní obdélník. Mezera mezi stránkou a menu může a nemusí být, rozdíl se projeví především při nastavování.

Další volbou je horní lišta. Chceme design s horním menu, takze lišta je jednou z možností. Alternativou mohou být samotné nápisy bez pozadí, nebo třeba sloupeček/box položek. Lišta také nemusí být jen nahoře, ale třeba srovnaná se začátkem stránky, tedy až pod záhlavím.

Také chceme oddělované menu, takže v něm zatím vyřízneme mezeru.


Nyní už můžeme odstranit vrstvu s kontrolním obdélníkem.

Jednotlivé boxy menu by měly mít nějaký zřetelný začátek a konec. Více práce si dáme spíš se začátekem - nadpisem. My jsme zde zvolily stejný vzled, jako má horní lišta, ale těch možností je nepřeberně, viz třeba naše galerie. Konec může (a podle nás by i měl) být nenápadný, rozhodně méně výrazný, než začátek. Na výřezu je vidět, že jsme zvolily dva různě široké proužky, může to mít třeba přerušovaná čára, přechod do jiné barvy nebo nějaký dekorativní oddělovač vhodně "přilepený" ke konci boxu.

Nějaké ukončení může mít i celé menu a stránka. My zápatí u většiny designů neděláme, jednak kvůli výsledným nedokonalostem při nastavování, druhak většina lidí ani volby zápatí nijak zvlášť nevyužívá. Ale samozřejmě designu svědčí každý neodfláknutý detail. Zde jsme stránku i menu ukončily stejně, jako boxy menu.

Dalším takovým detailem jsou třeba oddělovače položek v menu. Vhodné jsou zejména tak, kde je těch položek hodně a jsou textové, jednořádkové. My jsme zvolily průhlednou variantu, tedy vytvoření asi dvoupixelové mezery mezi položkami, je však možno klasicky vložit krátký oddělovač, neměl by však být moc široký, ne srovnatelně a velikostí písma.


Nyní nadešel čas na nadpisy menu. Fontů je k dispozici celá řada, My jsme vzhledem k hranatosti a jednduchosti designu zvolily pouze kapitálky patkového písma, ozdobné nebo ručně psáné písmo by se sem přiliš nehodilo. U tohoto formátu nadpisů menu se může hodit použít nějakou odrážku - tou může být cokoliv, nejlépe nějaký jednoduchý symbol.

Do horního menu se zase hodí zahrnout nějaké oddělovače položek, zejména pokud máme nějaký odkaz dvou z víceslovný. Zde můžeme také použít nějaký symbol, většinou však stačí něco typu svislítko, případně můžeme každému odkazu dát ještě vlastní boxík nebo rámeček. Spousta lidí také zveřejňuje odkazy na své další účty, estetickou formou jsou ikonky. My zde máme naprosto modelové rámečky, předpokládá se nahrazení ikonkou příslušné sociální sítě.

Další položkou na liště může být "Hledání" nebo "Domů", ať už ve formě ikonky nebo boxíku, je však vhodné jej umístit spíš dál od jiných ikonek, které vedou mimo blog.

Barvy všech těchto prvků jsou taktéž libovolné, měly by však zase ladit s barvami motivu. Pokud se nám zdá, že je motivový obrázek málo barevný, nebo chceme mít pestrý design, můžeme samozřejmě barvy přidávat, ale pozor, aby vysledek nebyl přeplácaný a nesladěný.


Už máme design skoro hotový, jen to prázdné místo mezi horní lištou a stránkou. Možností je tam prostě dást další obrázek, chceme-li však design pouze s jedním motivem, můžeme místo vyplnit něčím méně výrazným.

Takže například nápis. Může se jednat třeba o název blogu nebo nějaké motto či citát. My jsme dělaly jarní design. A chtěly jsme, aby to bylo opravdu spíš nevýrazné. Takže jsme napsaly jedno slovo čtyřmi fonty přes sebe a trochu zprůhlednily. Výsledkem je jakými dekor. Místo něj však může být i výraznější, ozdobný nápis, sladěný barevně i efektově s okolím. K našemu okolí se nehodí žídné přílišné odlesky nebo ozdoby, takže takto.

Někdo může namítnou, že používání víc jak dvou fontů na jednom objektu je zločin, což je v podstatě správný přístup, ale pokud se jedná o dekorativní v podstatně pozadí, tak to nemusí nutně působit jako neladící koláž.


A ještě poslední detaily. Máme stále prázdný černý box nad strákou. Záleží, co jsme napsali do záhlaví, my jsme si zvolily nějakoé to motto. Může tam však zase bát třeba název blogu, záhladní informace o blogu, při troše snahy drobečková navigace nebo nadpis aktuálního článku. Nebo tam vůbec nemusí ten box být, že. Pak je ale potřeba nějak vymyslet estetický přechod stránky a záhlaví, opět je možností spoustu.

Původně jsme chtěly nechat v záhlaví jen to "Spring", nakonec jsme ale usoudily, že nějaký vzorek neuškodí. Tedy nějaký jemný, průsvitný, nebarevný obrázek - fotka nebo textura, zde spíše zase něco nekonkrétního. My tam máme jakousi fotku lesa, zprůhledněnou, odbarvenou. Můžete si zvolit dát tam obrázek v plných barvách, ale potom pozor na přechod na okrajích stránky. Zde se hodí experimentovat s režimem vrstvy, to je program od programu.

A ještě jedna drobnost, ale to se realizuje až při nastavování - můžeme chtít mít nějaké odrážky položek menu. Měly by být méně výrazné, než ty u nadpisů boxů, může se jednat o nějaký znak napsaný klávesnicí, nebo nějaký malinký obrázek. My zde máme obyčejné malé "o".


No a ještě druhá verze, aby bylo trochu vidět, že stejným postupem se dá udělat i něco trošku jiného, i když je vlastně dost podobný.

Takže co je jiné: Barvy ikonek na horní liště - to prakticky nemá význam, použijete-li orginální loga, ale jinak tento detail zase hezky propojí nyní vícebarevný design. Sýkora koňadra je, jak vidno a známo, barevnější, takže i design jsme udělaly živější.

V dalším výřezu je detail menu - opět, nějaké odrážky nadpisů i položek, jiný způsob předělů, pro inspiraci. Totéž se zápatím.

Také je tu výraznější pozadí okrajů stránky - tatáž fotka přírody, barevné květy dole doplňují a vyvažují výraznou sýkorku nahoře.



Tááááááák. To by mělo být všechno. Jak bylo již zmíněno, někdy popíšeme, jak takový design nastavit. Oba designy se časem objeví ve volných. Doufáme, že tento článek bude shledán užitečným, pročež byl psán. Určitě se tešíme na jakékoliv dotazy a připomínky.

Hezké jaro
 

2 lidé ohodnotili tento článek.

Komentáře

1 Blanch Blanch | Web | 21. března 2017 v 3:16 | Reagovat

Obdivuju tě, že se ti vůbec chtělo dělat takto obsáhlý návod. Já jsem za celou svou "kariéru" udělala jedinej tutoriál a ještě děsně odfláknutej :D, kdysi před deseti lety a už jsem se k tomu jinak nikdy nedonutila :D, je s tím moc práce.

Máš někde ty vzhledy nastavené? Vypadají hezky. Docela ráda bych je viděla za chodu :)

2 Casion Casion | Web | 21. března 2017 v 9:21 | Reagovat

Je to výborný návod, určite sa mnohým zíde :-) :-)

3 Gaz Gaz | E-mail | Web | 22. března 2017 v 14:29 | Reagovat

[1]: No není to věc, kterou chce člověk psát každý den (týden, měsíc, možná i rok..)
Nejsou, ale pokud máš zájem, někam je nastavíme. Z toho jejich nastavování vyrobíme pravděpodobně ten "nastavovací tutoriál". :P

[2]: Děkujeme, v to doufáme. :)

4 Kačka Kačka | Web | 22. března 2017 v 15:25 | Reagovat

s tým gimpom by sa mi teda nechcelo srať :D kedysi som v ňom robila ale už by som v živote neprešla z PSka zase na gimp :D PSko sa dá tiež zohnať zadarmo, tak načo si sťažovať prácu s gimpom že :D

5 Blanch Blanch | Web | 22. března 2017 v 18:56 | Reagovat

[3]: Já myslím, že se to určitě lidem šikne :D
On někdy samotný blog a jeho nastavení by potřeboval tutoriál :D

6 Gaz Gaz | E-mail | Web | 22. března 2017 v 20:34 | Reagovat

[4]: GIMP je podle mě skvělý, když se v něm člověk zaběhne, což nám se podařilo. :) Uznáváme, že PS taky a nic proti němu nemáme. My jsme GIMP zvolily proto, že je to vlastně takový default na našem operačním systému, PS by tam asi nainstalovat šel, ale bylo by to určitě náročnější než tvořit v GIMPu. :)

[5]: Vzpomínám si na den, kdy jsme objevily, jak nastavit design jinak než pouze s jedním obrázkem v záhlaví a opakujícím se vzorkem na pozadí a jednobarevnou, blogem orámovanou stránkou. :)
Věřím, že něco takového už někdo vytvořil. :D

7 Kačka Kačka | Web | 22. března 2017 v 21:12 | Reagovat

[6]: aha, takže predpokladám, že máš MAC-a :D v tom prípade to chápem :D

8 Gaz Gaz | E-mail | Web | 22. března 2017 v 21:44 | Reagovat

[7]: Musím Tě zklamat, ale máme linux :P obdobný, ale levnější problém. :)

9 Kačka Kačka | Web | 22. března 2017 v 21:58 | Reagovat

[8]: no ja som linux v živote nevidela musím priznať :D

10 Lukas Lukas | Web | 23. března 2017 v 10:00 | Reagovat

[9]: linux je dobrý především pro takzvané "nehráče"

11 Kačka Kačka | Web | 23. března 2017 v 13:18 | Reagovat

[10]: no, ja som takzvaný "hráč" :D

12 Gaz Gaz | E-mail | Web | 23. března 2017 v 19:49 | Reagovat

[9]: Je moc krásný a úžasný

[10]: Linux je dobrý pro ty, kteří nemají rádi windows a kteří jsou ochotni používat alternativy windowsovských programů :)

13 Blanch Blanch | Web | 25. března 2017 v 15:14 | Reagovat

[6]: Ty dny si pamatuji moc dobře. V roce 2005 dokonce na blog "omylem" šly vkládat ankety z blueboardu, nebo kecálky a vstup do chatu a tak podobně, podporoval html kódy php utilit, přímo v menu tak mohl být otevřený shoutbox/kecálek :), pak vývojáři na tu chybku asi po roce přišli a opravili ji *cry*
Od té doby jsem se musela spokojit, že tam nic takového mít nebudu :). Ale zas v té době blog nepodporoval dnešní nastavení, neměl boxy, neměl možnost udělat si menu podle sebe, pouze přes rubriky jako takové ze základu, mělo to jen stránku, pozadí, menu, záhlaví, zápatí, konec. Žádné úpravy komentářů, že... Žádné cokoliv :).

Já dělala tutoriál na jednoduchý layout s přechodem a pár štětci a úpravou obrázku, který jsem pak nastavila na blog. Nebyl v tom návod nastavení na blog, tehdy to nebylo nutné no :D, to uměl každý.
Dneska je to větší složitost :D.

A mimochodem, na Linuxu PSko běží úplně normálně :), měla jsem na linuxu photoshop, bez problémů :). I v práci.

Linux, jak psal výše Lukáš, je problém spíš pro ty nehráče :), protože často nepodporuje mnohé rpg, online hry a je třeba to tam složitě doinstalovávat a upravovat.

A jinak, Linux mám taky hodně ráda, pracovalo se v něm dobře, ale je to s ním zbytečně složité.
Windows nemám příliš v lásce, ale používám ho v podstatě z pohodlnosti a protože je s ním snadnější v mnoha profesních ohledech manipulovat.
Ale mám sedmičky a nehodlám měnit, to je pro mě nejmenší zlo :D.

14 Gaz Gaz | E-mail | Web | 27. března 2017 v 20:30 | Reagovat

[13]:

2005? To jsem byla málem menší než počítač. :D Nechápu, proč to blog.cz zrušil :-(, zní to opravdu pěkně. Blog se vyvíjí a občas třeba i dobrým směrem.

Nojo holt doba se mění. O to zase bylo větší umění vůbec vytvořit něco hezkého. :)

Hm, vážně? Popravdě jsem to ani nezkoušela, takže když říkáš, že jo, tak tedy jo. Ale asi jsem moc líná ho instalovat a ještě ke všemu se s ním učit, v GIMPu se teď vyznám docela dobře, že kdybych něčeho takového chtěla docílit v PS, tak by to zabralo dva roky. :D
I na linuxu se dají najít skvělé hry. :P Ale to je otázka vkusu a preferencí.

Práce donutila mnohé přejít (byť třeba jen dočasně) k windowsům. Ono by jen stačilo linux rozšířit, aby se ho lidi přestali bát. Vždycky mě naštve, když má někdo něco na win. rozbité a vůbec se to nesnaží opravit, obvykle s výmluvou "to nejde, to takhle prostě je", což mi připadá velmi hloupé, windowsy tak vlastně oblbují člověka. Spoustu věcí na linuxu dokáže pomocí internetu, trpělivosti a minimální znalosti angličtiny opravit i takový počítačový amatér jako já. ;)

15 LM LM | E-mail | Web | 28. března 2017 v 20:28 | Reagovat

Skvelý návod :)

Nový komentář

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