Počítačová grafika.

Prezentace na téma: "Počítačová grafika."— Transkript prezentace:

1 Počítačová grafika

2 Rastrová grafika Jak může monitor zobrazit barvy tak věrně?
Fungování monitoru Jak může monitor zobrazit barvy tak věrně? Kolik barev vůbec dokáže zobrazit?

3 Rastrová grafika Fungování monitoru RGB Napodobenina fungování lidských očí – ty jsou citlivé na červenou, zelenou a modrou barvu, a tak je monitory vyzařují

4 Rastrová grafika Fungování monitoru R G B Každá složka má v počítači 8 bitů (256 možností / odstínů). V PC lze tedy namíchat 256³ barev.

5 modrá červená zelená Rastrová grafika pixel
Fungování monitoru pixel Jedna barva, resp. pixel je tedy složen ze tří různě nasvícených barev. modrá červená zelená

6 Rastrová grafika Rozlišení monitoru 32 px Pixely jsou vidět, pokud obrázek z nich složený zvětšíme. Dochází k tzv. pixelizaci. 32 px

7 Rastrová grafika 32 px 256 px 256 px 32 px
Rozlišení monitoru 32 px 256 px 256 px 32 px Z čím více pixelů je obrázek složen, tím více informací, resp. detailů obsahuje.

8 Rastrová grafika Složte z těchto kostiček obrázek květiny.
Rozlišení monitoru Složte z těchto kostiček obrázek květiny. Bude to stát za prd, že?

9 Rastrová grafika Rozlišení monitoru Zkuste to teď. Čím více pixelů dokáže monitor rozlišit, tím detailnější má obraz.

10 Rastrová grafika Který monitor bude mít detailnější obraz?
Rozlišení monitoru 600 1536 800 2048 Který monitor bude mít detailnější obraz?

11 Rastrová grafika Některá rozlišení mají svá označení.
Rozlišení monitoru 💡 Tohle se neuč Některá rozlišení mají svá označení. Označení Šířka výška HD Ready 1366 768 Full HD 1920 1080 4K UHD 3840 2160 8K UHD 7680 4320

12 Rastrová grafika Rozlišení 3 200 𝑝𝑥 1 800 𝑝𝑥
Počet pixelů na šířku a na výšku můžeme mezi sebou násobit – dostaneme číslo v (mega)pixelech, které říká, z kolika pixelů je obraz tvořen. 1 800 𝑝𝑥 3 200×1 800= 𝑝𝑥 =5,76 𝑀𝑝𝑥

13 Rastrová grafika Formáty souborů

14 JPG Rastrová grafika Formáty souborů Rozlišuje 16 777 216 barev
Standard používaný v PC, fotoaparátech a dalších. Pracuje s předpokladem, že lidské oko nerozezná nepatrné rozdíly, a tak zpodobňuje pixely. Komprese = zmenšení obsahu s co nejmenší ztrátou kvality ✅ fotografie obrázky na webu

15 JPG Rastrová grafika kvalita 100% kvalita 10% kvalita 1%
Formáty souborů JPG kvalita 100% kvalita 10% kvalita 1%

16 PNG Rastrová grafika Formáty souborů
Chytřejší komprese než JPG, ovšem za cenu většího souboru Transparentní = průhledný „Nekazí“ obraz ani text) 256 nebo 16 ½ milionu barev ✅ obrázky na webu plakáty, letáky ikony, symboly

17 GIF Rastrová grafika Formáty souborů Rovněž podporuje transparentnost
Dokáže si zapamatovat pouze 256 barev Umí animace – zobrazit obrázky za sebou ✅ animace na webu jednoduché ikonky

18 Rastrová grafika Formáty souborů JPG GIF

19 Rastrová grafika Vektorová grafika

20 Rastrová grafika Vektorová grafika
Vhodná na obrázky z reálného světa (tedy fotografie, televize,…) Obrázek je rozdělen na body (pixely) a každé- mu je přidělena jedna barva. Takový bod je však napevno – a při zvětšení dochází ke zvětšení pixelu/čtverce. Vhodná na obrázky z menším počtem tvarů a barev Obrázek není tvořen pixely, ale pouze obrazci s danými rysy (tvar, obrys, stín, výplň). Nezvětšují se pixely, ale tvary. Při zvětšení dojde pouze k přepočtení a tvar zůstává stejně kvalitní.

21 Vektorová grafika Porovnání 2πr

22 Vektorová grafika Porovnání
Vektorová grafika se používá často v reklamním průmyslu – např. při tvorbě grafiky pro billboardy. Také se používá při matematických nákresech (půdorysy, grafy…).

23 Vektorová grafika Princip

24 Vektorová grafika Princip

25 SVG Vektorová grafika Formáty souborů Neukládá obrázek po pixelech
Ukládá tvar jako tvar a text jako text. Díky tomu se dá nekonečně zvětšovat. ✅ loga geometrické tvary návrhy, nárysy mapy

26 Grafické programy Malování GIMP pixlr.com Paint.NET pixia
rastrové zdarma 💡 Tohle se neuč Malování GIMP pixlr.com Paint.NET pixia

27 Grafické programy Adobe Illustrator Inkscape CorelDRAW vektorové 💡
Tohle se neuč Adobe Illustrator Inkscape CorelDRAW

28 Grafické programy vektorové online 💡 Tohle se neuč

29 Test

30 Test

31 Test

32 Test

33 Test

34 Test