Värvipaleti raamistiku loomine

Kuidas määratleda värvide raamistikku oma kaubamärgi värvipaleti koostamisel?

Värv on brändi / toote kujunduskeele süsteemi üks olulisemaid elemente. Meie ajud on programmeeritud nii ala- kui ka ülestimuleeriva teabe tagasilükkamiseks, seetõttu on väga oluline luua värvipalett, mis pakuks nii visuaalset huvi kui ka korraldustunnet.

Ma usun, et määratletud süsteemi / reeglite kogumi loomine on oluline, kui hakkate midagi kavandama. Värvid on kaubamärgi DLS (disainikeele süsteem) alamhulk ja see on üks peamisi valdkondi, kus disainerid jätavad kahe silma vahele värvide kasutamise jaoks määratletud reeglite komplekti.

"Kujundussüsteemid pakuvad mugavat, tsentraliseeritud ja arenevat brändi tuntud tooteterritooriumide kaarti suunavate osutitega, mis aitavad teil uurida uusi piirkondi." ~ Chris Messina, endine Uber

Selles artiklis käsitleme mõningaid tehnikaid, kuidas määratleda reeglite komplekt, et genereerida värvivariatsioone, mida saab laiendada ulatuslikumale kasutusalale ja mida saab tulevikus rakendada ka kõigi brändipalettide korral. Võite valida ükskõik millise nendest tehnikatest või ühendada need oma loomiseks.

Alustame

Siin on nimekiri vähestest värviomadustest, mida me täielikult ära kasutame, et luua värvivariante:

  • Hue on värv (sinine, roheline, punane jne).
  • Kroma on värvi puhtus (suurele kromaadile pole lisatud musta, valget ega halli värvi).
  • Küllastus tähendab seda, kui suurt osa antud toonist on (madalam küllastus, millel on vähem varjundit, ja lähemal valgele).
  • Heledus / väärtus näitab, kui hele või tume on värv (tume on madala heleduse / väärtusega).
  • Läbipaistmatus viitab sellele, kui läbipaistev või läbipaistmatu värv on (suur läbipaistvus, madala läbipaistmatusega).
  • Toonid luuakse, lisades värvile halli, muutes selle originaalsest tuhmimaks.
  • Varjundid luuakse, lisades värvile musta värvi, muutes selle originaalis tumedamaks.
  • Värvid luuakse, lisades värvile valge, muutes selle originaalist heledamaks.
Värviomaduste kokkuvõte. Värvivariatsioonide genereerimiseks kasutame nende omaduste kombinatsiooni. Laadige alla printimisversioon10-palli skaala Raamivõrk värviomaduste mõistmiseks

Raamvõrk

Ülaltoodud graafik näitab heleduse, läbipaistmatuse, varjundite, toonide, varjundite ja värvuse seost konkreetse tooni suhtes. Selle graafiku koostamisel kasutati 10-punktilist skaalat. Mida see tähendab, on värvuse läbipaistmatus X-telje suhtes 10% ja Y-telje heledus 10%.

Kasutame ülaltoodud graafiku lihtsustatud versiooni, kasutades oma baasraamistiku ruudustiku 25-punktilist skaalat. See ruudustik on meie mänguväljak, millel on mitmeid võimalusi värvide genereerimiseks.

Olen raamistiku ruudustiku loomisel kasutanud rakendust Sketch App but, kuid sama saab luua ka teistes kujundusriistades nagu Photoshop / Illustrator / Figma / Gimp / jne. Kasutame populaarset HSB värvisüsteemi.

️Vaadake allolevaid samme järgides allpool olevat pilti:

1. samm. Valige baasvärv. Selle tooni abil saate luua ruudu 50 x 50 pikslit. Näiteks valisin siin sinise tooni (H 212, S 67, B 89).

2. samm. Looge 10 x 10 px valge ruudukujuline plaat (H 0, S 0, B 100).

3. samm. Kopeerige need valged plaadid (5 rida, 5 veergu) nii, et see kataks kogu 1. sammu aluse ruudu.

4. samm. Vähendage valgete plaatide iga veeru läbipaistmatust 25% vasakult paremale.

5. samm. Vähendage valgete plaatide iga rea ​​heledust ülalt alla 25%.

Siin on ülalnimetatud toimingute visandifail

Nüüd on teil baasraamistik. Kui järgisite neid samme õigesti, on teil värvisüsteem sarnane ülaltoodud pildil 5. toiminguga näidatule. Selle raamistiku ruudustiku abil õpime uute värvide genereerimise meetodeid.

Värvivariatsioonide paremaks visualiseerimiseks kasutasin allpool toodud meetodite näidetena veel 3 alusvärvi. Ilmselt saate ise oma värve valida.

1. Varjunditooni meetod

Laadige alla eskiisfail

Seda meetodit kasutatakse kõige sagedamini selle lihtsuse tõttu. Teie loodud baasraamistiku ruudustik loodi selle meetodi abil. Alusvärvi kohal olevate valgete plaatide läbipaistmatus ja heledus on vastavalt vahemikus 100% kuni 0% (vasakult paremale) ja 0% kuni 100% (alt üles).

Parempoolsel küljel olev värviteema loodi, kasutades meie kolme põhitooni (ülalnimetatud) ja valides läbipaistmatuse ja heleduse väärtused vasakpoolsest keskmisest veerust (näidatud noolega).

2. Ülekattega segamise meetod

Laadige alla eskiisfail

Selle meetodi puhul kasutame sama alusraamistikku ja muudame valgete plaatide segamisrežiimi ülekatteks. See loob kogu ruudustikus kauni tooni erinevuse.

3. Pehme valguse segamise meetod

Laadige alla eskiisfail

Sarnaselt # 2 ülekatte segamise meetodile muudame siin valgete plaatide segamisrežiimi pehmeks-heledaks. See loob kogu võrgus ilusa küllastuse erinevuse. Seejärel valime kõik need valged plaadid ja kopeerime need kaks korda. See loob tugevama küllastuserinevuse ja seeläbi ka parema värvide erksuse.

4. Lahe värvilise ülekatte segamise meetod

Laadige alla eskiisfail

See meetod kasutab ruudustiku raamistikku, mille lõime meetodil # 2 ülekatte segamise meetodil. Seejärel valime suvalise laheda värvi (näiteks sinine). Looge selle värvi ristkülik ja asetage see kogu ruudustikku. Valige selle segamisrežiim ülekatteks. Saadud värvisüsteemil on erksalt lahe efekt.

5. Sooja värviga ülekatte segamise meetod

Laadige alla eskiisfail

Väga sarnane # 4 laheda värviga ülekatte segamise meetodiga, siin valime selle asemel suvalise sooja värvi (näiteks oranž). Looge selle värvi ristkülik ja asetage see kogu ruudustikku. Valige selle segamisrežiim ülekatteks. Saadud värvisüsteemil on dramaatiline soe efekt.

6. Heleduse reguleerimise meetod

Laadige alla eskiisfail

See meetod on ülalnimetatud meetoditest pisut erinev ja lihtsam. Alusvärvi kohal olevad valged plaadid selles ruudustikus puuduvad. Selle asemel loome põhivärvi plaadid (nagu on näidatud alloleval pildil) ja loome heledate ja tumedate värvide vahemiku, suurendades ja vähendades vastavalt selle heleduse väärtust.

Parempoolsel küljel olev värviteema loodi, kasutades meie kolme põhitooni ja seejärel heleduse väärtusi lihtsalt suurendades ja vähendades, et luua vastavalt heledad ja tumedad variatsioonid.

7. Heledus + küllastuse näpistamise meetod

Laadige alla eskiisfail

See meetod kasutab sama ruutvõrgustikku nr 6: Brightness Tweak. Siinkohal kohandame küllastusväärtusi heleduse väärtuste kõrval. Loome heledate ja tumedate värvide vahemiku, suurendades ja vähendades selle heleduse väärtust ning vähendades ja suurendades samal ajal vastavalt küllastuse väärtusi.

1. reegel: heledam värvivariant = madalam küllastus + suurem heledus.

2. reegel: tumedam värvivariant = suurem küllastus + väiksem heledus.

Hübriidnäide

Laadige alla eskiisfail

Siin on hübriidnäide, mis ühendab meetodi nr 1, nr 3, nr 4 ja nr 5, et luua ilus värvipalett. Selle inspiratsiooni sai üks visanditrikkide artiklitest, et luua värvilahendus Sketch Appis kiiresti värvisüsteem.

Järeldus

See kõik on seotud teie tööriistade kasutamise ja kujunduselementide põhitõdede kasutamisega. Erinevate elementide / tehnikate kombineerimine avab sageli ukse lõpmatutele võimalustele.

Värviteemade genereerimiseks on veelgi rohkem meetodeid. Nagu näete, oli põhiraamistiku ruudustiku loomine kõige olulisem. Ruudustik oli teie kujutlusvõime mänguväljak värvisüsteemide genereerimiseks. Alusvärvist täiesti uue värvikomplekti loomiseks võite ühendada mitu meetodit. (proovige kindla aluse Hue asemel gradiente).

Vintage-värvikomplektide loomiseks võite kasutada ka Justin Mezzelli kohandamiskihtide meetodit.

Varsti kirjutan veel ühest huvitavast (ja keerulisest) meetodist värviteemade komplekti genereerimiseks, kasutades Gaussi jaotuse funktsiooni. Tänu Nishantile säutsu eest, mis andis mulle inspiratsiooni selle meetodi uurimiseks. Saate mind jälgida, et olla kursis.

Minust

Tere, ma olen Rahul Chakraborty, ehitan elamusi ja meisterdan lahendusi India suurimas e-kaubanduse platvormis Flipkart.

Ma piilun regulaarselt disaini ja tehnoloogiaga seotud asju ning minu pooleliolev töö on Dribbble'is. Minu teise külje leiate Instagramist.

Lõpuks, pärast pikka viivitust, on see minu esimene artikkel keskmisest. Tagasiside on väga teretulnud. Kui teile midagi meeldis või pärast selle lugemist midagi teada saadi, soovitage seda teistele. (Klapid lähevad kuni 50 )

Täname, et lugesite!

Twitter
juhtiv
Instagram