Grafické body a princip fungování grafického vykreslování na PC

Martin Korbel

Úvod

  • Cíl hodiny: pochopit, co je to pixel, jak funguje zobrazení na počítači a jak se pracuje s grafickými jednotkami.

  • Proč je to důležité?

    • Denně používáme displeje (mobil, PC, televize).

    • Rozlišení ovlivňuje kvalitu obrazu.

    • Grafici a programátoři musí rozumět jednotkám.

Co je to pixel

  • Pixel = „picture element“ – základní jednotka digitálního obrazu.

  • Má určitou barvu (definovanou obvykle třemi složkami: R, G, B).

  • Nemá pevnou fyzickou velikost – záleží na displeji.

Co je to pixel

shutterstock 1592483047

Co je to pixel

1*KR rLx3p9icFj4Db5TUJoQ

Jak displej zobrazuje obraz

  • Displej je mřížka pixelů (např. 1920×1080).

  • Každý pixel svítí určitou intenzitou barevných subpixelů (R, G, B).

  • Lidské oko vnímá kombinaci těchto barev jako výsledný odstín.

Rozlišení

  • Počet pixelů na šířku × výšku.

    • Např. Full HD = 1920 × 1080 = cca 2 miliony pixelů.

  • Více pixelů → ostřejší obraz (pokud má displej dostatečnou hustotu).

  • Příklad:

    • 24" monitor s Full HD rozlišením.

    • 24" monitor s 4K rozlišením. → Druhý má mnohem jemnější obraz.

Rozlišení

banner 1 resize images

DPI a PPI

  • DPI = Dots Per Inch (tiskárny).

  • PPI = Pixels Per Inch (displeje).

  • Určují hustotu bodů/pixelů na fyzické délce.

  • Příklad:

    • Mobil s Full HD na 6" → vysoké PPI (jemný obraz).

    • Stejné rozlišení na velké TV → nízké PPI (pixely viditelné).

Grafické jednotky

  • Pixel – základní jednotka.

  • Body (pt) – typografická jednotka (1 pt = 1/72 palce).

  • Em – relativní jednotka (odvozená od velikosti písma).

  • Procenta (%) – relativní k okolnímu prvku.

  • Použití v praxi:

    • Webdesign → px, em, rem, %.

    • Tisk → pt, mm, cm, dpi.

Barevná hloubka

  • Udává, kolik barev může pixel mít.

  • 1 bit = černá/bílá.

  • 8 bitů = 256 barev.

  • 24 bitů (True Color) = 16,7 milionu barev.

  • 30 bitů a více = využívá se pro profesionální grafiku.

Barevná hloubka

align:center

Příklady z reálného života

  • Proč jsou fotky na Instagramu ostré na mobilu, ale rozmazané na monitoru.

  • Jak nastavit správné rozlišení monitoru v systému.

  • Proč má smysl kupovat monitor s vyšším rozlišením.

Shrnutí

  • Pixel = nejmenší grafický bod.

  • Rozlišení = počet pixelů na displeji.

  • DPI/PPI = hustota bodů.

  • Grafické jednotky = různé způsoby měření velikostí.

  • V praxi: web, aplikace, tisk, fotografie.

Otázky a diskuse

  • Jaké rozlišení má váš monitor / mobil?

  • Vidíte rozdíl mezi HD a 4K?

  • Co byste preferovali – větší displej s nižším PPI, nebo menší s vyšším PPI?