Oriunde te uiți, peste tot există lumină și peste tot există o umbră. Tot ceea ce vedeți reflectă partea dvs. de lumină și, în mod natural, aruncă o umbră asupra oricărui alt lucru.
Din punct de vedere vizual, lumina și umbra "ne explică" ce anume vedem înainte de noi înșine și ne ajută să înțelegem textura, volumul și proiecția obiectului.
Prin urmare, pentru cei care se dau cu adevărat la designul web și încearcă să facă proiectele lor naturale, impresionante și intuitive, este incredibil de important să ai o înțelegere a luminii și a umbrelor. Mai jos sunt 5 moduri de îmbunătățire a utilizării luminii și a umbrelor pentru a îmbunătăți calitatea designului dvs. web.
INTRODUCERE INTRODUCERE LA ANATOMIA LUMINII ȘI OCHIURILOR
În diagrama simplă de mai jos puteți vedea că sursa de lumină este în partea stângă. Clipa este pe partea care are cea mai mare lumină, iar umbrele se află pe partea opusă a sursei de lumină. Plasarea luminii și a umbrei ne spune multe despre suprafața și textura imaginii.
Dar vă întrebați: "Ce legătură are acest lucru cu designul web?"
Dacă dezvoltați suprafețe de înaltă calitate și "perceptibile" sau site-uri web, atunci lumina și umbra sunt prietenii tăi. La fel cum marii artiști și-au forțat picturile să vină în viață, ca să puteți folosi lumina pentru a vă da adâncimea de design și atracția vizuală. Să continuăm.
1. UTILIZAREA UNUI SURSA DE LUMINĂ
Cel mai important lucru în lucrul cu lumina este să înțelegi de unde provine această lumină. Sursa de lumină, cel mai probabil, va arăta imediat laturile loviturii sale, precum și laturile care au umbre (deși în designul web aceste reguli pot fi uneori încălcate). Dacă lucrați în Photoshop, puteți utiliza efectul sub numele de "lumină globală" cu scopul ca toate efectele dvs. de iluminare să fie supuse aceleiași direcții de lumină.
Controlul și utilizarea corectă a luminii în proiectele dvs. (chiar și în cele mai simple) vă vor ajuta să creați atmosfera potrivită în paginile site-ului dvs. În plus, vă va ajuta să îndreptați atenția inițială a vizitatorilor către punctul dorit al proiectului.
Monitorul de campanie utilizează o grămadă de lumină soare pentru a crea efectul soarelui în ascensiune pe fundal.
Icebrrg folosește lumină pentru a "înmoi" locul său adânc în apă.
Mike Precious folosește mai mult de o sursă de lumină pentru a adăuga un efect vizual, armonizând cu lumina unei lampă de masă.
Deaxon folosește o lumină subtilă, sursa căreia se află în spatele logoului, pentru a crea un efect de convexitate asupra paginii.
În lumea reală, foarte puține lucruri au tonuri monocrome și "plate". Lumina și umbra sunt peste tot. Utilizarea corectă a gradienților este o modalitate excelentă de a da adâncimea imaginii și de ao anima pe ecran.
Cel mai important lucru despre declivități nu este să exagerezi. Dacă utilizați Photoshop, nu uitați să utilizați stilurile de strat pentru gradientele dvs. Aceasta vă oferă posibilitatea de a le edita în orice moment. În plus, dacă decideți să modificați dimensiunea elementului, gradientul își va schimba automat și dimensiunea.
Resursa NCL este un exemplu excelent de utilizare precisă și foarte eficientă a gradienților pentru a crea un fond impresionant și armonios al paginii.
CSS ninjas pare să folosească tonuri monofonice, dar este doar la prima vedere, deoarece fiecare dintre zonele de culoare are un gradient abia vizibil care, în general, conferă site-ului o textura.
3. EXTRACTII (GPLY SUPPLY)
Selecțiile ajută la echilibrarea umbrelor și ar trebui folosite în colțurile unui obiect cel mai apropiat de sursa de lumină. Alocările sunt adesea invizibile la prima vedere, deoarece exact acea utilizare este corectă. Dar această impresie este falsă. Dacă într-adevăr nu erau acolo, atunci impresia generală a imaginii ar fi diferită. Cu cât selecția este mai clară, cu atât va apărea suprafața mai luminată.
Pentru a aprecia pe deplin selecția, trebuie să mărim puțin imaginea. O modalitate buna de a adăuga selecții este de a mări materialul de lucru cu 200% sau chiar mai mult, deoarece va fi dificil să vedeți exact la ce lucrați 100%.
Pictograma Dock and Newism utilizează o linie albă translucidă în colțul de sus al elementului paginii pentru ao separa de imaginea de ansamblu. Această linie este abia vizibilă, dar datorită ei imaginea de ansamblu este plină de strălucire.
Probabil ați folosit site-ul Apple de mai multe ori. Dar probabil că niciodată nu ați observat selecția drăguță din partea de jos a legăturilor de navigare, care au lăsat cuvintele să pară mai profunde.
Ca gradienti, folosirea umbrelor care se incadreaza a devenit un element important folosit de majoritatea web designerilor. Umbrele pot adăuga în mod semnificativ adâncimea și textura vizuală obiectului, dar numai dacă sunt utilizate în mod corespunzător. Trucul nu trebuie să exagerăm.
Calitatea umbrei depinde de direcția luminii și de saturație, precum și de distanța dintre obiect și suprafața pe care cade umbra. Cu cât lumina este mai puternică, cu atât este mai întunecată și mai clară umbra. Cu cât lumina este mai slabă, cu atât este mai slabă umbra.
Când vine vorba de exemple de umbre care se încadrează în rețea, principala cauză este următoarea: există prea multe astfel de exemple. Dacă folosiți umbrele cu mintea, ele pot adăuga volum chiar și în cea mai mică dezvoltare.
LinkedIn a adăugat o umbră foarte ușoară în partea de jos a barei laterale pentru a crea o iluzie de profunzime.
Google. cu probabil cea mai descărcată pagină de pe Internet, utilizează, de asemenea, o umbră care se încadrează.
5. ULTIMELE UTILIZĂRI COMPLEXE
Puteți face ceva mai mult decât să creați o umbră obișnuită care să cadă pentru a crea obiecte în trei dimensiuni. Umbrele mai lungi reprezintă o modalitate excelentă de a schimba aranjamentul spațial al a două sau mai multe obiecte pe o pagină.
În exemplele de mai jos, aceeași bancă Cola are locuri complet diferite în spațiu numai prin folosirea diferitelor umbre.
Emoțiile lui Mike folosesc foarte inteligent umbra (și lumina) pentru a transforma o pagină obișnuită în ... sex.
Superkix folosește o umbră pentru a poziționa adidații "deasupra" site-ului. În plus, umbra se schimbă atunci când dimensiunea paginii se modifică, ceea ce creează o impresie de schimbare a locației sursei de lumină.
Sofa a creat podeaua pe un fundal alb grație utilizării calitative atât a luminii, cât și a umbrei.
Informațiile interesante nu sunt niciodată inutile!
Astăzi, am dori să împărtășim câteva idei cu privire la efectul dezvăluirii blocurilor, pe care le puteți utiliza pentru proiectele dvs.
Dacă doriți să îmbunătățiți în mod semnificativ nivelul de securitate al site-ului dvs. pe WordPress, atunci nu puteți evita configurarea fișierului .htaccess. Acest lucru nu numai că vă va proteja de o serie de atacuri de hackeri, ci va organiza și redirecționări, precum și rezolvarea sarcinilor legate de memoria cache.
Designul materialelor este o tendință crescătoare de la Google. Această colecție conține teme gratuite pentru WordPress, realizate în acest stil popular.
Efecte asupra acestui lucru și există pentru a impresiona vizitatorii noștri. În această colecție, au fost colectate zeci de resurse, ale căror creatori au încercat foarte mult să-și impresioneze vizitatorii.
La sfârșitul lunii, oferim o selecție de materiale gratuite pentru web designeri pentru ultima lună.
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: