A színelmélet (2. rész) – Fogalmak és Kifejezések

Ha szeretnél a dizájnod színeivel minél jobban megfogni a látogatóid, szükséged lesz néhány alapvető dologra az alapszínek manipulálásáról. A cikkben megmutatjuk mit jelent különböző színekkel árnyalni (fehér, fekete, szürke), változtatni a szín fényerejét, telítettségét vagy csupán a természetes árnyalatát. Minden fegyvert be kell vetned, hogy egy igazán pofás színsémát csinálj. Persze ismét példákkal 🙂

A sorozat előző része: A színelmélet – A színek jelentése
Ebben a részben kitárgyaltuk az alapszíneket és azok tulajdonságait.

Árnyalat, szín (hue)

A színárnyalat egy szín legalapvetőbb tulajdonsága, tulajdonképpen ez határozza meg magát a színt. Ha azt mondjuk “kék”, “zöld” vagy “piros”, már akkor egy árnyalatról beszélünk. A színeket arra használjuk, hogy anélkül közöljünk információt a felhasználók felé, hogy bármit is olvastak volna. A színek különféle jelentéséről olvasd el az előző részt.

Példák:

Happy Twitmas

A természetes árnyalatú fehér háttér és az oldal színeinek elrendezése élénkpiros hatást kelt.

Chapolito

A rengeteg különböző színárnyalat ad vidám és játékos érzést ad az oldalnak. Nem csak a láb és fejlécre gondolok, hanem az egész oldalra.

Estilorama

A piros természetes árnyalata nagyon népszerű a dizájn szakmában.

Mix

A mix oldal egymás mellet használ néhány alapszínt, ettől kicsit szabaddá válik az oldal.

Steve Ottenad

A zöldet ilyen árnyalatában ritkábban használj, ezért egy jó összeállítás mellett tényleg egyediséget kölcsönöz a dizájn mellett.

Króm (chroma)

A króm a szín tisztaságára utal. Hasonló a szín telítettségéhez, azonban ez azt méri, hogy az adott szín mennyire esik a szürke spektrumába. (pl.:  az enyhén szürkés piros szín a szürke és piros közt van (a piroshoz közelebb), tehát a krómja 70% körül mozog.) A króm, azaz angolul chroma egy görög szó, azt jelenti hogy szín. Akinek pedig rémlett a króm a kémiából, annak elmondanám, hogy a króm jó reagens és a különböző vegyületei különböző színűek (pl lehet: lila, zöld, sárga stb.), ezért is kapta ezt a nevet.

Példák:

Movie Title Stills Collection

A cián magas krómjának köszönhetően remekül kiemeli a feketét és a fehéret.

Canal Connection

Újabb magas krómú kék, a kék néhány más árnyalatával és néhány kisebb krómú kékkel.

Philipp Doms

A magas és alacsony króm elegánssá és kifinomulttá teszi a dizájnt.

Frueh Jahr

A nagyon magas króm kiváló alkalmazási módja.

Panel Fly

A króm jól használható tetszetős színátmenetek készítéséhez is.

Telítettség (saturation)

A szín telítettsége arra utal, hogy egy adott szín hogyan jelenik meg különböző fényviszonyok közt. A króm esetén minél kisebb volt az értéke, annál közelebb volt a teljesen szürkéhez, ez a telítettség esetében szürke helyett fehér. Alacsony telítettség esetében a szín sápadt lesz, míg magas telítettség esetében egyre tisztább.

A dizájnban a hasonló telítettségű színek sokkal összetettebb hatást keltenek. Megegyező színnel, krómmal, de eltérő telítettséggel ugyan így nagy benyomással lehetünk a látogatókra.

Példák:

Sifr Vault

Különböző színek azonos telítettséggel, ettől lesz ez a dizájn igazán egységes.

Rainbeau Mars

A hasonlóan tompa telítettségű színek teszik igazán lánnyá ezt a dizájnt, ami persze még az akvarellhatást is kiemeli.

Disfruta Sanjuan

Az alacsonyabb telítettség nem feltétlenül jelenti azt, hogy világosabb a dizájn, amint a képen is látni.

Craft Sale

Jó példa arra, hogyan használjunk egy színt magas telítettséggel, az alacsony telítettségű háttren, hogy az felső rétegeket kiemeljük.

Sunrise Soya

Jó példa a magas és alacsony telítettségű színek harmóniájára.

Fényerő (value, lightness)

Ez talán a szín legegyszerűbb tulajdonság, egyszerűen annyit takar, hogy a szín milyen sötét vagy világos. Minél világosabb a szín ez az érték annál magasabb. Például a narancssárgának nagyobb az értéke, mint a sötétkéknek vagy a sötétlilának. Minden szín közül a feketének van a legalacsonyabb fényereje.

Amikor a színek fényerejével játszol a dizájnodban, ügyelj arra, hogy különböző fényerejű színeket is használj, egy szín esetében alkalmazz magas krómot. A magas kontrasztú dizájnok általában még esztétikusabbá varázsolják a dizájnt.

Példák:

Creative Spark

A magas fényerejű sárga szinte küzd a gyengébb fényerejű fekete és szürke ellen.

Oyster Design

Az oldal keveri a kék színeket két különböző fényerősséggel. A különböző fényerősségek elég kontrasztot teremtenek az egész oldalnak.

Copimaj

A hasonló fényerősségű színek keverése energetikussá és élénkké teszik a hátteret.

Whose View

A pirosnak még alacsonyabb a fényereje, mint a világoskéknek. Erre még rájön a még erősebb fényerejű fehér.

Colourpixel

Az emberi szem képes különbéget tenni az ilyen közeli fényerejű színek közt, ugyan úgy, mint a különböző színárnyalatok közt.

Szürke árnyalat (tones)

A szürke árnyalat létrehozásához egyszerűen hozzá kell adnunk egy színhez egy kis szürkét, ennyi az egész. A szürkés árnyalatú színek gyakran unalmasak, ugyanakkor lehetnek a tiszta színeknél lágyabb megjelenésűek is.

Elég sokan használj ezt a módszert a színek manipulálására a dizájn szakmában. Sok szürkével könnyedén érhetünk el régies hatást. Attól függően, hogy milyen színekkel használjuk, különösen elegáns oldalt készíthetünk vele.

Példák: Lakeside Heritage

A szürkés árnyalat kifinomult, régies és antik hangulatot kölcsönöz az oldalnak.

Bright Kite

Az oldal a kék különböző szürke és fehér árnyalatát használja a különböző kék árnyalatai mellett.

Mmuller

A szürkés árnyalatú színeket még tovább lehet fokozni tiszta szürke színekkel, ahogy a példa is mutatja.

Red Velvet Art

A menü és háttérben használt szürke árnyalat régies hatást kölcsönöz az oldalnak. Továbbá a szabálytalan vonalak a kézzel rajzoltság illúzióját keltik.

Merge Web

Egy valódi példája annak, hogy egy tiszta árnyalat hogyan emeli ki a háttérből a lényeget.

Metalab

Első ránézésre (a képet leszámítva) az egész oldal szürke. Azonban ez nem teljesen igaz, mert a háttér valójában kék színű, de nagyon erős szürke árnyalatot kapott.

Fekete árnyalat (shades)

Ha egy színhez hozzáadunk egy kis feketét akkor erősebb lesz a színe.  A dizájnban a fekete helyett sokszor használnak erős fekete árnylatú színeket, ami ugyan úgy természetesnek hat. A fekete és fehér árnyalatok keverése a legjobb megoldás a túl erős dizájn elkerülésére.

Példák:

Jonathan Moore

Jonathan Moore oldalát a lila szín több sötétebb árnyalata uralja.

Vuu Media

A különböző mélységű fekete árnyalatok  kiváló összképet alkotnak, ha megtartjuk a kellő távolságokat.

Alilot

A fekete és fehér árnyalatú színek nagyszerű eggyütműködése a fejlécben.

Skip Vine

Egy újabb fekete árnyalatú lila színátmenetes textúrás háttér egy kis fehér árnyalattal.

Stuff and Nonsense

Az árnyalatok textúrán belüli vegyítése is érdekessé tehet egy oldalt.

Fehér árnyalat (tints)

Ha egy színhez hozzáadunk egy kis fehéret, akkor világosabb lesz a színe. A nagyon halvány fehér árnyalatú színeket gyakran hívják pasztell/krém színeknek.

A dizájnerek gyakran használják nőies dizájnok tervezéshez, még több pasztell szín használata, még nőiesebbé teszi a dizájnokat. Az ilyen színeket általában gyerekeknek és szülőknek szóló oldalak dizájnjához használják fel.
Továbbá  régies oldalakhoz is kiváló.

Példák:

Caio Cardoso

Caio Cardoso oldalán a zöld fehér árnyalatait láthatjuk a háttérben. A felhővel együtt jól kiegészítődik a háttér fehér árnyalata, továbbá az oldal is természetes hatást kelt.

Fernando Silanes

A kék ezen fehér árnyalata egy lágy és elegáns összképet mutat.

du Bout des Yeux

A kék fehéres árnyalatai nagyon gyakran kapcsolódnak az éghez, mint ebben a dizájnban is.

Small White Bear

A fehér árnyalatok gyakran a víz ábrázolásánál is használják.

Iam Garth

A kék fehér árnyalata itt egy elegáns színátmenetet alkot a háttérben.

Összegzés

Az előző cikkhez hasonlóan itt is van egy kis összegzés az elhangzottakról. Nem kell mindent tudni, ahhoz hogy jó dizájnt csináljon az ember, de jobb, ha ismeri ezeket a fogalmakat. Sajnos a magyar nyelv egy kicsit szűkösen bánik a színekkel és a hozzájuk kapcsolódó kifejezésekkel, ezért kénytelen voltam néhány dolgot röviden megfogalmazni, ami nem tükrözi az eredeti szó jelentését, ezért írtam minden fogalom mellé az eredeti nevét is.

  • Árnyalat, szín (hue) – színek (piros, kék, zöld stb.)
  • Króm (chroma) – a szín tisztasága.
  • Telítettség (saturation) – a szín erősségét határozza meg.
  • Fényerő (value, lightness) – mennyire sötét vagy világos a szín.
  • Szürke árnyalat (tones) – az eredeti színhez szürkét adunk. (unalmasabbá válik a szín)
  • Fekete árnyalat (shades) – az eredeti színhez feketét adunk, sötétebbé válik a szín.
  • Fehér árnyalat (tints) – az eredeti színhez fehéret adunk, világosabbá válik a szín.

Források

A cigg nagy része angol nyelvű, eredeti nyelven elérhető Smashing Magazine oldalán.

Az SM oldalon taláható cikk nem volt elég kielégítő, ezért a Light Cue 23 oldaláról is kerültek bele információk.

A sorozat előző része: A színelmélet – A színek jelentése

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!

Eddig 1 hozzászólás érkezett. Szólj hozzá!

  1. Visszajelzés: A színelmélet (3. rész) – Készíts saját palettát » Kiskapu Blog

A kommentelési lehetőség zárolva van ehhez a cikkhez.