A toto sme dostali…

5.png

To nám však nedá dostatočnú hĺbku. Chceme, aby bol tento obdĺžnik ešte viditeľnejšie zakrivený, pretože sa nedotýka povrchu rovnomerne, ale pridaním viac tieňa pomocou štýlov vrstiev alebo silnejším tieňom nedosiahneme požadovaný efekt. Použi toto horizontálny rozdeľovač ponúka dezinpolio.com a pridajte ho do stredu svojho tvaru, aby „vybledol“ smerom k rohom, ako je znázornené nižšie:

6.png

Pamätáte si, že sme spomínali tučné písmená? Web 2.0 dobre využíva fonty, najlepšie veľmi ľahko čitateľné, mierne kreslené a tučné. Mali sme problémy s výberom vhodného písma a rozhodli sme sa zvoliť „Cooper Std“.

7.png

Robíme pre pridanie veľmi jemného tieňa (# 5674a7) a svetlý prechod od bielej v hornej časti (#ffffff) na svetlomodrú (#cdd9de)…

8.png

9.png

prápor

Získame tak veľmi roztomilý detský dizajn.

10.png

Web 2.0 je tiež o dobrom pomere a zatiaľ čo návrhy sú obzvlášť asymetrické, iné sú takpovediac obsedantne symetrické. Uprednostňujem druhý typ, keďže na tvorbu treba menej originality a vkusu, stačí len cit pre proporcie. Povedzme, že pridáme niekoľko tlačidiel do spodného a bočného rohu nášho dizajnu…

11.png

Vyzerá to dobre?

12.png

Nie, nie je, pretože záložky vyzerajú príliš chaoticky, takže sa uistíme, že čiara ľavej bočnej karty „spĺňa“ čiaru spodnej karty, takto…

131.png

Teraz to vyzerá proporcionálne.

crystal_clear_app_ark2.png

prápor

V prípade, že sa čudujete, prečo sme vynechali krok, štýly vrstiev pre karty sú takmer identické so štýlmi, ktoré sme použili pre hlavný obdĺžnik, a to isté platí pre štýly písma a vrstiev na „kartách“. Na vzdelávacie účely si môžete stiahnuť súbor PSD a analyzovať proces. Pamätajte, že všetky tieto čiastočne viditeľné gradienty a obrysy s veľkosťou 1 pixel sú často tým, čo robí rozdiel medzi skvelým webovým dizajnom a vyspelým pokusom o navrhovanie. Veľa štastia!

stiahnuť súbor psd