Värimallien soveltaminen edellyttää niiden näkemistä uudelleen
Suunnittelijoille on olemassa monia online-resursseja, joiden avulla voit tutkia, hienosäätää ja ladata hyviä väriyhdistelmiä.
Toistamalla täydentäviä, analogisia, yksivärisiä ja muita yhdistelmiä avaa meidät jännittäviin mahdollisuuksiin, eikä ole pulaa ilmaisjakeluista.
Mutta on eroja voittavan värimallin ja voittavan suunnittelun välillä, joka käyttää sitä.
Värin valinta on ensimmäinen askel. Suunnittelun vaatimusten mukaisuus on yhtä tärkeä.
Se mikä näyttää hyvältä mallista, ei ehkä toimi hyvin verkkosivulla - mutta se ei tarkoita, että sinun on palattava neliöön. Tutkitaan uusia tapoja tarkastella värimalleja.
Väri on tärkeä rooli sisällön absorboimisessa. Olipa kyseessä muotoilu varattu tai äänekäs, ystävällinen tai synkkä, lämmin tai viileä, sivuston kävijöihin vaikuttaa välittömästi asettelun, typografian, kuvasisällön ja luonnollisesti värimallin muodostavien sävyjen ja arvojen asettamat äänet.
Värien valinta voi olla subjektiivisin tehtävä web-suunnittelussa. Jotkut värit toimivat hyvin yhteen; toiset, ei niin paljon. Jotkin yhdistelmät vetoavat tiettyihin ihmisiin. Useampi kuin yksi värivaihtoehto voi olla samaa mallia.
Onneksi on olemassa monia resursseja auttamaan. Väripalettigeneraattorit, kuten Värimallin suunnittelija , Adobe Kuler , Aviary Toucan ja Päivittäinen värijärjestelmä olemme hyvien paikkojen joukossa löytää värin yhdistelmiä, jotka tehokkaasti asettavat mielialan. Palettien löytäminen on kuitenkin vain ensimmäinen askel. Värimallin mahdollinen tehokkuus voi vaarantua tapaa, jolla sitä sovelletaan .
Värien lukumäärä järjestelmässä tekee eron
Värimalli on joukko värejä, jotka on valittu toimimaan yhdessä. Järjestelmissä on yleensä vähintään neljä väriä ja ne voidaan usein ladata yksinkertaisina kuvina ja joskus sellaisina
Edellä esitetty värimalli on tyypillinen siitä, kuinka useimmat järjestelmät esitetään: tasaisina väreinä yhtenäisinä näytteinä. Tämä sarja voitaisiin merkitä sellaiseksi:
- Iloinen
- Ystävällinen
- nykyajan
- Rento
- Ensiöosat
Mutta yksi tai kaksi väriä erottuu ja erilaiset adjektiivit saattavat tulla mieleen.
Yllä olevassa kuvassa on sama malli kuin swatchissa, mutta se on vähemmän rento ja aavikkomaisempi. Tämä kuva korostaa lämpimiä värejä. Eristetyt laastarit sinisiä ja vihreitä kiinnittää huomiota olemalla pienempiä. Tuloksena olevaa mielialaa voidaan kuvata seuraavasti:
- hiekkainen
- Kirkas
- Lämmin
- Khaki
- Karkea
Hallitsevan värin valinta vaikuttaa siihen, miten järjestelmä näkyy.
Tässäkin käytetään samoja värejä, mutta hyvin erilainen loppu. Tämä kuva näyttää jotain abstrakti maailmankartalta, jossa on punaisia, vihreitä ja ruskeita saaria. Kuva ei ole vain jäähdytin - se on hieman tummempaa , vaikka se tulee samasta paletista.
Se, että pystyt tunnistamaan hyvät väriyhdistelmät, ei riitä, koska värejä käytetään harvoin tasaisesti verkkosivujen suunnitteluun. Värien käyttäminen viisaasti ja oikeassa suhteessa on yhtä tärkeä kuin oikeiden värien valitseminen.
Tausta Asettaa äänen
Ilmeisin tapa tehdä värejä on taustalla. Tämä laaja alue voi houkutella yhtä paljon huomiota kuin sen yläpuolella oleva sisältö.
Huolimatta identtisestä sisällöstä, oikeanpuoleinen muotoilu on paljon lämpimämpää kuin vasemmalla. Mutta täällä tapahtuu enemmän kuin pelkkä värivaihto.
Vihreän rakenteen (eli valkoisen tekstin punaisella) sisältöpalkit pitävät omaa vihreää taustaa vasten. Mutta punaisella taustalla oikealla on pimeät vihreät palkit. Tämä johtuu siitä, että tämän erityisen punaisen sävyn lisäksi lämpeneminen on kyllästynyt. Itse asiassa vain elementit, joilla on tarpeeksi visuaalista painoa punaisen taustan torjumiseksi, ovat suuret otsikot. Pieni kehon teksti ja haalistuneet vihreät palkit vaalea verrattuna. Se ei välttämättä ole huono; voimakas tausta antaa sivulle huomattavan läsnäolon. Vihreä muotoilu on viileämpi ja antaa sisällölle rennomman ympäristön.
Minkä värin käyttö on parempi? Se riippuu sinun tarkoituksestasi. Pitäisikö kävijät pitää sisällön rentoina tai rohkeina? Haluatko pelata värillisiä palkkeja? Oletko huolestunut siitä, että tausta ylittää tiedot? Onko yksi väri tärkeämpi kuin toinen merkkijonoosi? Vastaukset näihin kysymyksiin määräävät, mikä väri on "oikea". Tämä yksittäinen väripaletti esittää kahta eri ratkaisua.
Väri tekstin takana
Tekstin ja taustan vuorovaikutukseen vaikuttavat kunkin koon ja määrän. Tekstin vaikutus sivulle riippuu yhtä paljon tekstin väristä kuin taustan väristä - huolimatta yleisestä taipumuksesta huoleen.
Ylempi, kevyt teksti tummaa taustaa vasten toimii paremmin, kun tyyppi on suuri. Otettuamme värimaailmalta, jonka aloitimme, tämä kulta on vähemmän sopiva kehon tekstiin (eli noin 13 pikseliä tai pienempi). Ratkaisu on yksinkertainen:
Yllä, kahden viimeisen rivin pieni teksti on paljain kultainen kulta. Se ei ole aivan valkoista, mutta paljon luettavampaa kuin ensimmäisessä kuvassa olevat kaksi riviä. Lisätty kontrasti pitää pienen tekstin taustan taistelussa. Avain on käyttää värimaailmaa lähtökohtana, ei kiinteänä sääntönä. Jos taustaväri uhkaa ylittää pienemmät elementit, lisää kontrastia, joka ylläpitää järjestelmän eheyttä ja pitää sisällön luettavana.
Teksti valkoisella
Monilla verkkosivuilla on joko valkoista taustaa tai valkoista sisältöä. Mutta "valkoinen" ei tarkoita "tyhjää". Suuret valkoiset karhot vaikuttavat värien havaitsemiseen. Esimerkiksi:
Värit, jotka aloitimme, näyttävät kevyemmiltä, kun niitä käytetään tekstiä käytettäessä.
- Suhteellisen tumma sininen luo riittävän kontrastin tekstin luettavuuden suhteen valkoiseksi.
- Tämä erityinen vihreän sävy taustaa vasten. Jos tarkoitus on harmonia, niin vihreät teokset.
- Punainen + valkoinen = vaaleanpunainen tai persikka.
- Kulta näyttää melkein kuin seepian sävy.
Valkoinen pyrkii kirkastamaan kaiken sen koskettamisen. Jos haluat asettaa valon tunnelman, kaikki edellä mainitut yhdistelmät saattavat toimia. Vaikutuksen lisääminen voi tumentaa värimallia.
Toistaminen värimaailmaohjelmilla Photoshopissa
Jos suunnittelusi ei vaadi kaikkien järjestelmässä olevien värien käyttämistä tasaisesti, sinun on testattava yksi tai kaksi väriä määräävässä asemassa. Tavoitteena on löytää järjestelmä väreillä, jotka toimivat keskenään ja hallitsevalla värillä.
Onneksi meillä on helppo kokeilla värejä. Noudata seuraavia ohjeita Photoshopissa, kun haluat nähdä, miten eri värinmääritykset voivat vaikuttaa suunnitteluun.
1. Etsi tai luo väriteema. Esimerkissämme on viisi väriä, mutta jokin edellä oleva numero toimii.
2. Luo uusi kuva Photoshopissa, 500 x 500 pikseliä, valkoisella taustalla.
3. Luo neljä uutta kerrosta (taustakerros on viides). Jos järjestelmässäsi on enemmän tai vähemmän kuin viisi väriä, lisää tai poista kerrokset vastaavasti.
4. Täytä jokainen kerros eri värillä kuin järjestelmästäsi.
5. Lisää kerrosmaskin jokaiselle kerrokselle taustakerroksen yläpuolelle. Kerrokset-paletin pitäisi näyttää tältä:
Yläpuolella on Photoshop-kerrospaletti, jossa on yksi kerros väriä kohden ja jossa käytetään kerrosmaskeja.
6. Suorita "Kynnysarvo" -toiminto jokaiselle kerrosmaskille - mutta ei itse kerroksille.
Kun käytät "Thresholdizer" -toimintoa, muista valita kerrosmaskit , ei varsinaista kerrosta. Jos suoritat toiminnon kerroksessa virheellisesti, niin voit olla tyytyväinen "Kumoa" -toimintoon.
Tämä toiminto luo useimmiten satunnaisen kuvion kerrosmaskissa. Täältä suunnittelija huolehtii: "Kynnys" -ohjauksella. Liu'uta Kynnys-säädin vasemmalle, jotta saat paljastettua tietyn kerroksen suuremman ja oikein paljastaa vähemmän. Tämän toiminnon soveltaminen kullakin kerrosmaskilla tekee yhdestä väristä hallitsevan muita satunnaisessa kuvassa.
Tässä tapauksessa Kynnys-säädin määrää, kuinka paljon tiettyä kerrosta on näkyvissä. Pääosin mustan kerroksen peite piilottaa kerroksen; enimmäkseen valkoinen paljastaa kerroksen. Kynnysarvo-toiminnon käyttäminen jokaisella kerrosmaskilla luo tämänkaltaiset värit:
Tämä Photoshop-dokumentti osoittaa, mikä muoto voisi näyttää, jos keltainen oli hallitseva. Nyt värien säätäminen on helppoa: jos haluat väriä enemmän (tai vähemmän) kontrastia, käytä Photoshop-komentoa (kuten Kuva> Säädöt> Värisävy ).
Esimerkiksi vihreän sävy, joka toimi hyvin sininen aikaisemmin, ei näytä kovin hyvältä nyt, kun sininen ei ole hallitseva. Muutama kokeilu paljastaa seuraavat:
Tässä meillä on kaksi muunnelmia alkuperäisestä värimallistamme. Vaihtelu # 1 tummentaa hieman vihreää. Se toimii melkein. Vaihtelu # 2 muuttaa kaikki paitsi keltainen kontrastin lisäämiseksi ja sävyjen kohdistamiseksi.
Entä jos muotoilumme oli enimmäkseen sinisiä keltaisen sijasta? Tämä sinisen sävy on riittävän tumma vastaamaan muita värejä, mutta yksikään niistä ei koordinoi - ne ovat kaikki esivallat. Valitsemalla uuden hallitsevan, olemme luoneet uuden ongelman.
Vaihtoehto # 1 korvaa pehmeän punaisen tumman tumman sinisellä ja muuttaa vihreän sävyksi vaalean mintun. Vaihtoehto # 2 menee toisin, käyttämällä enemmän punaista (tai burgundia) sijasta vähemmän.
Mikä tahansa näistä muunnelmista on subjektiivista. Ihannetapauksessa käytät niitä varsinaiseen suunnitteluun ennen lopullisen päätöksen tekemistä. Avain on parhaillaan: saada paletti, valita hallitseva väri ja tehdä muut toimivat sen kanssa.
Tietoja "Thresholdizer" -toiminnosta
Tätä toimintaa ei ole mysteeriä. Voit saada saman tehon käyttämällä Suodata> Render> Pilvet tai Suodata> Render> Erotus pilvet kerrosmaskille. Tämä toimenpide yksinkertaistaa prosessia yksinkertaisesti ja järjestää Threshold-komennon decileiksi.
Vapaasti lataa "Thresholdizer" -toiminto . Parempi vielä, luo oma ja jakaa se kaikkien kanssa tarjoamalla linkki alla oleviin kommentteihin.
Värien arviointi ilman toimintaa
Tietenkin on olemassa tapoja arvioida väriä pelaamatta Thresholdin kanssa. Aloita valitsemalla yksi pääväri ja sitten tekemään muut toimivat sen kanssa.
Tässä on alkuperäinen värimalli, jossa on ruskea ensisijaisena värisenä.
Olemme toned alas vihreä ja kyllästynyt punainen. Harmaat värit ovat omaa, kuten sinistä (jota ei ole säädetty).
Täällä olemme haalistuneet vihreä, keltainen ja punainen. Nämä alhaisen avaimen "aksentit" sekoittuvat ruskeaan taustaan. Tummata sinistä kontrastia.
Kolme tummempia päävärejä menevät hyvin keskiruskea vasten, vaalean keltainen toimii korostusväreinä.
Jälleen lopullinen päätös tulee, kun suunnittelija soveltaa näitä järjestelmiä todelliseen muotoiluun. Siihen saakka nämä ovat vain lähtökohtia: hyödyllisiä työkaluja törkeiden yhteyksien välttämiseksi, käteviä viittauksia teemojen pitämiseen ja erinomainen tapa tutkia yhdistelmiä.
Väri on vain suunnitteluala. Värinkäyttö on taito, jonka täytyy harjoittaa hallita mielialaa, viljellä makua ja nähdä mahdollisuuksia muutamassa värimallissa.
Vain yksi asia on varma: että vihreä on mennyt.
Kirjoitettu yksinomaan Ben Gremillionin Webdesigner Depotille. Ben on freelance nettisivujen suunnittelija joka ratkaisee viestinnän ongelmat paremmalla suunnittelulla.
Kuinka testaat värejä? Mitkä ovat suosikki tapoja luoda värimalleja? Jaa näkemysi alla oleviin kommentteihin.