Share
Jeg husker fortsatt en av mine tidligste kunstklasser når jeg, som et lite, ivrig barn, ble presentert med en rekke lyse farger. Jeg husker glede av å se primære farger blande i sekundære farger for første gang, og jeg redegjorde for at hvis to farger kunne lage en nydelig ny farge, alle Fargene sammen må gjøre noe enda bedre! Det var helt skuffende å innse at uansett hvordan jeg gikk om det, hvis jeg brukte alle fargene til min disposisjon, endte jeg uunngåelig med en kacky farge som bare kan kalles "BLECH".
År senere, som en fledgling webdesigner, opplevde jeg noe av samme prosess igjen. Da jeg lærte, falt jeg i den uunngåelige fellen med å bruke for mange farger, eller kombinere dem på feil måte, bare for å ende opp med noe litt "BLECH".
Jeg satte på å prøve å lære å lage fargeskjemaer på nettet, og jeg fant mye fascinerende informasjon om fargeteori. Jeg leser om fargetoner, toner, nyanser, toner, metning og lysstyrke, samt analoge, monokromatiske, triad, komplementære og sammensatte fargeskjemaer.
Den grunnleggende RGB-fargepalettenMen uten et praktisk rammeverk for å spalte den informasjonen inn, fant jeg ut at det i første omgang ikke fikk meg så mye nærmere å lage godt farget webdesign. Faktisk var det først etter at jeg begynte å skape solide fargevalg gjennom ren prøving og feil at all fargeteori jeg hadde lest begynte å gi mening.
I prosessen plukket jeg opp noen "sikkerhetsretningslinjer" for nettsidefargesystemer som jeg skulle ønske jeg hadde kjent i begynnelsen. Når du først kommer i gang, er fargeteori ikke nødvendigvis det du trenger opp foran. Ofte må du få ballen til å rulle med noe litt mindre teoretisk, og litt mer "maling etter tall".
I denne opplæringen vil jeg dele med deg seks sikre brann, "Kan ikke gå galt" retningslinjer du kan følge for å få en grunnleggende forståelse for å jobbe med farge i webdesign. Dette er ikke regler, da du vil lage mange fargevalg i din karriere som vil gå i en helt annen retning. Snarere er de et utgangspunkt, en sikkerhetsguide for hvordan du overlever dine første utflukter i webdesignverdenen uten å løpe inn i "BLECH".
En av de mest grunnleggende prinsippene i webdesign er at uansett hvor mye tid du bruker til å skape en strålende design, er den endelige rollen å spille andre fiol til den virkelige stjernen av showet. innholdet. Ditt fargevalg bør aldri gjøre nettsteddesignen "høyere" enn innholdet den presenterer. Ditt design burde være i bakgrunnen, noe som bidrar til å presse nettstedets innhold i forgrunnen.
Subtile fargeskjema gjør at bildene kan være fokus
Høyt fargeskjema avhenger av bilder. Ikke le, dette skjer virkelig på den vilde banen.En svært vanlig prosess i webdesign er å skape selve designet i relativ isolasjon, ofte i programvare som Photoshop eller Sketch. Hvis du ikke har noen eksempler på innhold, kan det være lett å ende opp med et design som kan se bra ut av seg selv, og at en klient kan godt elske i mockup-form, men som er for distraherende for besøkende i praksis. Faktisk er webdesignprosessen så tett knyttet til innhold at mange webdesigner av høy kvalitet virker alt annet enn tomme uten innhold på plass.
Det er en god idé å starte med å legge ut et utvalg av innholdet du forventer å vises på nettstedet, enten i designprogramvare eller rett inn i kode, og deretter designe rundt det. Dette er spesielt tilfellet hvis bilder eller bilder av en bestemt stil skal være involvert, slik at du kan sørge for at designet ditt flyter harmonisk med dem. Tenk deg at nettstedets innhold er et unikt individ for hvem du må skreddersy en perfekt passform.
Det finnes et uendelig antall fargekombinasjoner du kan velge for hovedbakgrunn og tekstbase. Men min anbefaling er å starte med å mestre den enkleste, og den er hvit og / eller lys grå i bakgrunnen sammen med mørkegrå tekst.
Hvis du ser på et utvalg av populære nettsteder, maler eller temaer, er det en god innsats at et flertall av dem vil ha akkurat den samme basen av mørkegrå tekst på hvit eller lysegrå, og det er med god grunn. Med denne kombinasjonen er du nesten garantert å gi lesbarhet for besøkende, og la tekst og bildebasert innhold komme i forgrunnen.
Med noen eksempler på innhold på plass, opprett en grunnleggende gråskalaoppsett, for eksempel:
Generelt bør du unngå å bruke jet svart for tekst som mørkegrå er litt enklere å lese. Et komfortabelt utvalg er hvor som helst fra # 333333 til # 666666.
For din bakgrunnsfarger, full hvit #FFFFFF er den sikreste innsatsen for bakgrunner umiddelbart bak noen hovedtekst av tekst. For andre bakgrunnselementer kan du gå hvor som helst fra #FFFFFF ned til #CCCCCC.
Igjen, dette er ikke regler for farger du må bruk, bare retningslinjer du vet at du trygt kan komme i gang med.
De vanligste stedfargesystemene går galt, er når man snurrer flere forskjellige farger. Jo flere farger du bruker, desto vanskeligere blir det å holde dem alle under kontroll. Så til å begynne med, bare legg til en ekstra farge på toppen av din gråtonebase som skal brukes til å markere ting som lenker, noen overskrifter, menyer, knapper og så videre. Din høydepunktsfarge kan være blå, grønn, rød eller hva du vil.
Velg din høydepunktsfarge ved først å legge ut en boks over basen din, slik at du kan måle hvordan fargen din ser ut i forhold til alle elementene. Deretter åpner du fargeplukeren og klikker i midten av øvre høyre kvartal av fargekartet.
Flytt glidebryteren opp og ned og velg en farge du tror vil fungere godt for ditt design.
På dette punktet jobber du nå med tre grunnleggende farger; din bakgrunn, tekst og et høydepunkt. Du kan, og bør bruke mer enn en høydefarge i fremtiden, men tenk på det som jonglering. Du jobber allerede med tre jongleringstenger, så vær komfortabel med bare disse tre, og legg deretter til mer i rotasjonen når du er trygg.
Du har nettopp lært hvordan du velger en "hue". I et nøtteskall er en nyanse en grunnfarge. Når du flytter skyvekontrollen opp og ned, ser du"H"verdi i fargerpekeren endringen.
"H" står for fargetone, og når du har valgt høydepunktsfargen din, er nummeret i boksen sin fargetone.
Hvis du er i tvil i hvilken høydefarge du skal bruke, velg blå. Alvor. Blå er ofte den mest fleksible fargen å jobbe med og passer til det høyeste antallet nettstedtyper. Farger som lilla og gule kan være veldig hyggelige, men kan også raskt slå seg hvis de brukes på feil måte.
På den annen side kan du gjøre omtrent alt med blå som en høydefarge, og du kan ikke gå for langt feil. Hvis du ikke er sikker på hvor du skal begynne å lære eller hvilken farge du skal bruke i et prosjekt, faller du bare tilbake på blått. Den spesielle blåen du velger, kan være hvor som helst fra en marineblå (fargetone 235) til en aqua (fargetone 190) og du er i ganske trygt område.
For mitt eksempel layout har jeg valgt en nyanse av 205. Når du har avgjort på høydepunktet ditt, farger du frem og legger det til ditt design, uansett hvor du synes det er nødvendig. Hvis du bruker høydefarge på knapper eller et område med tekst på toppen av det, endrer du også tekstfargen. I dette tilfellet har jeg endret tekst over uthevede områder til hvitt.
Når du har valgt høydepunktsfarge, la du glidebryteren (fargetone) hvor den er fra det punktet på. Du kommer til å trenge ekstra farger for ditt design, men de kommer alle til å være variasjoner av den ene høydefargen du allerede har valgt for å holde ting enkelt.
Hvis du vil opprette fargevarianter, drar du rundt på kartområdet i fargevalgeren.
Bruk disse typer fargevariasjoner for ting som:
Øverste høyre hjørne av fargekartet er landet med høyokta farger. Farger i øverste høyre hjørne er som Formel 1 racerbiler; de kan utføre utrolig og er svært forlokkende, men generelt tar det mye erfaring å bruke dem godt. Uten den opplevelsen kan de forårsake ulykker, så det er best å kutte tennene på farger som er mer tonet ned.
Det er derfor i den tredje delen av denne opplæringen jeg bedt deg om å klikke på fargekartet midt i øverste høyre hjørne før du velger høydefargen din, for å sikre at du sparket av med en relativt dyp farge.
For å illustrere, se hva som skjer hvis jeg bare endrer fargen på designet vårt så langt uten å berøre fargekartet.
Det ser fortsatt ganske fint ut, ikke sant? Men hvis jeg drar fargekartet til det øverste høyre hjørnet, er det plutselig ikke så fint.
Ouch mine øyne! Hvis du vil sørge for at du ikke scorch retinas av dine besøkende, følg en generell retningslinje for toning ting ved å holde deg utenfor det øverste høyre hjørnet av fargekartet.
I de to siste delene lærte du faktisk å bruke noen få forskjellige aspekter av fargeteori. Du lærte hvordan du skal jobbe med:
Når du drar rundt kartområdet i fargepluksjonsområdet, vil du se at "S" og "B" -verdiene endres, noe som står for "metning"og"lysstyrke". Du ser også fargetallet forblir det samme. Så du oppretter fargevariasjoner ved å endre metningen og lysstyrken på den opprinnelige fargen.
metning er hvor levende fargen din er uttrykt. For eksempel tenk "Skjorten min var mettet med spildet rødvin". På en typisk fargepikser bestemmes metning av hvor mye hvitt er blandet inn med din base fargetone. Jo mindre hvitt, jo mer mettet.
Når du drar til høyre på fargekartet, reduseres mengden av hvitt og dermed øker metningen slik at "S" -verdien går opp. Når du drar til venstre mot det hele hvite hjørnet reduserer du metningen slik at "S" -verdien går ned.
Metting på et standard fargeplukekartDenne blandingen av hvit i med din opprinnelige nyanse kalles også å skape en "tint". Begrepet kommer fra malingblanding, hvor en hvit maling blandes inn med en farget maling.
lysstyrke er hvor mye svart det er blandet inn i fargen din. Jo mindre svart, jo mer lysstyrke.
Når du drar oppover på kartet, reduserer du mengden svart, øker lysstyrken og "B" -verdien på fargeplukkeren går opp. Når du drar ned, øker du den svarte og "B" -verdien går opp.
Blir svart inn med den opprinnelige fargen din kalles også å skape en "skygge". Dette kommer også fra malingblanding, der en svart maling blandes med en farget maling.
Når du blander grå i fargen, kalles det å skape en "tone"Når du beveger deg ut fra det øverste høyre hjørnet som vi gjorde over, senker du både metning og lysstyrke som legger til både hvitt og svart (grått), og dermed skaper en tone. Så i utgangspunktet er både metningen og lysstyrken din mindre enn 100%, det er en tone.
Igjen kommer dette begrepet fra malingblanding, hvor en grå maling er opprettet og deretter blandet med en farget maling. Dette er også hvor uttrykket til "tone ting ned"kommer fra. Cool huh?
En "monokromatisk"Fargevalg er hvor du tar en base fargetone og strekker den med fargetoner, nyanser og toner. Du har nettopp lært hva alle disse vilkårene betyr i en praktisk innstilling. Så ved å velge en høydefarge og skape variasjoner på det, opprettet du faktisk et monokromatisk fargeskjema.
Fortsett å praktisere dine monokromatiske fargeskjemaer på en gråtonebase til du føler deg trygg. Prøv å lage dem med forskjellige fargetoner som høydepunktsfarge, eksperimentere for å se hvordan det endrer innstillinger for metning og lysstyrke du kan bruke.
Når du føler deg komfortabel, fortsett å legge til en ekstra høydefarge. Jeg anbefaler å prøve oransje og blå i din første tur som de pleier å være den enkleste duoen å jobbe med. Prøv deretter grønn og blå, som i min erfaring er den nest enkleste. Begge disse kombinasjonene pleier å være en hit med kunder og kunder.
Det absolutt beste du kan gjøre for å drive din forståelse av fargevalg for nettet, er å få tak i en fargesampler nettleserforlengelse som Colorzilla, og bruk den til å begynne å undersøke hvor erfarne designere gjør det. Når du surfer på internett, ser du et fargevalg som ser bra ut, bryter fargeprøven og tar en titt på farger som brukes på siden. For hver nyanse du prøver, ta en titt på hva metning og lysstyrkenivå fungerer best med det. Vær også oppmerksom på hvilke farger som fungerer sammen med andre.
Hvis du er i tvil, kan du alltid falle tilbake på retningslinjene dine for "sikkerhet først" og du vil være trygg fra "BLECH" herfra.
Accentsconagua