A tohle jsme dostali…

5.png

To nám však nedá dostatečnou hloubku. Chceme, aby byl tento obdélník ještě viditelněji zakřivený, protože se nedotýká povrchu rovnoměrně, ale přidáním více stínu pomocí stylů vrstev nebo silnějším stínem nedosáhneme požadovaného efektu. Použij toto horizontální dělič nabízené dezinpolio.com a přidejte jej do středu svého tvaru, aby „vybledl“ směrem k rohům, jak je znázorněno níže:

6.png

Pamatujete si, že jsme zmínili tučná písmena? Web 2.0 dobře využívá fonty, nejlépe velmi snadno čitelné, mírně kreslené a tučné. Měli jsme potíže s výběrem vhodného písma a rozhodli jsme se použít „Cooper Std“.

7.png

Děláme pro přidání velmi mírného stínu (#5674a7) a světlý přechod od bílé nahoře (#ffffff) na světle modrou (#cdd9de)…

8.png

9.png

Prapor

Získáme tak velmi roztomilý dětský design.

10.png

Web 2.0 je také o dobrém poměru a zatímco návrhy jsou obzvláště asymetrické, jiné jsou takříkajíc obsedantně symetrické. Dávám přednost druhému typu, protože k vytvoření je potřeba méně originality a vkusu, stačí jen cit pro proporce. Řekněme, že přidáme několik tlačítek do spodního a bočního rohu našeho návrhu…

11.png

Vypadá to dobře?

12.png

Ne, nevypadá, protože záložky vypadají příliš chaoticky, takže se ujistíme, že čára levé boční záložky „se potkává“ s linií spodní záložky, takto…

131.png

Nyní to vypadá proporcionálně.

crystal_clear_app_ark2.png

Prapor

Pokud se divíte, proč jsme vynechali krok, styly vrstev pro karty jsou téměř totožné se styly, které jsme použili pro hlavní obdélník a totéž platí pro styly písma a vrstev na „kartách“. Pro účely učení si můžete stáhnout soubor PSD a analyzovat proces. Pamatujte, že všechny tyto částečně viditelné přechody a obrysy o velikosti 1px jsou často tím, co dělá rozdíl mezi skvělým webovým designem a zralým pokusem o navrhování. Hodně štěstí!

stáhnout soubor psd