Tutorial Culori

Nu stiu daca toti membrii juniori stiu ce inseamna ground color sau culori complementare si cum se obtin ele. De fapt nici eu nu stiam asta(pana nu demult). Am facut un fel de tutorial. Daca am scapat ceva rog sa ma corectati sau sa adaugati cate ceva aici.

Cu siguranta ati facut un sait. Si dupa ce ai lucrat la el zi si noapte constatati: “ceva nu e bine, parca ii lipseste sare si piper”. In aceasta discutie o sa incerc sa incerc sa va incerc sa va implicati(iar ma balbai) intr un schimb de experientza in ceea ce priveste teoria culorilor. Acest topic nu este facut de un profesionist, este o selectionare a materielelor de pe web in ceea ce priveste teoria culorilor. Sper sa vina in ajutor incepatorilor.

Ce este culoarea?

Nu este altceva decat o senzatie produsa de incidenta luminii pe retina ochiului. Oscilatia unor particule in soare se transmite spatial pana ajunge in retina ochiului tau, unde produce o senzatie. In functie de calitatea razelor de lumina, de reflexia si refractia la trecerea in alte medii, obtinem senzatii diferite, pe care le denumim – culori. Ochiul uman poate detecta doar radiatii cu lungimile de unda intre 400 si 700 nm, ceea ce noi numim spectrul vizibil. Coincidenta a facut ca omul sa perceapa toate senzatiile mai intai vizual si apoi auditiv si tactil. Deaceea este foarte important ca orice web designer sa aiba cunostinte cel putin minime de teoria culorilor. In functie de paleta coloristica pe care o va folosi la saitul sau, vizitatorii isi vor forma o impresie buna sau mai putin buna despre saitul respectiv. Uitati-va la lucrurile zi de zi pe care le intalniti> saituri, poze, locuri, landscapeuri. Nu v-ati gandit niciodata de ce va creaza o impresie placuta?

Ce este un colorwheel?
http://www.postimage.org/gx2kOm1S.gif
Primul colorwheel a fost facut de Isaac Newton in 1666. Este o reprezentare vizuala a culorilor, asezate in concordanta cu relatia lor cromatica. Se obtine pozitionand culorile primare(albastru/rosu/galben) in varfurile unui triunghi.
Cercul circumscris acestui triunghi echilateral va contine culori secundare si tertiare de tranzitie(dar depre asta mai jos). In acelasi timp poate fi un instrument folositor pentru combinarea de culori si creare de palete pentru orice(inclusiv saituri web). In timp au aparut diferite variatii, insa cea mai sigura este varianta clasica cu 12 culori. Deasemenea cercul de culori poate fi impartit in 6 culori calde si 6 reci. Culorile calde sunt vii si energetice si tind sa avanseze in spatiu. Culorile reci ne creaza o impresie de calm si liniste. Albul si negrul sunt considerate culori neutre, deci nu au fost introduse in colorwheel.

Clasificare culori


n functie de amplasare putem stabili niste reguli intre anumite culori. Aceste relatii cromatice va vor usura comunicarea cu alti designeri la locul de munca si va vor permite identificarea acelor tipuri de culori care sunt triviale pentru saitul dvstra.

1. Culorile primare - sunt culorile care nu pot fi create combinand alte culori, se mai numesc culori de baza.
2. Culorile secundare - sunt culorile obtinute prin amestecul a 2 culori primare.
3. Culorile tertiare - sunt culori obtinute prin amestecul dintre culori primare si secundare.
4. Culorile complementare - sunt culori localizate in sens opus pe colorwheel.
5. Culorile analogice – culori localizate in vecinatate pe colorwheel.

Relatii cromatice


1. Relatii monocromatice: culorile sunt o varietate ale aceleiasi culori.
2. Relatii complementare: culorile sunt situate opus pe colorwheel.
3. Split-complementary: o culoare plus alte doua situate la distanta egala fata de complement.
4. Relatii dublu complementare: 2 seturi de culori complementare in perechi(afecteaza contrastul compozitiei).
5. Relatii analogice: culori localizate adiacent pe colorwheel.
6. Relatii triade: 3 seturi pozitionate echidistant.\
http://www.postimage.org/gx2kLgtJ.jpg
http://www.postimage.org/gx2kLxWJ.jpg
Contrast

Orice reprezentare vizuala implica relatii gen figura-background. Aceste relatii evidentiaza nivelul de contrast: cu cat mai contrastant este un obiect fata de fundal => cu atat mai bine va fi remarcat. O reprezentare text ar trebui sa aiba de preferinta cel putin 80% contrast. Contrastul unei culori depinde de 3 parametri:
• Nume culoare.
Sau i se mai spune hue, este denumirea actuala a imaginii. De exemplu rosu, verde, albastru.
• Valoare.
Valoarea arata cat de intunecata sau de luminata este culoarea. Are trei nivele: deschis, medium si inchis. Aspectul poate fi afectat prin variatia diverselor valori contrastante. De exemplu cand folosesti un element al paginii care este sa zicem albastru medium, putem sa l punem in evidenta prin folosirea unor culori deschise pe fundal si in vecinatate. Culorile inchise confera greutate/sobrietate. Culorile deschise inspira vivacitate si comoditate.
• Saturatie.
Masoara intensitatea sau puritatea unei culori.

Cand creezi o compozitie, faci un amalgam de culori, iar vizualizatorul va avea o impresie finala. Elementul dominant al lucrarii va fi numit elementul contrastant sau valoarea dominanta. Astfel compozitiile pot fi impartite in cele cu contrast mare/mic/medium, sau valori deschise/medii/inchise.


Proportii si intensitate

Daca avem un sait si folosim la el mai multe culori atunci obtinem un mix vizual. Acesta depinde de proportiile suprafetelor alocate.
-culoarea cu suprafata cea mai mare se numeste ground color.
-suprafetele mai mici se numesc culori subdominante.
-culorile de accent au o suprafata relativ mica, dar ofera contrast prin intensitate si saturatie.
-mici suprafete de culori deschise pe un background intunecat creaza accent.
-alternarea culorilor in intensitate(decat proportii) duce la perceptii diferite ale aceleiasi compozitii.

Selectarea de culori

Culorile joaca un rol deosebit in web design, deaceea un web designer profesionist ar trebui sa aiba cunostinte cel putin minime despre teoria culorilor. Asta ajuta nu numai la setarea “starii” saitului dar deasemenea pot fi folosite pentru a creste usabilitatea saitului prin indrumarea ochiului observatorului.

Multe scheme de culori sunt posibile. Designerul poate folosi o schema B&W cu 2 sau 3 culori, una monocromatica, scheme complementare etc. Insa una din intrebarile pe care trebuie sa si le puna atunci cand face un sait este “ce mood trebuie sa aiba saitul meu?”. Adica ce senzatie trebuie sa produca schema de culori folosita. Daca de exemplu clientul vrea sa aiba un aspect sigur/conservativ, atunci culoarea potrivita este un albastru - culoare rece care inspira siguranta.

Ajutor

Chiar daca este creat perfect dpdv al continutului, un sait are nevoie de un aspect placut, pentru ca oamenii percep experientza mai intai vizual, si mai apoi rational. Sa zicem ca vrem sa cream un sait pt o companie de transport aerian. Tema sa coloristica trebuie sa reprezinte imaginea companiei, vizitatorul nu trebuie sa se indoiasca nici macar pt o clipa unde se afla el.
Primul lucru pe care il fac(sau cel putin ar trebui sa l fac) este identificarea termenilor din campul semantic si adiacent domeniului de ocupatie al companiei : avioane>zbor,cer,oameni,soare,vederi de sus, transport, pasari... Dupa ce am facut aceasta schema, putem sa asociem fiecarui element din tabel o culoare. Dupa ce am stabilit schema de culori, alegem culoarea/ile dominanta, culorile analogice, cele complementare, contrastante… Desigur la mijloc va fi si experimentare> multe incercari pana veti ajunge la o tema de culori care sa ti placa. Trebuie sa stii sigur ce elemente din sait carui tip de culori le vor corespunde.
Daca nu vreti sa pierdeti atata timp, puteti gasi o paleta de culori predefinita pe Kuler - proiect iesit de ceva timp din laboratoarele celor de la adobe. Este un produs accesibil, menit sa usureze gasirea unei palete de culori pentru aproape orice. Toate lucrarile sunt publice. Cautarea este facilitata de tagurile asociate fiecarei palete, iar daca doriti puteti sa va faceti propria paleta de culori pe care sa o importati in Photoshop sau Illustrator. De multe ori este greu sa gasesti o tema predefinita folosind rationamentul de mai sus. In acest caz nu ramane decat sa gasesti una la placul tau solo sau folosindu-te de kuler. Un alt sait complex este colourlovers.com . Fondatorii acestui sait isi propun o resursa de culori accesibila oricui. Aici gasesti orice, incepand de la paleta de culori pentru Gioconda lui Davinci si terminand cu ultimele trenduri in materie de culori pe web. Si mai mult, paletele de pe sait pot fi importate oriunde.