Share
Îmi amintesc încă o dată una dintre primele mele clase de artă când, în calitate de copil mic, dornic, mi sa oferit o gamă de vopsele de culori vii. Îmi amintesc că încântarea de a vedea culorile primare se amestecă în culori secundare pentru prima dată și am argumentat că dacă două culori ar putea face o nouă culoare frumoasă, toate culorile împreună trebuie să facă ceva și mai bine! A fost cu totul dezamăgitor să îmi dau seama că, indiferent de modul în care am făcut-o, dacă am folosit toate culorile la dispoziția mea, am ajuns în mod inevitabil cu o culoare ciudată care poate fi numită doar "BLECH".
Câțiva ani mai târziu, ca un web designer nou, am experimentat din nou ceva din același proces. Pe măsură ce învățam, am căzut în capcana inevitabilă de a folosi prea multe culori sau de a le combina într-un mod greșit, doar pentru a ajunge cu ceva puțin "BLECH".
M-am gândit să încerc să învăț cum să creez scheme de culori pentru web și am găsit o mulțime de informații fascinante despre teoria culorilor. Am citit despre nuanțe, nuanțe, nuanțe, tonuri, saturație și luminozitate, precum și scheme similare, monocromatice, triade, complementare și compuse.
Paleta de culori RGB de bazăCu toate acestea, fără un cadru practic în care să fie introduse aceste informații, am constatat că, la început, nu mi-a fost atât de aproape de a crea un design de site web bine colorat. De fapt, abia după ce am început să construiesc scheme de culori solide prin încercări și erori pure, toate teoriile de culoare pe care le citisem începuseră să aibă sens.
În acest proces, am luat câteva "linii directoare de siguranță" pentru schemele de culori ale site-ului pe care aș vrea să le cunosc de la început. Când începeți pentru prima dată, teoria plină a culorii nu este neapărat ceea ce aveți nevoie în față. Adesea, trebuie să obțineți balonul cu ceva mai puțin teoretic și puțin mai "vopsite prin numere".
În acest tutorial, voi împărtăși cu dvs. șase focuri sigure, "nu pot merge prost", linii directoare pe care le puteți urma pentru a obține o înțelegere fundamentală în lucrul cu culoarea în designul web. Acestea nu sunt reguli, deoarece veți crea mai multe scheme de culori în cariera dvs., care vor merge într-o direcție complet diferită. Mai degrabă, acestea reprezintă un punct de plecare, un ghid de siguranță pentru a supraviețui primele dvs. excursii în lumea design-ului web, fără a se întâlni vreodată în "BLECH".
Unul dintre principiile fundamentale în designul web este acela că indiferent cât timp petreceți să creați un design glorios, rolul său final este de a juca a doua viată cu adevărata stea a spectacolului; continutul. Schema de culori nu ar trebui să facă vreodată designul site-ului "mai tare" decât conținutul pe care îl prezintă. Designul dvs. ar trebui să fie în fundal, ajutând la împingerea conținutului site-ului în prim-plan.
Schema de culori subțiri permite imaginilor să fie punctul de focalizare
Sistemul de culori tare distrage atenția de la imagini. Nu râde, acest lucru se întâmplă cu adevărat pe pisica sălbatică.Un proces foarte comun în designul web este de a crea design-ul însuși în izolare relativă, adesea în software-uri precum Photoshop sau Sketch. Dacă nu aveți niciun exemplu de conținut, poate fi ușor să ajungeți la un design care ar putea arăta grozav prin el însuși și că un client ar putea să iubească bine în formă machetă, dar care este prea distragător pentru vizitatorii site-ului în practică. De fapt, procesul de design web este atât de strâns legat de conținutul pe care multe modele de web de înaltă calitate par toate, dar goale, fără conținut în loc.
Este o idee minunată să începeți prin a stabili un eșantion de tip de conținut pe care vă așteptați să apară în site, fie în software-ul de proiectare, fie direct în cod, apoi proiectând în jurul acestuia. Acest lucru este valabil mai ales în cazul în care fotografiile sau imaginile unui anumit stil trebuie să fie implicate, astfel încât să vă puteți asigura că designul dvs. va arunca armonios cu ei. Imaginați-vă că conținutul site-ului este o persoană unică pentru care trebuie să vă potriviți un costum perfect potrivit.
Există un număr infinit de combinații de culori pe care le puteți alege pentru baza principală și baza de text. Cu toate acestea, recomandarea mea este de a începe prin stăpânirea celei mai ușoare, și aceasta este albă și / sau gri deschis în fundal, împreună cu textul gri închis.
Dacă te uiți la orice selecție de site-uri populare, șabloane sau teme, există un pariu bun, majoritatea dintre ei vor avea exact aceeași bază de text gri închis pe alb sau gri deschis, și asta pentru un motiv bun. Cu această combinație, veți garanta practic că cititorul va putea fi citit și veți permite ca textul și conținutul bazat pe imagine să ajungă în prim-plan.
Cu un exemplu de conținut în parte, elaborați un aspect de bază în tonuri de gri, de exemplu:
În general, ar trebui să evitați să folosiți negru jet pentru text, deoarece griul închis este ușor de citit. O gamă confortabilă este de oriunde # 333333 la # 666666.
Pentru culorile de fundal, pline de culoare albă #FFFFFF este cel mai sigur pariu pentru fundaluri imediat după orice text principal. Pentru alte elemente de fundal puteți merge de oriunde #FFFFFF până în jur #CCCCCC.
Din nou, acestea nu sunt reguli pentru culorile pe care le faceți trebuie sa utilizați, doar linii directoare pe care le știi că puteți începe cu siguranță.
Cele mai obișnuite scheme de culori ale locurilor sunt greșite atunci când se cer mai multe culori diferite. Cu cât folosiți mai multe culori, cu atât mai dificilă este să le țineți sub control. Deci, pentru a începe cu, adăugați o singură culoare în plus față de baza de tonuri de gri, care va fi utilizată în scopul evidențierii unor elemente cum ar fi linkuri, unele titluri, meniuri, butoane și așa mai departe. Culoarea dvs. evidențiată poate fi albastru, verde, roșu sau orice doriți.
Alegeți culoarea evidențierii, introducând mai întâi o cutie deasupra bazei, astfel încât să puteți măsura aspectul culorii în raport cu toate elementele. Apoi, deschideți selectorul de culori și faceți clic în centrul joncțiunii din partea dreaptă sus a hărții de culoare.
Deplasați cursorul în sus și în jos și alegeți o culoare care credeți că va funcționa bine pentru designul dvs..
În acest moment lucrați acum cu trei culori de bază; fundalul, textul și o evidențiere. Poți și ar trebui să folosești mai multe culori în viitor, dar acum gândește-te la asta ca la jonglarea. Lucrați deja cu trei pini de jonglerie, astfel încât să vă simțiți confortabil doar cu aceste trei, și apoi adăugați mai mult în rotație când sunteți încrezători.
Tocmai ați învățat cum să alegeți un "nuanţă"Pe scurt, o nuanță este o culoare de bază .. Când mutați bara de culori în sus și în jos, veți vedea"H"în schimbarea colectorului de culori.
"H" înseamnă nuanță și, odată ce ați ales culoarea dvs. de culori, numărul din această căsuță este nuanțat.
Dacă aveți vreo îndoială asupra cărei culori evidențiați să le utilizați, alegeți albastru. Serios. Albastrul este de multe ori cea mai flexibilă culoare pentru a lucra cu și va potrivi cel mai mare număr de tipuri de situri. Culorile ca purpuriu și galben pot fi foarte plăcute, dar pot deveni și mai rapide, dacă sunt folosite în mod greșit.
Pe de altă parte, poți să faci aproape orice cu albastru ca o culoare de culori și nu poți merge prea departe. Dacă nu sunteți sigur de unde să începeți să învățați sau ce culoare să utilizați într-un proiect, trebuie doar să vă întoarceți pe albastru. Albastrul ales pe care îl alegeți poate fi oriunde de la un albastru maro (nuanța 235) până la o aqua (nuanța 190) și sunteți în siguranță.
Pentru exemplul modelului meu am ales o nuanță de 205. După ce ați stabilit culoarea dvs. evidențiată, continuați-o și adăugați-o la designul dvs. oriunde credeți că este necesar. Dacă utilizați culoarea de evidențiere a butoanelor sau a oricărei zone cu text deasupra acesteia, schimbați și culoarea textului. În acest caz, am schimbat textul pe zonele evidențiate în alb.
Odată ce ați ales culoarea dvs. de culori, părăsiți bara de culori (culoarea) atunci când este din acel punct. Veți avea nevoie de culori suplimentare pentru designul dvs., dar toate vor fi variații ale acelei culori evidențiate deja de dvs. pentru a păstra lucrurile simple.
Pentru a crea variante de culoare, trageți în jurul zonei de hartă a selectorului de culori.
Utilizați aceste tipuri de variante de culoare pentru lucruri precum:
Colțul din dreapta sus al hărții color este terenul cu culori octanice ridicate. Culorile din colțul din dreapta sus sunt ca și mașinile de curse de Formula 1; ele pot face uimitor și sunt foarte atrăgătoare, dar, în general, este nevoie de o mulțime de experiență pentru a le folosi bine. Fără această experiență, acestea pot provoca accidente, deci este mai bine să vă tăiați dinții pe culori care sunt mai tensionate.
De aceea, în cea de-a treia secțiune a acestui tutorial, v-am rugat să faceți clic pe harta culorilor din centrul colțului din dreapta sus înainte de a selecta culoarea dvs. evidențiată, pentru a vă asigura că ați dat startul cu o culoare relativ redusă.
Pentru a ilustra, urmăriți ce se întâmplă dacă modific doar nuanța designului nostru până în prezent, fără a atinge harta de culori.
Totul pare destul de frumos, nu? Cu toate acestea, dacă trag harta de culori până la colțul din dreapta sus, brusc nu este așa de frumos.
Ochii mei! Dacă doriți să vă asigurați că nu aruncați în retină vizitatorii dvs., urmați o indicație generală de a tonifia lucrurile în jos prin șederea din colțul din dreapta sus al hărții color.
În ultimele două secțiuni, ați învățat să aplicați câteva aspecte diferite ale teoriei culorii. Ai învățat cum să lucrezi:
Când trageți în jurul zonei hartă a zonei de selectare a culorii veți vedea schimbarea valorilor "S" și "B", care reprezintă "Saturare" și "strălucire"Veți vedea, de asemenea, că numărul de nuanță rămâne același, deci creați variații de culoare prin modificarea saturației și luminozității culorii originale.
Saturare este cât de viu este exprimată culoarea. De exemplu, gândiți-vă că "cămașa mea a fost saturată de vin roșu vărsat". Pe o selecție tipică a culorii, saturația este determinată de cantitatea de alb care este amestecată cu nuanța de bază. Mai puțin alb, cu atât mai saturată.
Când trageți în dreapta pe harta culorilor, reduceți cantitatea de alb și creșteți astfel saturația, astfel încât valoarea "S" să crească. Când trageți spre stânga către acel colț alb, scădeți saturația, astfel încât valoarea "S" să scadă.
Saturație pe o hartă standard de selectare a culorilorAceastă amestecare de culori albe cu culoarea originală se numește și crearea unui "tentă"Termenul vine din amestecarea vopselelor, unde se amestecă o vopsea albă cu vopsea colorată.
strălucire este cât de mult negru este amestecat în culoarea ta. Mai puțin negru, cu atât mai multă luminozitate.
Când trageți în sus pe hartă, reduceți cantitatea de negru, creșteți luminozitatea, iar valoarea "B" din selectorul de culori crește. Când trageți în jos creșteți valoarea negru, iar valoarea "B" crește.
Amestecarea neagră cu nuanța originală se numește și crearea unui "umbră"Acest lucru vine și din amestecarea vopselei, unde vopseaua neagră este amestecată cu o vopsea colorată.
Când amesteci gri în culoarea ta se numește crearea unui "ton"Când vă deplasați din colțul din dreapta sus, așa cum am făcut mai sus, scădeți atât saturația, cât și luminozitatea, care adaugă atât alb, cât și negru (gri), creând astfel un sunet, deci, în orice moment, atât saturația, cât și luminozitatea sunt mai mici decât 100%, asta e un ton.
Din nou, acest termen vine din amestecarea vopselelor, unde se creează o vopsea gri și apoi se amestecă cu o vopsea colorată. Aceasta este, de asemenea, în cazul în care fraza la "tonul lucrurilor jos"vine de la?
A "monocromatic"schema de culori este locul în care luați o nuanță de bază și extindeți-l cu tints, nuanțe și tonuri. Tocmai ați învățat ce înseamnă toți acești termeni într-un cadru practic. Așadar, prin alegerea unei culori de evidențiere și crearea de variante pe aceasta, ați creat de fapt o schemă de culori monocromatică.
Continuați să practicați schemele de culori monocromatice pe o bază de gri, până când vă simțiți cu adevărat încrezători. Încercați să le creați cu diferite nuanțe ca culoarea dvs. evidențiată, experimentând pentru a vedea cum modifică setările de saturație și luminozitate pe care le puteți utiliza.
Când vă simțiți confortabil, treceți la adăugarea unei culori suplimentare. Vă recomand să încercați portocaliu și albastru la prima dvs. ieșire, deoarece ei tind să fie cel mai simplu duo cu care să lucrați. Apoi încercați verde și albastru, care din experiența mea este al doilea cel mai ușor. Ambele combine au tendința de a fi un succes cu clienții și clienții.
Cel mai bun lucru absolut pe care îl puteți face pentru a vă propune înțelegerea schemelor de culori pentru web este să vă atrageți o extensie de browser de tip sampler color precum Colorzilla și să o utilizați pentru a începe să examinați modul în care designerii experimentați o fac. Pe măsură ce navigați pe internet, când vedeți o schemă de culori care arată foarte bine ruperea eșantionului de culori și aruncați o privire asupra culorilor folosite pe pagină. Pentru fiecare nuanță eșantionați, aruncați o privire asupra nivelurilor de saturație și luminozitate care funcționează cel mai bine cu aceasta. Acordați atenție, de asemenea, culorilor care lucrează în combinație cu altele.
Dacă aveți îndoieli, vă puteți întoarce mereu la liniile directoare privind siguranța și veți fi în siguranță de la "BLECH" de aici.
Accentsconagua