Na internetu je tolik tutoriálů a průvodců, které vás naučí, jak efektivně využívat design webu 2.0. Zatímco většina těchto tutoriálů je užitečná, zároveň zabíjí originalitu ve webovém designu. Většina „průvodců“ vám například říká, že web 2.0 je o lesklém odznaku, pruhech na pozadí a tučných fontech. Výsledek? Existuje nespočet stovek vzorů s odznaky, pruhy a tučnými velkými písmeny... a navzájem se neliší. Nezáleží na tom, zda vytvoříte design pro web 2.0, web 1.0 nebo web 75.0, vše je originální a zapamatovatelné.

Pokud však opravdu nemůžete najít nic zvlášť originálního, co by symbolizovalo váš design, je „bezpečnější“ jít se současnými trendy webdesignu. Zde je velmi malý fragment rozvržení webového designu a jak přeměnit běžné rozvržení na rozvržení webu 2.0.

Tohle jsme měli…

14.png

A to je to, co budeme dělat…

13.png

Budeme pracovat ve Photoshopu a nebudeme používat nic jiného než styly vrstev; se zaměřením na mírné přechody a stíny.

Začněte tím, že použijete obdélníkový tvar se zaoblenými rohy a nakreslíte… obdélník.

1.jpg

Prapor

To, co musíme udělat jako první, je dát našemu obdélníku určitou hloubku a život. Podle zásad designu webu 2.0 nám tento efekt zajistí pouze stíny, obrysy a přechody světla. Přejděte tedy na styly vrstev a pusťte trochu mírného stínu. Použili jsme #96aed6 pro tento účel.

2.png

Chcete-li dát tvaru trochu hloubky (takže nebude vypadat jako plochý předmět), přidejte mírný vnitřní stín s tmavším tónem (použili jsme #304f82 )

3.png

Na závěr je důležité přidat malý přehled. Použijeme bílou barvu #FFFFFF, protože naše stíny z obou stran jsou tmavší, chceme mít světlou a poloviditelnou linku, která bude tvar konturovat.

4.png