Seriál aRTIUM: #3 Tvorba desingu

Zdravím u dnešního zpožděného seriálu aRTIUM. Tento článek jsem původně chtěl napsat a zveřejnit později, ale co - když je ta velká grafická soutěž, spackal jsem něco hned.

Je spousta článků jak vytvářet opravdu "jednoduché a rychlé" designy, ale pojďme se na to podívat postupně a trochu více dopodrobna. Však nejprve však obecně…

Když si zkusíme nějak rozdělit designy tak by to šlo hned z několika pohledů.

"Zkušenost"

• Amatérský
• Profesionální

Jednoduchost

• Složitý
• Jednoduchý

Vzhled

• Úřední
• Umělecký

Barvy

• Dicolora
• Tricolora
• Tetracolora atd...

Proč je tak těžký vytvořit design?

Pro všechny, kteří se tímto "oborem" zabývají to zas tak těžké ehem není. Jen jediné je potřeba - inspirace. Já například si normálně žiji svůj život, a když dostanu nápad, jak by mohl vypadat design, představím si ho v hlavě, rychle ho načrtnu v photoshopu a uschovám do budoucna. Design se dá vytvořit lehce, ale je tu důležitá kreativita a fantazie. Ta nelze naučit, ale každý ji alespoň trochu má. Stačí se trochu uvolnit.

Ještě upozorňuju, že zde vytvářím jakousi "cestu" ke tvorbě designu, kterou používám já. Jsou i jiné způsoby - zapoj hlavu (nebo někdy spíše vypni).

1. Základní požadavky před tvorbou designu

1. Zkušenost s nastavováním vzhledů na blog.cz
   - Každého logicky napadne, že je třeba se nejdříve seznámit s možnostmi nastavení vzhledu, které blog.cz nabízí. Tudíž pokud s designy začínáš, doporučuji založit si nějaký testovací blog, kde si prostě vyzkoušíš, co to všechno umí.
2. Dobrý program a nějaká ta orientace v něm
   - Adobe Photoshop je jasná volba. Samozřejmě pokud umíš v Gimpu či PhotoFiltru, se kterým jsem mimochodem začínal i já, tak rozhodně neodsuzuji. Důležité je hlavně vědět, co všechno to umí a jak toho využít. Asi největší kámen úrazu je sehnat si plnou verzi tohoto programu. Takže se snad nic nestane, když tady utrousím jeden odkaz ;) (info v popisku) ;)

Pozn.: V dnešní době se dá získat zadarmo plná verze, stačí pořádně hledat

2. Rozvržení designu

Pokud už máš nějaké to technické a znalostní zázemí je načase rozvrhnout si, jak bude "kostra" blogu vypadat s tím, že musí být možné jí vůbec v programu vytvořit a potom jí nacpat do blogu. Pro inspiraci jsem vytvořil pár šablon, které využívají: záhlaví, stránku, menu a až na první i obrázkové pozadí.

Základ pro tvorbu šablony jsou rozměry alespoň 1024×768. Přibližně tak se bude zobrazovat stránka. Výšku si můžeš následně zvětšovat pomocí nástroje odříznutí.

Používej pravítko! Nejprve si pomocí pravítka "rozpul" šířku stránky. Díky tomu pak můžeš lépe umístit záhlaví a následně pak menu i stránku. Ty vytvoříš pomocí nástroje tvar.

3. Grafická podoba designu

Jestli máš kostru designu hotovou, můžeš se vrhnout na grafickou stránku. Nejprve si musíš uvědomit, jak to bude s barvami.

Barvy

- Obvykle se volí od 2 až do 5 barev. Když je jich víc tak to nevypadá dobře, pouze v případě, že děláte design typu "art" ve kterém se barvy zobrazují pouze v záhlaví a symbolizují např. malířské barvy na bílé čtvrtce…

Zvětši kliknutím

Jaké barvy zvolit? Uvědom si, že jedna barva patří pozadí, druhá stránce a další jsou doplňkové barvy.

Výborné jsou kombinace s bílou, která může být s jakoukoliv barvou až na světle žlutou. V případě temnějšího designu spíše černá a červená či šedá a modrá. Důležité je, aby byla směsice barev příjemná pro "oči" návštěvníka např. kombinace černé, světle růžové, světle zelené a světle modré je hrůza. Vol rozdílnou tricoloru či tetracoloru, ale dál se drž v odstínech těchto barev.

Pozadí a záhlaví

- Když se zpětně podíváš na dosavadní práci, tak vidíme tvary a barevné plochy. To určitě není to, co bys dal na svůj blog. Je na čase vložit obrázky, textury atd…

Je na čase abych zmínil stránku brusheezy.com. Na této stránce nalezneš všechny možné doplňky pro photoshop, které nahrávají sami uživatelé. Zde nalezneš například štětce, vzorky a textury. Připojuji rychlý návod, jak vytvořit, nahrát vzorky a štětce.

Internet je prostě plný těchto vzorků a brushů, tak proč nevyužít, že... Zde dávám k dispozici kolekci vzorů, kterou jsem vytvořil před tak cca dvěma lety.

Všechno další je otázkou inspirace. Zde jsem pro tento díl vytvořil motýlový design a pokusím se na něm popsat tvorbu.

Zvětši kliknutím

1. Na stránce brusheezy.com jsem si našel štětec ve tvaru motýlu a přes hodinu jsem se s ním piplal, aby transparentní bylo jenom pozadí a ne vnitřek (jako to u štětců je).
2. Dále jsem začal s kostrou. Moc jsem chtěl v designu využít efekt "ze stran přeloženého papíru" a ke tvorbě stačily pouze tvary, přechody a užití funkce "Vybrat obr. body"
3. Stránku a menu jsem zvolil tak abych měl co největší plochu v záhlaví, jelikož jsem nechtěl motýly spát na sebe a držet se pravidla "třetin" (Objekty by neměli být namačkány ve středu obrazu, nedělá to dobrý dojem, když uprostřed je obrázek a okolo spousta místa)
4. No a pak barvy. Osobně se mi líbí kombinace šedá, modrá, bílá - takže proč je nepoužít.

4. Rozřezání

- Pokud jsi s výtvorem spokojený, tak je čas na rozřezání. Když se podíváš na design, který je nad odstavcem, záhlaví není možné nacpat jen do záhlaví. Jelikož přesahuje konec menu a stránky bude se muset použít ještě pozadí... Jednoduše se "vypne" vrstva stránky a menu, rozšíří se rovnoměrně šířka i výška (výšku rozšiřuji, jelikož na pozadí mám vzorek a ne jen barvu) a uložíme celou oblast jak pozadí. No a teď to hlavní - stránka, menu, záhlaví (a zápatí). Nyní využijeme náš oblíbený nástroj pravítko - Ctrl + R vytvoříme dvě svislé linky - okraj stránky a menu a jednu vodorovnou na oddělení záhlaví. Pokud pravítko nepoužíváš, fakt pomáhá, pří použití nástroje obdélníkový výběr se sám přichytí k vodítkům. No následně opakovat Ctrl + C, Ctrl + N, Ctrl + V a Ctrl + S…

Tento design jsem původně tvořil i do soutěže, na konec se nepřihlásím, ale v každém případě rada pro soutěžící - musíte myslet na to, že ty vítězné designy budou pak na spoustě blogů, proto do záhlaví nepište napevno "Můj blog" atd… To prostě není moc pěkné… Nejlepší je snaží se ponechat střed volný a dát tak blogerovi šanci vložit si tam svůj nápis .

No a teď závěrečná výzva - určitě někdo i z řad snílků se účastní této soutěže. Tudíž vyzývám všechny snílky, aby pod článek připsali odkaz(y) na svůj(e) design(y). Všechny zde zveřejním, takže alespoň trochu publicity, když to nevyjde . Takže se zatím všichni mějte a hodně štěstí v soutěži .

Snílek grafikář...

---

Předchozí díly:

• Seriál aRTIUM #1 - Animace
• Seriál aRTIUM #2 - Animace z videa