I ovo je ono što smo dobili…

5.png

Međutim, to nam neće dati dovoljno dubine. Želimo ovaj pravokutnik učiniti još vidljivije zakrivljenim, budući da ne dodiruje ravnomjerno površinu, ali dodavanje više sjene pomoću stilova slojeva ili, ako sjenku učinimo jačom, neće nam dati željeni učinak. Koristi ovo horizontalni razdjelnik nudi dezinpolio.com i dodajte ga u sredinu vašeg oblika, tako da će "izblijediti" prema uglovima, kao što je prikazano u nastavku:

6.png

Sada, sjećate se da smo spomenuli podebljana slova? Web 2.0 dobro koristi fontove, po mogućnosti vrlo lake za čitanje, pomalo karikaturalne i podebljane. Imali smo poteškoća pri odabiru prikladnog fonta i odlučili smo se za "Cooper Std".

7.png

Mi radimo da dodamo vrlo blagu sjenu (# 5674a7) i svjetlosni gradijent od bijele na vrhu (#ffffff) u svijetloplavu (#cdd9de)…

8.png

9.png

zastava

Ovo će nam dati vrlo sladak dizajn bebe.

10.png

Web 2.0 također ima dobar omjer i dok su dizajni posebno asimetrični, drugi su tako reći opsesivno simetrični. Više volim drugu vrstu, jer je potrebno manje originalnosti i ukusa za stvaranje, sve što trebate je osjećaj za mjeru. Recimo da dodamo nekoliko gumba u donji i bočni kut našeg dizajna…

11.png

Izgleda li ovo dobro?

12.png

Ne, nije jer kartice izgledaju previše kaotično, pa ćemo se pobrinuti da linija lijevog bočnog jezička "susreće" liniju donjeg jezička, ovako...

131.png

Sada izgleda proporcionalno.

crystal_clear_app_ark2.png

zastava

U slučaju da se pitate zašto smo propustili korak, stilovi slojeva za kartice gotovo su identični onima koje smo koristili za glavni pravokutnik, a isto vrijedi i za font i stilove slojeva "kartica". U svrhu učenja, možete preuzeti PSD datoteku i analizirati proces. Upamtite da su svi ti poluvidljivi gradijenti i konture od 1px često ono što čini razliku između izvrsnog web dizajna i amaterskog pokušaja dizajniranja. Sretno!

preuzmite psd datoteku