Počítačová grafika Nezačaté

0. Kľúčové fakty

1. Počítačová grafika — je odbor informatiky, ktorý sa zaoberá vytváraním, úpravou a zobrazovaním obrázkov pomocou počítača. Stretávame sa s ňou všade okolo nás — vo fotografiách, hrách, filmoch, na webových stránkach aj v reklame. Rozlišujeme dva základné spôsoby, akými počítač ukladá obraz: rastrový a vektorový.

2. Rastrová (bitmapová) grafika — obraz je zložený z mriežky drobných farebných bodov nazývaných pixely. Každý pixel má svoju presnú farbu a polohu, takže obrázok je vlastne obrovská tabuľka farieb. Tento spôsob je ideálny na fotografie a realistické obrázky s plynulými farebnými prechodmi, lebo dokáže zachytiť veľa detailov a odtieňov.

3. Pixel — najmenší bod obrazu, z ktorého sa skladá celá rastrová grafika; slovo vzniklo z anglického „picture element". Čím viac pixelov obrázok obsahuje, tým je ostrejší a detailnejší, ale zároveň zaberá viac miesta v pamäti. Keď rastrový obrázok veľmi zväčšíme, pixely sa stanú viditeľné ako štvorčeky a obraz „spixeluje" (rozmaže sa).

4. Vektorová grafika — obraz nie je uložený ako body, ale ako matematicky popísané objekty: čiary, krivky, kruhy a mnohouholníky s definovanou polohou, farbou a hrúbkou. Počítač si pamätá napríklad „kruh so stredom tu a polomerom 5 cm", a nie jednotlivé body. Preto sa dá vektorový obrázok ľubovoľne zväčšovať alebo zmenšovať bez straty kvality — vždy ostane ostrý.

5. Rozdiel rastrová vs. vektorová — rastrová grafika je vhodná na fotografie a bohaté farebné prechody, ale pri zväčšovaní stráca kvalitu a má väčší objem dát. Vektorová grafika je vhodná na logá, ikony, schémy a písmo, dá sa zväčšovať bez straty kvality a má menší objem, no nehodí sa na realistické fotografie. Toto rozlíšenie je kľúčové pri výbere správneho nástroja a formátu pre danú úlohu.

6. Rozlíšenie obrázka — udáva, z koľkých pixelov sa obrázok skladá, najčastejšie ako šírka × výška (napr. 1920 × 1080 pixelov). Vyššie rozlíšenie znamená viac detailov a väčšiu ostrosť, ale aj väčší súbor. Pri tlači sa kvalita udáva v DPI (počet bodov na palec) — čím viac, tým kvalitnejšia tlač.

7. Farebný model RGB — najpoužívanejší spôsob skladania farieb na obrazovke, kde každá farba vzniká zmiešaním troch základných zložiek: červenej (Red), zelenej (Green) a modrej (Blue). Každá zložka má hodnotu 0 až 255, takže ich kombináciou vznikne vyše 16 miliónov farieb. Tento model je aditívny — pridávaním svetla sa farby zosvetľujú a všetky tri naplno dajú bielu.

8. Farebný model CMYK — používa sa pri tlači a mieša štyri farby: azúrovú (Cyan), purpurovú (Magenta), žltú (Yellow) a čiernu (Key/blacK). Je to subtraktívny model — farby vznikajú odoberaním svetla pomocou farbiva na papieri. Preto sa obrázok pripravený na obrazovke (RGB) musí pred tlačou previesť do CMYK, aby farby na papieri vyzerali správne.

9. Grafické formáty súborov — rastrové obrázky sa najčastejšie ukladajú ako JPG (fotografie, stratová kompresia, malý súbor), PNG (podporuje priehľadnosť) a GIF (jednoduché animácie). Vektorová grafika sa ukladá vo formátoch ako SVG, AI alebo EPS. Výber formátu ovplyvňuje kvalitu, veľkosť súboru aj možnosti ďalšieho použitia obrázka.

10. Grafický editor — program na vytváranie a úpravu obrázkov; rastrové editory sú napríklad GIMP, Photoshop alebo Skicár, vektorové napríklad Inkscape alebo CorelDRAW. V editore vieme obrázok orezať, otočiť, zmeniť veľkosť, upraviť jas a kontrast, pridať text či vrstvy. Ovládanie základného editora je praktická zručnosť, ktorú žiak využije pri školských projektoch aj v bežnom živote.

11. Kompresia obrázka — proces zmenšenia veľkosti súboru, aby zaberal menej miesta a rýchlejšie sa prenášal cez internet. Stratová kompresia (napr. JPG) odstráni časť detailov, ktoré ľudské oko ťažko zbadá, no pri silnej kompresii sa kvalita viditeľne zhorší. Bezstratová kompresia (napr. PNG) zachová všetky údaje, ale súbor býva väčší.

12. Vrstvy (layers) — v grafických editoroch umožňujú skladať obrázok z viacerých priehľadných „fólií" položených na seba. Každú vrstvu možno upravovať samostatne bez ovplyvnenia ostatných, čo uľahčuje opravy a experimentovanie. Vďaka vrstvám sa dá napríklad pridať text alebo objekt a kedykoľvek ho posunúť či odstrániť, bez poškodenia pozadia.

1. Poučka

Počítačová grafika je tvorba a úprava obrázkov pomocou počítača. Delíme ju na dva základné druhy: - Rastrová (bitmapová) grafika — obraz je zložený z mriežky drobných farebných bodov, ktoré sa volajú pixely. - Vektorová grafika — obraz je popísaný matematicky pomocou bodov, čiar a kriviek (objektov).

Rastrový obrázok pri zväčšovaní stráca kvalitu (rozpixeluje sa), vektorový obrázok sa dá zväčšovať bez straty kvality.

2. Vysvetlenie

Predstav si štvorčekovaný papier, kde každý štvorček vyfarbíš jednou farbou. Z diaľky to vyzerá ako obrázok — presne tak funguje rastrová grafika. Každý štvorček je jeden pixel. Čím viac pixelov má obrázok, tým väčšie je jeho rozlíšenie a tým je ostrejší. Keď taký obrázok veľmi zväčšíš, jednotlivé štvorčeky začneš vidieť → obrázok je „kockatý“.

Vektorová grafika to robí inak: namiesto bodov si počítač pamätá pokyn typu „nakresli kruh s polomerom 3 cm a vyfarbi ho na červeno“. Keď obrázok zväčšíš, počítač pokyn znova prepočíta a čiary zostanú dokonale hladké.

Obrázok upravujeme v grafickom editore (napr. GIMP, Photopea, Malovanie/Paint, Inkscape). Postup úpravy býva takýto: 1. Otvor súbor s obrázkom. 2. Vyber nástroj (orezanie, štetec, výplň, text, výber oblasti…). 3. Uprav obrázok (orež, zmeň jas/kontrast, dokresli, pridaj text). 4. Použi vrstvy, ak chceš úpravy oddeliť od pôvodného obrázka. 5. Ulož výsledok vo vhodnom formáte (JPG, PNG, SVG…).

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

Príklad 1 — rastrová, či vektorová (logo): Školský klub chce logo, ktoré bude na odznaku aj na veľkom transparente. Ktorú grafiku zvolí?
Čo viem: logo sa bude zväčšovať aj zmenšovať, má jednoduché tvary a málo farieb.
Pravidlo: vektor sa dá zväčšovať bez straty kvality a hodí sa na logá a ikony; raster sa pri zväčšení rozpixeluje.
Záver → vektorovú grafiku (napríklad formát SVG)

Príklad 2 — rastrová, či vektorová (fotka): Z výletu máš fotku západu slnka s plynulými prechodmi farieb. Ako je uložená a v akom formáte ju pošleš kamarátovi?
Fotku z mobilu tvorí mriežka miliónov pixelov s rôznymi odtieňmi.
Na fotografie s plynulými prechodmi je vhodná rastrová grafika; formát JPG má malý súbor (stratová kompresia).
Záver → rastrová grafika, formát JPG

Príklad 3 — počet pixelov (rozlíšenie): Obrazovka má rozlíšenie 1920 × 1080 pixelov. Koľko pixelov má spolu?
Rozlíšenie je šírka × výška v pixeloch.
1920 · 1080 = 2 073 600
Spolu → 2 073 600 pixelov (asi 2 milióny)

Príklad 4 — výber formátu podľa vlastnosti: Potrebuješ obrázok hviezdy s priehľadným pozadím, aby ho bolo možné položiť na farebný snímok. Ktorý z formátov JPG, PNG zvolíš?
Čo viem: JPG nepodporuje priehľadnosť, pozadie by bolo biele.
PNG podporuje priehľadnosť a kompresia je bezstratová.
Záver → PNG

Príklad 5 — prečo sa fotka rozmaže: Fotku 400 × 300 pixelov zväčšíš na celú stenu. Čo sa stane a prečo?
Počet pixelov sa zväčšením nezmení, iba sa každý pixel roztiahne na väčší štvorček.
Pri veľkom zväčšení začneme vidieť jednotlivé štvorčeky.
Výsledok → obrázok bude „kockatý" (rozpixelovaný), lebo raster má pevný počet pixelov

Príklad 6 — z praxe, úprava v editore: Na projekt potrebuješ fotku spolužiakov, ale je tmavá a na kraji je cudzí človek. Ktoré nástroje použiješ?
Cudzieho človeka odstrániš z okraja orezaním.
Tmavú fotku zosvetlíš úpravou jasu a kontrastu.
Výsledok uložíš ako novú kópiu, aby ostal originál.
Nástroje → orezanie a jas/kontrast

Prečo je to dôležité: Keď vieš rozlíšiť raster a vektor, vyberieš správny formát a obrázok ti nebude rozmazaný ani zbytočne veľký. Úprava obrázkov sa zíde v škole (projekty, prezentácie), na webe aj v bežnom živote. Navyše pochopíš, prečo fotka „zozrnatie“ pri zväčšení a logo nie.

Precvič si

1. Ako sa volá najmenší bod rastrového obrázka?
2. Je fotka z mobilu rastrová, alebo vektorová?
3. Ktorý z formátov JPG, PNG, SVG je vektorový?
4. Koľko pixelov má obrázok 100 × 50 pixelov?
5. Z ktorých troch farieb skladá obrazovka všetky farby (model RGB)?
6. Prečo sa obrázok pred tlačou na tlačiarni prevádza z RGB do CMYK?