Lumina si umbrele

Lumina si umbrele sunt cele mai importante indicii vizuale pe care le putem folosi pentru a provoca sau crea adancime si volum in compozitii . Chiar atunci cand perspectiva si proportia sunt exacte, o compozitie fara accente luminoase si fara umbrire va parea plana. Lumina si umbra determina contrast vizual si ajuta la crearea iluziei de adancime tridimensionala cu medii bidimensionale, cum este creionul pe hartie sau pixelii de pe ecranul dumneavoastra. Doar lumina si umbra pot fi folosite pentru a face obiecte bidimensionale sa para ca pot exista in spatiul tridimensional.

Fiecare dintre cele trei cercuri colorate in cyan in figura de mai jos are aceeasi marime, insa efectele de iluminare diferite si umbrele aplicate ii dau fiecaruia o senzatie unica de adancime si volum. Primului cerc i-a fost aplicat un drop shadow simplu. Este foarte clar ca este un obiect bidimensional, insa umbra care cade da iluzia ca cercul pluteste deasupra suprafetei de sub el. Al doilea cerc are un degradeu liniar si o umbra care este deviata spre dreapta. Aceasta combinatie de lumina cu umbra deviata ar sugera ca este un cerc bidimensional care lasa o umbra pe o suprafata inclinata.  Faptul ca umbra este mai apropiata de partea de jos decat partea de sus a cercului creeaza o senzatie de miscare: parca partea superioara a cercului cade inspre sau se distanteaza de ochiul privitorului. Celui de-al treilea cerc i-a fost aplicat un degradeu radial – adica aplicat in toate directiile fata de un punct central – si , datorita accentelor luminoase si umbrelor pe care le genereaza degradeul, arata ca o sfera. Umbra pe care o lasa se potriveste cu pozitia sursei de lumina, ceea ce da credibilitate volumului si adancimii formei.

Asa cum exista multe cai de a modifica nivelurile de adancime ale cercurilor din figura de mai sus, exista mai multe metode pentru a da adancime elementelor unei pagini web folosind doar lumina si umbrele. Luati ca exemplu meniul din figura de mai jos. Cuvintele incasetate si colturile rotunjite ale casetelor sugereaza ca sunt obiecte pe care se poate face clic, iar fundalul intunecat de pe butonul Products sugereaza ca fie se trece cu cursorul deasupra lui, fie este selectat si activ. Este un stil simplu de navigare care ar putea functiona in regule pe aproape orice fel de site, insa, din pacate, in context, e un pic cam prea plat.

Daca aceste butoane ar fi cu adevarat tridimensionale, cum ar arata? Ar fi plate cu margini tesite sau partea superioara ar fi complet rotunjita? Ar fi partile lor superioare drepte pe orizontala sau ar fi valurite? Ce s-ar intampla atunci cand ar fi ilumintate? Toate aceste intrebari isi pot gasi raspunsul privind in jurul dumneavoastra. Pentru exemplu in figura de mai jos ne-am imaginat ca linkurile au fost iluminate pe deasupra, asa ca le-am dat un usor degradeu in loc sa las plata culoarea de fundal. Am adaugat si o tesitura muchiilor pentru a le da senzatia de dala lucioasa, rotunjita, din pavajul metroului. Am dorit ca linkul activ sa fie spre interior in loc de tesit in afara pentru a parea apasat. Am obtinut efectul adaugand o umbra partii de sus a casetei in locul evidentierii tesiturii. Si textului i-am dat putina umbra pentru a da senzatia ca literele sunt usor ridicate fata de suprafata butonului.

 

 

 

Adaugarea de umbre textului si obiectelor este o alta cale practica de a crea adancime in layoutul dumneavoastra. Acestea pot fi usor facute in Photoshop folosind stiluri de layere, dar ce ne facem daca persoana care se ocupa de intretinerea site-ului nu are la indemana acest program? Ca si in cazul crearii colturilor rotunjite si ale rotirii obiectelor, ne vine din nou in ajutor CSS3. Proprietatile box-shadow si text-shadow promit sa faca designul web mult mai putin dependent de imagini masive. Un loc deosebit pentru experimente cu acestea si cu alte proprietati CSS3 este http://css3please.com .

Nu trebuie sa va retineti doar la adaugarea iluminarii si a umbrelor pentru elementele rectangulare: incercati sa includeti si ceva perspectiva si ganditi-va cum functioneaza obiectele din viata reala atunci cand incercati sa produceti o senzatie de dimensiune.