Datové formáty grafiky, jejich specifika a možnosti využití. L u b o š T o m e š e k U M T M a n a ž e r s k á i n f o r m a t i k a 2015/ 16

Transkript

1 Datové formáty grafiky, jejich specifika a možnosti využití L u b o š T o m e š e k U M T M a n a ž e r s k á i n f o r m a t i k a 2015/ 16

2 Plán prezentace N A C O S E M Ů Ž E T E T Ě Š I T??? Úvodní představení Jaké jsou typy 2D grafiky? Základní rozdíly, výhody/nevýhody Rastrová grafika Vysvětlení pojmů pixel, barevná hloubka, rozlišení, formáty grafiky Vektorová grafika Vysvětlení pojmu, druhy kreslících prvků, typy křivek, formáty grafiky D grafika Vysvětlení pojmu, příklady použití, rendering, software na tvorbu Shrnutí tématu Shrnutí prezentovaných informací do uceleného celku, závěr Volná diskuze k tématu Prostor pro diskuzi k prezentovanému tématu P r e z e n t u j e : L u b o š T o m e š e k 2

3 Typy 2D grafiky hlavní rozdíly R o z d í l j e j a s n ý n a p r v n í p o h l e d... Matice pixelů Rastrová grafika Vektorová grafika Geometrické objekty (křivky, kružnice, čáry) Pro každý pixel udaná barva Změna velikosti pomocí výpočtu Vzniká ve fotoaparátu, skeneru * Bitmap 285x200px ** 5x zoom * Vektor 100% ** 500% Kreslení a modelování v PC P r e z e n t u j e : L u b o š T o m e š e k 3

4 Rastrová grafika N e j p o u ž í v a n ě j š í t y p g r a f i k y... Pixel Nejmenší jednotka rastrové grafiky, skládáno do dvourozměrné matice, každý pixel nese informace o jasu, barvě, průhlednosti, svém umístění Barevná hloubka Počet bitů použitých k popisu barvy pixelu. (čím více bitů, tím více barev a kvalitnější zobrazení (datově náročnější) Rozlišení Velikost matice pixelů - monitor 2,1Mpx, fotoaparát 20Mpx, lidské okolo údajně 576 Mpx. DPI počet pixelů na palec (tisk 300, monitor 72) Barevná definice pixelů RGB red, green, blue (vrstvení barev) CMYK cyan, magenta, yellow, key (odečet od černé) *2bit **4bit *** 24bit (True color) Fotoaparát - 6Mpx Rozlišení - 3:2 Počet pixelů 3000x2000 Tiskové rozměry 25,4*16,93 cm (300dpi) P r e z e n t u j e : L u b o š T o m e š e k 4

5 Rastrová grafika N i c n e m ů ž e b ý t ú p l n ě d o k o n a l é... Výhody Snadné vytvoření (fotoaparát, skener) Jednoduchý převod (JPEG => PNG) Realistické vyobrazení Jednoduché zobrazení a tisk Nevýhody Velký objem dat Ztráta kvalita při změně rozměrů Změna velikosti (zoom) způsobuje ztrátu kvality Nelze navrátit ztracenou kvalitu P r e z e n t u j e : L u b o š T o m e š e k 5

6 Formáty rastrové grafiky P e č l i v ě v y b í r e j t e d l e v y u ž i t í o b r á z k u... Nekomprimované Nejvyšší kvalita Komprimované Úspora velikosti RAW BMP Bezztrátová komprese GIF, PNG, TIFF Ztrátová komprese JPEG P r e z e n t u j e : L u b o š T o m e š e k 6

7 Nekomprimovaný RAW, BMP S u r o v á d a t a z f o t o a p a r á t u... Neupravená (surová) data Plnohodnotná data získaní z přístroje (fotoaparát, skener) vhodná pro další úpravu Formát není standardizovaný Každý výrobce má svoje koncovky souboru, který obsahuje RAW data (Canon =.cr2, Nikon =.nef, Adobe -.dng) Využívaný profesionály Profesionální fotografové tento formát používají pro záznam suroviny Meta dat ze senzorů přístroje Záznam zajímavých dat o fotografii. Obrázky bez komprese Nevhodné pro používání na internetu Jednoduchý formát + volné užití Díky jednoduchosti, dobré dokumentaci a volné licenci k použití jej dokáže přečíst většina editorů napříč systémy Ukládání po jednotlivých px Dle počtu bitů na každý pixel lze rozlišit počet použitých barev (barevná hloubka) Začátky ve MS Windows 3.0 Největší boom při uvedení daného systému P r e z e n t u j e : L u b o š T o m e š e k 7

8 Komprimovaný GIF, PNG, TIFF, JPEG F o r m á t y p r o w e b a g r a f i c k é p r á c e... Počet barev omezen na 256 Omezení díky maximálně 8bitové bar. hloubce Jednoduché animace Obrázky jsou zobrazovány jeden po druhém dle nastavené rychlosti (opakování) Využití pro webovou grafiku Vhodné pro uložení loga či drobné grafiky s malou náročností na barvy ostré okraje, malá velikost = rychlé načítání 24bitová barevná hloubka Odstraňuje omezení GIFu a není omezen pouze 256 barvami + lepší komprese Průhlednost Obsahuje 8bitový alfa kanál = v různých částech může být různě průhledný (RGBA) Nedostupnost animace Oproti GIFu naopak nemá k dispozici možnost animace (alternativa APNG se neprosadila) Využití pro webové stránky Oproti JPEG mají obrázky cca. 3-5x větší velikost, ale zobrazuje lépe obrázky s textem, čárovou grafikou či barevnými plochami P r e z e n t u j e : L u b o š T o m e š e k 8

9 Komprimovaný GIF, PNG, TIFF, JPEG F o r m á t y p r o w e b a g r a f i c k é p r á c e... Archivace dat a tisk Neoficiální standard pro ukládání obrázků k tisku => 32bit CMYK / 24bit RGB Vícestránkové soubory Umožňuje ukládat do souboru jednotlivé vrstvy (text, obrázky, grafika), které lze následně editovat Vysoká náročnost na paměť Díky bezztrátovému ukládání mají soubory často podobnou velikost jako samotná surovina ve formátu.raw Nejpoužívanější formát Nejčastěji využívaný formát jak na přenos a zobrazení obrázků na webu, tak pro záznam z klasických fotoaparátů a mobilů Ztrátová komprese Po uložení se vždy zhorší kvalita. Návrat zpět již není možný. Uloženo jako True Color (24bit) Více přípon formátu Daný formát je ukládán s příponami.jpeg,.jpg,.jfif,.jpe => možné i velkými písmeny Razantní snížení velikosti Možné razantní snížení velikosti oproti surové fotografii bez viditelné ztráty kvality P r e z e n t u j e : L u b o š T o m e š e k 9

10 Detail fotografie o velikost 2,5MB a 32MB. (uloženo v kvalitě obrazu 1/12)

11 Vektorová grafika O b r a z s l o ž e n ý z t v a r ů... Vektor Veličina popsaná velikostí a směrem (tím se odlišuje od čísla) vykresluje všechny geometrické objekty Geometrické objekty Obraz je vykreslován pomocí křivek, kružnic, přímek nebo lomených čar => složitější útvary vykreslovány pomocí použití jednoduchých (obdélník = 4 přímky) * Interpolace dat **aproximace dat (křivka prochází body) (nemusí procházet všemi body) Bezztrátová změna rozměrů Při změně rozměrů či rotaci dojde k přepočtu matice a nedojde tak k žádné obrazové ztrátě Křivky Prezentovány jako soustava parametrů rovnice. Skládají se z počátečního a koncového bodu nebo vektorů. Explicitní => y = f(x) Implicitní => f(x,y) = 0 Parametrické => P(t) = [x(t), y(t), z(t)] P r e z e n t u j e : L u b o š T o m e š e k 11

12 Rastrová grafika N i c n e m ů ž e b ý t ú p l n ě d o k o n a l é... Výhody Velké obrazce mají malý objem dat Přesné definování rozměrů, objektů Jednoduchá editace prvků obrazu Snadná konverze do rastrové grafiky Nevýhody Nevhodné pro složitější obrazce (tvorba, hardware) Pro zobrazení a tisk nutná konverze do rastrové grafiky Složitější vytvoření obrázku P r e z e n t u j e : L u b o š T o m e š e k 12

13 Nejpoužívanější křivky N a k r e s l i t l z e c o k o l i v... Spline křivka Jemná spojitost Definovaná po intervalech spojitou množinou souřadnic bodů jimiž má procházet Bézierova křivka Nejpopulárnější aproximační Aproximační křivka používaná často pro návrh počítačových písem (fontů) Fergusonova křivka Nejpopulárnější interpolační Dána dvěma body P0, P1 a dvěma tečnými směrovými vektory p0, p1 v daných bodech P r e z e n t u j e : L u b o š T o m e š e k 13

14 Základní formáty vektorové grafiky P D F j e s t e j n ě n e j l e p š í Corel Draw (.cdr) Vytvořen společně s programem Corel Draw Může obsahovat rastrový obrázek Výrazná komprimace Průběžný vývoj s každou verzí programu PostScript (.eps,.ps) Programovací jazyk určený k popisu grafiky Nezávislý na zařízení, kde probíhá tisk dat Pro rastrové, vektorové i kombinace Nahrazen pomocí PDF Scalable v.g. (.svg) Jazyk popisující grafiku pomocí XML Stává se základním vektorovým formátem pro grafiku na internetu Objekty seskupeny, formátovány a polohovány pomocí CSS PDF (.pdf) Otevřený standard pro výměnu dokumentů Může obsahovat odkazy, tlačítka, video, zvuk, formuláře Zachování originální podoby včetně druhů písem s možností podpisu P r e z e n t u j e : L u b o š T o m e š e k 14

15 3D grafika T r a n s f o r m a c e 3 D s v ě t a n a m o n i t o r... Grafika pracující s 3D objekty Nejen vytváření animací, filmů nebo počítačových her, ale také využití ve vědě, průmyslu či stavebnictví Historie 3D grafiky Výzkum od 60. let 20.stolení (Utah) 1. 3D celovečerní film: Toy Story (1995) 1. 3D hra: Wolfenstein 3D (1993) Využití 3D grafiky Reklama dokonalé vyobrazení výrobků Architektura vizualizace staveb z výkresů Průmysl počítačové modely pro kontrolu Instruktážní filmy vysvětlení funkce složitých zařízení do kterých lze těžko nahlédnout (funkce tlumičů za jízdy, funkce turbíny) P r e z e n t u j e : L u b o š T o m e š e k 15

16 Reprezentace 3D těles N e j č a s t ě j i h r a n i č n í m o d e l y... AutoCAD Google Sketch up Allplan Sweet home 3D Hraniční prezentace Těleso popsáno jako mnohostěn zcela určený svými hranicemi (hrany, stěny, vrcholy) Projektování s CAD CAD je počítačem podporované projektování pomocí pokročilých grafických programů. Konstrukce těles Využití metody CSG, kdy je konstruováno z primitivních těles (koule, kvádr, válec, ) s pomocí operací jako sjednocení, průnik či rozdíl. Objemová prezentace Zobrazení pomocí metody paprsků či algoritmy na zviditelnění povrchu či objemu P r e z e n t u j e : L u b o š T o m e š e k 16

17 3D grafika - rendering V y k r e s l o v á n í o b r a z u n a z á k l a d ě m o d e l u s c é n y... Stínování doplnění realistického vzhledu povrchu Mlha šíření světla skrze objekty se zkreslením kolísání barvy a jasu povrchu v závislosti na osvětlení Texturování tlumení světla při průchodu atmosférou Průhlednost P r e z e n t u j e : L u b o š T o m e š e k 17

18 Detaily využití 3D grafiky N e k o n e č n é m o ž n o s t i v y u ž i t í... P r e z e n t u j e : L u b o š T o m e š e k 18

19 Děkuji za pozornost M á t e p ř í l e ž i t o s t n a d o t a z y...