ÚvodGRAFIKALEKCE >>>  BMP01 * teorie 1 → Cíle - Teorie - Jak na to? - Náhledy v Irfanu a WWW - Úkoly  
Aktualizace 1. 6. 2007

BMP01: Teorie 1

Úvodní informace
Cíle lekce
  • Seznámit se s rozdíly mezi bitmapovou a vektorovou grafikou
  • Pochopit základní vlastnosti grafických souborů – rozlišení, barevnou hloubku a počet bodů (pixelů) obrázku
  • Pochopit význam jednotky DPI pro rozlišení jako „hustotu“ bodů a vhodně ji aplikovat pro tisk nebo monitor
  • Pochopit vliv počtu pixelů a hloubky barev na velikost souboru
  • Pochopit nutnost zmenšení počtu bodů obrázků pro zbytečné zatěžování počítače
Klíčová slova, pojmy
vektory, pixely (body), rozlišení, DPI, hloubka barev
Software
Malování, Irfan View
Cvičné a ukázkové soubory
Ve školní síti ve složkách
...\Pub-Out\Grafika, ...\Pub-Out\Obrazky a nebo
Odkazy
Na serveru www.JSI.cz/grafika v sekci bez teorie to prostě nejde.
Dalším bohatým zdrojem informací je portál WIKIPEDIA v kategorii počítačová grafika
Pro inspiraci
  • Chtěl bych dát na levnou disketu několik fotografií a obrázků, ale si mi tam nevejdou.
  • Mám ještě pomalé připojení k Internetu a rád poslal více souborů s fotkami přátelům.
  • Omezená velikost přílohy elektronické pošty mě nutí posílat každou fotku zvlášť, chtěl bych poslat větší množství najednou.

nahoru 
Rastry versus vektory
Rozdíl mezi bitmapovou a vektorovou grafikou je popsán na webu www.jsi.cz/grafika v části rastry a vektory ukázka programu Malování: písmeno a mřížka bodů

Přibližováním náhledu na rastrový (bodový, bitmapový) obrázek je čím dál více patrná skladba jednotlivých bodů. Vektorový obrázek zůstává na obrysech stále stejně hladký.

Rastrové obrázky se skládají z bodů – pixelů. Každý bod má nějakou barvu (jeden bod má jednu barvu) a je umístěn v pomyslné matici (rastru, mřížce) na souřadnici x, y.

Vektorové kresby jsou poskládány z objektů uspořádáných za sebou, vedle sebe. Tvar a poloha objektu je popsána matematicky (vektorově). Objekt je dále popsán spoustou vlastností. Například barva či barevný přechod výplně nebo tloušťka, barva a styl čáry obrysu.

Pokud například v programu Malování nastavíte lupu na 800% a zobrazíte mřížku, může „písmeno A“ vypadat třeba jako na obrázku. Pokud si vyzkoušíte velikost stopy nástroje štětec, zjistíte, že jedna stopa má velikost jednoho bodu jiná více bodů.

ukázka vektorového programu OO.org Draw: červený a žlutý objekt

TIP - zkuste si: Zkuste vytvořit nad podobným písmenem A háček. Červený háček a vyplňte vnitřek písmena zeleně. Uložte jako LOGIN_BMP01A.bmp. Nezapomeňte si zobrazit mřížku a nastavit pořádně velké příblížení, jinak mřížku neuvidíte a nástrojem se dobře nestrefíte.

TIP - zkuste si: Ve vektorovém editoru vytvořte obdélník s červenou výplní a tlustým modrým obrysem. Pak ještě žluté kolečko bez obrysu. Zkuste dát zčásti žluté kolečko pod obdélník. Uložte do soubor LOGIN_BMP01.odg (LOGIN_BMP01.cdr).

Rozlišení, počet bodů obrázku
Wikipedia: rozlišení monitorů (fotoaparátů) vyjádřené počtem bodů (pixelů) je něco jiného než rozlišení grafických souborů vyjádřeno jadnotkou DPI (bodů na palec = hustotou bodů na jednotku délky).
Pozor na to, používá se (bohužel) stejné slovo pro různé věci.

Na serveru JSI.cz tvrdí, že rozlišení (grafických souborů) je počet bodů na jednotku délky. Já to navíc přirovnávám k pojmu hustota bodů. Jako jednotka délky se v tomto případě používá palec (1 palec = 2.54 cm). Jednotkou pro rozlišení grafických souborů je tedy DPI „Dot per inch“ (bod na palec).

V některých programech je možnost nastavit délku na milimetry, centimetry. To je v pořádku pro kreslení. Na místo pixelů třeba typografické body, pica a další jednotky, budiž. Pokud se však nastavují pro rozlišení jiné jednotky, vzniká docela zmatek a číslo „rozlišení“ ztrácí vypovídací hodnotu. Prosím nedělejte to! DPI je a bude pixel (tj. grafický bod) na palec.

Jednoduchá úvaha: velké rozlišení => velká hustota bodů => velký počet bodů => co bod to bajt nebo 3 bajty => velký soubor => moc práce pro počítač, pro přenos Internetem, nároky na místo na disku ... Pokud nepotřebujeme vysoké rozlišení, snižme jej!

Kupříkladu pro zobrazování na monitoru není potřeba víc jak 100 DPI. Monitor to totiž ani neumí zobrazit. V případě velkého rozlišení DPI „běží“ zbytečná spousta bitů z disku po sběrnici přes RAM a procesor do grafické karty, které nadbytečné „vyhodí“. Vše pracuje naprosto zbytečně, navíc pokud to stahuji z Internetu... pcháá...

TIP: Zdůvodněte matematicky kolik má 17“ monitor nastavený na 1024 * 768 bodů rozlišení v DPI ve vodorovném směru!
Jednotka DPI se používá i u skenerů pro vyjádření kvality – jemnosti snímání předlohy. V přeneseném významu se používá u myší, kde popisuje schopnost, jak jemně dokáže zpracovat pohyb. Nejnižší DPI jsem dříve vídal u faxů (75 DPI), ale to už je dávno.

Prosím nezaměňujte s rozlišením fotoaparátů 3 Mpx a s rozlišením monitorů 800 * 600. Ano, říká se to tak. Povšimněte si, že já pro jistotu říkám: rozlišení grafických souborů a mám na mysli to pravé rozlišení s jednotkou DPI. Není tam řeč o hustotě! U monitorů čísla říkají, kolik bodů zobrazí vodorovně * svisle. U fotoaparátů číslo 3 Mpx říká, kolik dokáže zachytit bodů. Ale na nás je potom, jak s těmi body naložíme. Pro tisk? Hustě, vysoké DPI, co nejkvalitněji. Zobrazit na monitoru? Snížit počet bodů na rozumnou mez. Kolik? „Přimeřeně“. Studujte, experimentujte, získejte praxí dovednost kolik je to „příměřeně“.

Typické hodnoty DPI: 75, 150, 300, 600, 1200, 2400 (násobky dvou).
DPI pro monitory se nastavuje na 72 nebo 96 DPI.
Pro tisk minimálně 300 DPI a více. Avšak pozor na velikost souboru a schopnosti tiskárny.
Příklad: Naskenuji si přehnaně kvalitně stránku sešitu A4 od spolužáka. Nastavím si plnou barvu, protože tam má něco barevně 2x podtrženo (tj. 3 B na 1 pixel). Rozevřený sešit je vlastně A3 formát, tak to máme 42 cm * 29,7 cm (převeďte si na palce). Protože pan učitel říkal, že víc DPI je kvalitnější. Tak tam dáme 600 nebo radši 1200 DPI. Spočítejte si kolik to zabere bajtů v paměti RAM! Vyzkoušejte si to takhle naskenovat. Nelekněte se, otevírá se i na slušných počítačích třeba 1-3 minuty. Otočit doprava? Oříznout? Kupte si silnější stroj! A nebo se učte.

Hloubka barev

www.jsi.cz: hloubka barev
Wikipedia: Hloubka barev na serveru WIKIPEDIA.

Co je to hloubka barev (barevná hloubka)? Hloubka barev je počet barev, který může nabývat každý bod obrázku. (www.jsi.cz)

S vysvětlením na serveru Wikipedie: „Hloubka barev popisuje počet bitů použitých k popisu určité barvy“ více méně nesouhlasím. Je to trochu zamotané.
Přesněji: K uložení informace o barvě bodu potřebujeme nějaké bity. Kupříkladu pomocí 8 bitů (8 nul a jedniček) můžu vyjádřit ve dvojkové soustavě 256 různých hodnot
=> pomocí 8 bitů můžu vyjádřit 256 barev (28 = 256).

Nejčastější hodnoty:
2 barvy: 1 bit
256 barev: 8 bitů (1 B), 28 = 256 barev
16,7 miliónu barev: 24 bitů (3 B), 224 = 16 777 216 barev

Nejčastější chyba v odpovědi je absence slovesné vazby: jeden bod může nabývat xy barev nebo chybná odpověď: (jeden) bod xy barev.
Jeden bod má vždy jen jednu barvu! Ale má možnost mít jednu z mnoha barev, z palety barev. Nikde se netvrdí, že při hloubce barev 16,7 miliónu je právě tolik barev použito. Když bych fotil černocha v tunelu bez osvětlení a blesku, tak patrně snímek mnoho barev mít nebude ...

Cvičení
Vytvořte pomocí programu MALOVÁNÍ obrázek podobný tomuto, ale doplňte svoje svoje příjmení, ukládejte jako LOGIN_ABC .....
Uložte alespoň 4-5x s různou hloubkou barev. Začněte od nejvyššího počtu barev, teorii si najděte sami na portálu Wikipedia.
16.7 milionu barev, 256 barev, 16 barev, 4 barvy, 2 barvy, ...

Jak tak koukám na obrázku nanabízí 4 barvy. Ano, když se daří, tak se daří. Počítače si žijí dál svým vlastním životem. :)
Dále uložte ještě 4x jako: TIF, JPG, GIF a PNG. POZOR, zde pro jistotu 4x otevřete vždy "nejbarevnější" nekomprimovaný soubor BMP s 16 milióny barev (24 bitový rastr) a uložte jako, znova otevřít BMP 24 bitový rastr a opět uložit. Prosím 4x. Pokud to Malování nanabízí, uložte pomocí Irfan View.
Porovnejte velikosti vzniklých souborů, otevřete v Irfan View a porovnejte kvalitu, skutečně použité barvy a zapište si poznatky do sešitu.
Na obrázku je podobný příklad, jiná varianta, zkuste taky.
Kontrolní otázky
  • Jaký je rozdíl mezi vektorovou a bitmapovou grafikou? Prosím podrobně!
  • Co je to hloubka barev? Jakými způsoby vyjadřujeme barevnou hloubku a jaké jsou obvyklé hodnoty?
  • Rozlišení grafických souborů, obvyklé hodnoty pro konkrétní případy. Uveďte jednotku a její význam.
  • Jaké bude rozlišení snímku z fotoaparátu 3,2MPx vytištěného na papír A4? Bude to ještě hezké?
  • Kolik DPI je vhodné nastavit souboru pro prezentaci na dataprojektoru? A hlavně proč?
  • Kolik DPI je vhodné nastavit souboru pro tisk? A hlavně proč?