Kreirajte paletu od slike. Teorija boja 3. dio - Stvaranje vlastite palete boja
U prethodna dva članka govorili smo o značenjima boja io terminologiji boja. I, iako je ova informacija važna, mislim da će mnogi čitaoci biti iznenađeni kada dobijemo glavne elemente kreiranjem sopstvenih šema boja.
Dakle, počinje treći dio i u njemu ćemo naučiti kreirajte vlastite sheme boja. Pokrivat ćemo tradicionalne palete boja (jednobojne, analogne, komplementarne, itd.) i neobične palete koje će izgledati kao ništa drugo.
Na kraju ovog posta imat ćete sve potrebne alate i vještine za kreiranje vlastitog dizajna. A najbolji način da poboljšate svoje vještine je vježbanje, jer vas ništa ne sprječava da kreirate jednu paletu boja dnevno)
BRZI PREGLED
Počnimo s kratkim pregledom 2 prethodno pročitana članka iz serije. U prvom članku govorili smo o tome kako boja može utjecati na dizajn, kako njena percepcija ovisi o kulturnim i individualnim karakteristikama osobe. Odnosno, kako boja može postići željeni efekat od posjetioca na podsvjesnom nivou. Boja koju odaberete može raditi za ili protiv brenda za koji pokušavate kreirati stranicu.
U drugom dijelu obradili smo terminologiju:
* Nijansa je boja (plava, zelena, crvena, itd.)
*Kromatičnost (kromatičnost) je čistoća boje (visokohromatske boje ne sadrže nečistoće crne, bijele i sive)
* Zasićenost se odnosi na to koliko je boja jaka ili slaba (zasićena je jaka)
* Svjetlina se odnosi na to koliko je boja svijetla ili tamna (svijetlo - svijetlo)
* Ton se formira dodavanjem sive, dajući mutnost
* Sjene se formiraju dodavanjem crne, potamnjivanjem nijanse
* Posvetljenje se formira dodavanjem belog, čime je nijansa svetlija
Vrlo je važno zapamtiti ovo kako biste krenuli naprijed prema stvaranju vlastite sheme boja.
TRADICIONALNE VRSTE ŠEMA BOJA
Tradicionalne sheme boja obično koriste početnici. U nastavku ćemo ih vidjeti na primjerima.
Osnovni osnovni točak boja je veoma moćan alat za kreiranje šema boja.
MONOCHROMATIC
Monokromatski CS se stvaraju različitim senkama, zasićenjima itd., unutar iste nijanse. Ovo su najjednostavnije sheme boja i teško ih je učiniti svijetlim ili ljutitim.
(ali vjerovatno).
Evo tri primjera jednobojnog tss-a. Ovdje će se najvjerovatnije prva boja koristiti za naslov, druga za tekst stranice ili možda pozadinu. Treći je za pozadinu ili tekst (ako će se boja #2 koristiti kao pozadina), a zadnja dva su za akcente
ANALOGNI
Sljedeći korak je analogni ds. Kreiraju se korištenjem 2 susjedne nijanse na kotaču boja od 12 sektora. Iako obično imaju sličnu zasićenost, zahvaljujući senkama i tonovima možemo postići zanimljiva rešenja i postići željeni efekat.
Iako je vizuelno privlačan, još uvek nije dovoljno zanimljiv za efikasan dizajn.
U ovom CS-u, iako se koriste boje - susjedi, ali njihova različita zasićenost daje zanimljive varijacije.. Ovaj CS ima više opcija za korištenje.
I još jedan primjer tradicionalnog analognog DS-a
…I ista shema modificirana za web dizajn
DODATNO
Dodatni ts se formiraju od suprotnih boja na krugu. Koristim samo dvije nijanse, ali sa različitim nijansama, zasićenošću, bojom. Oprez: Korištenje boja koje imaju istu suprotnu zasićenost boja i/ili svjetlinu je vrlo jaka u poređenju sa sljedećom (pomicanjem udesno) bojom može dati preoštar efekat. Bolje je izbjegavati. (ostavljanje razmaka između njih ili umetanje druge neutralnije boje između njih).
Širok raspon nijansi, nijansi i tonova daje vrlo zanimljiv dizajn.
Još jedan CS sa širokim rasponom zasićenja
Ne zaboravite da su bež i smeđa nijanse smeđe.
ODVOJENI DODATNI
Podijeljene ekstenzije su jednostavne kao i ekstenzije. Umjesto da koristimo boju protivnika, koristimo bilo koju od dvije nijanse koje okružuju osnovnu boju.
Osnovne boje su žuta i zelena. Vrlo je važno imati dovoljnu razliku u svjetlini i zasićenosti boja za stvaranje takvog DS-a.
Još jedan primjer širokog širenja zasićenja.
TRIADIC
Triadic CS se kreira odabirom nijansi na istoj udaljenosti jedna od druge u krugu boja od 12 sektora. Ovo je jedno od najzanimljivijih
upotreba vrlo blijedih ili tamnih nijansi u trijadi, odnosno sa dvije zatamnjene/zatamnjene/svijetle nijanse drugih boja, čini da jednostavna boja funkcionira kao neutralizator unutar sheme
http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/
Suprotno tome, upotreba vrlo svijetle nijanse među ostatkom "izblijedjelih" čini je akcentom.
DVOSTRUKI DODATNI (TETRAD)
Možda najteži i najintenzivniji CS
Vrlo nezanimljiva shema, možete je koristiti samo ako jednu boju uzmete kao glavnu, a druge kao akcente
Tetrad CS može dobro raditi ako uzimate boje slične svjetline i zasićenosti. Možete dodati neutralnu crnu i smeđu za akcente
Ovako mračni CS dobro radi
IZRADENO PO NARUDZBI
Najsloženije sheme boja. Suprotno utvrđenim kanonima koje sam gore opisao, oni se ne zasnivaju ni na kakvim pravilima.
Boje imaju sličnu zasićenost
I opet, slične boje zasićenja daju osjećaj jedinstva i harmonije.
Korišćenje visoko zasićenih boja protiv nezasićenih boja je takođe efikasan metod. (Zasićene boje igraju kao naglasak)
KREIRANJE ŠEME BOJA
Stvaranje vlastite teme može izgledati zastrašujuće) Ali nije tako teško kao što zvuči. Ovdje ćemo analizirati nekoliko trikova koji će vam pomoći u kreiranju vlastitog cs-a
Bićemo iznad standarda koji se primenjuju, kreiraćemo sopstveni CA. Na mreži postoji mnogo alata za kreiranje dijagrama i zaboravićemo na njih. Koristićemo Photoshop.
Da biste kreirali vlastitu shemu, morate znati kako boje međusobno komuniciraju u gornjem CS-u. Uobičajena je praksa kreirati vlastite CA-ove - malo modificirajte one unaprijed definirane.
Naš cilj je da kreiramo tri cs za svaki od dva izgleda. Naši potencijalni klijenti su arhitektonski blog i web stranica kreativnog maloprodajnog lanca ženske odjeće.
Počnimo s uobičajenom monokromatskom shemom. Spomenuo sam da se tradicionalne palete boja ne koriste uobičajeno u dizajnu, ali su monokromatski CS izuzetak od ovog pravila. Nema ništa loše u tome da ih redovno koristite.
Za našu prodavnicu odjeće, ovo je tradicionalni tss, s dodatkom bijele boje za neutralnost.
Za dizajn bloga koristimo shemu s upotrebom tonova i sjenki u sivoj boji.
I ovo je isti sličan CS, ali smo izbacili jednu boju. Formiraju ga zasjenjene nijanse ljubičaste i crveno-ljubičaste. Intenzitet svake uzastopne boje opada i općenito dobro funkcioniraju, posebno kada se koriste s različitim svjetlinama i zasićenošću.
Dodavanjem par senki iz crvene i smeđe boje, činimo CS mnogo zanimljivijim i potencijalno pogodnijim za kreiranje akcenta na određenim mestima u našem dizajnu.
I ovdje smo promijenili ljubičastu nijansu u bordo (tako smeđe-crvenu). I opet, ako pogledate krug boja, onda se ove boje slijede jedna za drugom. Ovo pomaže da se neutrališe, i izgleda kao "bez belog" u poređenju sa drugim CS.
Na prvi pogled ovaj ts izgleda kao još jedan, sivo-crveni, ts. Ali ako bolje pogledate, možete vidjeti da je ova siva zapravo jedan od tonova plave. Plava i crvena čine trećinu TETRAD cs, ali rade dobro bez žute, posebno kada je crvena čista, a plava je nijansa blizu sive.
ZAŠTO SU SENKE, TONOVI I SVJETLOST VAŽNI
Kao što ste vidjeli u gornjem CS-u, upotreba tonova, svjetla i sjenki je od vitalnog značaja. Čiste nijanse imaju sličnu zasićenost i svjetlinu. Ružno je i dosadno.
Kada koristite tonove, sjene i svjetla, dobijate beskonačan broj nijansi iz kotača boja od 12 sektora koje možete koristiti u svom dizajnu. Jedan od najlakših načina da se kreira dizajn koji dobro izgleda je da uzmete boju i njene višestruke tonalitete, sjene i svjetla i dodate još jednoj čistoj boji koja je udaljena tri mjesta na kotaču boja (dio tetrade, triatnog i komplementarnog). ts). Ovo će zadržati CS zanimljiv sve dok održava osjećaj ravnoteže.
DODAVANJE NEUTRALIZATORA
Neutralizatori su još jedan važan dio stvaranja cs-a. Siva, crna, bijela, smeđa, krem, bliske bijele boje su one boje koje djeluju kao neutralizatori. Smeđa, bež i bliske bele boje čine naš dizajn toplijim (u stvari, to su samo tonovi, senke i osvetljenje žute i narandžaste), a siva, crna i bela mogu da poprime i vrednosti zagrevanja i „hlađenja“, sve zavisi na okolinu, njihove boje.
Crno-bijelo je najlakše dodati kao neutralizator. Da bi dizajn bio zanimljiviji, koristi se svijetlo ili tamno siva, kao zamjena za bijelu i crnu.
Dodavanje bež, smeđe i prljavo bijele boje u dizajn je teže, ali s iskustvom ćete naučiti kako to učiniti lako. Za smeđe, čokoladne, vrlo tamne nijanse smatraju se zamjenom crne. Ali bež i boje bliske bijeloj koriste se kao zamjena za bijelu ili svijetlosivu.
KORIŠĆENJE FOTOGRAFIJA ZA KREIRANJE ŠEMA BOJA
Jedan od mojih omiljenih načina za kreiranje shema boja je korištenje fotografije. Postoje programi koji to rade automatski, na primjer, . Iako će vam u tome pomoći i Photoshop.
Koristeći Adobe Kuler, možete ugraditi fotografiju sa Flickr-a ili otpremiti svoju sliku. Ako ste zbunjeni oko toga koje boje želite, pokušajte upisati ključne riječi u Fllickr. Ponekad možete pronaći takva rješenja u boji o kojima ni ne razmišljate)
Naučimo kako raditi s obje metode (Kuler i Photoshop). Pronađimo sliku koja će otprilike prenijeti shemu boja našeg dizajna. Evo jednog.
Danas ću vam pokazati kako brzo kreirati paletu boja u Sketchu. To je kul trik koji me je naučio Mark Edwards prije nekoliko godina.
Prvo ćemo kreirati tri kvadrata sa dužinom stranice koja je višestruka od tri. U našem primjeru, to su kvadrati visine 240pt i širine 240pt.
Promijenimo nazive ovih slojeva u Crveni, Zeleni i Plavi. Popunimo crveni sloj sa #FF6161, zeleni sa #4F953B, a plavi sa #0076FF. Odaberite ove slojeve i pritisnite tipku "A" da odaberete alat "Artboard". Sada odaberite opciju "Around Selection" u panelu "Inspektor" s desne strane. Promijenimo naziv naše umjetničke ploče: nazovimo je "Paleta boja".
Sada ćemo kvadratima dodati različite nijanse, dijeleći ih okomito na tri jednaka dijela. Da biste to učinili, napravite dva pravougaonika iznad kvadrata, širine cijele artboarda. Visina pravougaonika treba da bude ⅓ visine kvadrata - to je, u našem slučaju, 80pt.
Poravnajte jedan pravougaonik s gornjom ivicom kartona i popunite ga bijelom bojom, a drugi pravougaonik poravnajte s donjom ivicom i popunite ga crnom bojom. Sada postavite prozirnost pravougaonika na 20%. Na kraju smo dobili tri različite nijanse crvene, zelene i plave. Preimenujmo ova dva sloja kako se kasnije ne bismo zbunili.
Sada ćemo ponovo podijeliti kvadrate - ovaj put horizontalno. Napravite pravougaonik iste visine kao kvadrat. Širina ovog pravougaonika je ⅓ širine samog kvadrata. Poravnajte pravougaonik sa središtem crvenog kvadrata. Sada duplirajmo ovaj pravougaonik i poravnajmo novi pravougaonik sa desnom ivicom crvenog kvadrata.
Sad počinje zabava. Ispunite ova dva sloja nekom veselom bojom. Koristit ćemo žutu (#FFE200). Postavite neprozirnost središnjeg pravokutnika na 40%, a desnog pravokutnika na 80%. Konačno, promijenite način miješanja u "preklapanje".
Sada trebamo podijeliti glavni pravougaonik na devet jednakih dijelova. U stvari, možete jednostavno duplicirati zadnja dva okomita pravokutnika i premjestiti ih na zelene i plave kvadrate kako biste dobili gotovu paletu boja.
Konačan rezultat
Kako koristiti boje u Sketchu
Skica ima skrivenu funkciju koja otkriva najčešće korištene boje u dokumentu. Ovu funkciju možete pronaći na panelu Inspector kada odaberete boju ispune. Na desnoj strani, odmah iznad alfa vrijednosti, nalazi se okvir u boji. Kada kliknemo na ovaj okvir, panel se širi i prikazuje najčešće korištene boje.
Čuvanje boje u Sketchu je dovoljno jednostavno. Kada odaberete boju, vidjet ćete dva panela: Globalne boje i Boje dokumenta. Uobičajene boje - su boje pohranjene za sve dokumente. Boje dokumenta se prikazuju samo za dokument na kojem radite.
Savjet: Da biste brzo odabrali boju, pritisnite “Control + C” i kliknite na željenu boju. Ovo je interventni taster za alatku za kapaljku.
Sketch Palette Plugin
Kada radite na velikom projektu s mnogo datoteka, nije potrebno ručno kreirati boje dokumenta.
Ovdje je koristan dodatak Sketch Palettes. Omogućava vam da sačuvate palete u datoteku koja se kasnije može uvesti u drugi dokument. Na ovaj način možete brzo dodati boje marke svakom novom dokumentu.
Ljudska interakcija sa računarom se u velikoj meri oslanja na elemente grafičkog interfejsa, a boja igra važnu ulogu u ovom procesu. Kao što je Pierre Bonnard jednom rekao: „Boja ne samo da čini dizajn ugodnim oku, već ga i pojačava.“
Kada dizajniraju novi proizvod, dizajnerima je često teško doći do sheme boja, jer postoji neograničen broj mogućih kombinacija. U ovom članku ćemo pogledati osam osnovnih pravila koja vam mogu pomoći da napravite izbor.
1. Ograničite broj boja
Kada dodajete boje dizajnu, izuzetno je važno postići ravnotežu; a što ih je više, to postaje teže postići. Rezultat će biti bolji ako se držite pravila “maksimalno tri primarne boje” prilikom formiranja palete. U istraživanju Univerziteta u Torontu o tome kako ljudi koriste Adobe Color CC, većina ispitanika je rekla da preferiraju jednostavne kombinacije zasnovane na dvije ili tri boje.Ako su vam potrebne dodatne boje osim onih koje ste već dodali u paletu, koristite različite nijanse.
Kako napraviti paletu
Ali kako odabrati ove dvije ili tri boje? Ovdje kolo boja dobro dolazi.
Takav krug od 12 boja jedan je od glavnih materijala za sastavljanje palete.
Postoji niz gotovih standardnih shema koje mogu olakšati proces stvaranja palete, posebno za početnike:
Jednobojne palete
Jednobojne sheme ostavljaju vrlo ugodan utisak (naročito ako su izrađene u nijansama plave ili zelene). Kao što možete vidjeti u Facebook primjeru, paleta izgleda vrlo uredno i elegantno.
Jednobojne palete su najlakše za rad: one sadrže samo jednu boju s različitim varijacijama u nijansama i zasićenosti. Sve nijanse boja se dobro spajaju jedna s drugom i stvaraju umirujući učinak.
Palete srodnih boja
Povezane boje su one koje su jedna pored druge na krugu.
Takve vage su izgrađene na osnovu srodnih boja: jedna od njih postaje referentna, a ostale se koriste za obogaćivanje palete. Ovdje je sve također prilično jednostavno, ali trik je u odabiru prave svjetline korištenih boja - to će postaviti ton cijeloj gamu. Na primjer, Clear, uslužni program za listu obaveza zasnovan na pokretima, koristi blistave boje kako bi vizuelno skrenuo pažnju na zadatke koje korisnik trenutno obavlja. Nasuprot tome, aplikacija za meditaciju Calm favorizira par boja koji se odnosi na plavu i zelenu kako bi korisnicima stvorio osjećaj mira i spokoja.
Komplementarne palete boja
Koristeći komplementarne (suprotne) boje, lako možete vizualno istaknuti element.
Najjednostavnije sorte ove vrste sastoje se od dvije boje koje su u oštrom kontrastu jedna s drugom. Ova šema vam omogućava da privučete pažnju posmatrača. Kada koristite komplementarnu paletu, morate se odlučiti za glavnu boju i primijeniti dodatnu kako biste naglasili ključne elemente. Recimo, kada ljudsko oko vidi neki predmet obojen različitim nijansama zelene boje, mrlja crvene boje će se vrlo snažno isticati na njegovoj pozadini.
Prilagođene palete
Prskanje boja na sivoj pozadini odličan je način da privučete pogled. Bijelo-sivi dizajn s plavim akcentima može se vidjeti na Dropbox web stranici.
Kreiranje vlastite palete nije tako teško kao što mnogi misle. Postoji vrlo jednostavan način koji možete koristiti da dobijete sjajan izgled: samo dodajte svijetle akcente neutralnom rasponu (to jest, onom koji se obično naziva crno-bijelim). Rezultirajuća paleta će izgledati vrlo impresivno.
2. Inspiraciju crpite iz prirode
Najbolje kombinacije boja su one koje uzimamo iz svijeta prirode. Zašto? Jer za naše oči izgledaju najprirodnije. Dovoljno je samo pogledati okolo da dobijete ideje. Ako u svakodnevnom životu primijetite neku posebno lijepu ili privlačnu nijansu, pokušajte stvoriti shemu boja na temelju nje. Samo fotografišite prelepe pejzaže i izaberite boje za paletu.
Priroda stvara najbolje kombinacije boja. Ova fotografija može napraviti odličnu šemu boja.
3. Pokušajte se držati proporcije 6/3/1
Kada sastavljate paletu, trebat će vam i bezvremensko pravilo dizajnera interijera: proporcija 6/3/1 omogućava vam da stvorite savršenu ravnotežu boja u svakom prostoru.Ostvarenje ovog koncepta je vrlo jednostavno: vaša osnovna boja bi trebala zauzimati 60% posto, vaša sekundarna boja bi trebala zauzimati 30%, a 10% bi trebalo biti dodijeljeno akcentima. Osnovna ideja je da komplementarna boja treba da služi kao potpora glavnoj, ali da se istovremeno lako razlikuje na njenoj pozadini. Boja za vizuelno isticanje određenih područja zauzima 10% ekrana - možete je koristiti za poziv na akciju ili bilo koji drugi element.
4. Prvo dizajnirajte crno-bijelo
Igranje bojama je zabavno. Nije iznenađujuće da rad na projektu često počinje odabirom palete. Iskušenje da pronalaženje savršene šeme boja bude prvi korak je jako, ali ja bih vas ohrabrio da se borite sa sobom i prvo dizajnirate svoj interfejs u sivim tonovima. Napravite prototip crno-bijele aplikacije i koristite ga kao osnovu. U nedostatku boja, bit ćete primorani da se fokusirate na udaljenosti i raspored elemenata.Boju uvedite posljednju i vrlo svrsishodno.
Svetla tačka na sivoj pozadini je jednostavan i efikasan način da usmerite pogled na željeni objekat.
5. Izbjegavajte crno
U stvarnosti, crna boja se gotovo nikada ne nalazi. Svi "crni" predmeti na koje nailazimo u svijetu oko nas reflektiraju određenu količinu svjetlosti, što znači da više nisu crni, već tamno sivi. Svježi asfalt, na primjer, uopće nije crn. I senke takođe.Ako svom skupu pažljivo odabranih boja dodate crnu, ona će "zgnječiti" sve ostale. Toliko je upečatljivo upravo zato što se ne percipira kao prirodno. Mnoge aplikacije koje koristimo svakodnevno dodaju sučelju navodno crne boje, koje su zapravo tamno sive. Na primjer, najtamnija boja na gornjoj traci aplikacije Asos nije #000000 već #242424. Zato ne zaboravite podesiti zasićenost.
6. Izgradite vizualnu hijerarhiju s kontrastom
Boja je alat koji usmjerava oko duž željene putanje. Što više morate da skrenete pažnju na temu, više se morate oslanjati na kontrast. Obično je visoki kontrast rezerviran za najvažnije informacije ili ključne elemente. Ako želite da vaši korisnici nešto primjete ili kliknu negdje, morate to učiniti da se istakne!
Zbog kontrasta, jedno područje ekrana se značajno razlikuje od ostalih.
7. Koristite boju da utičete na emocionalno stanje korisnika
Nije tajna da boje izražavaju određene ideje i mogu uticati na raspoloženje ljudi. Ove ideje će imati direktan uticaj na to kako ljudi misle o vašem proizvodu.Prilikom sastavljanja palete za interfejs, nije dovoljno razmišljati samo o tome kako će sve izgledati - potrebno je voditi računa i o tome kako će to biti percipirano. Boje koje odaberete mogu ojačati imidž brenda koji pokušavate stvoriti ili mu proturječiti. Da biste započeli, sastavio sam vam mali vodič s osnovnim asocijacijama za svaku boju (u zapadnoj kulturi).
Crvena, narandžasta, žuta
Crveni(strast, moć, opasnost, značaj): Crvena je veoma stimulativna boja. Ostavlja osjećaj brzine i snage i povezuje se s energijom. Već je dokazano da djeluje čak i na fiziološkom nivou, ubrzavajući metabolizam i cirkulaciju krvi. Zbog toga ljudi čak i čitaju brže i glasnije kada vide crveno. Dobro ga je koristiti za brzo privlačenje pogleda korisnika ili isticanje određenog elementa koji zahtijeva njihovu pažnju.Narandžasta(nestašna, vesela, privlačna, jeftina): Narandžasta je topla i svijetla boja. Stvara atmosferu vedrine i izaziva osjećaj topline i udobnosti kod korisnika. Neki istraživači tvrde da narandžasta boja izražava ideju jeftine.
Žuta(vesela, druželjubiva, stimulativna, privlači pažnju): Žuta je izuzetno raznovrsna boja koja kombinuje nijanse sa različitim značenjima. Dakle, svijetlo žuta asocira na sunce, odnosno na nešto pozitivno i prijateljsko. Zasićeniji tonovi ostavljaju dojam drevnosti i monumentalnosti. Često se koriste kada treba pokazati nešto nepokolebljivo i mudro.
Zelena, plava, ljubičasta
Zeleno(prirodno, sigurno, svježe): Zelena izražava ideju stapanja s vanjskim svijetom i bliskosti s prirodom. Također se u našim mislima povezuje s rastom, zbog čega se široko koristi u poslovanju. Zelena se takođe može povezati sa etičkim stavovima.Plava(Smiren, odgovoran, pouzdan, pouzdan): Plava se obično povezuje sa osećajem mira i spokoja, kao i sa snagom i pouzdanošću, što generalno daje osećaj profesionalizma i uliva samopouzdanje. Plava nam govori da smo sigurni. Iz tog razloga ga aktivno koriste banke i IT kompanije. Mnogi titani na tržištu društvenih medija (Facebook, Twitter, LinkedIn) također imaju plavu boju u svom interfejsu.
Violet(Luksuzni, Misteriozni, Romantični, Duhovni): Ljubičasta se kroz istoriju smatrala bojom koja se povezuje sa kraljevskom osobom i nagoveštava da je proizvod u visokoj kategoriji.
Ružičasta, crna, bijela, siva
Pink(ženstvenost, nevinost, mladost): Najpoznatija asocijacija na ružičastu je ženstvenost.Crno(snažna, sofisticirana, misteriozna, provokativna): Crna privlači pažnju brže od bilo koje druge boje, čak i crvene. U pravilu se koristi samo za tekst i akcente.
Bijelo(čistoća, zdravlje, nevinost, dobrota): Bijela dobro ističe boje koje je okružuju, zbog čega se često bira kao komplementarna boja.
Siva(neutralno, formalno, sofisticirano, sterilno): Siva ostavlja neutralan osjećaj i može poprimiti karakteristike crne i bijele. Djelujući kao glavna boja, stvara službenu atmosferu.
Ovdje je važno napomenuti da se značenja boja mogu uvelike razlikovati ovisno o okolnostima i kulturnom kontekstu. Da biste saznali više o ovoj temi, pročitajte članak Simbolika boja i značenja boja širom svijeta.
8. Učinite dizajn pristupačnim
Pristupačnost je jedno od ključnih faktora za korištenje boja u dizajnu. Ovih dana proizvodi bi trebali biti dostupni svima i svima, bez obzira na fizičku sposobnost.Nemojte koristiti boju kao jedini indikator
Otprilike 8% muškaraca i 0,5% žena pati od nekog oblika sljepoće za boje – odnosno svaki dvanaesti muškarac i svaka dvijestota žena. Postoje različite vrste, ali najčešća je crvena i zelena sljepoća. Osoba koja je slepa za boje obično ima poteškoća u razlikovanju bilo koje nijanse ove dvije boje.
S lijeva na desno: krug boja kroz oči obične osobe - Krug boja kroz oči osobe sa deuteranopičnim tipom daltonizma - Krug boja kroz oči osobe sa protanopskim tipom daltonizma.
Budući da se sljepoća za boje dolazi u mnogim oblicima (neki ljudi ne mogu vidjeti crvenu i zelenu, drugi ne mogu vidjeti žutu i plavu, a treći mogu vidjeti sve u nijansama sive), važno je koristiti više vizualnih markera za identifikaciju najvažnijih stanja u proizvodu. Da biste opisali radnje ili sadržaj, osim boje, možete povezati i stilove, simbole, uzorke, teksture i tekst.
Izbjegavajte prenošenje informacija kroz crvene i zelene boje - to će biti izuzetno nezgodno za ljude koji ih ne razlikuju.
Neka tekst bude što kontrastniji
Kontrast je oblast u teoriji boja koja je kritična za upotrebljivost. Prilikom odabira boje za tekst, imajte na umu da će preklapanje dvije boje sa niskim kontrastom vrlo otežati čitanje.
Nizak kontrast može biti smrtonosni udarac upotrebljivosti.
Pratite kontrast kako biste bili sigurni da se boja teksta dovoljno ističe u odnosu na boju pozadine, tako da čak i osoba s daltonizmom ili vrlo slabim vidom može razlikovati riječi. Kontrastni odnos je matematički izraz koliko se jedna boja razlikuje od druge (obično se piše ovako: 1:1, 21:1). Što je veća razlika između brojeva, boje se više razlikuju u svjetlini. W3C preporučuje sljedeće omjere između svjetline teksta i slika:
- Ako je tekst mali, odnos treba da bude najmanje 4,5:1;
- Za veliki tekst (tj. 14 pt i više za podebljano, 18 pt i više za običan tekst), omjer od 3:1 ili više je optimalan.
Bonus: Osnovni alati za UX dizajnera
Da vam olakšam, donosim i listu najkorisnijih alata za usklađivanje boja.Adobe Color CC
Adobe Color CC (ranije poznat kao Kuler) je odlično rješenje za pronalaženje, uređivanje i kreiranje paleta. Možete izmijeniti svaku boju uključenu u raspon ili je postaviti kao referencu u samo nekoliko klikova. Gotove palete mogu se sačuvati i dodati u biblioteku; osim toga, veliki broj shema boja koje su kreirali drugi članovi zajednice javno je dostupan na stranici.
Dribbble Pretraga po boji
Ako želite vidjeti kako drugi dizajneri koriste određenu boju u svojim projektima, idite na dribbble.com/colors i odaberite nijansu koju želite.
dizajn materijala
Smjernica Material Design-a nudi sjajnu shemu boja koju možete koristiti za ilustracije ili odabir boja marke. Sve boje koje pokriva odabrane su tako da u svakoj kombinaciji budu u harmoniji jedna s drugom.
Colorzilla
Colorzilla je ekstenzija za pretraživače Google Chrome i Mozilla Firefox koja uključuje čitav niz alata za boje, uključujući kapaljku sa mogućnošću hvatanja boja, CSS generator gradijenta i preglednik paleta.
coolors.com
Coolors.co je moćan alat za pravljenje palete više boja. Možete jednostavno zakačiti željenu boju i pritisnuti razmaknicu da biste dobili novi raspon. Ono što je posebno cool ovdje je to što niste ograničeni na jednu opciju – možete kreirati različite palete promjenom parametara na početku.
Posebno uživam u izradi paleta koristeći fotografije. Ovaj alat vam omogućava da otpremite fotografiju i napravite paletu boja koje su prisutne na njoj.
Simulator sljepila za boje u Adobe Photoshopu
Photoshop vam omogućava da testirate koliko je vaš dizajn univerzalno dostupan. Samo idite na karticu View > Proof Setup i odaberite tip koji vas zanima (tip Protanopia ili Deuteranopia tip).
NoCoffee Vision Simulator za Chrome
Kako biste bili sigurni da je vaš dizajn dostupan svima, dobra je ideja iskusiti sljepoću za boje tokom procesa dizajna. NoCoffee Vision Simulator pruža mogućnost kreiranja simulacije za bilo koji interfejs koji pokazuje kako to izgleda osobama s daltonizmom ili slabovidnim. Na primjer, ako primijenite filter "Deuteranopia" na kartici "Nedostatak boje", vidjet ćete web stranicu u sivim tonovima. Ovo će vam pomoći da prilagodite sučelje potrebama osoba s problemima s očima.
Boja je jedan od najmoćnijih alata u dizajnerskom arsenalu, ali njome nije lako savladati. Nadam se da će pravila koja sam naveo biti korisna za početnike da postave temelje. Sljedeći korak je vježba, jer jedini način da postanete dobri u kreiranju paleta je da to radite što je više moguće.
Ovaj članak govori o tome kako dobiti skup uzoraka boja sa određene slike da biste kreirali vlastitu kolekciju željenog raspona boja. S obzirom na to da mnogi korisnici Photoshopa moraju raditi s različitim kupcima i svaki od njih preferira određeni izgled u određenim nijansama boja, ovaj će vam članak pomoći da jednostavno i brzo napravite vlastiti set boja.
Primjer slike za buduću paletu boja
Ništa ne može tako skladno kombinovati boje kao priroda. U bilo koje doba godine, razni krajolici puni su najjedinstvenijih nijansi koje neće svaka osoba moći prenijeti. Stoga, da biste stvorili vlastitu paletu boja, možete koristiti običnu fotografiju s pejzažom i uzeti uzorke boja iz nje. Također u ovoj lekciji, korak po korak će biti date upute o tome kako vratiti standardni set boja postavljenih prema zadanim postavkama i kako primijeniti kreiranu paletu s unaprijed odabranim nijansama.
10 koraka za kreiranje vlastitog kompleta s potrebnim tonovima boja
Prije svega, morate se odlučiti za fotografiju, odakle želite uzeti nijanse, a zatim pokrenuti program Photoshop.
Panel s uzorcima
Predstavljeni standardni skup boja u panelu Swatches treba obrisati kako biste lako mogli kreirati vlastitu paletu. Međutim, nema razloga za sumnju, jer se izbrisani skup može lako vratiti nazad. Područje uzorka od interesa nalazi se pored panela Boja i Stilovi.
Da biste izbrisali skup, morat ćete raditi sa svakim uzorkom zasebno, program nema takvu funkciju kao što je "obrisati sve uzorke". Stoga, da biste uklonili jednu boju, morate pritisnuti dugme Alt (Win) ili Option (Mac) i, sa kursorom miša koji lebdi preko nje, izbrisati je jednostavnim klikom. Ukupno ima 122 uzorka, morat ćete kliknuti isti broj puta. Na kraju, nakon operacije, ploča bi trebala ostati prazna.
Alat za kapaljku
Za početak, učitajmo unaprijed odabranu sliku, odakle smo odlučili uzeti nijanse boja. Zatim se ponovo vraćamo na radnu ploču i odabiremo alat "Pipeta". Postoji brži način za navigaciju do ovog elementa: samo pritisnite tipku I.
Prvi uzorak boje sa slike
Čim je kapaljka odabrana, pomaknite kursor miša na element slike od kojeg je potreban uzorak boje i kliknite na ovo područje. Odabrana boja se prikazuje na alatnoj traci, tako da možete vidjeti koja je nijansa tačno primljena i smatrat će se glavnom.
Treba napomenuti da da biste pojednostavili proceduru odabira boje, možete držati pritisnutu lijevu tipku miša i glatko pomicati kursor preko područja slike. Kada pređete mišem iznad svih boja pojedinačno, možete ih vidjeti na alatnoj traci, što vam omogućava da bolje pogledate nijansu boje prije nego što odaberete pravu. Čim se pronađe željena boja, pustite tipku miša.
Odabir željene boje za paletu pomoću kapaljke
Dodajte boju panelu Swatches
U ovoj fazi, nakon što dobijete prvi uzorak boje, on se mora postaviti na panel "Swatches". Da biste to učinili, pomaknite kursor na prazno područje unutar ploče s budućim nijansama, zbog čega će poprimiti oblik kante boje, a kada se klikne, prethodno odabrana boja će se pretvoriti u uzorak. Nakon ove operacije, program će prikazati dijaloški okvir u koji ćete morati unijeti naziv za rezultirajuću boju. U principu, naziv se ne može unijeti, jer ih sam program postavlja po defaultu. Nakon što je boja imenovana, ona se odmah pojavljuje na panelu Swatches.
Napravite set sa nijansama boja
Da biste prikupili kompletnu paletu potrebnih boja, trebali biste nekoliko puta napraviti nekoliko prethodnih koraka:
Odaberite željenu boju i kliknite na prazno područje na panelu sa uzorcima;
Boju čuvamo kao uzorak, dajući joj ime ako je potrebno.
Broj sačuvanih uzoraka može biti neograničen, sve zavisi od želje. Na kraju, nakon obavljenih radnji, set sa potrebnim nijansama boja će se sastaviti na panelu sa uzorcima.
Nova paleta gotova
Čuvanje uzoraka u zasebnom setu
Kada se dodaju potrebne boje, rezultirajući set se mora sačuvati kako bi se mogao koristiti u budućnosti. Da biste to učinili, pritisnite dugme u gornjem desnom uglu, koje se nalazi na panelu sa uzorcima, da biste otišli u kontekstni meni, gde sa liste prikazanih naredbi izaberite stavku "Sačuvaj uzorke". Prilikom spremanja, morat ćete dati naziv skupu. Nakon obavljenih radnji, set će biti sačuvan u istom folderu kao i ostali kreirani po defaultu, što znatno olakšava pronalaženje skupa ako je potrebno.
Vraćanje zadanih uzoraka boja
U slučaju da je potrebno vratiti standardnu paletu nijansi boja nakon brisanja svih boja, ponovo se vraćamo na kontekstni meni panela sa uzorcima i biramo naredbu "Vrati uzorke". U dijaloškom okviru koji se pojavi program će vas pitati da li želite zamijeniti trenutni set standardnim. Ovdje možete zamijeniti nijanse boja i jednostavno dodati trenutnim uzorcima bez njihovog brisanja. Ovom jednostavnom metodom možete vratiti standardni skup uzoraka boja.
Učitavanje seta nijansi boja
Vratimo se skupu uzoraka koje smo kreirali da vidimo kako primijeniti date boje. Da biste to učinili, vratite se na meni ploče Swatches. U donjem dijelu nalazi se lista kompleta sa uzorcima, koji se također mogu koristiti, jer su prvobitno bili uključeni u program. Budući da se svi novi kreirani setovi spremaju na isto mjesto kao i standardni uzorci, skup s ranije kreiranim nijansama lako se može pronaći na ovoj listi. Svi skupovi u programu su raspoređeni po abecednom redu, što uvelike pojednostavljuje pretragu. Nakon toga, ponovo će se pojaviti dijaloški okvir sa pitanjem da li želite zamijeniti postojeće uzorke novim. U tom slučaju pritisnite dugme sa komandom "Zameni". Odabrana paleta boja će se odmah učitati na radnu ploču, mogu se koristiti uzorci boja.
Palete boja i uzorci
Odabir osnovne boje na panelu Swatches
Glavna prednost korištenja uzoraka boja je da nema potrebe da se s vremena na vrijeme pozivate na paletu boja koju program daje da biste pronašli pravu boju. Na kraju krajeva, svi su prikazani na ploči s uzorcima, što čini vrlo praktičnim pronalaženje željene boje. Za odabir određene nijanse dovoljno je pomaknuti kursor miša preko nje, koja će odmah poprimiti oblik kapaljke, i kliknuti lijevom tipkom miša. Odabrana je željena boja. Ikona sa glavnom bojom će biti prikazana na području sa alatima.
Postavite pozadinu
Da biste postavili pozadinu, morate se odlučiti za boju. Zatim pritisnite i držite tipku Ctrl (Win) ili Command (Mac) i kliknite na željenu boju na ploči. Kao rezultat toga, cijelo radno područje programa će dobiti pozadinu. Nadalje, sve odabrane boje iz vlastitog seta možete koristiti po vlastitom nahođenju, sve ovisi o vašoj mašti. Koristeći alate Photoshopa, možete dizajnirati postere u određenoj shemi boja.
Stoga vam ovaj članak omogućava da kreirate vlastiti set s potrebnim nijansama boja u Photoshopu. Ako slijedite predstavljena uputstva korak po korak, ova operacija neće oduzeti previše vremena.
Izgled proizvoda koristeći prethodno kreiranu prilagođenu paletu boja