Pixelgyar A Szinelmelet Alapjai

ALAPOZÓ LECKÉK
A SZÍNELMÉLET
ALAPJAI
FONTOS: Kérlek a letöltött leckék esetén figyelj arra, hogy ne sértsd meg a
szerzői jogokat, bízom benne, hogy a munkámat megtiszteled azzal, ha
másoknak nem küldöd el, hanem az oldalunkra
- www.webdesigntanfolyam.com - irányítod őket!
Pixelgyár Kft. © 2017
A színelmélet alapjai 2
TARTALOMJEGYZÉK
BEVEZETÉS........................................................................................................................................................................................... 3
A SZÍNKÖR............................................................................................................................................................................................ 6
A SZÍNEK HATÁSAI.......................................................................................................................................................................... 8
MIT JELENTENEK A SZÍNEK SZÁMUNKRA?.................................................................................................................. 9
FIGYELEM!.............................................................................................................................................................................................11
MILYEN SZÍNŰ A HANGULATOD?....................................................................................................................................... 13
BESZÉLJÜNK A SZÍNMÓDOKRÓL.......................................................................................................................................15
A TERVEZÉS ELSŐ ÁLLOMÁSA A SZÍNPALETTA....................................................................................................... 17
TEDD EL A HANGULATOKAT SZÍNKONZERVEKBE!...............................................................................................18
HOGYAN LEHET EZEKET INNEN LESZEDNI ÉS HASZNÁLNI?........................................................................ 21
KÉSZÍTS SZÍNPALETTÁT EGY FOTÓBÓL!........................................................................................................................22
BEVEZETÉS
Kezdjük egy kis fizikával: a színek a fény és a sötétség, illetve a fény és a
tárgyak kölcsönhatásából keletkeznek. Vannak felületek amelyek elnyelik, és
vannak amelyek visszatükrözik a fényt, ennek, és a szemünkben lévő kis
receptoroknak köszönhetően valamilyen színű valami számunkra. Ennél
mélyebbre nem megyünk a fizikában, mert minket a színek hatásai
érdekelnek.
Engedj meg egy rövid történetet Johannes Ittentől a színek erejéről:

“Egy nagyiparos társaságot hívott meg magához vacsorára. Az érkező
hölgyeket és urakat finom konyhai illatok fogadták, s már mindenki előre
örült az ínyenc falatoknak. Amikor a vidám társaság körülülte a nagyszerűen
elkészített ételekkel rakott asztalt, a házigazda vörös fényt kapcsolt be. Szép
pirosra színeződött, és frissnek hatott a tányérokra kirakott hús, a paraj
azonban feketének tűnt, a krumplik pedig pirosan világítottak. Mindenki
meghökkent, de a vörös fény máris kékre váltott, s ettől a pecsenyék mintha
oszlófélben, a krumplik mintha rothadtak lettek volna. A vendégek étvágya
egyszeriben elment. Amikor erre még sárga fény következett, s a vörösbor
olyan lett, mint a sötét olaj, az emberek pedig sárga félholtaknak látták a
szomszédjukat, néhány érzékeny hölgy felállt és kisietett az ebédlőből. Senki
sem volt képes enni, bár a jelenlévők mind tudták, hogy csak a megvilágítás
színének változásai okozzák e különös érzéseket. Nevetve kapcsolta be a
házigazda a fehér fényt, és nemsokára helyreállt a vidám hangulat az asztal
körül.”
A színekről egy egész tudományág szól - a színtan, ill. színdinamika, amely

minden területen megvizsgálja a színek szerepét és hatását az életünkre.
A színek a vizuális kommunikáció alapkövei, amelyek rendkívüli módon
hatnak az érzékekre. Ha egy színt bármely oknál fogva kiválasztunk, ahhoz
különböző értéket, jelentést, kiváltott érzelmeket is kapunk egy csomagban,
úgyhogy egyáltalán nem mindegy mit választunk. Ahogy mindenben, itt is
vannak hagyományok, ún. konvenciók az egyes területeken használandó
színekben is.
Vegyünk pár példát:

Az acélkék, fehér és grafitszürke színek a jellemzőn stabilitást,
komolyságot, megbízhatóságot, biztonságot, üzleti jelleget sugároznak -
gyakran találkozni velük multinacionális környezetben, informatikai cégek,
vagy jogászok, ügyvédek vizuális megjelenésein - logók, névjegyek, honlapok.
Egészséggel, egészséges életmóddal kapcsolatos arculatok a

természetesség, vitalitás jegyében sok zöldet, napsárgát és égkéket
alkalmaznak:
A SZÍNKÖR
Isaac Newton termékeny ember volt, a dinamika és a tehetetlenség

törvényének megalkotása mellett a fény tulajdonságait is vizsgálta, és még
arra is volt ideje, hogy 1666-ben elkészítse a színkört, amelyet azóta is
használunk, és persze kidolgozza a hozzá tartozó színelméletet.
Alap színek
A színeket ez alapján 3 csoportba osztjuk: elsődleges, másodlagos és

harmadlagos színek. A három elsődleges szín a vörös, a kék és a sárga. Ezek
az alapszínek, az összes többi szín ezek keveréséből jön létre. Ha ezekből
bármely kettőt összekeverjük, létrejönnek a másodlagos színek, mint a
zöld, a lila és a narancs. A harmadlagos színek pedig az elsődleges és
másodlagos színek keverékei.
Komplementer színek
A színkör egymással szemben álló színei (piros-zöld, sárga-kék, lilásvörös-

sárgászöld, narancsvörös-kékeszöld, sárgásnarancs-liláskék) a
komplementer színek, amelyek nagyon jól kiegészítik egymást. Kontrasztjuk
akkor érvényesül igazán, ha az egyik túlsúlyba kerül - kiemelésekhez
használjuk őket.
Színpárok
Az egymáshoz közel álló, hasonló színek színpárokat alkotnak.
A SZÍNEK HATÁSAI
A színek mindig, mindenhol hatnak ránk - gondold csak végig, milyen

színeket használnak egy orvosi rendelő várójában, és milyeneket egy
bevásárlóközpontban? A színek fokozhatnak, vagy akár csillapíthatnak is
érzéseket, mint éhség, vágy, feszültség, nyugalom. A színek oly mértékben
befolyásolják érzelmeinket, hangulatunkat, hogy gyógyításra, kedélyállapot
javítására is használják őket.
MELEG SZÍNEK
HIDEG SZÍNEK
A meleg színek - a színkör egyik felén - a sárgától a liláig találhatóak - pl.

vörös, barna, rózsaszín... A hideg színek a kör másik fele - kék, zöld, cián,
sötétlila stb. A fehér, szürke és fekete pedig semleges színek.
MIT JELENTENEK A SZÍNEK A SZÁMUNKRA?
Az egyes színekhez különböző érzeteket, fogalmakat társítunk, amelyeknek

csak egy része szubjektív, a nagyobb része tanult, méghozzá társadalmi,
vallási szokásokból vett fogalmak.
FEHÉR - egyszerű, tiszta, érintetlen
FEKETE - súlyos, nehéz, sötét, titkos, elegáns, drága, halál
PIROS - szerelem, szenvedély, veszély, figyelmeztetés, izgalom, az élelmiszer,
impulzus, akció, kaland
KÉK - megbízhatóság, siker, komolyság, nyugalom, erő, szakszerűség,
hatalom, hűvös
SÁRGA - a kíváncsiság, játékosság, vidámság, szórakozás, irigység
LILA - igazságosság, luxus, fantázia, álmok, kétértelműség, bizonytalanság,
öregség, vagyon
ZÖLD - pénz, természet, állatok, egészségügy, gyógyítás, élet, harmónia,
frissesség
RÓZSASZÍN - lágyság, édesség, ártatlanság, fiatalság, gyengédség
NARANCS - erő, energia, dominancia, boldogság, kényelem, kreativitás,
ünneplés, szórakozás, ifjúság, melegség
SZÜRKE - általánosság, közönyösség, fenntartás, visszafogottság, unalom
BARNA - föld, természet, lágyság, termékenység, kényelem, stabilitás
Hozzá kell tenni, hogy ezek a mi kultúránkra jellemzőek - ha esetleg más

országokból is akadnak ügyfeleink, érdemes odafigyelni, milyen jelentéssel
bír egy-egy szín, de a világmárkák sem bízzák a véletlenre a színválasztást.
Egy híres eset a McDonald’s éttermek Japán piacra bevezetése még a ‘80-as
években. Ugyanis a híres Ronald bohóc fehér maszkos arca az ő
kultúrkörükben a halált jelképezi, ami egy egyébként sem az egészségről
elhíresült étteremláncnak hatalmas baklövés.
FIGYELEM!
Az emberek figyelme elég könnyen irányítható, ennek az egyik eszköze a

színhasználat, azt ugyanis könnyű megjegyezni. Egy dologról gyakran semmi
mást nem tudunk felidézni, mindössze a színét, pl. kék ruha volt a másikon
az első randin, vagy piros autóval hajtott el a rabló.
Figyelemfelkeltés szempontjából a színek sorrendje:
Azonosíthatóságukat tekintve a színek sorrendje:
A legjobban a tiszta színek vonzóak, a keverteket csak ezek után

vesszük észre:
Ez az oldal jó példa a komplementer színek egyszerű használatára. Felhívja a

figyelmet a narancs színnel, és mivel ez egy konferencia oldala, profizmust,
üzleti jelleget sugall a kékkel.
A színek beszélnek, semmi extra. Egyszerű ez ugye? A kontraszt megragadja

a figyelmet és oda tereli, ahová csak szeretnéd, ha jól használod.
Ez a fókusz - vagyis a figyelem középpontja.
MILYEN SZÍNŰ A HANGULATOD?
Tinilányként a barátnőimmel volt egy játékunk - Milyen színű a hangulatod

ma? - és a válaszból a másik tudta hogy dumcsi, sírás, vagy ereszd el a hajam
lesz az esti program. Sokáig azt gondoltam, hogy mindenki tud színekben,
színpalettákban gondolkodni, de idővel rá kellett jönnöm, hogy ez is olyan,
mint az abszolút zenei hallás. Fogalmakhoz, hangulatokhoz tudok azonnal
színkombinációkat gyártani, de egy Megasztár hanggal lehet jobban jártam
volna? Most már mindegy! :)
Nincs ilyen képességed? Cseppet se bánkódj!

Ahogy az énekhang, úgy a színérzékenység is fejleszthető, és fejlesztened is
kell! Ha nem akarod magad a még esetleg nem kifejlődött színérzékedre
bízni, akkor a már megismert “tudományos alapokon” is választhatsz
színeket.
A színvakok és színtévesztők nem tudnak különbséget tenni olyan színek

között, amelyeket az egészséges emberek eltérőként érzékelnek. Jellemzően
genetikai okokra vezethető vissza, de előfordulhat szem-, ideg- vagy
agykárosodás során és vegyi hatásra is - írja a Wikipédia. Nincsenek kevesen,
ezért a színtervezésnél rájuk is gondolnod kell, a színeket úgy érdemes
összeválogatni, hogy erős kontrasztot hozzanak létre, azaz a domináns
színek a színkör ellentétes tartományából - a hideg ill. meleg tartományból
kerüljenek ki.
Lehet, hogy Te is színtévesztő vagy?

Hányat mutatok? A színtévesztés tesztelését saját magad is elvégezheted!
Drágám, melyik függöny válasszuk? A lime legyen vagy a püspöklila?

(klasszikus kérdés az IKEA-ban amúgy is szorongó férjnek)
Ööööööö....
A lime az egy gyümölcs, a zöld meg egy szín! - mondja erre a férfi.
Jellemzően a férfiak “fogyatékossága” ez, amellyel egyébként akkor is
rendelkeznek, ha nincs megállapítva róluk, hogy színvakok. Egyszerűen kívül
esik az érdeklődési területükön, hogy ilyesmivel foglalkozzanak - ez talán
ősemberes hozomány is - a vadászathoz nincs szükség a színek ilyen fokú
megkülönböztetésére, míg a bogyószedéshez elkél - a sötétpiros ehető, a
narancssárgától viszont baromi büdös lesz a barlangban éjjel!
BESZÉLJÜNK A SZÍNMÓDOKRÓL
Jó beszéljünk, igaz? RGB vagy CMYK? Eszik vagy isszák őket?

A különböző eszközökhöz különböző színrendszerek tartoznak - a webes
tervezés az RGB, vagyis a Red, Green, Blue rendszerre épül, mert a monitor
a megjelenő képet ebből a 3 színből rakja össze - ún. additív összeadásos
móddal.
Az RGB rendszerben a színek meghatározása egy ún. hexadecimális kóddal
történik pl. #RRGGBB
Egy-egy alapszínnek 256-féle árnyalatot adhatunk, így összesen ca. 16,7 millió
színárnyalattal gazdálkodhatunk. A színek meghatározása két karakterrel és
16-os, azaz hexadecimális számrendszerben történik úgy, hogy egy karakter
0 – 9, illetve A – F között vehet fel értéket, így alapszínenként a két karakterrel
kijön a 256 színárnyalat. A 0 a legsötétebb, az F a legvilágosabb árnyalatot
jelöli. A 00 00 00 tehát a feketét, az FF FF FF a fehéret, és például az FF 00 00
a vöröset jelöli.
A HTML kódban a hexadecimális színmeghatározások elé mindig egy
kettőskereszt # kerül. A kék színünk tehát így fog kinézni: “#0000FF”
Ugye még itt vagy?
Szinte látom, ahogy elsápadva arra gondolsz, hogy fogod ezeket
megjegyezni...
Először is, nem kell megjegyezned - a gyakran használtak úgyis rögzülnek -
de az összes grafikai programban megnézhető az adott szín hexa kódja. Az
interneten pedig csillió helyen, a legkülönfélébb táblázatokban lehet
megtekinteni őket. Pl: a Wikipédia szócikkében is, ahol további infókat
olvashatsz még a témáról.
Elég ha azt tudod, hogy webes tervezés esetén csak az RGB színmóddal
dolgozunk, de jó ha tudsz róla, hogy létezik másmilyen is. A CMYK - vagyis
Cian+Magenta+Yellow+blacK a nyomtatásban használt 4 alapszínre bontást
jelenti - ún. szubszaktrív kivonásos. Ennek következtében fordulhat elő, hogy
a monitoron megjelenített képhez képest nyomtatáskor más eredményt
kapunk.
Magyarul, ami bemegy a számítógépbe (szkenner, digitális fényképezőgép
stb.) az RGB, ami kijön belőle - nyomtatás, nyomdai kivitelezés - az CMYK.
Nézz meg erről egy infografikát, ami vizuálisan is elmagyarázza a
különbségeket.
A TERVEZÉS ELSŐ ÁLLOMÁSA A SZÍNPALETTA
A színpaletta határozza meg a megtervezendő munka - legyen az logó,

weboldal, vagy bármi más alapszíneit.
Ha egy projekthez megtaláltuk a megfelelő színpalettát - kis túlzással a

munka legnagyobb részét már elvégeztük, mert erre az alapra már-már
magától épül. Egy átlagos paletta 3-6 színből áll. Ennél több színnel ne
tervezzünk, mert a túl sok szín használata zavaros, a szemnek fárasztó
eredményre vezet. Árnyalatokat természetesen használhatunk.
Színpalettákat tartalmaznak a képszerkesztő és egyéb grafikus szoftverek is,
mint az Adobe Photoshop. Munka közben ezekből válogathatunk, de a
sztenderd paletták mellett saját, egyénileg összeállított palettákból is
dolgozhatunk.
Én személy szerint a ColourLovers weboldalát használom, ez inspirál a
legjobban. Csak kiválasztom, hogy Search Palettes, és esetleg beírok egy
kulcsszót pl. happy, és máris egy csomó vidám színpalettával kezdhetem a
gondolkodást, tervezgetést. Nálam mindig ez az első lépés.
Lementem a legjobban tetsző palettákat, úgy egy tucatot, amelyek között
már ott van az, ami végül a nyerő kombináció lesz.
TEDD EL A HANGULATOKAT SZÍNKONZERVEKBE!
A legegyszerűbb módja annak, hogy egy hangulatot eltegyél későbbre,

annak az emlékeiből, az azzal kapcsolatos érzéseidből dolgozz, ha a színeire
bontod.
Erre több módszer van, az egyik, ha van egy jó fotód és abból szeretnéd
kinyerni a legfontosabb, legjellemzőbb színeit.
A művelethez a Colourlovers Photocopa szolgáltatását fogjuk használni –
ehhez be kell lépni az oldalra, de így el is fogod tudni menteni szépen a
színpalettáidat, hogy később bármikor hasznodra legyenek!
A program két módon enged fotó behívást – az egyik hogy a fotó weben lévő
pontos URL-jét adod meg, a másik pedig, hogy a Flickr-en keresel ki egy
képet.
Most a gyakrabban használt első módszert nézzük meg – ha a gépeden lévő

képből szeretnéd, akkor előbb fel kell töltened valahová, ez lehet a Pinterest,
de valamilyen képmegosztó is pl. https://ibb.co, a lényeg, hogy NE a
böngészőben lévő hivatkozást másold ide be, hanem a kép sajátját, amelyet
jobb klikkre egyszerűen vágólapra tudsz helyezni.
Beilleszted az URL-t, gomb megnyom, ott megkérdezi, hogy importálhatja-e,
nyilván, és ez lesz az eredmény:
Itt már látod, hogy a kép összes fontosabb színét kigyűjtötte, sőt előre
gyártott neked belőlük pár palettát, de persze az az igazi, amit Te készítesz.
Nincs is más dolgod, csak a color not set elemekre kattintva egy-egy színt
behívnod. Ahol most a piros vonal van az az első – kattintsd a jobb oldalon
lévő egyik színre és bekerül oda. Ha jó, akkor jöhet a következő szín helye és
így tovább 5 színig.
Ha ezzel megvagy, nincs más dolgod mint megnyomni a Publish gombot és

elmenteni a palettád valamilyen néven. Innentől kezdve megtalálod a
profilodban és mások számára is elérhetővé, kereshetővé válik (ez beállítás
kérdése). Ezt a palettám itt találod - Hedgehog and autumn
Eddig jó. Rengeteg ilyet készíthetsz – lásd el kulcsszavakkal, leíró nevekkel.
HOGYAN LEHET EZEKET INNEN LESZEDNI ÉS HASZNÁLNI?
1. Minden színnél megtalálod a HEXA kódját, ezt kimásolva bármelyik

grafikai programba megkapod ugyanezeket a színeket.
2. A jobb sávban a Download Options mezőben többféle módon viheted

magaddal, mi az .ASE ill. ACO formátumokat részesítjük előnyben, mert
ezeket eszik meg az Adobe termékei, a Photoshop, Illustrator stb.
Az .ASE formát ha letöltöd, akkor azzal a Photoshopot (meg a többit is) a

Swatches panelen keresztül tudod megetetni (ha nem találod, a Windows
menüponttal tudod bekapcsolni). A kis háromszög a jobb sarkában rejti ezt
a lenyíló menüsort, a Load Swatches-el kikeresed a gépedről a letöltött fájl
és már be is illesztette a színeket a többi közé. A Reset Swatches az
alapszíneket állítja vissza – ha már túl sokat töltöttél volna be, illetve ha csak
a saját palettád akarod látni az alapértelmezettek helyett, akkor a Replace
Swatchest használd!
KÉSZÍTS SZÍNPALETTÁT EGY FOTÓBÓL!
Ehhez a regisztrálj a Colourlovers.com oldalra, és a fenti módszerrel hívd be a

megadott képek egyikét (vagy akár mindegyiket, ha szeretnéd a palettázást
gyakorolni) és készíts belőle színpalettát!
pl. http://www.colourlovers.com/palette/4210315/Artrelax_Napocska
A fotók:
Hagymavirágok
Üveg homlokzat
Kínai lámpások
JÓ MUNKÁT KÍVÁNOK!
SZERETNÉL TÖBBET
TANULNI?
Ha szeretnél többet megtudni a designról, a színekről,

formákról, esetleg új karrier felé kacsintgatsz, nézz szét
weboldalunkon, ahol hasznos tartalmaink mellett
megtalálhatod képzéseinket is, amelyek segítségével
1 éven belül a magad ura lehetsz és elsajátíthatod
a webdesign csínját-bínját!
TOVÁBB A WEBOLDALRA!

Pixelgyar A Szinelmelet Alapjai

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Pixelgyar A Szinelmelet Alapjai

Uploaded by

Copyright:

Available Formats

ALAPOZÓ LECKÉK

Engedj meg egy rövid történetet Johannes Ittentől a színek erejéről:

A színekről egy egész tudományág szól - a színtan, ill. színdinamika, amely

Vegyünk pár példát:

Egészséggel, egészséges életmóddal kapcsolatos arculatok a

Isaac Newton termékeny ember volt, a dinamika és a tehetetlenség

A színeket ez alapján 3 csoportba osztjuk: elsődleges, másodlagos és

A színkör egymással szemben álló színei (piros-zöld, sárga-kék, lilásvörös-

Az egymáshoz közel álló, hasonló színek színpárokat alkotnak.

A színek mindig, mindenhol hatnak ránk - gondold csak végig, milyen

A meleg színek - a színkör egyik felén - a sárgától a liláig találhatóak - pl.

MIT JELENTENEK A SZÍNEK A SZÁMUNKRA?

Az egyes színekhez különböző érzeteket, fogalmakat társítunk, amelyeknek

Hozzá kell tenni, hogy ezek a mi kultúránkra jellemzőek - ha esetleg más

Az emberek figyelme elég könnyen irányítható, ennek az egyik eszköze a

Figyelemfelkeltés szempontjából a színek sorrendje:

Azonosíthatóságukat tekintve a színek sorrendje:

A legjobban a tiszta színek vonzóak, a keverteket csak ezek után

Ez az oldal jó példa a komplementer színek egyszerű használatára. Felhívja a

A színek beszélnek, semmi extra. Egyszerű ez ugye? A kontraszt megragadja

MILYEN SZÍNŰ A HANGULATOD?

Tinilányként a barátnőimmel volt egy játékunk - Milyen színű a hangulatod

Nincs ilyen képességed? Cseppet se bánkódj!

A színvakok és színtévesztők nem tudnak különbséget tenni olyan színek

Lehet, hogy Te is színtévesztő vagy?

Drágám, melyik függöny válasszuk? A lime legyen vagy a püspöklila?

Jó beszéljünk, igaz? RGB vagy CMYK? Eszik vagy isszák őket?

A TERVEZÉS ELSŐ ÁLLOMÁSA A SZÍNPALETTA

A színpaletta határozza meg a megtervezendő munka - legyen az logó,

Ha egy projekthez megtaláltuk a megfelelő színpalettát - kis túlzással a

TEDD EL A HANGULATOKAT SZÍNKONZERVEKBE!

A legegyszerűbb módja annak, hogy egy hangulatot eltegyél későbbre,

Most a gyakrabban használt első módszert nézzük meg – ha a gépeden lévő

Ha ezzel megvagy, nincs más dolgod mint megnyomni a Publish gombot és

HOGYAN LEHET EZEKET INNEN LESZEDNI ÉS HASZNÁLNI?

1. Minden színnél megtalálod a HEXA kódját, ezt kimásolva bármelyik

2. A jobb sávban a Download Options mezőben többféle módon viheted

Az .ASE formát ha letöltöd, akkor azzal a Photoshopot (meg a többit is) a

KÉSZÍTS SZÍNPALETTÁT EGY FOTÓBÓL!

Ehhez a regisztrálj a Colourlovers.com oldalra, és a fenti módszerrel hívd be a

Ha szeretnél többet megtudni a designról, a színekről,

You might also like