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

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:

• időfüggetlen médiák (pl. egydimenziós: szöveg; kétdimenziós: grafika, kép)
• időfüggő médiák (pl. 1+1 dimenziós: hang; 2+1 dimenziós: animáció, mozgókép; 3+1 dimenziós: virtuális valóság, pl. játékok; időfüggő médiák esetében alapkövetelmény az információ dekódolása és/vagy feldolgozása valós időben)

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 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, Computer-Aided Design) során vagy az ún. TrueType betűtípusok esetében. Az általános iskolai oktatásban korábban ilyen képeket tudtunk 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 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 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):

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:

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. 2⁸ = 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. 2²⁴ = 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 kódolás során először meg kell határoznunk, hogy hány bitnyi információt használunk az egyes képpontok színének a megadására (pl. 8 bitet vagy 24 bitet), utána pedig meg kell adnunk, hogy az egyes bitekhez hogyan rendeljük hozzá a különböző színeket.

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. Például, ha 24 biten adjuk meg a színkódokat, az RGB modellben a vörös és zöld alapszínek keverésével a sárga színt az "FFFF00" hexadecimális kóddal adhatjuk meg. Ezt a kódot kettes számrendszerben felírva látszik, hogy
– az "11111111" nyolc bites bitsorozatot rendeljük a vörös színhez (R),
– ugyancsak az "11111111" nyolc bites bitsorozatot rendeljük a zöld színhez (G), és végül
– a "00000000" nyolc bites bitsorozatot rendeljük a kék színhez (B).
(A különböző színmodellekről később lesz részletesen szó.^⇒)

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:

A Smiley.png kép felbontása ennek megfelelően 152x151 képpont, színmélysége 8 bit, azaz maximum 2⁸=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.^⇒

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)

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.

Próbáljuk ki, hogy például R=165, G=42 és B=42 esetén milyen színt kapunk.

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.

Próbáljuk ki, hogy például H=0.5, S=1 és L=0.5 esetén milyen színt kapunk. (Jegyezzük meg, hogy a maximális intenzitású alapszínekhez – a másik két alapszín zérus intenzitása mellett – L=0.5 luminancia vagy világosságérték tartozik.)

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 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). Például a színes nyomtatás ezen az elven történik.

Próbáljuk ki, hogy például C=0, M=0, Y=1 és K=0 esetén milyen színt kapunk.

Kontraszt

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 és/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 (L₁ és L₂) fényerejű képrészlet alkotja a képet, a közöttük fennálló kontraszt

ahol az adott képrészletekre L_max a fényerő legnagyobb, L_min pedig a legkisebb értéke (0≤L≤1). (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, a 0.5-ös szorzó nélkül.)

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 (tiszta spektrumszínek esetén a luminancia 0.5). (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 (például sárga háttér és kék előtér esetén) 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

A képletből következik, hogy a láthatóság nagyobb, ha sötét hátteret választunk (L_háttér=L_min, L_előtér=L_max). Jegyezzük meg, hogy ha r=1/2, akkor a fenti képlet megegyezik a korábban megismert képlettel.

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 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 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 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.

Relatív láthatósági görbe

Az emberi szem érzékenységét az egyes színekre az ún. (relatív) 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 ú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í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):

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. Tehát egy alapszín és a hozzá tartozó másodlagos szín keverésével fehért kapunk.

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:

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, ill. általánosan fogalmazva milyen színek (színpárok, színhármasok, színnégyesek stb.) esetén beszélünk színharmóniáról, az elsősorban attól a színelmélettől vagy színrendszertő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ínrendszerben egy kör kerületén helyezkednek el, az ellentétes színek pedig egymással szemben:

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 a HSL színmodellhez tartozó 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 három színrendszerhez 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ínrendszerek 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.

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

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)

Feladatok

(1) Indítsa el a Total Commander, az IrfanView és a VirtualDub programokat!

(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:

• a szín magyar neve
• a szín angol neve (vagy ha más idegen nyelvet tanul, német stb. neve)
• a szín HTML kódja
• a szín CSS (RGB) kódja
• a szín CSS (HSL) kódja

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 szín magyar neve: bordóvörös, sötétvörös
• a szín angol neve: maroon
• a szín HTML kódja: #800000
• a szín CSS (RGB) kódja: rgb(128,0,0)
• a szín CSS (HSL) kódja: hsl(0,1,0.251) (tipp: írja be a HTML kódot a színkódokat tartalmazó táblázat alatti szövegdobozba!)

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:

(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):

Írja fel a háttér színének beállításkor kapott RGB kódot (a képen bekarikázva)!

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:

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).

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:

• a Betűtípus gombra kattintva állítsunk be ízlés szerint egy szép betűtípust, valamint félkövér 36-os betűstílust és betűméretet;
• a Szín gombra kattintva állítsuk be az általunk választott háttérszín ellentétes színét; ennek RGB kódja a háttérszín korábban felírt RGB kódjából úgy kapható, hogy egyenként minden kódot kivonunk 255-ből. Tehát ha például kék hátteret választottunk (R: 0, G: 0, B: 255), akkor a betűszín sárga lesz (R: 255, G: 255; B: 0);
• a "Szövegelrendezés:" szöveg után állítsuk be a középre zárt opciót;
• ízlés szerint kapcsoljuk be a "Körvonal" vagy az "Árnyék" opciókat.

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.

(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 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:

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:

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

• szinek.txt
• négy képernyőkép (pl. bordovoros.gif, ...)
• a négy képernyőkép bélyegképe (pl. kis_bordovoros.gif, ...)
• szinek.jpg (amely a "Színek" szöveget és a köré bemásolt négy bélyegképet tartalmazza)

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.