Spracovanie počítačovej grafiky Nezačaté

0. Kľúčové fakty

1. Počítačová grafika — Je to oblasť informatiky, ktorá sa zaoberá vytváraním, spracovaním a zobrazovaním obrázkov pomocou počítača. Stretávame sa s ňou všade okolo nás — vo fotografiách, na webových stránkach, v počítačových hrách, v reklamách aj pri tlači kníh. Delíme ju na dva základné druhy: rastrovú a vektorovú grafiku.

2. Rastrová (bitmapová) grafika — Obrázok je zložený z mriežky drobných farebných bodov, ktoré nazývame pixely. Každý pixel má presne danú polohu a farbu, takže celý obrázok je vlastne veľká tabuľka farieb. Rastrová grafika je vhodná na fotografie a realistické obrázky s jemnými farebnými prechodmi, lebo dokáže zachytiť veľa detailov.

3. Pixel — Slovo vzniklo z anglického „picture element", teda obrazový prvok, a je to najmenšia časť rastrového obrázka. Pixel sa už nedá ďalej deliť a má jednu farbu; z miliónov takýchto bodov vzniká celý obraz. Keď rastrový obrázok veľmi priblížime, jednotlivé pixely uvidíme ako malé štvorčeky.

4. Vektorová grafika — Obrázok nie je zložený z bodov, ale z geometrických objektov ako čiary, krivky, kruhy a mnohouholníky, ktoré sú popísané matematickými vzorcami. Vďaka tomu sa dá ľubovoľne zväčšovať alebo zmenšovať bez straty kvality a okraje zostávajú vždy ostré. Používa sa na logá, ikony, mapy, technické nákresy a písmená (fonty).

5. Rozdiel medzi rastrovou a vektorovou grafikou — Hlavný rozdiel je v správaní pri zväčšovaní: rastrový obrázok sa pri priblížení rozmaže a „rozpadne" na štvorčeky, zatiaľ čo vektorový zostane ostrý pri akejkoľvek veľkosti. Rastrová grafika lepšie zachytí fotografie a jemné prechody farieb, vektorová zase ostré tvary a text. Vedieť ich rozlíšiť je dôležité, aby sme pre danú úlohu zvolili správny typ.

6. Rozlíšenie obrázka — Udáva, z koľkých pixelov sa rastrový obrázok skladá, napríklad 1920 × 1080 pixelov (šírka × výška). Čím vyššie rozlíšenie, tým viac detailov obrázok obsahuje, ale aj tým väčší súbor zaberá v pamäti. Pri nízkom rozlíšení je obrázok menej ostrý a po zväčšení sa rýchlo rozmaže.

7. Farebný model RGB — Na obrazovkách sa farby skladajú z troch základných zložiek: červenej (Red), zelenej (Green) a modrej (Blue). Miešaním rôznych intenzít týchto troch farieb vznikne až približne 16 miliónov odtieňov. RGB sa nazýva aditívny model, lebo keď spojíme všetky tri farby na maxime, vznikne biela.

8. Farebný model CMYK — Používa sa pri tlači a skladá sa zo štyroch farieb: azúrovej (Cyan), purpurovej (Magenta), žltej (Yellow) a čiernej (Key). Na rozdiel od RGB ide o substraktívny model — farby vznikajú odoberaním svetla, ktoré papier pohltí. Preto obrázok, ktorý chceme tlačiť, často prevádzame z RGB do CMYK.

9. Formáty rastrových súborov — Najbežnejšie sú JPG (vhodný na fotografie, zmenšuje veľkosť, ale stráca časť kvality), PNG (umožňuje priehľadnosť pozadia a zachová ostrosť) a GIF (podporuje jednoduchú animáciu). Výber formátu ovplyvňuje kvalitu obrázka aj veľkosť súboru. Pre vektorovú grafiku sa používa najmä formát SVG.

10. Grafický editor — Je to program, v ktorom obrázky vytvárame a upravujeme. Pre rastrovú grafiku slúžia napríklad GIMP, Malé maľovanie (Skicár) alebo Photoshop, pre vektorovú zas Inkscape alebo CorelDRAW. V editore vieme obrázok orezať, otáčať, meniť veľkosť, jas a farby alebo pridávať text.

11. Základné úpravy obrázka — K najčastejším úpravám patrí orezanie (odstránenie nepotrebných okrajov), zmena veľkosti, otočenie či prevrátenie, úprava jasu a kontrastu a doladenie farieb. Mnohé editory ponúkajú aj vrstvy, vďaka ktorým môžeme upravovať časti obrázka samostatne. Po každej úprave je dobré obrázok uložiť vo vhodnom formáte.

12. Veľkosť súboru a kompresia — Rastrové obrázky môžu zaberať veľa miesta, preto sa používa kompresia, ktorá zmenšuje veľkosť súboru. Stratová kompresia (napríklad JPG) odstráni časť informácií a obrázok mierne stratí kvalitu, bezstratová (napríklad PNG) zachová obrázok presne. Voľba závisí od toho, či je dôležitejšia malá veľkosť, alebo dokonalá kvalita.

1. Poučka

Počítačová grafika sa delí na rastrovú (obrázok je zložený z bodov — pixelov usporiadaných do mriežky) a vektorovú (obrázok je popísaný matematicky pomocou bodov, čiar a kriviek). Rastrová grafika sa pri zväčšení rozmazáva a „kockuje", vektorová ostáva ostrá pri akejkoľvek veľkosti. Obrázky upravujeme v grafickom editore.

2. Vysvetlenie

• Pixel je najmenší bod obrázka. Rastrový obrázok je mriežka pixelov — každý má svoju farbu.
• Rozlíšenie hovorí, z koľkých pixelov sa obrázok skladá (napr. 1920 × 1080). Viac pixelov = viac detailov, ale aj väčší súbor.
• Rastrová grafika sa hodí na fotografie. Keď ju zväčšíš, pixely sa zväčšia a obraz sa rozmaže.
• Vektorová grafika nepoužíva pixely, ale „predpis" (kde je čiara, aký má tvar a farbu). Preto sa dá zväčšovať bez straty kvality.
• V grafickom editore (napr. GIMP, Photoshop, Inkscape, Malé maľovanie) môžeš obrázok orezať, otočiť, zmeniť veľkosť, jas, kontrast, farby alebo niečo vymazať.
• Obrázok ukladáme do formátu súboru: rastrové sú napr. JPG, PNG, GIF, BMP; vektorové sú napr. SVG, AI, EPS.

3. Príklady a prečo je to dôležité

Príklad 1 — rozlíšenie a megapixely: Fotka z mobilu má rozlíšenie 4000 × 3000 pixelov. Koľko má pixelov a koľko je to megapixelov?
Počet pixelov = šírka · výška = 4000 · 3000 = 12 000 000
Mega znamená milión, 12 000 000 pixelov = 12 miliónov pixelov.
Výsledok → 12 megapixelov

Príklad 2 — zmenšenie fotky pre web: Tú istú fotku 4000 × 3000 chceš dať na web so šírkou 1000 pixelov. Aká bude výška a koľkokrát menej pixelov bude mať?
Šírka sa zmenší 4000 : 1000 = 4-krát, výšku zmenšíme rovnako, aby sa obraz nedeformoval: 3000 : 4 = 750.
Nový počet pixelov: 1000 · 750 = 750 000.
12 000 000 : 750 000 = 16
Výsledok → 1000 × 750 pixelov, 16-krát menej pixelov

Príklad 3 — roztriedenie formátov: Ktoré z formátov GIF, SVG, JPG sú rastrové a ktoré vektorové?
JPG ukladá fotky ako mriežku pixelov, GIF tiež ukladá pixely (a vie jednoduchú animáciu).
SVG ukladá čiary, krivky a tvary.
Roztriedenie → rastrové JPG a GIF, vektorové SVG

Príklad 4 — zväčšenie obrázka: Ikonu 32 × 32 pixelov zväčšíš 10-krát na plagát. Čo sa stane s rastrovou a čo s vektorovou verziou?
Rastrová ikona: každý pixel sa zväčší na štvorček 10 × 10, obraz bude kockatý a rozmazaný.
Vektorová ikona: tvary sa prepočítajú podľa vzorcov, okraje ostanú ostré.
Na plagát sa hodí → vektorová verzia, lebo zostane ostrá

Príklad 5 — miešanie farieb RGB: Akú farbu vidíš na monitore, keď majú červená, zelená aj modrá zložka najvyššiu hodnotu?
RGB je aditívny model: svetlá sa sčítavajú.
Všetky tri farby svetla naplno spolu dajú bielu.
Farba → biela

Príklad 6 — z praxe, formáty pre školský web: Na školský web dávaš fotku z výletu, logo školy s priehľadným pozadím a jednoduchú pohyblivú pozvánku. Ktorý formát zvolíš pre každú vec?
Fotka: veľa farieb, súbor má byť malý, stačí stratová kompresia → JPG.
Logo s priehľadnosťou: formát musí vedieť priehľadné pozadie → PNG.
Pohyblivý obrázok: jednoduchú animáciu podporuje GIF.
Voľba → JPG, PNG, GIF

Prečo je to dôležité: Keď vieš rozlíšiť rastrovú a vektorovú grafiku, vyberieš správny formát — logo nebude rozmazané, fotka sa zbytočne nezväčší na obrovský súbor a web sa načíta rýchlo. Ušetríš miesto, čas aj nervy.

Precvič si

1. Z koľkých pixelov sa skladá obrázok 200 × 100?
2. Ktorý farebný model sa používa pri tlači?
3. Je logo nakreslené v programe Inkscape rastrové, alebo vektorové?
4. Ktorý rastrový formát podporuje jednoduchú animáciu?
5. Fotku 3000 × 2000 zmenšíš na šírku 1500 so zachovaním pomeru strán. Aká bude výška?
6. Prečo sa fotka vo formáte JPG po opakovanom ukladaní zhoršuje?