Margir á netinu auðlindir eru fyrir hönnuði til að kanna, klipa og hlaða niður frábær litasamsetningum.

Að spila með viðbótargáttum, hliðstæðum, einlita og öðrum samsetningum opnar okkur til spennandi möguleika og það er engin skortur á frítíma.

En það er munur á aðlaðandi litasamsetningu og vinnandi hönnun sem notar það.

Velja liti er fyrsta skrefið. Aðlagast þeim til að passa hönnun kröfur þínar er jafn mikilvægt.

Það sem lítur vel út í samsýningu getur ekki gengið vel á vefsíðu - en það þýðir ekki að þú þurfir að fara aftur í fermetra. Við munum kanna hér nýjar leiðir til að líta á litakerfi.

Litur gegnir mikilvægu hlutverki í því hvernig fólk gleypir efni. Hvort hönnun er áskilinn eða hávær, vingjarnlegur eða óheillvæn, hlý eða kaldur, verða gestir á vefsíðu strax áhrif á tóninn sem sett er af útliti, leturfræði, myndmálum og auðvitað litbrigðum og gildum sem samanstanda af litasamsetningu.

Velja litir geta verið huglægasta starf í vefhönnun. Sumir litir vinna vel saman; aðrir, ekki svo mikið. Sumar samsetningar höfða til ákveðinna manna. Fleiri en eitt sett af litum getur henta sömu hönnun.

Sem betur fer eru margar auðlindir til að hjálpa. Litavalatöflur eins og Litaskemahönnuður , Adobe Kuler , Aviary Toucan og Daglegt litakerfi eru meðal hinna miklu stöðum til að finna litasamsetningar sem koma á skapi í raun. En að finna stiku er aðeins fyrsta skrefið. Möguleg skilvirkni hvaða litakerfisins sem er, getur stafað af því hvernig það er beitt .

Fjöldi lita í kerfinu skiptir máli

Litakerfi er sett af litum sem hafa verið valin til að vinna saman. Kerfi hafa yfirleitt að minnsta kosti fjóra liti og er oft hægt að hlaða niður sem einföldum myndum og stundum eins og ASE skrár. Við skulum vinna með eftirfarandi kerfi:

sýnishorn litasamsetningu með fimm litum

Litasamsetningin hér að ofan er dæmigerð fyrir því hvernig flestir kerfin eru kynntar: sem samræmdar sýnishorn af íbúðum litum. Þetta sett gæti verið merkt sem slíkt:

  • Kát
  • Vingjarnlegur
  • Samtímis
  • Frjálslegur
  • Primaries

En láttu einn eða tvo liti standa út og mismunandi lýsingarorð gætu komið upp í hugann.

litasamsetningu með brúnum og beige áherslu

Myndin að ofan hefur sama kerfi sem var kynnt í sýninu, en það er minna frjálslegur og meira eyðimörk. Þessi mynd leggur áherslu á heita litina. Einangruðum blettum af bláum og grænum vekja athygli með því að vera sparsari. The skapandi skap gæti verið lýst sem:

  • Sandy
  • Björt
  • Warm
  • Khaki
  • Gróft

Val á ríkjandi lit hefur áhrif á hvernig kerfið birtist.

litasamsetning með bláum og grænum áherslum

Aftur, hér erum við að nota sömu liti, en til mjög mismunandi enda. Þessi mynd lítur eitthvað út eins og óákveðinn greinir í ensku óákveðinn greinir í ensku óákveðinn greinir í ensku óákveðinn greinir í ensku óákveðinn greinir í ensku óákveðinn greinir í ensku abstrakt heimskort, Myndin er ekki bara kælir-það er örlítið dekkri , jafnvel þótt það sé frá sama stiku.

Að geta þekkt góða litasamsetningu er ekki nóg, vegna þess að litir eru sjaldan beitt jafnt á vefhönnun. Notkun litanna skynsamlega og í réttu hlutfalli er jafn mikilvægt og að velja rétta litina.

Bakgrunnurinn stillir tóninn

Augljósasta staðurinn til að hafa áhrif á lit er í bakgrunni. Þessi víðtæka víðáttan getur laðað eins mikla athygli og innihaldið er sett ofan á það.

dæmi um öflugt rautt og lúmskur grænt bakgrunn á sömu síðu hönnun

Þrátt fyrir að hafa sama efni er hönnunin hægra megin en það er til vinstri. En meira er að gerast hér en einföld litaskipti.

Innihaldin í grænu hönnuninni (þ.e. hvíta textann á rauðum) haltu sér á móti breiður grænum bakgrunni. En rauður bakgrunni til hægri er hreinn út refsað grænn barir. Þetta er vegna þess að, auk þess að vera hlýrra, er þessi tiltekna skugga rauðs mettari. Í raun eru eini þættirnir með nóg sjónþyngd til að koma í veg fyrir rauða bakgrunni stóru fyrirsagnirnar. Lítill líkami texti og dofna grænum börum föl í samanburði. Það er ekki endilega slæmt; öflugur bakgrunnur gefur síðunni mikla viðveru. Græna hönnunin er kælir og gefur innihaldinu meira frjálslegur umhverfi.

Hvaða notkun lit er betri? Það veltur á fyrirætlun þinni. Ætti gestir að líta á efnið sem slökkt eða djörf? Viltu spila niður lituðu bars? Ertu áhyggjufullur að bakgrunnurinn muni yfirbuga upplýsingarnar? Er ein litur mikilvægari en annar í vörumerki þínu? Svörin við þessum spurningum munu ákvarða hvaða litur er "rétt". Þessi litareikningur sýnir tvær mismunandi lausnir.

Litur á bak við texta

Samskipti textans og bakgrunnsins hafa áhrif á stærð og magn hvers. Áhrif texta á síðunni veltur jafn mikið á lit textans sjálft og á lit bakgrunnsins, þrátt fyrir almennan tilhneigingu til að hafa meiri áhyggjur af bakgrunni.

dæmi um gull texta á bláum bakgrunni

Ofan, léttur texti á dökkan bakgrunn virkar betur þegar tegundin er stór. Lítið frá litakerfinu sem við byrjuðum með, þetta gull er minna viðeigandi fyrir líkams texta (þ.e. um 13 punkta eða minni). Lausnin er einföld:

dæmi um gull texta á bláum bakgrunni

Ofan, lítill texti í síðustu tveimur röðum eru í blekari skugga af gulli. Það er ekki alveg hvítt, en miklu meira læsilegt en tvær línur í fyrstu myndinni. Aukin birtuskilningur heldur litlum texta frá því að vera overpowered af bakgrunni. Lykillinn er að nota litasamsetningu sem upphafspunkt, ekki fast regla. Ef bakgrunnslitin hótar að yfirgnæma smærri þætti, þá auka andstæða, sem mun viðhalda heilleika kerfisins og halda innihaldi læsilegra.

Texti á hvítu

Margir vefsíður hafa annaðhvort hvítt bakgrunn eða hvítt efni. En "hvítur" þýðir ekki "eyða". Stórir hvítvítar hafa áhrif á hvernig liturinn er litinn. Til dæmis:

litakerfið sem við byrjuðum með

Litirnir sem við byrjuðum með líta léttari þegar þær eru notaðar til texta.

dæmi um hvíta yfirburða litaða texta og bakgrunn
  • The tiltölulega dökkblár skapa nóg andstæða til að gera textann læsileg á móti hvítum.
  • Þessi tiltekna skugga af grænu blöndur í bakgrunninn. Ef ætlunin er sátt, þá vinnur grænnið.
  • Rauður + hvítur = bleikur eða ferskja.
  • Gullið lítur næstum eins og sepia tón.

Hvítur hefur tilhneigingu til að lýsa öllu því sem það snertir. Ef þú vilt setja létt skap, þá gætir einhver af samsetningunum hér að ofan virkað. Fyrir meiri áhrif gætirðu dökknað litakerfið.

Leika með litakerfum í Photoshop

Ef hönnunin þín kallar ekki á að allar litirnir í kerfinu þínu séu notaðar jafnt, þá ættir þú að prófa einn eða tvær litir fyrir yfirburði. The bragð er að finna kerfi með litum sem vinna bæði við hvert annað og með ríkjandi lit.

Sem betur fer höfum við auðvelt að prófa litum. Til að sjá hvernig mismunandi litaraðgerðir geta haft áhrif á hönnun skaltu fylgja þessum skrefum í Photoshop.

1. Finndu eða búðu til litasamsetningu. Dæmi okkar hefur fimm liti, en allir tölur yfir einn munu virka.

2. Búðu til nýjan mynd í Photoshop, 500 x 500 dílar, með hvítum bakgrunni.

3. Búðu til fjóra ný lög (bakgrunnslagið þitt verður fimmta). Ef kerfið þitt hefur meira eða færri en fimm liti skaltu bæta við eða fjarlægja lög í samræmi við það.

4. Fylltu í hvert lag með mismunandi lit frá kerfinu þínu.

5. Setjið laggrímu í hvert lag ofan bakgrunnslagið. Lagalistinn þinn ætti að líta svona út:

skýringarmynd á Photoshop lagavalmyndinni

Ofangreint, myndavélin í Photoshop, með einu lagi á lit og með grímur á laginu.

6. Haltu aðgerðinni "Thresholdizer" á hverju lagi grímu-en ekki á lögunum sjálfum.

skýringarmynd á laggrímunni, ekki lagið sem valið er

Ofan, þegar þú notar "Thresholdizer" aðgerðina, vertu viss um að velja laggrímuna , ekki raunverulegt lag. Ef þú rekur aðgerðina á laginu fyrir mistök, þá vertu ánægð með "Afturkalla" virknina.

Þessi aðgerð skapar aðallega handahófi mynstur í laggrímu. Héðan tekur hönnuður ákæra: með "Threshold" stjórn. Renndu þröskuldsstýringunni til vinstri til að sýna meira af tilteknu lagi og rétt til að sýna minna. Með því að beita þessari aðgerð við hverja límgríma mun einum lit ráða öðrum í handahófi.

skýringarmynd sýnir hvernig þröskuldurinn er

Í þessu tilfelli ákvarðar þröskuldsstjórnun hversu mikið af tilteknu lagi er sýnilegt. A að mestu leyti svartur grímur skyggir laginu; Aðallega hvítur sýnir lagið. Running the Thresholdizer aðgerð á hverju lagi gríma mun búa til meðley af litum svona:

skýringarmynd á þröskuldaraðgerðinni sem beitt er á hvern límgríma

Þetta Photoshop skjal sýnir hvaða hönnun gæti líkt út ef gultið var ríkjandi. Aðlaga litina núna er smella: Til að gefa lit fleiri (eða minna) andstæða skaltu bara nota Photoshop stjórn (svo sem mynd> Leiðréttingar> Hue Saturation ).

Til dæmis lítur skugginn af grænu sem virkaði vel með bláum eldri ekki mjög vel, því að blár er ekki ríkjandi. Nokkrar tilraunir sýna eftirfarandi:

afbrigði af upprunalegu litum sem byggjast á gulu

Hér höfum við tvær afbrigði af upprunalegu litasamsetningu okkar. Variation # 1 dregur grænt örlítið. Það virkar næstum. Variation # 2 breytir öllu nema gult til að bæta við andstæðu og samræma litbrigði.

Hvað ef hönnun okkar hafði að mestu bláu í stað gult? Þessi skuggi af bláum er dökk nóg til að andstæða hinum litunum, en enginn þeirra samræma-þeir eru allir aðalmenn. Með því að velja nýtt ríkjandi höfum við búið til nýtt vandamál.

afbrigði af upprunalegu litum sem byggjast á bláum

Variation # 1 hér að ofan kemur í stað mjúkrauða með dekkri bláu og breytir grænum lit í fölmynt. Variation # 2 fer hins vegar með fleiri rauðum (eða Burgundy) í stað minna.

Verðmæti einhverra afbrigða er huglæg. Helst myndi þú beita þeim að raunverulegri hönnun áður en þú tekur endanlega ákvörðun. Lykillinn er í vinnslu: Fáðu stiku, veldu ríkjandi lit og láttu aðra vinna með það.

Um aðgerðina "Thresholdizer"

Það er ekkert leyndardóm við þessa aðgerð. Þú getur fengið sömu áhrif með því að beita síu> Render> Clouds eða Sía> Render> Difference Clouds til laggrímu. Þessi aðgerð eykur einfaldlega ferlið og skipuleggur þröskuldsstjórnina í deciles.

Vinsamlegast ekki hika við hlaða niður aðgerðinni "Thresholdizer" . Betri enn, búðu til þína eigin og deila því með öllum með því að veita tengil í athugasemdunum hér að neðan.

Mat á lit án aðgerðarinnar

Auðvitað eru leiðir til að dæma lit án þess að spila með Þröskuld. Byrjaðu með því að velja eina aðal lit og þá gera aðrir vinna með það.

Upprunalega litasamsetningin með brúnn

Hér er upprunalega litasamsetningin okkar, með brúnni sem aðal lit.

litasamsetning með brúnn, annarri breytingu

Við höfum tónn niður græna og mettuð rauða. Grófar litir standa á eigin spýtur, eins og bláan gerir (sem hefur ekki verið breytt).

litasamsetning með brúnum, þriðja breytingu

Hér höfum við dofið grænt, gult og rautt. Þessir lágmarksnýtir "kommur" blanda saman við brúna bakgrunni. Myrkva bláuna til að búa til andstæða.

litasamsetning með brúnum, fjórða breytingu

Þremur dökkari aðal litirnir fara vel á móti brúnninni, en fölgultin virkar sem hreim litur.

Aftur kemur lokaákvörðunin þegar hönnuður beitir þessum kerfum við raunverulegan hönnun. Þangað til þá eru þetta bara upphafsstaðir: gagnlegar verkfæri til að koma í veg fyrir átök, handhægar tilvísanir til að halda hönnun á þema og frábær leið til að kanna samsetningar.

Litur er eingöngu hönnunareining. Liturnotkun er kunnátta sem maður þarf að æfa sig til að stjórna skapi, til að rækta bragðið og að geta séð möguleika í nokkrum sýnum.

Aðeins eitt er víst: það græna þarf að fara.

sýnishorn litasamsetningu með fimm litum



Skrifað eingöngu fyrir Webdesigner Depot eftir Ben Gremillion. Ben er sjálfstæður vefhönnuður hver leysa samskiptavandamál með betri hönnun.

Hvernig prófaðir þú litum? Hverjar eru uppáhalds leiðirnar þínar til að búa til litaval? Deila skoðunum þínum í athugasemdunum hér að neðan.