How to... DESIGNS

21. april 2014 at 9:10 | Alex |  tutorials
A JE TU TO SPOMÍNANÉ PREKVAPENIE :D Keďže som robila tú mini-rekonštrukciu, o ktorej som vám sem písala skôr, spravila som aj dve nové rubriky a jednou z nich je rubrika tutorials. Povedala som si, že by som to tu mohla trošku oživiť a namiesto samotných designov pridať aj niečo, čo by mohlo pomôcť začiatočníkom :) Prišlo mi už zopár mailov typu "ako robíš na designoch ___" etc., plus som podobné otázky videla aj na ask.fm u iných grafikov/blogerov. Tákže som sa rozhodla, že spravím taký menší "tutoriál", ako na designy :) Budú to ale vážne len základy a hlavne nezabúdajte, že nie som žiaden profesionál a všetko, čo viem, som sa naučila úplne sama, takže niektoré "techniky" nemusia byť úplne správne, alebo sa vám nemusia páčiť. Designy robí každý na iný štýl, svoj vlastný, takže sa týmto článkom nenechajte nijak moc ovplyvniť, je tu len na to, aby vám pomohol :)
Ako príklad budem používať design, ktorý mám momentálne nastavený na blogu (pre väčší nádľad kliknite sem - aby ste si nemuseli stránku posúvať stále hore). Spravila som takú mini ukážku rozvrhnutia designu, ktorú môžete vidieť nižšie. K tomu ale neskôr, najprv chcem spomenúť zopár vecí, ktoré sú dôležité, keď chce robiť nový design:

001 » Nájsť vhodné fotky, s ktorými sa bude dobre pracovať.
- Pokiaľ chcete na layoute PNG, je lepšie nájsť si fotku, ktorá sa vám bude ľahšie orezávať. Keď ste napríklad začiatočník, nevybrala by som si fotku, na ktorej má daná celebrita rozfúkané vlasy všade možne :D Najlepšia by bola asi fotka z photoshootu s jednofarebným pozadím :) Plus, je dobré robiť layout s jedným photoshootom a nehádzať tam fotky z rôznych (niekedy to vyzerá dobre, ale pre začiatok je lepšie, keď to všetko ladí).
---------------------------------------

002 » Rozhodnúť sa, v akých farbách bude design.
- Radila by som vám riadiť sa podľa fotiek, ktoré ste vybrali v predchádzajúcom bode, skombinujte farby designu s oblečením celebrity etc. Taktiež si myslím, že je dôležité vybrať si nanajvýš tri farby (musia sa k sebe hodiť), ktorých odtiene potom budete používať. Na mojom terajšom layoute sú len dve farby a to modrá (odtiene - svetlá a tmavá) a tmavo-šedá. Znovu pripomínam - videla som veľa layoutov, v ktorých bolo použitých viac farieb a boli perfektne skombinované, ale pre začiatok by som to nekomplikovla :)
---------------------------------------
003 » Vybrať si fonty/typy písma.
- Ja si vždy vyberám dva: jeden zaujímavejší/doplnkový (na terajšom layoute je ním napísaný názov blogu, alebo "mini navigation") a druhý základný (je ním napísaná napr. welcome message). Nikdy do designu nedávam veľa fontov, myslím, že dva alebo tri úplne stačia.
---------------------------------------
004 » Rozvrhnúť si layout.
- Tento krok vždy robím len zbežne, nikdy si nerozmyslím, ako presne chcem, aby layout vyzeral. Stačí si aspoň rozmyslieť, kde chcete hlavnú fotku, kde horné menu, welcome message a podobne. Pripravila som sem mini-náhľad môjho layoutu (kliknutím na neho sa vám zobrazí väčší náhľad) a dolu pod ním sú body, kde je vysvetlených zopár základných vecí:
[1] - (Nešla som úplne porade, ako design robím, keď je napr. PNG číslo 7, neznamená, že nie je dôležité.) NÁZOV BLOGU. Nie každý to robí takto, ale ja si vždy v layoute vyčlením miesto, kde napíšem nejakým zaujímvejším fontom názov blogu.

[2] - HORNÉ MENU. Nemusí byť na layoute len "hore", aj keď je horné. Napr. na tomto ho mám asi v strede, môžete ho kľudne dať úplne dolu, to je na vás. Sem sa píše väčšinou homepage, website, a tak ďalej. Pokiaľ ste úplný začiatočník a neviete, ako zaktualizovať odkazy na layoute, preskočte kroky číslo 2 a 3 (ak by ste mali záujem, môžem spraviť aj tutoriál, ako zaktualizovať odkazy na layoute, takže mi dajte vedieť do komentárov).

[3] - MINI NAVIGÁCIA. Podobná ako horné menu, môže byť na layoute kdekoľvek, dáte tam odkazy na dôležité rubriky/články...

[4] - WELCOME MESSAGE. Myslím, že welcome message by mala byť na každom layoute, už len preto, že zaberá nejaký priestor, keď si už neviete rady, čo by ste tam dali :D

[5] - SITE INFORMATION/BONUS. Tak site information v layoute rozhodne mať nemusíte :D Ja som to tam dala, pretože som lay chcela trošku pozmeniť od toho predchádzajúceho a celkovo. Okrem toho, vždy pri robení designu prídem k bodu, kde neviem, čo ďalej, pretože layout je polo-prázdny a ja už neviem, čo tam mám dať. Ak sa vám stáva niečo podobné, dajte tam site info, animáciu, ak máte blog o celebrite - ich životopis, popis seriálu alebo čokoľvek, čo vás napadne :)

[6] - LOGO. V poslednom čase je blog.cz zaplnený logami blogov. Pokiaľ ho nechcete, nič sa nedeje, ak o neho však máte záujem, na vašom mieste by som ho dala aj do layoutu. Poprvé to zaberie priestor, čo je len dobre, a podruhé ním nemôžete nič pokaziť.

[7] - PNG (HLAVNÉ). Môže byť v strede alebo na strane, podľa neho sa formuje základná kostra layoutu. Keď ho dáte do stredu (preview), celý layout je rozdelený na pravú a ľavú časť, keď ho dáte na stranu (preview), ostatné veci sú pokope. Záleží od toho, aký štýl sa vám páči alebo na čo máte zrovna "chuť".

[8] - VEDĽAJŠIE PNG/OBRÁZOK. Nie úplne priesvitné v pozadí, ale nie dosť veľké a jasné, aby pútalo pozornosť od hlavného PNG. Takisto tam byť nemusí, je to len a len na vás :)

[9] - MENU.*

[10] - STRÁNKA.*

[+] - OBRÁZKY V POZADÍ, BRUSHE A PODOBNE. Slúžia na to, aby layout pôsobil úplne a dokončene a nie prázdno. Dajte ich kamkoľvek tam, kde máte prázdne miesto.
---------------------------------------
(*) Body "menu" a "stránka" som preskočila, ak máte záujem o tutoriál s týmto zameraním + rozmery designu, napíšte do komentárov.
---------------------------------------
AK VÁM TENTO TUTORIÁL POMOHOL, ROZHODNE MI DAJTE VEDIEŤ DO KOMENTÁRU :) TAKTIEŽ AK MÁTE ZÁUJEM O ĎALŠÍ.
- tutoriál nie je povolené kopírovať, slúži len na vaše použitie (c) DesignDelight.blog.cz -
 


Comments

1 Sopphie Sopphie | Web | 21. april 2014 at 9:54 | React

Skvělý nápad :) V tomhle určitě pokračuj ale možná by o příště chtělo něco spíš jak ho udělat. Jakože, já třeba designy neumím vůbec, spíš grafiku celkově :D A pomohl by mi třeba návod na zatmavení boků stránek nebo jak máš nahoře ten hlavní obdelník. Tak jak udělat aby byl takový lesklý. Prostě jednotlivé návody jak udělat jednotlivé části :)

2 Perrie Perrie | Web | 21. april 2014 at 10:25 | React

Obdivuji tě, že ses do takového článku pustila :) Muselo to být časově náročné a navíc je od tebe moc hezké, že ukazuješ lidem, jak to vyrobit :) Většina lidí, co to umí to prozradit nechce ;D Jinak až budu mít chvilku tvoření pokusím se podle návodu něco udělat :)

3 Mindy Mindy | Web | 21. april 2014 at 11:59 | React

užasný nápad! :)

4 B.Girl B.Girl | Web | 21. april 2014 at 12:27 | React

bezva ale potřebovala bych rozměry a menu a stránku ;) Dej vědět jestli se do něčeho

5 B.Girl B.Girl | Web | 21. april 2014 at 12:28 | React

[4]: * Dej vědět jestli se do toho pustíš ;) ale jinak vážně bezva tutoriál

6 actors-net actors-net | Web | 21. april 2014 at 12:53 | React

úžasně si to popsala, myslím že díky tobě se naučí i úplný začátečník

7 © chloé. © chloé. | Web | 21. april 2014 at 12:54 | React

ďakujem :O <3
inak tutoriál úplne perfektný,skvelý nápad, a ešte lepšie prevedenie, pochopí to naozaj každý! :)

8 ~ Annie. ~ Annie. | Web | 21. april 2014 at 13:20 | React

Ted' si mě pořádně zaskočila.Děkuju moc,tvých komentářů si vždycky neskutečně vážím ♥.

Páni,úplně tě obdivuju,že si se vrhla do psaní takového článku.Podle mě lidem hodně pomůže,zejména určitě začátečníkům :))..

9 © sgdaily © sgdaily | Web | 21. april 2014 at 13:40 | React

moc děkuji za návod :) určitě ho využiju!

10 Anett • bellathorne-official Anett • bellathorne-official | Web | 21. april 2014 at 14:10 | React

Páni, skvělé překvapení :D Stejně bych to asi nezvládla:D Já prostě nemám nápady:D:)

11 britain_xx britain_xx | Web | 21. april 2014 at 14:47 | React

Wow!:) skvělý tutoriál, i takový amatér jako já bych to pochopil ! :D Mít ještě tak jiný program než jenom malování ! :D

12 R | velvethorse.blog.cz R | velvethorse.blog.cz | Web | 21. april 2014 at 19:18 | React

skvelý tutorial :D myslím, že pomôže veľa ľuďom :D

13 blair. blair. | Web | 21. april 2014 at 21:09 | React

Oooo! Určitě se na to zkusím kouknout, protože chci umět dělat layouty kruci!:D

14 Nienna Nienna | Web | 22. april 2014 at 10:58 | React

Skvělý tutorial, určitě v nich pokračuj - hezky a hlavně srozumitelně napsané :)

New comment

Log in
  Don't you have your own web yet? Create it for free on Blog.cz.
 

Actual articles

Advertisement