5. Grafika a multimedia

Rozdělení počítačové grafiky

• Podle vnitřní prezentace

• Vektorová

• Rastrová (bitmapová)

• Podle způsobu komprese

• Nekomprimovaná

• Ztrátově komprimovaná

• Bezetrátově komprimovaná

• Identifikační grafika

• Firemní loga – korporátní design

• Výrobky, obaly, prezentace výrobků

• Strukturální grafika

• Pozadí prezentace

• Použité barvy, barevné kombinace

• Navigační grafika

• Menu, odkazy apod.

• Kontextová grafika

• Ilustrační fotografie, grafy, výpočty, screenshoty

• Dekorační grafika

• Doplňuje prezentaci bez zvláštního účelu (ikony, animace)

• Reklamní grafika

• Především reklamní bannery, upoutávky

• Dle počtu akceptovaných rozměrů

• 2D

• 3D

3D grafika

• Trojrozměrně vyjádřená data

• Renderování 2D grafiky

• Obvykle pro konstrukční výkresy

• Grafika pro hry

• Animace

Programy pro 3D grafiku

• 3D studio max

• Modelování předmětů, osvětlení, animace

• Maya

• Realistické 3D zobrazení, tvorba složité grafiky

• Cinema 4D

• Komplexní scény, animace

• Spousta dalších programů

CAD

• Computer Aided Design

• SW pro konstrukční práce

• Zaměřené na 3D modelování a skládání komponent

• Návrh složitého stroje od šroubku

Texturování

• Potažení ,,drátěné” osnovy povrchem

• Snadné modelování objektů

• Úspora výpočetního výkonu

• Rastrový 2D obrázek – textura

Základní charakteristiky – barvy

• Způsob, jakým je tvořena výsledná barva

• Barevný model RGB

• Barva je tvořena ze tří základních barev – Red, Green a Blue

• Intenzita jednotlivých složek je udávaná v relativních nebo absolutních hodnotách

• Relativní – intenzita jednotlivých složek je udávána v procentech

• Absolutní – intenzita jednotlivých složek je udávána podle stanovené stupnice – v počítačové grafice typicky 0-255 (v hexadecimální soustavě 00-FF)

• Pro stanovení výsledné barvy je tedy nutné

Základní charakteristiky – barvy

• Na obrázku je vidět složení uvedené barvy:

• 255 (100%) R

• 174 (68%) G

• 201 (79%) B

• V hexadecimální soustavě:

• FFAEC9, tedy FF(R)AE(G)C9(B)

Histogram

• Graf rozložení bodů v obrazovém souboru

• Udává jasnost jednotlivých bodů

• Lze snadno zjistit

• Přeexponovanou

• Podexponovanou

Fotografii

Základní charakteristiky – barvy

• Aditivní míchání barev RGB

• Využití – Monitory, Televize, Datové projektory

Základní charakteristiky – barvy

Barevná hloubka

• Barevná hloubka udává, kolik barev je možné zobrazit pomocí barevného modelu

• Pokud v modelu RGB každá barva nabývá hodnot 0-255, lze spočítat barevnou hloubku 256³, tedy více než 16 milionů barev

• Lidské oko je schopno rozlišit cca 190 000 odstínů

• Barevná bohatost

• Počet barev jednoho bodu – datová náročnost

• 1bit – 2 barvy

• 4bity – 16 barev

• 8bitů – 256 barev

• 16bitů – 65536 barev

• 24bitů – 16,7 milionu – True color

• 32bitů – 4,3 miliardy barev

Barevná hloubka a velikost souboru

• Počet bodů a barevná hloubka

• Závisí na velikosti souboru

• Počet bodů obrázku

• Šířka (počet bodů) x výška (počet bodů)

• 1600 x 1200 = 1 920 000

• Barevná hloubka

• 2 barvy (černá, bílá – pérovka) – 1 b/bod = 1/8 B/bod

• 1600 x 1200 x 1/8 = 240 000 B = 234,4 kB

• 256 barev – 1 B/bod

• 1600 x 1200 x 1 = 1 920 000 B = 1875 kB = 1,83MB

• 256 odstínů šedi (črnobílá fotografie) – 1 B/bod

• 1600 x 1200 x 1 = 1 920 000 B = 1875 kB = 1,83MB

• 16,7mil barev (barevná fotografie) – 3 B/bod

• 1600 x 1200 x 3 = 5 760 000 B = 5625 kB = 5,49 MB

Základní charakteristiky – barvy

• Barevný model CMYK

• Je založen na subtraktivním míchání barev – omezení barevného spektra odráženého od povrchu až po černou barvu (neodráží světlo)

• Obsahuje 3 základní barvy Cyan, Magenta, Yellow

• Pro zabránění zbytečného čerpání všech barevných složek pro dosažení černé je přidávána samotná černá barva – blacK

CMY(K)

• Subtraktivní míchání barev CMYK

• Využití – barevný tisk, plottery

Model HSV

• Hue, Saturation, value

• Nejvíce dle lidského vnímání

• Hue – barevný tón – dle barevného kola

• Hodnota ve stupních

• Saturation – sytost barvy – udává podíl šedé barvy – vzdálenost od středu barevného kola

• Hodnota v procentech

• Value – jas

Rastrová grafika

• Skládá se z jednotlivých bodů

• Každý bod si nese informaci o barvě a průhlednosti

• Soubor obsahuje pole hodnot – jednotlivé pixxely

• TFF, BMP, JPG, PNG, …

• Fotorealistická grafika

• Problém při změně velikosti

• Zvětšení – zhubne rastr, Zmenšení – ztratí se detaily

Pixel

• Picture element

• Nejmenší obrázkový prvek

• Zkratka px

• Má barvu – dle barevného modelu

• Velikost pixelu – dle zařízení (monitor, tiskárna, skener)

Rozlišení

• Počet obrazových bodů na jednotku plochy

• Udává se v DPI – dost per inch

• Počet bodů na čtvereční palec

• Optimum pro www – 72DPI

• Optimum pro tisk – 300DPI, pro foto více

• Zvolit rozlišení dle účelu

Zákaldní charakteristiky – rozlišení

• Rozlišení obrázku/monitoru v bodech

• Udává počet bodů na šířku a na výšku, které popisují uvedený obrázek

• Například obrázek 1Mpx (1 milion bodů) v poměr 4:3 má 1155 bodů na šířku a 866 bodů na výšku

• Rozlišení tohoto obrázku je 1155x866 (tedy 1.000.000)

• Rozlišení DPI – Dots per inch

• Udává, kolik obrazových bodů (dots/pixels) se vejde do délky jednoho palce (2,54cm)

• Pomocí DPI a rozlišení obrázku je možné spočítat velikost obrázku po vytištění

• Vyšší DPI poskytuje jemnější a detailnější výstup

Základní charakteristiky – komprese

• Komprese zmenšit velikost souboru nutnou pro uložení obrázku nebo videa

• Ztrátová komprese

• Využívá nedokonalostí lidského oka a vynechává ,,nepodstatné” části obrázku

• Ze zkomprimovaného obrázku není možné zpětně vytvořit původní obrázek – zkreslení je nevratné

• U ztrátové komprese je možné volit úroveň zkreslení

Příklad

Tto je dbry prklad kompse dat:

Toto je dobrý příklad komprese dat:

Prve dost dat pro pchpení, co vta znmná

Právě dost dat pro pochopení, co věta znamená

• Bezztrátová komprese

• Zmenšuje velikost souboru bez ztráty obrazové informace

• Většinou není tak účinná jako ztrátová komprese

• Po zpětném dekomprimování je získání totožná obrazová informace jako před kompresí

Bezztrátová komprese

• Několik algoritmů najednou

• Transformace – převod dat na lépe komprimovatelnou formu

• Slovník – zápis segmentů – v případě opakování se pouze uvede odkaz

• Statické . pro časté opakování – statistická funkce

Korporátní design

• Branding

• Budování značky

• Jednoznačná identifikace firmy

• Soulad všech složek

Korporátní design – složky

• Barvy

• Důraz kladen na výběr barev, barevné sladění

• Loga

• Tvorba loga pro různé účely – ikona webu, loga na bílý podklad, průhledná loga

• Písmo

• Výběr existujícího nebo tvorba nového fontu

• Formuláře

• Předdefinované styly

• Vizitky

• Sjednocení firemní kultury, jednotná prezentace zaměstnanců

Korporátní design

• Použité fonty a barvy

• Rozložení stránky jednotné pro celý web

• Ikona webu

• Jednotná terminologie (naše společnost/firma/organizace)

• Společné prvky jako dokazy na společné zdroje