Digitális képek, képállományok, színek


Multimédia


Digitális képállományok


Színek
spektrumszínek (maximális telítettség, "tisztaság") ↔ kevert színek


Az emberi szem

az emberi szem színérzékenységét leíró ún. V(lambda) görbe

Színek, színkódok

Digitális képek, képállományok

A multimédia fogalma

A multimédia egyidejuleg többféle kommunikációs közegen ("médián", újabban "médiumon") keresztül történő információátadást jelent. A multimédia alkalmazásoktól elvárjuk az interaktivitást, amely lehetővé teszi, hogy a felhasználó képes legyen az információ átadását vezérelni. (Ilyen értelemben pl. egy feliratos film nem tekinthető multimédia alkalmazásnak.)

A multimédia lehetséges előnyei között említhetjük az érdeklődés, figyelem felkeltését (és fenntartását), az intenzív információátadást; a lehetséges hátrányok között pedig például a gyorsabb kifáradást és (például "kéretlen" reklámok megjelenítése esetében) a figyelem elterelését, ill. megosztását.

A lehetséges közegek vagy médiák/médiumok:

A multimédia alkalmazásokkal szemben támasztott alapvető követelmények között az egyik legfontosabb a szinkronizáció biztosítása a különbözo médiák között (pl. a hang vagy felirat nem "csúszhat el" a képhez képest). A rendszerint hatalmas mennyiségű digitális adat feldolgozása nagy mértékű adattömörítést kíván meg, a szinkronizáció pedig valós idejű dekódolást (pl. mozgóképek esetén az egyes képkockákat ugyanolyan gyorsan meg kell jeleníteni, mint ahogy eredetileg rögzítettük őket kamerával). Emiatt egy multimédiás alkalmazás technikai (hardver) igénye jóval nagyobb, mint pl. egy "hagyományos" irodai alkalmazás esetében. A gyors processzorok, az elegendően nagy fizikai memória és a nagy kapacitású háttértárak mellett érdemes megemlíteni a jó minőségű grafikus kártyát és monitort, a jó minőségű hangkártyát és hangszórókat, a digitális kamerát (és videodigitalizáló kártyát), továbbá a szélessávú internet kapcsolatot. A multimédiás alkalmazások készítéséhez és lejátszásához a hardver követelmények biztosítása mellett rendszerint szükség van megfelelő multimédiás segédprogramokra (ilyenek lehetnek pl. a kép- hang- és videoszerkesztők, konvertáló, animációkészítő, feliratozó, rajzoló, 3D képszerkesztő stb. programok) és kodekekre (beépülő kódoló-dekódoló segédprogramokra).

további információk:
Multimédia (2020-03-21)
Category:Free multimedia software (2020-03-21)


Digitális képállományok

Foglalkozzunk most a digitális képállományokkal. Érdemes kétfajta digitális képállományt megkülönbözetnünk. A bittérképes (vagy pontraszteres) képállományok egy képet különböző színű képpontokból építenek fel. Például egy digitális kamera vagy fényképezőgép így állítja elő a képet. A vektorgrafikus képállományok a képeket geometriai alakzatokból építik fel, és ezek jellemzőit tárolják. A vektorgrafikus állományok előnye a kis fájlméret és a tetszőleges mértékű (torzításmentes) nagyítás, ill. kicsinyítés. Rendszerint ilyen típusú állományokat használnak például a számítógépes tervezés (CAD) során vagy az ún. TrueType betűtípusok esetében. Az általános iskolai oktatásban ilyen képeket tudunk előállítani például az Imagine Logo segítségével (bár a rajz elmentése már bittérképes formában történik).

A továbbiakban a bittérképes képállományokkal foglalkozunk.

A bittérképes állományok egyik előnye az, hogy lényegében bármilyen képet megjeleníthetünk a segítségükkel; egyik hátrányuk pedig, hogy felnagyítva őket egy bizonyos méret mellett már meg tudjuk különböztetni az egyes képpontokat (ez az ún. "pixelizálódás" jelensége).

Például hasonlítsuk össze az eredetileg 100x100 méretű és az 500x500, ill. 1000x1000 méretűre nagyított alábbi képeket (különös tekintettel az emotikon fekete széleire):
Smiley 100x100 méretben Smiley 500x500 méretben Smiley 1000x1000 méretben Smiley széle 3x nagyításban
Az IrfanView képnézegető (és képszerkesztő) program telepítés után egy kiegészítő (plugin) segítségével lehetővé teszi, hogy ezt a hatást közvetlenül is előállítsuk:
egy barackvirág képe egy barackvirág pixelizált képe

A bittérképes képállományok legfontosabb jellemzői:

(a) A sor- és oszlopfelbontás megadja a kép soraiban, ill. oszlopaiban levő képpontok számát (azaz a kép szélességét és magasságát képpontokban mérve). Például egy 1024x768 felbontású digitális kép képpontjai vagy pixelei egy olyan koordinátarendszerben adhatóak meg, amelynek a vízszintes (x) tengelyén 1024 pontot, függőleges (y) tengelyén pedig 768 pontot jelölünk ki (a koordinátarendszer origója rendszerint a kép bal felső sarkában van, az x tengely jobbra, az y tengely pedig lefelé mutat). A sor- és oszlopfelbontás szorzata a digitális kép képpontjainak vagy pixeleinek a számát adja meg (az előző példában ez 1024*768 = 786432 pixel).

(b) A színmélység megadja, hogy az egyes képpontokhoz tartozó színeket hány biten tároljuk. Ez meghatározza, hogy egy adott kép esetében maximálisan hány színt használhatunk. Például
– 8 bit esetén max. 28 = 256 különböző színt használhatunk (mint pl. gif típusú képfájlok esetében, ahol egy ún. színpaletta tartalmazza a képben használt színeket);
– 24 bit esetén pedig max. 224 = 16777216, azaz több, mint 16.7 millió színt használhatunk a képben; ez az ún. true color színmélység (ez pl. jpg típusú képfájlok esetében fordul elő).

(c) Végül a színmodell megadja, hogy az egyes képpontok színét egy adott digitális képben hogyan kódoljuk. A digitális képek esetében a legismertebb színmodell az ún. standard RGB modell, amely három alapszín (vörös, zöld és kék) keverésével állítja elő a kép különböző színeit.

A képfelbontás és a színmélység alapján kiszámíthatjuk, hogy egy tömörítetlen képfájlban mennyi információt tárolunk (technikailag ez a fájl méretét jelenti). Például egy 1024x768 felbontású és 24 bit színmélységű tömörítetlen digitális kép képpontjainak a színét 1024*768*24 bit = 18874368 bit ≅ 18 MBájt mennyiségű információval adhatjuk meg.

A fentebb megjelenített emotikon esetében a fenti információkat könnyen megkaphatjuk az IrfanView képnézegető program segítségével:

Sárga színű emotikon (Smiley.png) A Smiley.png képre vonatkozó információk (IrfanView) A Smiley.png kép színpalettája (IrfanView)

A Smiley.png kép felbontása ennek megfelelően 152x151 képpont, színmélysége 8 bit, azaz maximum 28=256 színt tartalmazhat, de ebből a kép csak 128 színt használ. A harmadik képen a kép ún. színpalettáját láthatjuk, amely a képben használt 128 különböző színt jeleníti meg (a színpalettát szintén az IrfanView segítségével kaptuk). A színpaletta a színek kódolásának egy egyszerű, de hatékony formája: egy 8 bites színmélységű kép esetében minden, a képben használt színhez egy 0 és 255 közötti számot, ún. (szín)indexet rendelünk hozzá. A színpalettát például gif vagy png képekben használhatjuk, emellett más kódolási formák is használatosak.


A színek

Az emberi szem által érzékelhető, ún. látható spektrum a teljes elektromágneses színtartománynak csak egy töredéke:

a látható színtartomány a teljes elektromágneses spektrumon belül

A fenti ábra mutatja, hogy szemünk a kb. 400 - 700 nm hullámhosszú elektromágneses sugárzásokat érzékeli színeknek. A legkisebb hullámhosszú és legnagyobb frekvenciájú, ill. energiájú fény az ibolya, a legnagyobb hullámhosszú pedig a vörös; az "ibolyán túl" (<400 nm) az ultraibolya (vagy ultraviola, UV) sugárzás tartománya, a "vörösön innen" (>700 nm) pedig az infravörös tartomány (IR) következik. A látható fényspektrum színei:

a szemünk által látható színek

A standard RGB (sRGB) modell alapszínei nem szerepelnek a tiszta spektrumszínek között (ld. a lenti ún. színpatkó diagramot), azonban közelítőleg meg tudjuk adni azt az ún. "domináns" hullámhosszt, amely a hozzájuk legközelebb álló spektrumszínhez tartozik:
– a vörös (R) szín hullámhossza 609‐614 nm közötti érték;
– a zöld (G) esetében ez közelítőleg 549 nm;
– a kék (B) esetében pedig 466‐436 nm közötti érték.

Az International Commission on Illumination szabványos színmodellje, az ún. CIE XYZ színmodell szerint az emberi szem által látható színeket ábrázolhatjuk egy kétdimenziós síkon (ez az ún. "színpatkó" diagram).

a CIE XYZ színmodell színei a CIE XYZ színmodell színei az sRGB modell feltüntetésével

A színpatkó külső szélein megjelenített tiszta spektrumszínek nem szerepelnek a standard RGB modell által additív színkeveréssel előállítható sRGB színtartományban, amit a második ábra belső háromszöge mutat. (Az ábrán szereplő görbe a különböző színhőmérsékletű fénysugárzók által kibocsátott színeket mutatja. Például egy háztartási izzólámpa kb. 2800 K, az átlagos napfény pedig kb. 5600 K színhőmérsékletnek felel meg.) Ennek egyik fontos következménye az, hogy az sRGB modell segítségével nem minden látható szín állítható elő, vagyis pl. a számítógépes monitorokon megjelenített képek, bármennyire is élethűnek tűnnek, valójában sosem teljesen azok. Az sRGB színmodell és a CIE XYZ színmodell közötti kapcsolatot matematikailag meghatározott lineáris transzformációkkal adhatjuk meg.

A Young-Helmholtz (trikromatikus) elmélet szerint az emberi szem három fajta színérzékelő receptorral, ún. csappal (cone) rendelkezik. Az egyes csaptípusok különböző hullámhosszúságú fényre érzékenyek:
– az ún. S-csapok a kékre (400 nm környéke),
– az ún. M-csapok a zöldre (550 nm környéke), és
– az ún. L-csapok a vörösre (600 nm környéke)
a legérzékenyebbek. (Érdekesség, hogy a legtöbb emlős csak két csaptípussal rendelkezik, azonban számos hüllő, hal vagy madár szemében négy vagy annál is több csaptípus van, amelyek különböző hullámhossz-tartományokra érzékenyek.) A csapok száma közel 7 millió (más források szerint 6.4 millió). A különböző típusú csapok aránya a retinában nem egyforma, ennek megfelelően a szem érzékenysége is különbözik az egyes színtartományokban. A csapok által érzékelt hullámhossz tartományok azonban erősen átfedik egymást.

Az emberi szem érzékenységét az egyes színekre az ún. láthatósági görbe adja meg. Világosban az emberi szem a sárgászöld színre (555 nm) a legérzékenyebb (sötétben azonban eltolódik a kékeszöld színtartomány felé).
az emberi szem színérzékenységét leíró ún. V(lambda) görbe az emberi szem színérzékenységét leíró ún. V(lambda) görbe

Az ún. standard RGB model alapszínei esetében a relatív láthatósági függvény értéke a vörös színre (609‐614 nm) V≈0.5, a zöld színre (549 nm) V≈1, a kék színre (466‐436 nm) pedig V≈0.05 (ezek aránya körülbelül 5:10:1, amely értelemszerűen függ a megvilágítástól).


Színmodellek

Korábban már említettük, hogy a színmodell megadja, hogy egy digitális kép esetében az egyes képpontok színét hogyan kódoljuk. Három alapvető színmodell az RGB, a HSL és a CMYK modell.

Az RGB színmodell esetén minden színt a vörös, zöld és kék alapszínek különböző mértékű, ún. additív keverésével állítunk elő. Az R,G és B alapszínek relatív intenzitását egy [0,255] intervallumba eső egész számmal adjuk meg. Például a számítógépes monitorok rendszerint ezt a módszert használják a színek előállítására.

A HSL vagy HSB színmodell esetében egy színt a színárnyalat vagy színezet (color Hue), a (szín)telítettség, tisztaság vagy élénkség (Saturation, colorfulness, chroma, color purity) és a fényerő vagy világosság (Luminance, Brightness, lightness) segítségével adunk meg. A H, S és L értékek a [0,1] intervallumba eső valós számok.

A CMYK színmodell esetében egy színt a cián (Cyan; türkiz vagy zöldeskék), magenta (Magenta; intenzív bíborvörös), sárga (Yellow) és fekete (blacK) színrétegek egymásra helyezésével állítunk elő, ahol a C, M, Y és K értékek a [0,1] intervallumba eső valós számok. Az alapszínek ún. szubtraktív keverésének lényege az, hogy egy adott színű réteg kiszűri a vele ellentétes színeket (gondoljunk pl. egy olyan szemüvegre, amely sárga lencséket tartalmaz, és próbáljuk ki, hogy C=0, M=0, Y=1 és K=0 esetén milyen színt kapunk). Például a színes nyomtatás ezen az elven történik.

A HSL modell például a Munsell-féle színrendszer alapján a következő ábrával szemléltethető (az ábrán a "Hue" a színárnyalatnak, a "Chroma" a telítettségnek vagy tisztaságnak, a "Value" a fényerőnek felel meg; jegyezzük meg, hogy a Munsell-féle színrendszer nem ekvivalens a HSL modellel, mert az egyes színárnyalatok elhelyezkedése a színkörben különböző):
A Munsell-féle színmodell grafikus ábrázolása

Egy képpont színe egyaránt megadható az RGB és/vagy a HSL színmodellben, azonban a teljes képnek (vagy a kép egy meghatározott tartományának) további jellemzői is vannak. Ezek közül az egyik legfontosabb a kép egyes részei közötti kontraszt, amely lehetővé teszi a képen ábrázolt objektumok megkülönböztetését, ill. felismerését (a gyengén látók számára például a vizuális kijelzőkön megjelenített betűk színe és háttere közötti kontraszt erőssége rendkívül fontos). A kontrasztot a képpontok színének vagy a fényerejének a különbsége határozza meg.

A kép két adott részlete esetében a kontraszt általános jellemzésére szolgálhat a képrészletekre számított maximális és minimális fényerő (luminancia) különbségének és a képrészletek környezetében számított átlagos fényerőnek a hányadosa. Ha például egy monokromatikus kép esetében két, azonos méretű és egyenként azonos (L1 és L2) fényerejű képrészlet alkotja a képet, a közöttük fennálló kontraszt

láthatóság (visibility) = Lmax - Lmin
0.5*(Lmax + Lmin)
láthatóság (visibility) = Lmax - Lmin
0.5*(Lmax + Lmin)
láthatóság (visibility) = Lmax - Lmin
0.5*(Lmax + Lmin)
láthatóság (visibility) = Lmax - Lmin
0.5*(Lmax + Lmin)

ahol az adott képrészletekre Lmax a fényerő legnagyobb, Lmin pedig a legkisebb értéke. (Más képletek is használatosak, pl. az ún. Michelson-féle képletben a tört nevezőjében a fényerő legnagyobb és legkisebb értékének összege szerepel.)

Például, ha a képrészletek azonos méretűek, fekete (L=0) és fehér (L=1) képrészletek esetében a láthatóság 2, fekete (L=0) és sárga (L=0.5) képrészletek esetében a láthatóság szintén 2 (megjegyzés: mivel az emberi szem érzékenysége különböző színekre más és más, színes megjelenítés esetén a sárga-fekete kombinációt tekintik optimálisnak). Fehér (L=1) és sárga (L=0.5) képrészletek esetében a láthatóság 0.67, azonos fényerejű képrészletekre pedig a láthatóság 0.

Különböző méretű képrészletek, például adott színű háttérre írt, azonos színű és kis méretű alakzatok (pl. betűk) esetében legyen az előtér/háttér méretarány r (<<1). Ekkor

láthatóság (visibility) = Lmax - Lmin
(1-r)*Lháttér + r*Lelőtér

A képletből következik, hogy a láthatóság nagyobb, ha sötét hátteret választunk (Lháttér=Lmin, Lelőtér=Lmax).


Színek, színkódok

Az alábbi táblázatban néhány (magyar és angol) színnevet és színkódot adunk meg (megjegyzés: a böngészőprogram az angol színnevek nem mindegyikét ismeri fel):

szín neve angol megnevezés HTML kód CSS (RGB) kód CSS (HSL) kód eredményül kapott szín
piros
vörös
red #FF0000 rgb(255,0,0) hsl(0,1,0.5)  
skarlátvörös scarlet #FF2400 rgb(255,36,0) hsl(0.0235,1,0.5)  
kardinálvörös (nyomdászati) ... #FF5117 rgb(255,81,23) hsl(0.0417,1,0.5451)  
barna brown #A52A2A rgb(165,42,42) hsl(0,0.5942,0.4059)  
narancssárga orange #FF8000 rgb(255,128,0) hsl(0.0837,1,0.5)  
narancs orange #FFA500 rgb(255,165,0) hsl(0.1078,1,0.5)  
sárga
citromsárga
yellow #FFFF00 rgb(255,255,0) hsl(0.1667,1,0.5)  
bézs beige #F5F5DC rgb(245,245,220) hsl(0.1667,0.5556,0.9118)  
citromzöld lime green #BFFF00 rgb(191,255,0) hsl(0.2085,1,0.5)  
sárgászöld
sápadtzöld
chartreuse green
chartreuse (CSS)
#80FF00
#7FFF00
rgb(128,255,0)
rgb(127,255,0)
hsl(0.2497,1,0.5)
hsl(0.2503,1,0.5)
 
zöld green
lime (CSS)
#00FF00 rgb(0,255,0) hsl(0.3333,1,0.5)  
libazöld screamin' green #74FF74 rgb(116,255,116) hsl(0.3333,1,0.7275)  
türkizzöld turquoise green #00FF80 rgb(0,255,128) hsl(0.417,1,0.5)  
türkiz turquoise #40E0D0 rgb(64,224,208) hsl(0.4833,0.7207,0.5647)  
középtürkiz medium turquoise #5AD5D5 rgb(90,213,213) hsl(0.5,0.5942,0.5941)  
cián
zöldeskék, kékeszöld
cyan
aqua
#00FFFF rgb(0,255,255) hsl(0.5,1,0.5)  
türkizkék turquoise blue #0080FF rgb(0,128,255) hsl(0.583,1,0.5)  
kék blue #0000FF rgb(0,0,255) hsl(0.6667,1,0.5)  
ibolya violet #7F00FF rgb(127,0,255) hsl(0.7497,1,0.5)  
ibolyaszín (nyomdászati) ... #C37DF3 rgb(195,125,243) hsl(0.7655,0.831,0.7216)  
lila lilac #C8A2C8 rgb(200,162,200) hsl(0.8333,0.2568,0.7098)  
ciklámenszín (nyomdászati) ... #EA71EA rgb(234,113,234) hsl(0.8333,0.7423,0.6804)  
ibolya (CSS) violet (CSS) #EE82EE rgb(238,130,238) hsl(0.8333,0.7606,0.7216)  
magenta
intenzív bíborvörös
magenta (CSS)
fuchsia
#FF00FF rgb(255,0,255) hsl(0.8333,1,0.5)  
sötét magenta dark magenta #8B008B rgb(139,0,139) hsl(0.8333,1,0.2725)  
magenta (nyomdászati) ... #E60082 rgb(230,0,130) hsl(0.9058,1,0.4510)  
magenta (szubtraktív) magenta (subtractive) #FF0090 rgb(255,0,144) hsl(0.9059,1,0.5)  
(telített) rózsaszín rose
bright pink
#FF0080 rgb(255,0,128) hsl(0.9163,1,0.5)  
dögös rózsaszín hot pink #FF69B4 rgb(255,105,180) hsl(0.9167,1,0.7059)  
rózsaszín pink #FFC0CB rgb(255,192,203) hsl(0.9709,1,0.8765)  
kardinálvörös cardinal #BF1F2F rgb(191,31,47) hsl(0.9833,0.7207,0.4353)  
(tesztsor) #C0C0C0 rgb(192,192,192) hsl(0,0,0.7529)

Tesztsor használata: Írjon be egy (érvényes) angol színnevet vagy HTML kódot:


Színrendszerek, színharmónia

Az ellentétes (kiegészítő vagy komplementer) színpárok additív keverésekor a fehér-szürke-fekete monokromatikus skála valamelyik árnyalatát kapjuk.

Az alapszíneket kiegészítő színeket másodlagos színeknek nevezzük.

Például additív keverés esetében a vörös (#FF0000) és a zöldeskék vagy cián (#00FFFF), a zöld (#00FF00) és a magenta (#FF00FF), valamint a kék (#0000FF) és a sárga (#FFFF00) keverésekor egyaránt fehér színt kapunk. Ennek megfelelően a vörös, zöld és kék alapszínek mellett a másodlagos színek a sárga, cián, és magenta.

Hasonlóan fehér színt kapunk például az ibolya (#7F00FF) és a sárgászöld (#80FF00), a kardinálvörös (#BF1F2F) és a türkiz (#40E0D0), vagy a sötét magenta (#8B008B) és a libazöld (#74FF74) keverésekor. (Érdemes azonban megjegyezni, hogy a fentiek értelmében a vörös és a zöld nem ellentétes színek.) A megadott színpárok esetében a telítettség (szaturáció) értéke megegyezik, a fényerő (luminancia) értékek összege pedig minden esetben 1. A legjobb kontrasztot a példákban a sötét magenta (#8B008B) és a libazöld (#74FF74) eredményezi (kb. 0.91-es láthatósággal).

Emlékezzünk azonban vissza, hogy a különböző színek additív keverése a vörös, zöld és kék alapszínekből csak egy lehetséges módja a színek előállításának. Például a vörös szín additív keverésekor maximális intenzitású vörös alapszínre (R=255) és zéró intenzitású zöld és kék alapszínekre (G=0, B=0) van szükségünk. Ezzel szemben a vörös szín szubtraktív keverésekor a szín előállítása a vörös megtartásával és a zöld kiszűrésével (M=1), és ezzel egyidejűleg a vörös megtartásával és a kék kiszűrésével (Y=1) lehetséges. Értelemszerűen ilyenkor a vörös kiszűrését megvalósító cián szűrőt ki kell iktatnunk (C=0), és ha tiszta spektrumszínt akarunk előállítani, nincs szükségünk fekete szűrésre sem (K=0). Hasonlóan járhatunk el a zöld szín szubtraktív keverésekor, azonban ilyenkor más szűrőket kell alkalmaznunk (C=1, M=0, Y=1, K=0). Az alábbi táblázat segíthet a színek szubtraktív keverésekor:

R G B
C=1 0 (szűr) 255 (átenged) 255 (átenged)
M=1 255 (átenged) 0 (szűr) 255 (átenged)
Y=1 255 (átenged) 255 (átenged) 0 (szűr)
K=0 255 (átenged) 255 (átenged) 255 (átenged)

Ha bármelyik oszlopban a CMYK alapszínek 1-es értéke mellett szűrés szerepel, a megfelelő RGB szín intenzitása zéró lesz a színkeverés eredményében. Például (C=1, M=1, Y=0, K=0) esetén R=0 (C=1 miatt), G=0 (M=1 miatt) az eredményül kapott szín kék lesz.

A komplementer (kiegészítő, ellentétes) színek látásfiziológiai értelmezésben a szemünk előtt színes utóképként megjelenő színeket jelentik. Ez akkor keletkezik, ha rövid ideig mozdulatlanul nézünk egy erős színfoltot, majd hirtelen egy semleges felületre (pl. fehér papírra vagy fehér színű háttérre) pillantunk. Ekkor egy rövid ideig (és rendkívül halványan, mintegy "árnyékképként") ugyanazt az alakzatot fogjuk látni, de az eredeti színnel ellentétes színben.

Első próba: nézzük rövid ideig a vörös téglalapot, majd mozgassuk az egérkurzort a fehér terület felé. Rövid ideig a vörös ellentétes színének megfelelő (halvány színű) téglalapot fogunk látni a piros téglalap helyén.

Második próba: nézzük rövid ideig a zöld téglalapot, majd mozgassuk az egérkurzort a fehér terület felé. Rövid ideig a zöld ellentétes színének megfelelő (halvány színű) téglalapot fogunk látni a zöld téglalap helyén.

Végül említsük meg, hogy az, hogy melyik színpárokat tekintjük kiegészítő vagy ellentétes színeknek, az elsősorban attól a színelmélettől vagy színmodelltől függ, amelyet használunk. Az emberi színlátás Hering-féle, ún. ellenszín-elmélete szerint például a különböző színeket az emberi agy három ellentétes színpár segítségével, a szem színérzékelő csapjai által szolgáltatott ingerületek egyfajta összegzésével állítja elő. E szerint az elmélet szerint az ellentétes színpárok a kék–sárga, a vörös–zöld és a fehér–fekete.

A színárnyalatok például a Munsell-féle színmodellben egy kör kerületén helyezkednek el, az ellentétes színek pedig egymással szemben:
A színárnyalatok megjelenítése a Munsell-féle színmodellben

A színárnyalatok az Ostwald-féle színkörben is egy kör kerületén helyezkednek el. Ebben a harmonikus színeket azok a kiegészítő színpárok, színhármasok ("tercek") és színnégyesek ("quartok") adják, amelyeket additív módon keverve a fehér színt (ill. a szürke valamelyik árnyalatát) kapjuk.
A színárnyalatok megjelenítése az Ostwald-féle színkörben
Ellentétes színpárok (kiegészítő színek) az Ostwald-féle színkörben Harmonikus színhármasok az Ostwald-féle színkörben Négyes színharmóniák az Ostwald-féle színkörben

A színárnyalatok a HSL színkörben szintén egy kör kerületén helyezkednek el:
– az additív színkeverés alapszíneihez (Red, Green/Lime és Blue) az 1 kerületű színkörben 1 (0°), 1/3 (120°) és 2/3 (240°),
– a köztük elhelyezkedő színekhez, a szubtraktív színkeverés alapszíneihez (Yellow, Cyan/Aqua és Magenta/Fuchsia) pedig 1/6 (60°), 3/6 (180°) és 5/6 (240°) értékek tartoznak.
A színárnyalatok megjelenítése a HSL színkörben

A három modellhez tartozó színkörökben az egyes színárnyalatok különböző távolságra helyezkednek el egymástól, ezért a színmodellek harmonikus színei (ezen belül az ellentétes színek vagy kiegészítő színpárok) is különbözőek.

Az alábbiakban egy táblázatban felsorolunk néhány kiegészítő színpárt az RGB modell alapján. Vegyük észre, hogy a kiegészítő színek RGB kódjának megfelelő értékei minden alapszín esetében 255-re egészítik ki egymást.

Fekete (R: 000 G: 000 B: 000) Fehér (R: 255 G: 255 B: 255)
Szürke (R: 128 G: 128 B: 128) Szürke (R: 128 G: 128 B: 128)
Ezüstszürke (R: 214 G: 214 B: 214) Sötétszürke (R: 41 G: 41 B: 41)
Piros, vörös (R: 255 G: 000 B: 000) Cián, zöldeskék (R: 000 G: 255 B: 255)
Barna (R: 165 G: 42 B: 42) Középtürkiz (R: 90 G: 213 B: 213)
Narancssárga, narancs (R: 255 G: 128 B: 000) Türkizkék (R: 000 G: 128 B: 255)
Zöld (R: 000 G: 255 B: 000) Magenta, bíbor(vörös) (R: 255 G: 000 B: 255)
Türkizzöld (R: 000 G: 255 B: 128) Rózsaszín (R: 255 G: 000 B: 128)
Kék (R: 000 G: 000 B: 255) Sárga, citromsárga (R: 255 G: 255 B: 000)
Ibolya (R: 128 G: 000 B: 255) Sárgászöld (R: 128 G: 255 B: 000)

(ötlet: Ellentétes színek rendszere, in: Kiegészítő színpárok - Wikipédia, 2018-05-26)

Az alábbi űrlapok alapján konkrét színek esetén próbálhatjuk ki az RGB, HSL és CMYK modellek színkódolását, valamint a modellek közötti kapcsolatokat.

Átváltás az RGB színmodellből a CMYK és HSL színmodellekbe:

R = G = B =

HTML kód: #C0C0C0

C = M = Y = K =

H = S = L =

A színárnyalat fokban kifejezve (0-360): 0

további információk:
HSL to RGB color conversion - Stack Overflow (2018-03-19)
CMYK színtér - Wikipédia (2018-03-27)

Az átváltás a CMYK színmodellből az RGB színmodellbe elvileg szintén lehetséges:

C = M = Y = K =

R = G = B =

Prezentációk, weblapok készítésekor különböző színsémákat is használhatunk. Ezek generálására számos weblap kínál lehetőséget. Például a Paletton.com, sématervezőjének képe egy kiválasztott színnégyes mellett a következőképpen jelenik meg:

további információk:
Szín - Wikipédia (2018-02-23)
Contrast (vision) - Wikipedia (2018-03-24)
usability - What is a good color combination, visibility for outside use
- User Experience Stack Exchange (2020-03-22)
Színharmóniák és színkontrasztok (2018-03-24)
Színtan. In: Ábrahám György et al. 2014. (2020-03-22)
Munsell-skála - Wikipédia (2020-03-22)
A színkör. In: Wilhelm Ostwald - Wikipédia (2020-03-22)
Kiegészítő színpárok - Wikipédia (2018-03-24)
Color wheel - Wikipedia (2018-03-21)
Web colors - Wikipedia (2020-03-31)
CSS Colors - W3Schools (2018-03-19)
HTML Color Names - W3Schools (2018-03-19)
Colors HSL - W3Schools (2018-03-19)
Színtan | Sulinet Tudásbázis (2020-03-22)
KOMPLEMENTER SZÍNEK (2018-03-27)
SZÍNSZÓTÁR - ABC (2018-03-20)
SZÍNSZÓTÁR - BÍBOR (2018-03-20)
A digitalizálás elmélete: képelmélet. In: Renkecz Anita 2011. (2020-03-22)
Paletton - The Color Scheme Designer (2020-03-22)


Képfájlok

Képfájlok esetén a kép maximális méretét a képpontok száma és a színmélység szorzata adja. Azonban ez sok esetben nagyon nagy fájlt eredményez; ezért a képfájlokat a legtöbb esetben valamilyen módon tömörítjük. Például
– bmp típusú képek esetén (elvileg) lehetséges az ún. futamhossz-kódolás;
– gif típusú képfájlok esetében az ún. LZW algoritmust használjuk a képfájl veszteségmentes tömörítésére;
– jpg formátumú képek esetén egyidejűleg több (veszteséges és veszteségmentes) tömörítési eljárás is előfordul, ilyenek pl. a diszkrét koszinusz transzformáció (DCT) vagy a Huffman-kódolás.

A képfájlok tömörítésének lényege egyrészt a felesleges ismétlődések (redundanciák) kiszűrése; másrészt azoknak az információknak az elhagyása, amelyek nem eredményeznek érzékelhető változást a képek minőségében.

további információk:
BMP (2018-02-23)
Graphics Interchange Format (GIF) (2018-02-23)
PNG (2018-02-23)
JPEG (2018-02-23)


A Total Commander telepítése

a 'Total Commander' Wikipédia szócikk képernyőképe

(1) Lépjen be a Total Commander - home weblapra!

Kattintson a Download menüpontra és töltse le a Total Commander legújabb verzióját (ez jelenleg a Total Commander 9.50, 2020-03-22).

A Total Commander telepítőjének letöltése

(2) Indítsa el a letöltött telepítőt és kövesse az utasításokat (a legtöbb esetben nem szükséges módosítani az alapértelmezett beállításokon).


Az IrfanView telepítése

az 'IrfanView' Wikipédia szócikk képernyőképe

(0) Hozzon létre a számítógépén egy IrfanView és egy Install mappát!

(1) Lépjen be az IrfanView - Official Homepage weblapra!

A weblapon a főmenü első menüpontja a DOWNLOAD (letöltés) menüpont; ebből válassza ki a számítógép típusának megfelelő opciót. A továbbiakban tételezzük fel, hogy a számítógépben 64 bites processzor van. Ekkor az IRFANVIEW 64-BIT menüpontot kell kiválasztani. (Megjegyzés: a számítógép legfontosabb jellemzőit például a Rendszerinformáció segédprogram segítségével írathatja ki. Ez pl. a szöveges konzolon az msinfo32 parancs beírásával indítható el.)

Az IrfanView állományainak letöltése.

A megjelenő ablakban keresse meg a

    Download IrfanView-64 English (Version 4.54, ZIP file, 2.98 MB)

sort, és töltse le az iview454_x64.zip állományt az Install mappába.

(2) Az IrfanView - Official Homepage weblapon keresse meg a LANGUAGES (nyelvek) menüpontot és ezen belül a

    Hungarian (help file included) Installer or ZIP

sort. A ZIP állományhoz kapcsolódó linkre kattintva töltse le az irfanview_lang_hungarian.zip állományt (az előző letöltéshez hasonlóan szintén az Install mappába).

(3) Hajtsa végre egyenként a következő képéseket:

(4) A telepítés kész, innentől az IrfanView mappában (pl. dupla kattintással) az IrfanView (i_view64.exe) bármikor elindítható. Az első indításkor érdemes az Options menü Change language menüpontjában a magyar nyelvet kiválasztani.


A VirtualDub telepítése

a 'VirtualDub' Wikipedia szócikk képernyőképe

A VirtualDub program a GNU licensz alapján szabadon letölthető a SourceForge webhelyről a következő két formában:

32 bites verzió:
http://sourceforge.net/projects/virtualdub/files/virtualdub-win/1.10.4.35491/VirtualDub-1.10.4.zip/download (2020-03-22)

64 bites verzió:
http://sourceforge.net/projects/virtualdub/files/virtualdub-win/1.10.4.35491/VirtualDub-1.10.4-AMD64.zip/download (2020-03-22)

Emellett az mp4 formátumú videoállományok betöltéséhez szükség van egy beépülő (plugin) programra, amely szintén szabadon letölthető:
Virtualdub FFMpeg Input Plugin:
https://sourceforge.net/projects/virtualdubffmpeginputplugin/files/latest/download (2020-03-22)

A letöltött fájlok zip tömörítéssel csomagolt állományok, amelyeket az IrfanView programhoz hasonlóan lehet telepíteni. Ennek megfelelően hajtsa végre egyenként a következő képéseket:

A telepítés kész, innentől a VirtualDub mappában (pl. dupla kattintással) a VirtualDub program (VirtualDub.exe vagy Veedub64.exe) bármikor elindítható.


Feladatok

(1) Indítsa el a Total Commander és a VirtualDub programokat, és küldje el az elindított programok képernyőképét!

Segítség: a teljes képernyőképet a PrintScreen billentyűvel másolja vágólapra, hogy a jobb alsó sarokban megjelenő dátum is látszódjon! A képernyőképet a CTRL V billentyűkombinációval másolhatja be az IrfanView programba, majd a CTRL S billentyűkombinációval lementheti tetszőleges néven és képformátumban.

(2) Hozzon létre egy szocikkek nevű mappát, és ebben dolgozzon!

Az előadás anyagából válasszon ki 10 különböző fogalmat, és keressen ezekhez megfelelő Wikipédia szócikkeket. Minden fogalomhoz hozzon létre a szocikkek mappában egy új mappát és ebben hozzon létre egy új szöveges fájlt, amibe a megfelelő Wikipédia szócikk néhány lényeges mondatát bemásolja. Ezután hagyjon ki két üres sort, és írja le a megfelelő Wikipédia szócikket mint elektronikus dokumentumot. Végül mentse le a Wikipédia szócikk képernyőképét:
ALT PrintScreen után a böngésző képernyőképét másolja be az IrfanView programba,
– állítson be 640 képpont szélességet (vagy 640 képpont magasságot, ha nagyobb képeket szeretne), és
– CTRL S után mentse el a képet gif formátumban a megfelelő mappába.
Tipp: mind a mappák neve, mind a bennük létrehozott szöveges fájlok és képállományok neve egyezzen meg a kiválasztott fogalom nevével (ékezet nélkül, szóköz helyett aláhúzás karaktert használva).

Ha elkészült, tömörítse össze a létrehozott mappákat nevezze át az így kapott zip fájlt a saját neve felhasználásával, és az állományt küldje el.


Képszerkesztési feladat

(3) A korábban létrehozott szocikkek nevű mappában hozzon létre egy új, szinek nevű mappát, és ebben dolgozzon!

(4) A fontosabb színeket és színkódokat tartalmazó táblázat kiegészítéséhez keressen négy új, árnyalatában jelentősen különböző, a táblázatban még nem szereplő színt az interneten, és adja meg a keresett színre vonatkozó alábbi jellemzőket:

Például a "Bordóvörös" nem szerepel a táblázatban, de létezik Wikipédia szócikke. A szín jellemzői:

A Wikipédia szócikk leírása:

Bordóvörös – Wikipédia.
https://hu.wikipedia.org/wiki/Bord%C3%B3v%C3%B6r%C3%B6s (2020-04-01)

Hozzon létre egy szinek.txt nevű szöveges állományt, ebbe írja bele a fenti színjellemzőket, és mindegyik szín után adja meg a fenti módon (a weblap címe, pont és új sor, a weblap webcíme, és zárójelben a dátum) annak a weboldalnak a leírását, amelyen a színre vonatkozó információkat találta.

A felhasznált weboldalak képernyőképét is készítse el, és mentse le 800 képpont szélességű gif állományként. A képek neve egyezzen meg a megfelelő szín nevével. Például az alábbi Wikipédia képernyőképet elmenthetjük bordovoros.gif néven:

a Bordóvörös Wikipédia szócikk képernyőképe

(5) Készítsen az IrfanView Kép menüjének Új (üres) kép készítése... menüpontja segítségével egy 800x600 méretű, tetszőleges, de színes hátterű üres képet (a példákban csak azért szerepel fehér háttérszín, hogy a képernyőképek jobban látszódjanak):

az IrfanView Új (üres) kép készítése... menüpontjának képernyőképe az IrfanView Új kép készítése ablakának képernyőképe

Írja fel a háttér színének beállításkor kapott RGB kódot (a képen bekarikázva)! az IrfanView Szin ablakának képernyőképe

Mentse el a képet (CTRL S) jpg formátumban, alap.jpg néven. Az IrfanView Szerkesztés menüjének Speciális kijelölés-készítés... menüpontja (SHIFT C) segítségével adjon meg egy 200x100 méretű kijelölést:

az IrfanView Speciális kijelölés-készítés... menüpontjának képernyőképe az IrfanView Speciális kijelölés-készítés ablakának képernyőképe

Figyelem: a Speciális kijelölés-készítés ablakban első használatkor az ablak bal oldalán, a Szélesség/magasság oldalarány felirat alatt feltétlenül állítsa be a "Nincs" opciót, mert enélkül nem tudja a kijelölés szélességét és a magasságát együttesen beállítani!

Ha sikerült a beállítás, az IrfanView képernyőjének bal szélén egy 200x100 méretű téglalap jelenik meg. Ez egy olyan kijelölt területet jelent a képen, amelybe például szöveget tudunk írni és képet tudunk beilleszteni, a tartalmát ki tudjuk másolni vagy vágni stb. A téglalapba a jobb egérgombbal kattintsunk bele, és tartsuk lenyomva az egér jobb gombját. Ezután a kijelölést az egér elhúzásával mozgassuk a kép közepére.

Figyelem: ha véletlenül az egér bal gombjával kattintunk a kijelölt területre, azt az IrfanView nagyításnak tekinti, és a kijelölt területet jeleníti meg a teljes ablakban. Ilyenkor nyomjunk két ENTER-t (váltás teljes képernyős módba és vissza), és kezdjük újra a kijelölést.

Most kattintsunk az IrfanView Szerkesztés menüjének Szövegbeszúrás... menüpontjára (CTRL T).

az IrfanView Szövegbeszúrás... menüpontjának képernyőképe az IrfanView Szöveg beszúrása ablakának képernyőképe

A Szöveg beszúrása ablak "Szöveg:" szövegdobozába írjuk be a "Színek" szöveget. Ez fog majd megjelenni a 200x100-as kijelölésben, a kép felirataként. Állítsuk be az ablakban a következőket:

Ezután a bal egérgombbal "megfogva" húzzuk jobbra a Szöveg beszúrása ablakot, hogy látszódjon a kijelölés. Kattintsunk az Előnézet gombra, és ha nem tetszik a kijelölésben megjelenő szöveg stílusa, tetszés szerint módosítsunk a beállításokon. Ha kész vagyunk, kattintsunk az OK gombra, és mentsük el a képet ugyanolyan néven (CTRL S), felülírva a korábbi képet.

a készülő alap.jpg képernyőképe címmel

(6) Most térjünk vissza a korábban elmentett képernyőképekhez. Nyissuk meg például a bordovoros.gif nevű képet, és kicsinyítsük le 250-es szélességre. Írjuk fel a kicsinyített kép méretét (esetünkben 250x145 pixel, ez az IrfanView ablakában az alsó, ún. státuszsor bal szélén látható). Mentsük el a lekicsinyített képet (ún. "bélyegképet", angolul thumbnail) úgy, hogy a kép nevéhez hozzátesszük a kis_ előtagot, tehát esetünkben kis_bordovoros.gif néven: a bordovoros_wiki.gif bélyegképe

A lekicsinyített képet tartalmazó IrfanView ablakban másoljuk a képet vágólapra (CTRL C).

Ezután nyissuk meg az alap.jpg képet, és hozzunk létre egy kijelölést SHIFT C segítségével, amely a lekicsinyített kép (kis_bordovoros.gif) méretének megfelelő méretű, azaz esetünkben 250x145. Húzzuk a kijelölést jelző téglalapot a jobb egérgomb lenyomásával a kép megfelelő helyére (a kép közepén levő "Színek" felirattól "északnyugati" irányban úgy, hogy esztétikusan töltse ki a kép bal felső negyedét), majd másoljuk be a képet a vágólapról (CTRL V). Eredményül a következő képet kapjuk:

a készülő alap.jpg képernyőképe bélyegképpel

Ha elégedettek vagyunk az eredménnyel, mentsük el (CTRL S) a képet ugyanolyan néven, azaz ismét felülírva a korábbi alap.jpg nevű képet.

Ismételje meg a fenti eljárást a szinek mappában szereplő minden, korábban elmentett képernyőképre. A bélyegképeket egyenként másolja az alap.jpg kép megfelelő helyére (a szövegtől ÉK, DK és DNY irányban, esztétikusan elrendezve a bélyegképeket). Ha a kép kész, a "Színek" szöveget és a négy bemásolt bélyegképet tartalmazó alap.jpg képet nevezze át szinek.jpg néven:

a készülő alap.jpg képernyőképe négy bélyegképpel

Végül ellenőrizze a mappa tartalmát. Ha jól dolgozott, a következő állományok szerepelnek benne:

Gyakorlás, ismétlés

(7) Készítsen egy viragok, allatok és dragakovek nevű mappát a szinek mappához hasonlóan, és töltse fel a megfelelő fájlokkal. A mappákban levő szöveges állományok (a viragok.txt, allatok.txt és dragakovek.txt) most értelemszerűen csak a megfelelő weboldalak leírását tartalmazzák.

Tömörítse össze a négy mappa tartalmát egy zip állományba, nevezze át a tömörített fájlt a saját neve felhasználásával (pl. puk_kata.zip), és az így kapott állományt küldje el.


Tartalom
Boda István, 2020.