A színelmélet (3. rész) – Készíts saját palettát

A színelmélet harmadik, azaz befejező részéhez érkeztünk. Az első részben megvitattuk a színek jelentését, míg a másodikban a szükséges fogalmakat és kifejezéseket. Remélhetőleg a korábbi két cikk tartalma elég lesz, hogy a harmadik leckét is sikeresen használd.

Ebben a részben megtanulhatod, hogyan készíthetsz könnyedén egyedi szín palettákat vagy hogyan használd fel a jól bevált színkombinációkat. Egy hagyományos színkészlet (pl.: fekete-fehér) ugyan úgy lehet nagyszerű, mint egy új, eddig még nem látott. A cikk végére lesz elég tapasztalatod és tudásod, hogy egy profi színsémát készíts. Fontos, hogy gyakorold a színek vegyítését, mert lehet, hogy csak sokadjára fog megtalálni a legjobb kombinációt. Éppen ezért, miért ne készítenél akár minden nap egy új színsémát?

Gyors Áttekintő

Az első részben részletesen megtudtuk, hogyan hat egy szín az emberre, hogyan befolyásolja a viselkedését kultúrától és nemzettségtől függően. Gyakran a színek nem is tudatosan, hanem tudat alatt állítják át az ember hozzáállását egy oldalhoz, dizájnhoz. Éppen ezért lehet, hogy egy természetvédelemmel foglalkozó oldalhoz nem pont a fekete és szürke szín passzol, hanem mondjuk a zöld és a kék. Meg kell találni a harmóniát.

India - Színek

A második részben megtárgyaltuk a színek tulajdonságait: árnyalat, króm, telítettség, fényerő, szürke árnyalat, fekete árnyalat, fehér árnyalat. (A leírásukat megtalálod a második rész összefoglalásában.) Azért fontos ezeket tudni, mert kulcsfontosságú minden egyes dizájn összeállításánál.

Hagyományos színkészlet típusok

Vannak már előre elkészített, hagyományos színösszeállítások, amiknek köszönhetően a kezdők könnyedén elkészíthetik saját összeállításuk. Most olyan alapvető színösszeállítások következnek, amiket bárki bártan használhat kezdésnek. Persze a szokásos példákkal.

Színkerék

Itt van az alap 12-szeletes ábra. Fontos kiindulópont minden dizájn számára.

Monokróm, egyszínű (monochromatic)

A monokróm paletta az adott szín szürke, fehér és fekete árnyalatait tartalmazza. Ez a színkészlet készítésének legegyszerűbb módja, pont emiatt nehezebb csúnya vagy nem harmonizáló színkészleteket csinálni (de ettől függetlenül még lehet ronda).

Példák:

Íme, néhány monokróm paletta példaként. Az ilyen típusú színsémák első színét főként címeknél és fejlécben használják. A másodikat (mivel ez a legerősebb) általában a szöveg színezésére vagy háttérként használják. A harmadikat háttérnek (ha a második a háttér, akkor ez a szöveg színe). Az utolsó két szín pedig a részletek kiemelésére és a változatosság megteremtésére kell.

Egyszínű - Kék

Egyszínű - Lila

Egyszínű - Arany

Hasonló, analóg (analogous)

A monokróm színválogatás után ezt a legkönnyebb elsajátítani és használni. Elkészítéséhez a fentebbi 12-szeletes színkerékből kell kiválasztani három szomszédos színt. Általában ezeknek a színkészleteknek azonos krómjuk van, de szürke, fekete és fehér árnyalattal érdekesebbé tehetjük őket.

Példák:

Hasonló - Hagyományos

Itt egy hagyományos analóg színséma, igaz látványra vonzó, de nincs benne elég kontraszt egy igazán hatásos dizájn készítéséhez.

Hasonló - Módosított

Az előző színséma, csak egészen más króm beállításokkal, ettől sokkal változatosabbá és kontrasztosabbá vált az egész paletta. Ez már sokkal alkalmasabb egy weboldalhoz.

Hasonlü - Hagyományos pink

Újabb példa az analóg színsémára.

Hasonló - Módosított pink

Ez pedig egy jó dizájnhoz alakított változata.

Kiegészítő (Complementary)

A kiegészítő séma a színkerék egymással szemközti színeiből készül. Alapvetően két színből állnak, de a kellő változatossághoz egyszerűen használjuk a két szín szürke, fehér vagy fekete árnyalatát. De vigyázat: Ha ezeknek a szemközti színeknek ugyan az a krómja/telítettsége akkor könnyen elronthatják a dizájnt. Ezt jobb elkerülni (vagy úgy felhasználni, hogy a köztes színek kompenzálják a vibrálást, amit a két szín versengése okoz).

Példák:

Kiegészítő - Lila és Zöld

A széles skálájú palett igazán változatossá és élettelivé teszik ezt a sémát.

Kiegészítő - Piros és Zöld

Újabb széles skálájú paletta újabb példája, változatos krómmal.

Kiegészítő - Narancssárga és Kék

Soha ne felejtsd el, hogy a bézs és a barna a naranccsal nagyon jó párosítás.

Kiegészítő szomszéd (split complementary)

Hasonlóan az alap kiegészítő színsémához, ezt is egyszerű elkészíteni. Ebben az esetben nem a színnel szemközti színt választjuk a kontraszt másik felének, hanem a szemközti szín két szomszédját. Így az alap szín kerül középre és a két másik szín pedig a séma két végére.

Példák:

Kiegészítő szomszéd - Sárgászöld

Ebben a sémában a sárgászöld az alapszín. Fontos, hogy elég különbség legyen a krómban és a fényerő között a séma használata esetében.

Kiegészítő szomszéd - Piros

Újabb példa a széles palettájú krómra.

Harmadolás (triadic)

Alapvetően három színt választunk ki a színkerőkről, mind a három egyenlő távolságra van egymástól.  Ez a séma nagyon sok színvariácót tartalmaz.

Példák:

Harmadolás - Berry

Egy szín nagyon világos vagy sötét árnyalatával a másik két szín szürke/fehér/fekete árnyalatával majdnem a természetes színek hangulatát kapjuk vissza.

Harmadolás - Piros

Egy nagyon halvány szín és egy tompa szín sokkal jobban kiemeli az alap árnyalatot.

Negyedelés (doubel-complementary, tetradic)

A negyedelés a lehető legnehezebb tecknika a színsémák készítéséhez.

Példák:

Eléggé semmitmondó séma. A legjobb módja a negyedelés használatának, ha egy színt emelsz ki főszínnek és a másik háromat csak a hangsúlyozásra használsz.

Negyedelés - Pasztel

A negyedelés igazán akkor jó, ha hasonló krómmal rendelkeznek a séma színei és egy erőteljes (fekete) színnel pedig kiemeljük részleteket (betüket).

Negyedelés - Sötét

Az előző séma kicsit erősebb árnyalata.

Egyedi

Egyedi sémákat készíteni nem feltétlenül nehéz, de egy kezdőnek nagy problémákat jelenthet. Nincs semmi szabály, ezért sokkal bonyolultabb az egymáshoz illő színeket kiválasztani. Mindig ügyelj a krómra, fényerőre és telítettségre, amikor új színsémát készítesz.

Példák:

Egyedi - Industry Giant

Ebben a sémában a színeknek azonos a krómjuk és hasonló a telítettségük.

Egyedi - Palisades Park

Az előzőhöz hasonlóan itt is megegyeznek a króm értékek és hasonlóak a telítettségek is, ez nagyon kiegyensúlyozott és összetartó sémát eredményez.

Egyedi - 50s Christmas

Egy magas és több alacsony krómú szín egymás mellet ugyan úgy hatásos lehet. (A magas krómú szín kiválóan alkalmas a részletek kiemelésére.)

Készítsd el saját színsémád

Egy saját séma elkészítése elsőre ijesztő lehet, de nem olyan komplikált a dolog, mint ahogy azt sok ember gondolja. Ebben a részben megtudhatsz néhány egyszerű mégis nagyszerű trükköt a színséma készítésről.

Színek tánca

Már túlvagyunk rengeteg színsémán (fentebb), ideje megpróbálkoznunk az első saját színsémánkkal. Rengeteg olyan online eszköz létezik, amik sokkal könnyebbé teszik a séma készítést, de feledkezz meg ezekről egy pillanatra, most Photoshop-al forgunk dolgozni.

Próbálj meg elszakadni a korábban már megismertetett színsémáktól, és készíts valami egyedit. Az alap színsémák csupán útmutatók, hogyan is kell kinéznie majd a te színsémádnak. Fontos, hogy mindig legyél egyedi, nincs szükség kettő ugyanolyanra.

A feladatunk, hogy elkészítsünk 3-3 színsémát két oldalhoz. A két ügyfél egy modern felépítésű blog és egy Viktoriánus stílusú ruházatra specializálódott női ruha üzlet weboldala.

Kezdjük mondjuk egy alap monokróm színsémával, csak hogy kedved kapjunk a következőkhöz. Amin említettem, a hagyományos színsémák nem túl nagy kedvencei a dizájnereknek, a monokróm sémák ez alól kivételt képeznek. Ha megnézed a weboldalakat, programokat, amiket használsz, nagy valószínűséggel talál köztük ilyen monokróm színűeket.

Egyedi - Ruhabolt 1.

Mivel ez egy ruhaüzlet honlapja, a monokróm színek mellé jól jön egy kis fehér, hogy természetessé varázsolja az oldalt.

Egyedi - Dizájn 1.

A dizájn bloghoz egy kis szürkés árnyalat, fekete és fehér szín dukál.

Egyedi - Ruhabolt 2.

Hasonló összeállítás, de most kihagytunk egy színt, Helyettesítettük a lila és vöröseslila árnyalataival. Nagyon jól kiegészítik egymást és egy keretet alkotnak. Persze ha mind különböző fontosságú dolgok ábrázolására használjuk.

Egyedi - Dizájn 2.

Egy kis piros árnyalat nagyon feldobja az egyébkén szürke sémát, ennél fogva érdekesebbé és élettelibbé varázsolja az egész dizájnt. Az új színnek köszönhetően a nagyon fontos dolgokat könnyen kiemelhetjük.

Egyedi - Ruhabolt 3.

Megszabadultunk a lilától és lecseréltük bordóra. A keretet még mindig a vöröseslila adja. Továbbá hozzáadtunk egy kis halvány citromsárgát, a színkerék lilával ellenkező oldaláról. Ez a majdnem törtfehér szín kiváló háttérnek.

Egyedi - Dizájn 3.

Elsőre lehet, hogy piros és szürke színsémának tűnik, de ha közelebbről megnézed, a szürke tulajdonképpen kékes árnyalatú. A kék és piros egy igazi harmadolós színsémát alkot. A kék egyébként nem túl jó párosítás pirossal, hiszen annak a sárga színek a legjobb kiegészítő, viszont ha ennyire elkeverjük például szürkében, akkor tökéletes harmóniát alkotnak.

A szürke, fehér és fekete árnyalatok miért olyan fontosak

Mint ahogy fentebb is észrevetted, a színek árnyalatai elengedhetetlenek egy jó színsémához. A tiszta színeknek ugyan az a telítettségük és a fényerejük.  Ha túlzásba visszük a tiszta színek hatását. az egész dizájn nyomasztóvá válhat.

Színkavalkád

Amikor a szürke, fehér vagy fekete árnyalatokat használod, a 12 színből álló kereket végtelen számú színre egészíted ki. A legjobb mód, hogy profi kinézetet kölcsönözz a dizájnodnak az, ha hozzáadod az alap színek különböző árnyalatait (a tiszta színek kerülendők),  ezekből az árnyalatokból legalább 3 különbözőt hozzunk létre, attól függően, hány alap színünk van. Ez fokozni fogja a dizájn hatását a felhasználókra nézve.

Keverjünk hozzá egy pár semleges színt

A semleges színek ugyan úgy fontosak egy színséma elkészítésében. Az első részben részletesen taglaljuk a fekete, fehér, szürke, barna, bézs, csontfehér színek tulajdonságait. A barna, bézs és csontfehér melegebbé teszik az oldalt, a szürke a környező színektől függően lehet meleg és hideg is, ugyan így a fekete és fehér is a környező szinektől meleg vagy hideg is lehet.

Természetes színek

A fekete és fehér szín hozzáadása talán a legkönnyebb, hiszen ezek a legsemlegesebb színek. A jobb hatás elérése érdekében ne használj tiszta fekete vagy fehér színt, hanem a szürke (vagy az alap szín) nagyon erős ill. nagyon gyenge árnyalatát.

A többi semleges szín használata sajnos ennél trükkösebb, de kis gyakorlás után már te is úgy pakolgathatod, mint egy igazi profi. A nagyon erős csokibarnát ajánljuk a fekete szín helyett, a csontfehér kiválóan helyettesítheti a halványszürke vagy fehér színeket, míg a bézs jól használható a halványszürke helyettesítésére. A legfontosabb, hogy mindig legyen egy kis élet a dizájnban, ezért fontos a túl egyhangú színek feldobása egy másik szín, hasonló árnyalatával.

Kedvenc képed, mint színséma

Sokak kedvenc módszere színsémák létrehozására egy kép felhasználása. Van néhány automatikus eszköz, ami magától elvégzi a színek kiválasztását (ilyen például az Adobe Kuler) vagy akár saját magad is elvégezheted PhotoShop-ban.

Az Adobe Kuler-ben tallózhatunk képet a saját gépünkről, vagy akár közvetlen kereshetünk a Flickr oldalán is. Ha már eldöntötted, milyen színvilággal is képzelted el a következő dizájnod, egyszerűen rákereshetsz a Flickr-en, és kiválaszthatod a neked legjobban tetsző képet. Ez ezért jó, mert így akár olyan színsémákat is létrehozhatsz, amikre amúgy nem is gondoltál volna.

Most nézzük, hogyan is kell a Kuler-t használni. Kerestünk egy jó kis képet, ne legyen rajta sok különböző szín, csak a bemelegítés kedvéért.

Tulipán

Itt az eredeti ablak a színsémával, amit a Kuler egyből nekünk adott:

Kuler - Tulipán - Eredeti

Szerencsére a Kuler többet tud, mint gondolnánk. Oldalt átállíthatjuk, hogy milyen típusú színsémát szeretnénk végeredményként kapni. Választhatunk színes, világos, tompa, mély és sötét sémák közül:

Kuler - Tulipán - Eredeti

Színes

Kuler - Tulipán - Fényes

Fényes

Kuler - Tulipán - Tompa

Tompa

Kuler - Tulipán - Mély

Mély

Kuler - Tulipán - Sötét

Sötét

Most csináljunk egy színsémát a PhotoShop segítségével. Ez már egy kicsit tudományosabb, mint a Kuler féle módszer. Itt egyszerűen kattintsunk az “eyedropper tool” ikonra, és keressük meg azokat a színeket, amik igazán jól passzolnak egymáshoz. Itt van a végeredmény:

Tulipán - Photoshop

A legkönnyebb színsémák

Mint azt korábban már említettük, egy egyszerű palettához, ha hozzáadunk egy kiemelkedő, hangsúlyos színt, akkor máris egy teljesen új, életteli színsémát kapunk. Itt vannak az alábbi szürke paletták, a végükön egy újabb színnel, ami merőben eltér a korábbiaktól.

Itt van néhány példa, hogy megértsétek, mire gondolok:

Könnyű - Piros

Könnyű - Zöld

Könnyű - Pink

Könnyű - Halványkék

Könnyű - Kék

A szürke (egyhangú) szín könnyen lecserélhető barnára, ahogy azt láthatod.

A szürke szín árnyalatai könnyen lecserélhetők bármilyen más színre, persze ugyan ilyen telítettség, króm és fényerő tulajdonságok megtartása mellett. Ha a szürkét például piros árnyalataira cseréljük le, akkor máris egy meleg sémát kapunk, pedig sokat igazán nem változtattunk, csak életet adtunk az egyébként szürke sémának. De ne felejtsd el a szürkét, hiszen még mindig ez a legjobb megoldás üzleti vagy csak egyszerűen modern kinézetű dizájnhoz.

Mennyi szín kell?

Az egész cikkben minden séma, amit bemutattunk 5 színből áll. Azért jó ez a szám, mert elég variációt nyújt egy jó kis design megtervezéséhez és nem is tölti túl a nézők agyát. A jól megválasztott színek kiegészítik egymást és harmóniát teremtenek, ha túl sok a szín ez a harmónia könnyen elveszhet. De nyugodtan használj annyi színt, amennyit jónak látsz. Nem a séma formálja az igényt, hanem az igény a sémát.

Színes ceruzák

Sok oldal tervezése során csupán három színt használtak fel, más esetekben csupán kettőt, de volt olyan is, amikor akár 8-10 színt is összehoztak egymással (minél több a szín, annál trükkösebbnek kell lennie a dizájnnak). Érdemes kísérletezgetni, hogy a tervbe vett dizájn mennyi színnel az igazi, érdemes mindig kipróbálni többel és kevesebbel is. De mindig érdemes az 5 színnel kezdeni, aztán ezt pedig az igénynek megfelelően alakítgatni.

A legegyszerűbb út a színek hozzáadásának és kivételének sikeréhez a gyakorlás. Jó, ha az alap sémákkal próbálsz meg játszogatni, adj hozzájuk és vegyél ki belőlük színeket.

10 nagyszerű oldal, 10 nagyszerű színséma

Kigyűjtöttünk néhány igazán nagyszerű oldalt, és mellékeltük a felhasznált színsémáikat, hogy ihletet meríthess saját színsémáid elkészítéséhez. Néhány színséma elsőre furcsának tűnhet, de az teszi igazán profivá őket, ahogyan felhasználják őket.

Wentings Cycle & Mountain Shop

Wentings

Wentings - paletta

Trivuong.com

Trivuong

Trivuong - paletta

Oscar Barber

Oscar Barber

Oscar Barber - paletta

North East Peace III Partnership

North East Peace

North East Peace - paletta

mbA Architects

MBA Architects

MBA Architects - paletta

Studio 13

Studio 13

Studio 13 - paletta

Joy Project

Joy Project

Joy Project - paletta

Morphix Blog

Morphix Blog

Morphix Blog - paletta

El Designo

El designo

El designo - paletta

LemonStand

Lemon Stand

Lemon Stand - paletta

Összegzés

Ebben a három részes sorozatban csupán érintettük, az egész ennél sokkal összetettebb, de nekünk legyen ennyi elég. Vannak olyan tudósok akik éveken keresztül figyelne egy színt és vizsgálják, hogyan hat az emberekre.

A legjobb módja a sémakészítésnek az, ha rengeteget gyakorolsz. Készíts újabb sémákat akár napi rendszerességgel. Használhatsz hozzá akár online eszközöket (Kuler) vagy csak nyisd meg a Photoshop-ot és válogasd össze a színeket. Ha az életben meglátsz egy szép színt, meríts belőle ihletet és készíts egy újabb színsémát. Ha lehetőséged van rá oszd meg a sémáid másokkal, kérd ki a véleményük és javíts rajta, ha kell. Ennyire egyszerű.

Források

A cikk angol nyelven írodott, és megtalálható a Smashing Magazine oldalán. (Néhány kisebb rész kimaradt, de nem fontosak. Akit mégis érdekelne, az természetesen megtalálja az eredeti cikkben.)

Kuler – Nagyszerű színséma készítő online alkalmazás.

A színelmélet (2. rész) – Fogalmak és Kifejezések – A cikksorozat második darabja.

A színelmélet – A színek jelentése – A cikksorozat legelső része

Koller József írása –

Közel tíz éve foglalkozom informatikával, azon belül főként a webfejlesztéssel. Nem vagyok designer, de ettől teljesen függetlenül rajongok a szépen megtervezett grafikákért. Munkám első sorban a háttérben zajlik, ugyanis "kódolással" foglalkozom.

  • Ha tetszett a cikk, osztd meg!