Skip to main content

Web-värijärjestelmän luominen

01/10

Väri- ja Web-värijärjestelmien ymmärtäminen

Verkkosivustossa on neljä perusväriohjelmaa. Jokainen tämän artikkelin sivu näyttää kuvan värimaailmaa ja kuinka voit luoda vastaavan mallin Photoshopissa.

  • yksivärisenKäyttämällä samaa värisävyä. Niissä voi olla erilaisia ​​sävyjä tai sävyjä riippuen siitä, kuinka paljon valkoista tai mustaa on lisätty.
  • vastaavaTämä käyttää värejä, jotka ovat lähellä toisiaan värirenkaalla.
  • täydentäväTätä pidetään usein "vastakkaisena", koska kaksi väriä komplementaarisessa värimallissa ovat toisiaan vastakkain värirenkaassa.
  • kolmisointuistenNämä värit ovat tasaisesti värialueella.

Kaikki värimallit käyttävät tätä keltaista perusväriä.

02/10

Monokromaattinen Web-värijärjestelmä

Tämä värijärjestelmä käyttää mustanväristä keltaista perusväriäni ja lisää valkoisen ja mustan sävyä sävyksi ja sävyttää suunnitelmaa sen mukaisesti.

  • vasemmassa yläkulmassa - perusväri # ffe500
  • oikeassa yläkulmassa - lisätään täyttö 50% valkoinen saadaksesi # fff280
  • alempi vasen - lisätään täyttö 75% valkoinen saadaksesi # fff8bf
  • alempi oikea - lisäsi 50% mustan täytteen saadaksesi # 7f7200

Monokromaattiset värimallit ovat usein helpoin kaikkien värimallien silmissä. Sävyjen ja sävyjen hellävaraiset muutokset tekevät väreistä virtaavan toisiinsa paremmin. Käytä tätä värimallia, jotta sivustosi näyttäisi olevan enemmän nestemäisiä ja kerättyjä.

03/10

Lisää monokromaattista Web-värijärjestelmää

Lisätty neliö 20% musta saadaksesi lisää värejä järjestelmään. Mustavalkoisen värin lisääminen väriisi voi luoda uuden värin paletille ilman, että sivun sävy sekaantuu.

04/10

Analoginen Web-värimalli

Tämä värimaailma ottaa keltaisen perusvärin ja lisää ja vähentää 30 astetta Photoshop-väripaletin sävyyn.

  • vasemmassa yläkulmassa - perusväri # ffe500
  • ylhäällä oikealla - +30 astetta saadaksesi # 99ff00
  • alempi vasen - -30 astetta saadaksesi # ff6600
  • alempi oikea - 100% valkoinen #ffffff

Analogiset värit voivat toimia hyvin yhdessä, mutta joskus ne voivat pahasti törmätä. Muista kokeilla näitä järjestelmiä enemmän ihmisiä kuin itseäsi, perhettäsi ja ystäviäsi. Kun he työskentelevät, he luovat sivuston, joka on värikkäämpi kuin monokromaattinen järjestelmä, mutta lähes yhtä nestettä.

05/10

Lisää analogista Web-värijärjestelmää

Lisätty neliö 20% musta saadaksesi lisää värejä järjestelmään.

06/10

Täydentävä Web-värijärjestelmä

Täydentävät värimallit, toisin kuin muut värimallit, ovat tyypillisesti vain kaksi väriä. Perusväri ja se on vastakkainen värirenkaaseen. Photoshopin avulla on helppo saada täydentävä väri - valitse vain värialue, jonka haluat täydentää ja paina Ctrl-I. Photoshop kääntää sen puolestasi. Varmista, että teet tämän päälle kaksoiskerroksella, joten et menetä perusväriäsi.

  • vasen - perusväri # ffe500
  • oikea - täydennys # 001aff

Täydentävät värimallit ovat usein paljon iskeämpiä kuin muut värimallit, joten käytä niitä huolella. Niitä käytetään useimmiten paloina, jotka täytyy erottua.

07/10

Lisää täydentävä Web-värimalli

Tämän version hankkimiseksi lisäsin 50% valkoisen värin alareunasta ja 30% mustasta keskusta-aukiolle. Kuten näet, se antaa sinulle muutamia vaihtoehtoja, mutta se on edelleen täydentävä väriteema.

08 of 10

Triadic-Web-värijärjestelmä

Kolmiulotteiset värimallit koostuvat kolmesta väristä, jotka ovat enemmän tai vähemmän tasaisesti värialueen ympärillä. Koska värirengas on 360 astetta, käytin jälleen värisäiliön värisävyä lisäämään ja vähentämään astetta 120 astetta perusväristä.

  • vasemmassa yläkulmassa - perusväri # ffe500
  • ylhäällä oikealla - +120 astetta saadaksesi # e500ff
  • alempi vasen - -120 astetta saadaksesi # 00ffe6
  • alempi oikea - 100% valkoinen #ffffff

Kolmiulotteiset värimallit tuottavat usein erittäin vilkkaita verkkosivuja. Mutta kuten täydentävät värimallit, ne voivat vaikuttaa ihmisiin eri tavoin. Muista testata.

Voit myös luoda tetradisia tai 4-värejä värimalleja, joissa värit ovat tasaisesti värialueen ympärillä.

09/10

Lisää kolmiulotteista Web-värijärjestelmää

Kuten muissa esimerkeissä, lisäsin 30% mustan neliön väreihin saadakseni lisää sävyjä.

10/10

Säröjävät Web-värimallit

Kauneus on katsojan silmissä, mutta on valitettavaa, etteivät kaikki värit mene yhteen. Epäsäännölliset värit ovat värejä, jotka ovat väritreunassa kauempana kuin noin 30 astetta, eivätkä ne ole toisiaan täydentäviä tai osa kolmia.

Ristiriitaiset värimallit voivat olla hyvin järkyttäviä, ja niitä tulisi käyttää vain huomion tuottamiseen. Muista, että koska nämä värit usein ristiriidassa, saatat saattavat olla tarkalleen mitä etsit.