Creați o schemă de culori. Cum să creezi rapid o paletă de culori: un truc simplu. Pași pentru crearea propriului kit cu tonurile de culoare necesare
07.06.16 13472Alegerea culorilor - una dintre cele mai importante etapeîn procesul de creare a unui design bun.
Pentru a vă ușura sarcina, am decis să alcătuim o selecție constând din cele mai bune servicii pentru a crea scheme de culori. Ele vă vor ajuta să economisiți timp și să obțineți totuși rezultate decente.
01. Adobe Color CC
Adobe și-a redenumit proiectul Kuler în Color
Este posibil să fiți familiarizat cu acest instrument după numele său anterior - Adobe Kuler. Cu toate acestea, Adobe a redenumit recent una dintre aplicațiile sale web populare în Adobe Color CC.
Vă permite să selectați, să creați și să salvați diferite scheme de culori, fiecare dintre acestea putând conține până la cinci culori. Instrumentul este disponibil atât în versiunea de browser, cât și în versiunea desktop. Dacă utilizați versiunea desktop, veți putea exporta schema de culori direct în Photoshop, Illustrator și InDesign.
02. Mudcube Color Sphere
Dacă nu ești sigur de schema ta de culori, Mudcude are propria galerie de elemente gata făcute
Mudcube Color Sphere este o resursă în miniatură foarte utilă pentru designeri, care nu numai că oferă coduri hexadecimale pentru culorile selectate, dar vă permite și să creați scheme de culori pentru propriile proiecte. De asemenea, merită remarcat faptul că Mudcube are propria galerie de resurse gata făcute care pot fi și ele utilizate.
03. Verifică-mi culorile
Check my Colors este conceput special pentru a evalua și selecta combinația de culori de fundal și prim-plan pentru toate elementele DOM. Și, de asemenea, pentru a afla dacă elementele sunt suficient de armonioase între ele. Toate testele se bazează pe algoritmi recomandați de World Wide Web Consorțiu ( W3C).
04. Aplicația Color
Aplicația vă va ajuta să aflați valorile RGB, HEX și HSLA ale culorilor selectate
Instrumentul iOS Aplicația Color vă va permite să determinați ușor și simplu culorile folosind o paletă mare de culori. Vă permite să aflați valorile RGB, HEX și HSLA ale culorilor, precum și să vă creați propriile scheme de culori pentru site.
05. Vânător de culoare
Color Hunter generează o schemă de culori bazată pe imaginea selectată
Acesta este un instrument foarte convenabil, mai ales dacă trebuie să găsiți o anumită culoare. Selectați o imagine și încărcați-o în Color Hunter. Instrumentul va crea paleta de culori pe baza imaginii selectate. Aceasta este o metodă excelentă pentru a vă crea propriile scheme de culori.
06.TinEye
Dacă trebuie să obțineți o anumită culoare, introduceți doar valoarea HEX în adresa URL
Acest site folosește o bază de date de 10 milioane de imagini disponibile gratuit. acord de licențiere Creative Commons, pe care creatorii l-au selectat cu atenție de pe Flickr. Acestea pot fi folosite pentru a genera scheme de culori adecvate.
07. Culoare
Aplicație web în miniatură convenabilă. Treceți mouse-ul peste ecran și selectați culoarea dorită, apoi derulați puțin pentru a selecta nuanța. După care instrumentul va produce toate codurile HEX necesare, pe care le puteți utiliza în propriile proiecte. Unul dintre cele mai simple instrumente de utilizat.
08. SpyColor.com
Generator gratuit de scheme de culori care oferă informații despre culoare și, de asemenea, vă permite să le convertiți în orice schemă ( RGB, CMYK si altii ). Disponibil aici diverse formate scheme de culori, inclusiv proces, monocrom și altele.
09.Inspirație pentru design
Pe Designspiration, puteți alege până la cinci nuanțe cu o paletă convenabilă pentru întreaga pagină, care face ușor să găsiți exact schemele de culori HTML pe care le căutați. Site-ul va genera apoi o pagină cu toate imaginile din baza de date care folosesc o combinație de culori similară. De asemenea, vor fi furnizate valori HEX pe care le puteți utiliza în propriile proiecte. Și imaginile pot fi salvate în colecții de pe site.
10.ColorExplorer
Unul dintre cele mai sofisticate instrumente web care oferă multe caracteristici legate de design, personalizare și analiza schemelor de culori. Iată câteva instrumente care vă ajută să determinați Valabilitatea WCAG a schemelor de culoriși, de asemenea, generați propriile palete de culori.
11. Generator de scheme de culori hexagonale
Un mic instrument la îndemână pentru a genera o combinație de culori bazată pe o nuanță selectată. Introduceți valoarea Hex a culorii, iar instrumentul va oferi un set de culori potrivite pe care le puteți utiliza împreună cu cea principală.
12. Iubitorii de CULOARE
COLOURlovers este o comunitate pentru partajarea schemelor de culori. Aici vă puteți inspira din seturile de culori ale altor utilizatori, precum și să le creați și să le partajați pe ale dvs.
13. Designer de scheme de culori
Acest instrument online oferă moduri interesante generând scheme de culori, permițându-vă să le reglați luminozitatea și să reglați contrastul. Aici puteți crea mai multe populare modele matematice scheme de culori, inclusiv monocrom.
14. COPASO
Unul dintre instrumentele de pe site-ul COLOURlovers. Dar COPASO merită o atenție deosebită, deoarece este o soluție all-in-one incredibilă și vă permite să generați cu ușurință scheme de culori gata făcute pentru site. Există o varietate de instrumente de potrivire a culorilor disponibile aici, toate într-un mod convenabil și ușor de utilizat interfață simplă. În plus, puteți adăuga note la palete, puteți încărca imagini etc.
15. Colormod
Colormod reprezintă software, care vă permite să selectați culori individuale din zona widget, indiferent dacă utilizați un Mac sau Konfabulator pe Windows. Acesta nu este un instrument foarte simplu pentru a lucra cu paletele de culori, dar vă va ajuta să determinați rapid și ușor culorile, fără a fi nevoie să descărcați programe grele.
16. ColorZilla
ColorZilla este disponibil atât pentru Chrome, cât și pentru Firefox
Acest proiect a început ca un plugin pentru Firefox, dar astăzi este disponibil și pentru Google Chrome. ColorZilla este o extensie care include mai multe instrumente concepute pentru a lucra cu culoarea, inclusiv o paletă, un generator de gradient CSS și un pipetă.
17. Colormunki
Un instrument online convenabil pentru selectarea schemelor de culori de la creatorii Colormunki. Vă permite să creați cu ușurință palete de culori atrăgătoare din mostre pe bază de Pantone, folosind mai multe tehnici.
18.colr.org
Colr.org vă permite să setați gama de culori a oricărei imagini
Acest instrument permite analiza detaliată a culorilor imaginii, care este de obicei automatizată în alte instrumente. Acest lucru vă va permite să alegeți cea mai potrivită culoare. Vă recomandăm să verificați acest instrument, deși interfața sa nu este la fel de sofisticată ca alte aplicații.
19. ColourGrab
Acest instrument la îndemână creează palete de culori din orice imagine. Introduceți URL-ul imaginii pe care doriți să o analizați, iar serviciul va genera automat un grafic 3D cu informații despre culorile folosite. Deși această aplicație nu este în întregime potrivită pentru alegerea unei scheme de culori pentru un site web, poate fi folosită pentru a studia imaginile și caracteristicile lor de culoare.
20.ColorBlender
ColorBlender generează o paletă de cinci culori potrivite
Unul dintre cele mai simple instrumente care vă permite să reglați culoarea și să obțineți cinci culori care se combină între ele în timp real. Paleta generată poate fi descărcată în Photoshop sau Illustrator ca fișier EPS.
21. GrayBit
GrayBit vă permite să analizați site-urile web pentru a înțelege cum ar arăta acestea în tonuri de gri
Acest instrument vă va ajuta să vedeți cum arată site-ul dvs. în tonuri de gri. Servicii grozave, care vă va permite să identificați zonele care sunt problematice în contrast.
22. COLRD
Un instrument care poate fi folosit ca sursă de inspirație sau pentru a împărtăși scheme de culori. Desigur, această resursă nu va ajuta la generarea schemelor, dar cu siguranță ar trebui să țineți cont de ea.
23. Spectrul Shutterstock
Designul eficient al site-ului web este de neconceput fără alegerea unei scheme de culori. Rămâne să ne dai seama cum să faci asta.
Pentru unele proiecte, este posibil să fi ales deja câteva culori care să se potrivească cu logo-ul sau paleta mărcii și îți construiești site-ul în limitele acestor constrângeri. Alții sunt încă doar schițe. Există și cele care au nevoie de modificări minore care pot face site-ul mai frumos și mai convenabil.
Fie că doriți să vă faceți munca mai ușoară și mai rapidă, fie că vă construiți un site web pentru prima dată, aceste instrumente vă vor ajuta să găsiți o soluție.
Sa incepem cu scurta introducereîn teoria culorilor.
Mai jos veți găsi 19 resurse care vă vor ajuta să alegeți o paletă de culori pentru site-ul dvs.
Pregătirea
Ai nevoie de inspirație?
1.
BrandColors arată cum mărcile de top folosesc culoarea pentru a-și diferenția afacerile, a-și spune poveștile și a-și comunica valorile. Puteți vedea lista companiilor, organizatii non-profitși startup-uri în ordine alfabetică sau prin căutare găsiți marca care vă interesează.
Căutați o paletă gata făcută?
2.
Acesta este un forum de design pentru palete de culori cu aproape 2.000.000 de opțiuni trimise de utilizatori. Puteți descărca o paletă care conține culoare specificăși citiți ceea ce scriu designerii. De regulă, pentru o combinație sunt date mai multe opțiuni de intensitate diferită.
Paleta este însoțită de nume grăitoare: Storm in the Whitsundays (Arhipelagul Pacificului în Marea Coralilor), Twilight in the Whitsundays, Whitsunday Island
3.
Această resursă permite utilizatorilor să creeze și să încarce propriile scheme de culori. Le puteți filtra după dată, evaluare și numărul de descărcări sau puteți căuta după cuvinte cheie.
4.
În ColoRotate, veți găsi o bibliotecă de scheme de culori pe care le puteți răsfoi, selecta și modifica. Un instrument special de culoare 3D vă va ajuta să vă creați propria paletă pe baza celei găsite. Schema de culori pe care o creați poate fi aplicată imediat în PhotoShop sau Fireworks prin instalarea pluginului ColorRotate sau a aplicației iPad.
Conform cerințelor mărcii
Ce se întâmplă dacă aveți deja imagini, logo-uri sau cerințe de marcă care trebuie îndeplinite?
1.
Acest site nu este la fel de bogat în funcții ca unele din această listă, dar face o treabă excelentă pentru ceea ce a fost conceput: cercetarea unei anumite culori. Doar încărcați o imagine și Color Hunter va crea o paletă bazată pe aceasta. Acest metodă grozavă atingeți armonia între imagini și culorile principale ale site-ului. În plus, aici puteți aranja schema de culori a site-ului care vă place.
2.
Pictaculous face palete din fotografii. Tot ce trebuie să faceți este să încărcați o fotografie pentru a obține culorile potrivite cu ea. Resursa va oferi și palete gata făcute care vi se vor potrivi.
3.
Acest instrument a fost cunoscut sub numele de Adobe Kuler și a fost conceput pentru compararea culorilor. Acum este un sistem complet de creare a paletelor care vă permite să încercați, să comparați și să salvați combinații de culori. Puteți selecta tipul de paletă și puteți crea scheme cu cinci culori automat sau folosind setări manuale.
4.
Paletton accelerează procesul de creare a paletei. Trebuie să alegeți tipul de schemă: mono, compus, triad, tetrad, înrudit, înrudit-contrast. Odată ce schimbați o culoare, celelalte se vor ajusta automat.
5.
Color Spire construiește și o paletă bazată pe o singură culoare. Alegeți nuanța originală și obțineți opțiuni pentru schemele care se potrivesc cu ea. De asemenea, puteți vedea o previzualizare a modului în care arată paleta selectată pe site.
6.
Acest plugin Chrome vă ajută să armonizați culorile, să vă adaptați la daltonism și să identificați codurile HEX. Paletele de culori pot fi exportate direct în Illustrator, PhotoShop și CoIRD.com.
7.
Resursa vă permite să vă manipulați propria paletă de culori selectând și adăugând nuanțe. Ca rezultat, creați rapid și ușor o nouă diagramă bazată pe una existentă.
8.
Acest instrument selectează culorile care se potrivesc cu ale tale. Este puțin mai de bază decât celelalte resurse de pe această listă. Trebuie să introduceți codul HEX al culorii în linie sau să îl selectați din spectrul prezentat sub forma unei roți. Generatorul produce 3 culori care se potrivesc cu ale tale și le oferă coduri HEX.
Creează-ți propria culoare
Multe dintre resursele din această listă presupun că aveți culoarea originală. Dacă nu este nevoie să îndepliniți cerințele mărcii și BrandColors nu a ajutat la alegere, puteți începe cu schițe.
1.
Această aplicație iOS vă ajută să alegeți dintre mai multe culori care sunt plasate una lângă alta distanta scurta, care este mult mai convenabil decât reprezentarea în gradient, cercuri și spectre. Grilele mari de culoare vă permit să utilizați întregul ecran (ceea ce este deosebit de valoros pentru proprietari iPad Pro). Aplicația vă permite să creați mostre de culoare, să găsiți valori RGB, HEX și HSLA și să creați palete din schițe.
3. Culoare
În Culoare din HailPixel, nu poți să nu te decizi asupra unei culori. Vei înțelege exact ce vrei și vei primi codul HEX pentru nuanță.
Mișcați mouse-ul sau gestul și culoarea se schimbă puțin de fiecare dată. Arată ca o sferă de culoare, însoțind în mod constant culorile cu coduri HEX. Dacă vă deplasați la stânga și la dreapta pe ecran, culoarea se va schimba, iar în sus și în jos saturația se va schimba.
Obțineți codul de culoare
Dacă ai văzut o culoare undeva și vrei să-i știi codul și numele, aceste resurse sunt pentru tine.
1.
SpyColor va oferi informații despre orice culoare, inclusiv coduri Hex, RGB, CMYK și alte coduri și va arăta o gamă de modele pentru fiecare nuanță, inclusiv complementare, divizate-complementare, proces, contrast și analog.
2.
Culoare HTML Codes găsește codul HEX pentru culorile din imagine. Selectați o imagine, o deschideți pentru vizualizare și obțineți codul de culoare trecând cu mouse-ul peste ea.
Testează-ți paleta
După ce ați creat o schemă de culori, doriți să vă asigurați că este eficientă.
Verificați culorile mele verifică culorile din prim-plan și de fundal pentru a îndeplini cerințele de contrast pentru cei cu o vedere anormală a culorilor. Dacă doriți să vă asigurați că site-ul dvs. este prietenos cu daltonii sau doriți să obțineți combinații de culori care funcționează și sunt intuitive din perspectiva UX, această resursă este indispensabilă. Este suficient să introduceți adresa site-ului web pentru a vă familiariza cu raportul după aspectul său.
Aici puteți alege până la 5 nuanțe dintr-o paletă imensă și puteți obține imagini care au o combinație de culori similară și sunt însoțite de coduri HEX. Imaginile pot fi salvate pe site sau descărcate.
Concluzie
Crearea unei palete de culori pentru un site web este un meșteșug la intersecția artei și științei. Aceste resurse vă vor ajuta să ajungeți rapid și ușor la o experiență vizuală care arată grozav și funcționează bine.
În acest tutorial, vom învăța cum să luăm mostre de culoare dintr-o imagine și să creăm seturi ale acestora pe care le puteți utiliza ulterior, mai ales când lucrați cu diverși clienți, fiecare dintre acestea preferând anumite culori pentru un proiect diferit sau atunci când pur și simplu doriți să vă creați propria colecție de nuanțe de culoare.
Unul dintre lucrurile mele preferate este să fotografiez peisaje și apoi să salvez culorile individuale din fotografii ca seturi de culori. La urma urmei, este aproape imposibil să o învingi pe Mama Natură când vine vorba de combinații de culori armonioase. În acest tutorial vom face totul exact așa cum tocmai am descris - luați mostre de culoare dintr-o fotografie, plasați-le în selectorul de culori și apoi salvați-le ca un set separat de mostre de culoare. Vom analiza, de asemenea, cum să restabilim culorile implicite originale ale programului când terminăm și cum să încărcăm setul creat când avem nevoie de el!
Mai jos este o fotografie din care voi lua nuanțe individuale de culoare. Vreau să creez un set de mostre de culoare numite „Frunze de toamnă”, așa că această fotografie ar fi perfectă:
Imagine cu frunziș colorat de toamnă
La sfârșitul tutorialului, vom analiza un exemplu despre cum puteți folosi culorile din setul creat de noi pentru a crea un aspect complet diferit. Să începem.
Pasul 1: Eliminați tonurile de culoare existente din panoul Eșantioane
Pentru a crea propriul set de nuanțe de culoare, să eliminăm mai întâi toate mostrele de nuanțe de culoare prezentate în panoul Mostre. Nu vă faceți griji, acestea nu vor fi șterse definitiv, așa cum vom trata mai târziu. Comutați la panoul Eșantioane, care în mod implicit este grupat împreună cu panourile Culoare și Stiluri. Dacă nu ați încărcat anterior alte seturi de culori, panoul Eșantioane va afișa culorile care au fost setate inițial în program în mod implicit:
Panoul Mostre afișează o selecție de mostre de culoare implicite
Din pacate, programul Photoshop Nu există nicio comandă Remove All Color Swatches, așa că pentru a elimina toate mostrele de culoare afișate în panoul Swatches, va trebui să ștergem manual fiecare eșantion de culoare. Pentru a face acest lucru, în timp ce apăsați Tasta Alt(Win) / Opțiune (Mac) plasați cursorul peste eșantionul de culoare din stânga colțul de sus (« RGB roșu"). Veți vedea cum cursorul va lua forma unei foarfece:
Tasta Alt apăsată(Câștig)/Opțiune(Mac) Treceți mouse-ul peste specimenul roșu din colțul din stânga sus. Cursorsoarecilaacestvoi acceptaformăfoarfece
Apoi, ținând apăsată în continuare tasta Alt/Opțiune, faceți clic pe eșantionul de culoare pentru al șterge. Continuați să faceți clic pe alte mostre de culoare pentru a le elimina. Va trebui să faceți clic pe total De 122 de ori pentru a elimina toate mostrele, dar în funcție de cât de repede faceți clic, nu ar trebui să vă ia mult. Când ați terminat de șters mostrele de nuanțe, panoul Mostre va fi complet gol:
După ștergerea tuturor mostrelor de culoare implicite, panoul Mostre este gol
Pasul 2: Selectați instrumentul Eyedropper
Deschideți în program Imagine Photoshop, de unde doriți să luați mostre de culoare (dacă nu este deja deschis), apoi din bara de instrumente, selectați instrumentul Pipetă sau apăsați I pentru a selecție rapidă instrument:
Alegeinstrument « Pipetă»
Pasul 3: Obțineți primul eșantion de culoare din imagine
După ce ați selectat instrumentul Eyedropper, mutați cursorul mouse-ului peste zona în care doriți să eșantionați culoarea, apoi faceți clic pentru a eșantiona culoarea. Vreau să demonstrez culoarea galben strălucitor de la una dintre frunzele din partea de sus a imaginii mele ca prima culoare a setului meu viitor:
Luați o probă de culoare galben strălucitor de la una dintre frunze
Puteți spune exact ce culoare ați obținut dintr-o imagine uitându-vă la pictograma eșantionului de culoare primară din bara de instrumente:
Culoarea rezultată este afișată în bara de instrumente ca culoare primară
Notă: s-ar putea să vi se pară mai ușor să colectați culori ținând apăsat butonul mouse-ului în timp ce mutați cursorul în interiorul imaginii (cu Instrumentul Eyedropper selectat). Culoarea pe care aterizează cursorul va apărea în bara de instrumente ca culoare primară și se va schimba continuu pe măsură ce mișcați mouse-ul, oferindu-vă posibilitatea de a previzualizare culori înainte de a primi o probă. Aceasta metoda Mi se pare mai convenabilă decât metoda de a face clic pe butonul mouse-ului și abia apoi să vedem ce eșantion am primit. Eliberați butonul mouse-ului când găsiți o culoare care se potrivește setului dvs. de mostre de culoare.
Pasul 4: Adăugați culoare în panoul de mostre
Odată ce ați luat primul eșantion de culoare, mutați cursorul mouse-ului într-o zonă goală din panoul Mostre. Veți vedea cum cursorul se schimbă în forma unei găleți de vopsea. Faceți clic oriunde în zona goală pentru a converti culoarea rezultată într-un eșantion de culoare. Această acțiune va deschide o casetă de dialog care vă va cere să introduceți un nume pentru specimenul de culoare. Dacă creați un set de mostre de culoare pentru un client care utilizează și, prin urmare, necesită anumite culori Pantone, este o idee bună să numiți specimenul de culoare o culoare care să se potrivească cu diagrama de culori Pantone (de exemplu, Pantone Yellow 012 C). creați un set de mostre de culoare pentru uz propriu, apoi dați probei un nume la alegere. Voi numi specimenul meu de culoare „Galben”:
Dă-i noului tău specimen de culoare un nume semnificativ sau poți alege să nu-i denumești deloc.
De fapt, nu este necesar să denumești mostrele de culoare, așa că dacă numele mostrelor nu contează pentru tine, atunci lasă numele pe care programul le oferă implicit. Faceți clic pe OK pentru a închide caseta de dialog după ce ați dat un nume specimenului de culoare. Dacă mă uit la panoul Mostre acum, pot vedea că primul meu eșantion de culoare a fost adăugat acolo:
Eșantionul de culoare galben creat de mine apare în panoul Mostre.
Pasul 5: Continuați să colectați culori și să creați mostre de culoare din ele
Continuați să colectați culori din imaginea dvs. și apoi faceți clic într-o zonă goală a panoului Mostre pentru a le salva ca mostre de culoare, dându-le nume dacă este necesar. Am colectat încă 10 culori din imagine și am ajuns să am 11 mostre noi în panoul Mostre. Puteți crea oricâte mostre de culoare doriți:
Pasul 6: Salvați mostrele de culoare ca set separat
Când ați terminat de adăugat culori la panoul Eșantioane și sunteți gata să le salvați ca un set separat de mostre, faceți clic pe săgeata mică din dreapta din colțul din dreapta sus al panoului Eșantioane pentru a afișa meniul panoului:
Faceți clic pe săgeata mică din dreapta pentru a afișa meniul panoului Eșantioane
Apoi, din meniul care apare, selectați „Salvare mostre”:
Introduceți un nume pentru noul set de mostre
Apoi, faceți clic pe butonul „Salvare”. » (Salvare) pentru a salva un set de mostre. Programul va salva setul de mostre de culoare în aceeași locație ca și celelalte seturi de mostre încărcate în program în mod implicit, astfel încât data viitoare nu va trebui să căutați pe tot computerul folderul dorit, ori de câte ori doriți să accesați oricare dintre seturile de mostre create, pe care le vom analiza în continuare.
Pasul 7: Restaurați mostrele de culoare implicite
Am luat mai multe culori dintr-o imagine, am creat mostre de culoare din ele și am salvat aceste mostre ca separat set nou mostre. Dar dacă vrem să reutilizam mostrele de culoare implicite pe care le-am eliminat la începutul tutorialului? Tot ce trebuie să facem este să facem clic pe săgeata mică din dreapta din colțul din dreapta sus al panoului Swatches din nou pentru a afișa din nou meniul panoului și selectați comanda Restaurare Swatches din lista care apare » ( Resetați mostrele):
Pentru a returna mostrele de culoare implicite în panou, selectați comanda „Restaurare mostre”.
În caseta de dialog corespunzătoare, programul vă va întreba dacă trebuie să înlocuiți mostrele de culoare curente cu cele implicite. Puteți fie să confirmați că doriți să înlocuiți mostrele de culoare curente cu cele implicite făcând clic pe OK, fie puteți adăuga mostrele implicite la mostrele curente fără a le șterge făcând clic pe butonul Adăugați. Voi face clic pe OK și voi înlocui setul meu de mostre Autumn Leaves cu mostrele de culoare implicite:
Faceți clic pe OK pentru a restabili mostrele de culoare implicite
După această acțiune, mostrele de culoare implicite au apărut din nou în panoul Mostre:
Mostrele de culoare implicite sunt din nou în panoul Mostre
Pasul 8: Încărcați propriul set de mostre de culoare
Data viitoare când doriți să utilizați setul de mostre de culoare pe care l-ați creat, tot ce trebuie să faceți este să faceți clic din nou pe săgeata din dreapta pentru a afișa meniul panoului Mostre. Dacă te uiți în partea de jos a meniului, vei vedea o listă seturi suplimentare mostre de culoare care sunt în acest moment poate fi descărcat. Cele mai multe dintre aceste kituri vin cu Photoshop din cutie, dar deoarece setul nostru de mostre este salvat în același loc ca și celelalte kituri, îl veți putea vedea și în lista de kituri. Trebuie doar să faceți clic pe numele setului dvs. pentru a-l selecta. Programul plasează seturi de mostre de culoare în ordine alfabetică, astfel încât setul meu de frunze de toamnă este al doilea de sus:
Veți găsi toate seturile de mostre de culoare, inclusiv pe ale dvs., în meniul panoului Mostre. ClicpeNumerecrutarePentrua luialegere
Încă o dată, programul vă va întreba dacă doriți să înlocuiți seturile existente cu altele noi sau să adăugați noi mostre de culoare la mostrele deja aflate în panou. Voi face clic pe OK pentru a înlocui mostrele implicite cu mostrele create din setul Autumn Leaves:
Faceți clic pe butonul Înlocuire pentru a înlocui mostrele implicite din panou cu mostre de culoare noi
Această acțiune va încărca noile mele mostre de culoare din setul Autumn Leaves în panoul Mostre, gata pentru utilizare ulterioară:
Setul meu de mostre de culoare a fost încărcat în panoul Mostre
Pasul 9: Selectați o nouă culoare primară din panoul de mostre
Marele avantaj al folosirii mostrelor de culoare este că acestea sunt disponibile în avans culorile date. Aceasta înseamnă că acestea sunt culorile pe care le-am ales deja (sau culorile pe care programul le-a ales pentru noi, dacă lucrați cu mostrele implicite) și nu trebuie să selectăm acele culori din selectorul de culori de fiecare dată. avem nevoie de ei. Pentru a selecta oricare dintre culorile din panoul Mostre, pur și simplu plasați mouse-ul peste eșantionul de culoare dorit. Veți vedea cum cursorul se schimbă în forma unei pipete. După aceea, faceți clic pe culoare pentru a o selecta. În cazul meu, voi alege culoare portocalie, a doua de la stânga:
Pentru a selecta culoarea dorită, faceți clic pe eșantionul său din panoul Mostre.
După ce faceți clic pe culoarea dorită, puteți vedea că această culoare a fost într-adevăr selectată de noi și a fost afișată pe pictograma eșantionului de culoare primară din bara de instrumente:
Culoarea pe care ați făcut clic în panoul Eșantioane apare în pictograma Eșantionului de culoare primară din bara de instrumente
Pasul 10: Selectați o nouă culoare de fundal din panoul Eșantioane
Pentru a selecta o anumită culoare ca culoare de fundal, apăsați și mențineți apăsată tasta Ctrl(Victorie) / Comanda(Mac) și în același timp faceți clic pe culoarea dorită din panoul Swatches. În cazul meu, când tasta este apăsată Ctrl/Comanda Voi face clic pe culoarea roșu închis:
Cu tasta Ctrl apăsată(Câștigă)/Comandă(Mac) Faceți clic pe culoarea dorită în panoul Eșantioane pentru a o face culoarea de fundal
Acum, dacă mă uit din nou la bara de instrumente, pot vedea că pictograma de culoare de fundal are acum culoarea roșu închis pe care tocmai am selectat-o:
Culoarea pe care ați selectat-o în panoul Mostre apare în pictograma de culoare de fundal din bara de instrumente
Acum pot folosi culorile din setul meu Autumn Leaves cum vreau, oricând vreau! Mai jos sunt rândurile poeziei pe care le-am stilizat folosind culorile din setul de mostre de culori create și pensula implicită Scattered Maple Leaves din Photoshop:
O poezie creată folosind culorile din setul meu de mostre de culori Autumn Leaves.
Și acum am terminat! Am învățat cum să vă creați cu ușurință propriile mostre de culoare și seturi întregi de mostre în Photoshop!
Traducere: Ksenia Rudenko
Ekaterina Malyarova
Lucrul cu culoarea este adesea un proces dificil și care necesită timp. În Evul Mediu, marii pictori au încercat să găsească combinații ideale de culori. În zilele noastre, nu doar artiștii, ci și designerii, stiliștii, artiștii de machiaj, fotografi etc.
Oamenii tind să asocieze fiecare culoare cu ceva, dând-o cu proprietăți neschimbate. De exemplu, spunem „mare albastră”, deși de fapt nuanțele sale pot varia de la albastru deschis la gri-albastru.
Interpretarea culorii depinde nu numai de percepția noastră cu ochii, ci și de starea noastră de spirit. În acest sens, este foarte important ca culorile care se combină între ele să pară armonioase la prima vedere.
Există multe resurse pe Internet pentru a vă ajuta să determinați ce culori formează armonia culorilor. Ele simplifică foarte mult procesul de alegere a schemei de culori potrivite. Vă prezentăm zece resurse esențiale pentru lucrul cu culoarea.
1.Adobe Cooler
Adobe Kuler este una dintre cele mai faimoase resurse pentru lucrul cu culoarea. Conține o bibliotecă imensă de teme de culoare gata făcute. Puteți alege oricare dintre ele sau, prin încărcarea imaginii care vă place, să vă creați propria temă de culoare. Toate subiectele pot fi sortate după evaluări, popularitate și noutate. Fiecare temă constă din cinci culori care sunt combinate între ele conform uneia dintre regulile armoniei culorilor.
Lucrarea principală are loc în roata de culori. Separatoarele dintre culori demonstrează clar combinația de culori conform regulilor armoniei. Prin mișcarea divizoarelor în jurul cercului în direcții diferite, puteți obține diferite culori, nuanță, saturație și luminozitate.
Un avantaj incontestabil al Adobe Kuler este prezența pluginului său în editor grafic Adobe Photoshop. Adică, puteți lucra cu Adobe Kuler online sau folosind programul Adobe Photoshop de pe computer.
2.Schema de culori
ColorScheme.ru este o altă resursă interesantă pentru selectarea culorilor și compunerea temelor de culoare. Lucrarea principală este efectuată și în roata de culori. Alegând o singură culoare, puteți obține șase opțiuni pentru combinații armonioase cu această culoare: mono, contrast, triadă, tetradă, analogie și analogie cu accent. Tema de culoare rezultată poate fi ajustată pentru luminozitate, saturație, contrast, evidențiere, umbră și alți parametri.
Pe lângă roata de culori, pe această resursă veți găsi o mulțime de materiale despre teoria culorilor, un convertor de culoare de la un model de culoare la altul și chiar o carte de referință unică care conține numele a aproximativ o mie de nuanțe, precum și parametrii pentru utilizarea lor în design web.
3.BigHugeLabs
BigHugeLabs este o altă resursă care are un serviciu Color Palette Generator care vă permite să selectați o paletă de culori dintr-o imagine. Puteți încărca o imagine de pe computer sau direct de pe rețelele de socializare (Facebook, Instagram).
După descărcare, faceți clic pe „Creați paletă” și obțineți o paletă de culori. În acest caz, fiecărei culori din paletă i se va atribui un nume și un cod special. Puteți descărca paleta rezultată în format ASE și o puteți utiliza mai târziu pentru a lucra în Adobe Photoshop.
4.Pictacular
Pictaculous.com este o resursă care vă permite să încărcați o imagine și să obțineți schema de culori a acesteia. În ciuda ușurinței în utilizare, lucrul în Pictaculous este foarte convenabil, deoarece este compatibil cu alte servicii de culoare: Kuler și COLOURLovers. Prin urmare, pe lângă diagrama principală a imaginii, veți primi diagrame compilate de aceste servicii.
5. Iubitorii de CULOARE
COLOURlovers este o altă resursă utilă pentru lucrul cu culoarea, folosită atât de designeri profesioniști, cât și de începătorii amatori. Biblioteca COLOURlovers conține aproximativ 2 milioane de palete de culori create de utilizatori din întreaga lume.
De asemenea, vă puteți crea propria paletă de culori încărcând orice imagine. Pe lângă crearea unei palete, puteți utiliza șabloane și culori individuale. Puteți adăuga forme și linii la șabloane tipuri diferiteși dimensiunea, iar la final colorați șablonul după bunul plac.
Iubitorii de CULOARE saturate Informatii utile. Aici puteți găsi cele mai recente recenzii, știri, diverse comunități și grupuri care discută despre lucrul cu culoarea.
6. Combinații de culori
ColorCombos este o resursă creată special pentru designeri și dezvoltatori web. Poate fi numit cu încredere o nirvana de culori pentru cei care doresc să aleagă și să testeze diferite combinații de culori.
Puteți utiliza teme de culoare gata făcute care se află în biblioteca de culori. Sub fiecare temă de culoare există un cod html care este necesar la codificarea unei pagini web. Dacă este necesar, vă puteți crea propria temă de culoare accesând fila Tester combinat.
Pe lângă crearea de teme de culoare, această resursă are o mulțime de informații utile pentru designerii începători, de la semnificația diferitelor nuanțe până la roata culorilor.
7.ColorExplorer
ColorExplorer este o resursă multifuncțională cu capacități excelente de lucru cu culoarea. A fost conceput special pentru designeri profesioniști. Set de instrumente a acestei resurse vă permite nu numai să selectați culori și să creați palete de culori, ci și să studiați biblioteci de culori populare, să combinați biblioteci, să exportați palete în programe precum Adobe Photoshop, Illustrator, InDesign etc.
Pentru a obține tema de culoare a imaginii care vă place, ar trebui să o încărcați prin filă Culoarea imaginii Import. Veți vedea toate culorile și nuanțele (de la 3 la 50) disponibile în această imagine.
Este foarte interesant să lucrați în fila Potrivirea culorilor - acesta este un amestec de culori care vă permite să schimbați componentele de culoare folosind valori RGB și HSL. După ce ați selectat paleta de culori necesară, o puteți adăuga la cea existentă sau o puteți înlocui și, opțional, o puteți salva în Paletele mele.
8. ColoRotate
ColoRotate este o resursă unică pentru lucrul cu culoarea. Se deosebește de altele prin faptul că are un aspect tridimensional model de culoare sub formă de con și capacitatea de a genera mai mult de cinci culori într-o singură schemă.
Culorile par să prindă viață pentru că în formă volumetrică le vizualizăm diferit. Prin urmare, folosind ColoRotate, puteți vedea imediat natura multidimensională a culorilor și relațiile dintre ele. Puteți edita culorile în 3D, le puteți amesteca, le puteți extrage dintr-o imagine, puteți modifica valori în diferite spații de culoare și puteți genera scheme de culori armonioase.
ColoRotate funcționează excelent singur sau asociat cu Adobe Photoshop. Este disponibil și ca aplicație pentru iPad.
9. ColRD
ColRD este o resursă strălucitoare și colorată pentru lucrul cu culoarea. Aici veți găsi o bibliotecă imensă de culori și nuanțe, palete, degrade, printuri, compilate de alți utilizatori. Aceasta este o sursă inepuizabilă de inspirație care creează o adevărată sărbătoare pentru percepția culorilor.
Puteți accesa fila Creare și vă puteți crea propria culoare, paletă sau gradient schimbând valorile RGB și HSL. Sau prin descărcare imagine terminată, descompuneți-l în culori și nuanțe, apoi utilizați-le pentru a crea schema de culori dorită.
10. Yandex
Și, în sfârșit, cel mai simplu mod de a lucra cu culoarea este să îi introduceți numele în Yandex. Ca urmare a căutării, în partea de sus a paginii, veți vedea o placă care conține culoarea de care aveți nevoie și nuanțele adiacente acesteia. În plus, arată Yandex cod hexazecimal culorile, parametrii săi în RGB și HSV.
În același mod, cunoscând doar codul de culoare, puteți căuta numele acestuia în Yandex și puteți vedea cum arată. Desigur, puteți determina culoarea după cod în orice editor grafic, dar nu uitați că acest lucru va dura mult mai mult timp.
Interacțiunea umană cu un computer se bazează în mare măsură pe elementele interfeței grafice, iar culoarea joacă un rol important în acest proces. După cum spunea Pierre Bonnard: „Culoarea nu numai că face un design plăcut ochiului, dar îl și întărește.”
Proiectare Produs nou, designerilor le este adesea dificil să creeze o schemă de culori, deoarece există un număr nelimitat de combinații posibile. În acest articol ne vom uita la opt reguli de bază care vă pot ajuta în alegerea dvs.
1. Limitați numărul de culori
Atunci când adăugați culori unui design, este esențial să mențineți echilibrul; și cu cât sunt mai multe, cu atât devine mai dificil să realizezi acest lucru. Rezultatul va fi mai bun dacă respectați regula „maximum trei culori primare” atunci când creați o paletă. Într-un studiu de la Universitatea din Toronto despre modul în care oamenii folosesc Adobe Color CC, majoritatea respondenților au spus că preferă combinații simple bazate pe două sau trei culori.Dacă aveți nevoie de culori suplimentare în afara celor deja adăugate în paletă, utilizați nuanțe diferite.
Cum se construiește o paletă
Dar cum să alegi aceste două sau trei culori? Roata de culori vă va ajuta aici.
Acest cerc de 12 culori este unul dintre principalele materiale pentru crearea unei palete.
Există întreaga linie gata făcute circuite standard, care poate face procesul de creare a unei palete mai ușor, în special pentru începători:
Palete unice de culori
Schemele cu o singură culoare lasă o impresie foarte plăcută (mai ales dacă sunt realizate în nuanțe de albastru sau verde). După cum vedeți mai departe Exemplu de Facebook, paleta arată foarte îngrijită și elegantă.
Paletele cu o singură culoare sunt cele mai ușor de lucrat: conțin o singură culoare cu diferite variații de nuanță și saturație. Toate nuanțele de culoare se combină bine între ele și creează un efect calmant.
Palete de culori înrudite
Culorile înrudite sunt cele care sunt situate una lângă alta pe cerc.
Astfel de scale sunt construite pe baza culorilor înrudite: una dintre ele devine culoarea de referință, iar restul sunt folosite pentru a îmbogăți paleta. Totul aici este, de asemenea, destul de simplu, dar trucul este să alegeți luminozitatea potrivită a culorilor utilizate - va da tonul pentru întreaga gamă. De exemplu, Clear, un utilitar de listă de sarcini controlat prin gesturi, folosește culori strălucitoare pentru a atrage vizual atenția asupra sarcinilor pe care utilizatorul le efectuează în prezent. În schimb, aplicația de meditație Calm favorizează perechea de culori aferentă „albastru+verde” pentru a crea un sentiment de calm și liniște în rândul utilizatorilor.
Palete de culori complementare
Folosind culori complementare (opuse), puteți evidenția cu ușurință vizual un element.
Cele mai simple soiuri de acest tip constau din două culori care contrastează puternic între ele. Această schemă vă permite să atrageți atenția privitorului. Când utilizați o paletă complementară, trebuie să decideți asupra unei culori primare și să utilizați o culoare secundară pentru a evidenția elementele cheie. De exemplu, atunci când ochiul uman vede un obiect pictat în diferite nuanțe de verde, o liniuță de roșu va ieși foarte puternic în evidență pe fundalul său.
Palete personalizate
Stropi de culoare pe fundal gri- o modalitate excelentă de a atrage atenția. Design în alb și culorile gri cu accente albastre, putem vedea pe site-ul Dropbox.
Crearea propriei palete nu este atât de dificilă pe cât cred mulți oameni. Există o metodă foarte simplă pe care o puteți folosi pentru a obține o opțiune grozavă: doar adăugați accente luminoaseîntr-o schemă de culori neutră (adică ceea ce se numește de obicei alb-negru). Paleta rezultată va arăta foarte impresionantă.
2. Găsiți inspirație în natură
Cele mai bune combinații de culori sunt cele pe care le luăm din lumea naturală. De ce? Pentru că în ochii noștri arată cel mai natural. Doar să te uiți în jur este suficient pentru a obține idei. Dacă în Viata de zi cu zi observați o nuanță deosebit de frumoasă sau atrăgătoare, încercați să creați schema de culori pe baza ei. Doar faceți fotografii cu peisaje frumoase și alegeți dintre ele culori pentru paleta dvs.
Natura creează cele mai bune combinații de culori. Această fotografie poate face o schemă grozavă de culori.
3. Încercați să rămâneți la raportul 6/3/1
Când compilați o paletă, veți găsi utilă și regula mereu actuală de la designeri de interior: proporția de 6/3/1 vă permite să creați echilibru perfect flori în orice spațiu.Transformarea acestui concept în realitate este foarte simplă: culoarea principală ar trebui să fie de 60% la sută, culoarea secundară ar trebui să fie de 30%, iar 10% ar trebui să fie alocate accentelor. Ideea principală este că culoarea complementară ar trebui să servească drept suport pentru cea principală, dar în același timp să fie ușor de distins de fundal. Culoarea pentru evidențierea vizuală a zonelor individuale reprezintă 10% din ecran - o puteți folosi pentru un îndemn sau orice alt element.
4. Mai întâi proiectați alb-negru.
Jocul cu culorile este distractiv. Nu este surprinzător că munca la un proiect începe adesea cu alegerea paletei. Este tentant să faci primul pas din găsirea schemei de culori perfecte, dar te-aș încuraja să te împotriviți și să vă proiectați mai întâi interfața în tonuri de gri. Realizați un prototip alb-negru al aplicației și utilizați-l ca bază. Fără culori, veți fi forțat să vă concentrați pe spațierea și plasarea elementelor.Introduceți culoarea ultima și foarte deliberat.
Un punct luminos pe un fundal gri - simplu și metoda eficientaîndreptați-vă privirea către obiectul dorit.
5. Evita negrul
În realitate, culoarea neagră nu este practic găsită niciodată. Toate obiectele „negre” pe care le întâlnim în lumea din jurul nostru reflectă o anumită cantitate de lumină, ceea ce înseamnă că nu mai sunt negre, ci gri închis. Asfaltul proaspăt, de exemplu, nu este deloc negru. Și umbrele de asemenea.Dacă adăugați negru la setul dvs. de culori atent selectate, acesta le va „zdrobi” pe toate celelalte. Este atât de frapant tocmai pentru că nu este perceput ca fiind natural. Multe dintre aplicațiile pe care le folosim zilnic adaugă culori presupuse negre la interfețele lor, care sunt de fapt gri închis. De exemplu, cel mai mult culoare inchisaîn bara de sus a aplicației Asos - nu #000000, ci #242424. Deci nu uitați să reglați saturația.
6. Construiți o ierarhie vizuală folosind contrastul
Culoarea este un instrument care ghidează ochiul pe calea dorită. Cu cât trebuie să atragi mai mult atenția asupra unui subiect, cu atât mai mult ar trebui să te bazezi pe contrast. De obicei contrast mare salvat pentru cel mai mult Informații importante sau elemente cheie. Dacă doriți ca utilizatorii dvs. să observe ceva sau să facă clic pe ceva, trebuie să fie atrăgător!
Contrastul face ca o zonă a ecranului să fie vizibil diferită de restul.
7. Folosește culoarea pentru a influența starea emoțională a utilizatorului
Nu este un secret pentru nimeni că culorile exprimă anumite idei și pot influența stările de spirit ale oamenilor. Aceste idei vor influența direct modul în care oamenii se simt despre produsul dvs.Când creați o paletă pentru o interfață, nu este suficient să vă gândiți doar la cum va arăta totul - trebuie să aveți grijă și de modul în care va fi perceput. Culorile pe care le alegeți pot fie să susțină, fie să contrazice imaginea mărcii pe care încercați să o creați. Pentru a vă oferi un loc de început, am pregătit un mic memento pentru dvs. cu asocierile de bază pentru fiecare culoare (în cultura occidentală).
Roșu, Portocaliu, Galben
roșu(pasiune, putere, pericol, semnificație): Roșul este o culoare foarte stimulatoare. Lasa o senzatie de viteza si forta si este asociata cu energie. S-a dovedit deja că ne afectează chiar și la nivel fiziologic, accelerând metabolismul și circulația sângelui. Acesta este motivul pentru care oamenii citesc chiar mai repede și mai tare când văd culoarea roșie. Este bine de folosit pentru a atrage rapid privirea utilizatorului sau a evidenția un element specific care necesită atenția acestuia.Portocale(obraznic, vesel, atrăgător, ieftin): Portocaliu - cald și culoare aprinsa. Creează o atmosferă de veselie și oferă utilizatorilor o senzație de căldură și confort. Unii cercetători susțin că portocaliul exprimă ideea de ieftinitate.
Galben(vesel, primitor, stimulant, care captează atenția): Galbenul este o culoare extrem de versatilă care îmbină nuanțele cu sensuri diferite. Astfel, galbenul deschis este asociat cu soarele, adică cu ceva pozitiv și prietenos. Tonurile mai saturate lasă o impresie de timpuri străvechi și monumentalitate. Ele sunt adesea folosite atunci când trebuie să arăți ceva ca de neclintit și înțelept.
Verde, Albastru, Violet
Verde(natural, sigur, proaspăt): Verdele exprimă ideea de a se îmbina cu lumea exterioară și de a fi aproape de natură. De asemenea, este asociat în mintea noastră cu creșterea, drept urmare este utilizat pe scară largă în afaceri. Verdele poate fi asociat și cu atitudini etice.Albastru(calm, responsabil, de încredere, de încredere): Culoarea albastra de obicei asociat cu sentimente de pace și liniște, precum și forță și fiabilitate, care în general dă un sentiment de profesionalism și inspiră încredere. Albastrul ne spune că suntem în siguranță. Din acest motiv, este utilizat în mod activ de bănci și companii IT. Mulți titani de pe piața rețelelor sociale (Facebook, Twitter, LinkedIn) prezintă și albastru în interfața lor.
violet(luxos, misterios, romantic, spiritual): violetul a fost considerat din istorie o culoare asociată cu oamenii de sânge regal și sugerează că produsul este de ultimă generație.
Roz, negru, alb, gri
Roz(feminitate, inocență, tinerețe): cea mai cunoscută asociere cu roz- asta este feminitatea.Negru(puternic, sofisticat, misterios, provocator): Negrul atrage atenția mai repede decât orice altă culoare, chiar și roșu. De regulă, este folosit doar pentru text și accente.
alb(puritate, sănătate, inocență, virtute): Albul evidențiază culorile care îl înconjoară, așa că este adesea ales ca culoare complementară.
Gri(neutru, formal, sofisticat, steril): Griul lasă o senzație neutră și poate prelua atât caracteristicile alb-negru, cât și alb-ului. Acționând ca culoarea principală, creează o atmosferă formală.
Este important de remarcat aici că semnificațiile culorilor pot varia foarte mult în funcție de circumstanțe și context cultural. Pentru o scufundare mai profundă în acest subiect, citiți articolul Simbolismul culorilor și semnificațiile culorilor din întreaga lume.
8. Faceți designul accesibil
Accesibilitatea este unul dintre considerentele cheie pentru utilizarea culorii în design. În zilele noastre, mâncarea ar trebui să fie accesibilă oricui și oricui, indiferent de capacitatea fizică.Nu utilizați culoarea ca singur indicator
Aproximativ 8% dintre bărbați și 0,5% dintre femei suferă de o formă de daltonism - adică fiecare al doisprezecelea bărbat și la fiecare două sute de femei. Există diferite tipuri, dar cea mai comună este orbirea roșie și verde. O persoană care este daltonică are de obicei dificultăți în a distinge orice nuanță a celor două culori.
De la stânga la dreapta: roată de culori cu ochi persoana normala - Cercul de culoare prin ochii unei persoane cu un tip de daltonism deuteranopic - Roata de culoare prin ochii unei persoane cu un tip protanopic de daltonism.
Deoarece daltonismul vine în multe forme (unii oameni nu pot distinge între roșu și verde, alții nu pot distinge între galben și albastru, iar unii văd totul în nuanțe de gri), este necesar să folosiți mai mulți markeri vizuali simultan pentru a indica cele mai importante. condiţiile din produs. Pe lângă culoare, puteți folosi și stiluri, simboluri, modele, texturi și text pentru a descrie acțiuni sau conținut.
Evitați transmiterea informațiilor prin culori roșii și verzi - acest lucru va fi extrem de incomod pentru persoanele care nu fac diferența între ele.
Faceți textul cât mai contrastant posibil
Contrastul este o zonă a teoriei culorilor care este critică pentru utilizare. Atunci când alegeți o culoare pentru text, rețineți că suprapunerea a două culori cu contrast scăzut va face foarte dificil de citit.
Contrastul scăzut poate fi o lovitură mortală pentru utilizare.
Monitorizați contrastul pentru a vă asigura că culoarea textului va ieși suficient de mult în evidență față de culoarea de fundal, astfel încât chiar și o persoană cu daltonism sau cu vedere foarte scăzută să poată distinge cuvintele. Raportul de contrast este o expresie matematică a cât de diferită este o culoare față de alta (de obicei scrisă ca 1:1, 21:1). Cum mai multa diferentaîntre numere, cu atât mai multe culori diferă în luminozitate. W3C recomandă următoarele rapoarte între luminozitatea textului și a imaginilor:
- Dacă textul este mic, raportul trebuie să fie de cel puțin 4,5:1;
- Pentru text mare (adică 14 pt și mai mult pentru îndrăzneţ, 18 pt și peste - pentru obișnuit) raportul optim este de 3:1 sau mai mult.
Bonus: instrumente necesare pentru un designer UX
Pentru a vă fi mai ușor, vă ofer și o listă cu cele mai multe instrumente utile pentru a selecta culorile.Adobe Color CC
Adobe Color CC (cunoscut anterior ca Kuler) este o soluție excelentă pentru găsirea, editarea și crearea paletelor. Puteți modifica fiecare culoare inclusă în gamă sau o puteți seta ca culoare de referință în doar câteva clicuri. Paletele gata făcute pot fi salvate și adăugate în bibliotecă; În plus, este disponibil public pe site un numar mare de scheme de culori create de alți membri ai comunității.
Căutare Dribbble după culoare
Dacă doriți să vedeți cum alți designeri folosesc o anumită culoare în desenele lor, accesați dribbble.com/colors și selectați nuanța dorită.
Design material
Ghid de la Design material oferă o gamă largă de culori pe care le puteți folosi pentru ilustrații sau pentru a alege culorile mărcii. Toate culorile pe care le acopera sunt alese astfel incat sa se armonizeze intre ele in orice combinatie.
Colorzilla
Colorzilla - extensie pentru browsere Google Chrome și Mozilla Firefox, care include o mulțime de instrumente pentru lucrul cu culoarea, inclusiv o picătură cu capacitatea de a capta culoarea, un generator Gradienți CSSși o funcție de vizualizare a paletei.
coolors.co
Coolors.co este un instrument puternic pentru construirea unei palete de culori multiple. Puteți bloca pur și simplu culoarea dorită și apăsați bara de spațiu pentru a obține o nouă gamă. Ceea ce este deosebit de mișto este că aici nu ești limitat la o singură opțiune - poți crea diferite palete schimbând parametrii la început.
Îmi place în special să fac palete folosind fotografii. Acest instrument vă permite să încărcați o fotografie și să construiți o paletă de culori care sunt prezente în ea.
Simulator de daltonism în Adobe Photoshop
Photoshop vă permite să testați cât de accesibil este designul dvs. Doar accesați fila Vizualizare > Configurare dovezi și selectați tipul care vă interesează (tipul Protanopia sau tipul Deuteranopia).
NoCoffee Vision Simulator pentru Chrome
Pentru a vă asigura că designul dvs. este accesibil tuturor, este o idee bună să experimentați chiar daltonismul în timpul procesului de proiectare. NoCoffee Vision Simulator oferă posibilitatea de a crea o simulare pentru orice interfață care arată cum arată persoanelor cu daltonism sau cu vedere slabă. De exemplu, dacă aplicați filtrul „Deuteranopia” în fila „Deficiență de culoare”, veți vedea site-ul în tonuri de gri. Acest lucru vă va ajuta să adaptați interfața la nevoile persoanelor cu probleme oculare.
Culoarea este una dintre cele mai multe instrumente puterniceîn arsenalul designerului, dar stăpânirea lui nu este ușor. Sper că regulile pe care le-am enumerat vor fi utile pentru începători pentru a pune bazele. Următorul pas este practica: la urma urmei, singura modalitate de a vă îmbunătăți la crearea paletelor este să o faceți cât mai mult posibil.
