Počítačová grafika
Třída: VT1 Jméno: Luděk Bordovský
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
Rozdělení grafiky Grafiku můžeme rozdělit podle různých hledisek. Základní dělení je podle prostoru, ve kterém pracujeme. Dělíme grafiku na:
2D grafiku – grafiku zpracovávanou ve dvourozměrném prostředí, která slouží k úpravám fotografií nebo kreslení obrázků, také pro tvorbu jednoduchých animací a www stránek. 3D grafiku – grafiku, která slouží k modelování a vytváření prostoru s mnohem složitějšími animacemi.
V dalším textu se zaměříme na 2D grafiku, kterou budeme dále členit na grafiku:
rastrovou (bitmapovou), vektorovou.
je možná i kombinace rastrové vektorové grafiky
Rastrová grafika, (bitmapová) Celý obraz se rozloží do jednotlivých drobounkých bodů. Takový základní obrazový prvek se nazývá pixel (picture element) a lze mu přiřadit určitou digitálně zakódovanou barvu a pevně stanovenou pozici. Tyto droboučké barevné body skládají na obrazovce monitoru nebo na ploše vytištěného obrazu mozaiku - rastr. Tato mozaika barevných bodů lidskému oku splývá a vytváří dojem souvislé barevné plochy, plynulého nebo ostrého přechodu z jednoho odstínu do jiného.
Rastrový obr. v plné kvalitě
Vyříznutá část rastrového obr.
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
Kvalita vizuálního vjemu závisí na tom, jak velké jsou základní body (pixely), na jak mnoho pixelů je plocha obrazu rozdělena. Jsou-li body tak drobné a je jich tak mnoho, že splývají, tak je výsledný vjem motivu hladký a plynulý. Jsouli velké, je jich na ploše méně, optický vjem souvislosti obrazu se rozpadne a my je začneme vnímat jako jednotlivé plošky, čtverečky - jako mozaiku, obraz je kostrbatý. Hustotě nebo jemnosti pixelů se říká rozlišení a udává se v jednotkách dpi (dots per inch = bodů na 1 palec). Pro tisk se rozlišení udává obvykle obdobně v lpi (lines per inch = řádků bodového rastru na 1 palec). Další důležitou vlastností je barevná hloubka, tedy bohatost barevné škály. U černobílé kresby stačí pro každý bod jeden bit, černá nebo bílá. Pro naše účely potřebujeme vysokou barevnou věrnost např: 1 b = 2 barvy 8 b = 256 barev 24 b = 16.7 mil. Barev
Určení velikosti obrázku známe-li velikost v bodech a barevnou hloubku. Např. Máme li obrázek 1600x1200 bodů a barevnou hloubku 24 b velikost souboru se rovná 1600x1200x24 = 5.5 MB. S toho vyplývá i nutnost používáni komprese, je to uložení dat tak, aby zabírala méně místa, ale informace zůstala zachována. Komprese se dělí na: Bezeztrátová – při kompresi nedojde ke změně informace avšak dosahuje se malých kompresních poměrů Ztrátová – při kompresi dojde ke ztrátě nepodstatných informací dosahuje velkých kompresních poměrů
Kompresní poměr se vypočítá nová velikost / původní velikost.
Vektorová grafika Vektorová grafika se hodí pro technické výkresy, mapy, písmo, kliparty. Obraz je rozdělen na matematicky definované části - křivky, lomené čáry a jimi ohraničené stejnorodé plochy. Každé z těchto částí obrazu se přiřadí kódovaná
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
informace o tom, jak má být zobrazena, jakou barvou, jak silnou čárou, zda jednoduchou či nějakou přerušovanou, tečkovanou, dvojitou, fousatou, čím má být uzavřená plocha vybarvena, zda jednolitě nebo nějakým vzorkem.
V paměti počítače jsou uloženy pouze souřadnice bodů ze kterých prvek vychází, parametry matematické funkce, která určuje jeho průběh a údaje o způsobu zobrazení (barvě, síle a typu čáry, vzorku). Zobrazovací či tiskový program si vždy znovu z uložených dat tento grafický prvek vypočítá a zadaným způsobem zobrazí. Na první pohled to vypadá složitě. Ale výpočetní kapacita dnešních počítačů je obrovská. A paměťové nároky těchto informací jsou minimální. V důsledku to také znamená, že uloženou kresbu lze snadno upravovat. Stačí jen změnit parametry matematické funkce, kód barvy, kód způsobu zobrazení. V případně je lze tak snadno změnit. Vlastní tvorba z vektorové grafiky do rastrové.
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
Další ukázka překreslení pomocí vektorů z rastrové grafiky do vektorové.
Orginál rastrová fotografie
Vektorový obrázek
Míchání barev Jak u rastrové tak u vektorové grafiky je třeba k vytvoření nějakého obrazu potřeba míchání barev. Můžeme je míchat buď aditivní nebo subtraktivní metodou. Vezmeme-li ideálně bílý povrch nějakého tělesa a budeme na něj svítit několika barevnými světly, bude výsledná barva tělesa vnímána jako součet těchto složek. Tomuto způsobu kombinace barev říkáme aditivní skládání barev. Na tomto principu pracuje například monitor. Druhý způsob skládání barev je charakteristický například pro tiskány a říká se mu skládání subtraktivní neboli rozdílové. V tomto modelu dojde přidáním
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
další barvy k jejímu odečtení, a tak, pokud aplikujeme všechny barvy celého spektra najednou, získáme barvu černou.
aditivní míchání barev
subtraktivní míchání barev
Grafické modely Je několik základních typů grafických modelů které se běžně používají např. RBG Je modelem určeným pro použití v počítači. Jeho princip je založen na práci katodové trubice monitoru nebo televizoru. Jaho parametry jsou tři základní barvy aditivního (součtového) míchaní barev: Red (červená), Green (zelená), Blue (modrá). Z těchto tří primárních barev se vytváří většinu barev viditelného spektra.
Goemetrické zobrazení RGB modelu
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
Nesvítí-li žádná primárních bareva, je výsledná barva černá. Svítí-li všechny maximální intenzitou je výslednou barvou bílá. Odstíny šedi vznikají tak, že jsou všechny tři primárních barev mají stejné hodnoty Ještě v počítačové grafice se můžeme setkat s modelem RGBA ten je doplněn o informaci průhlednosti označovaný písmenem A muže nabývat hodnot od 0 do 100%.
CMY, CMYK Představují barevné modely používané především při tisku. Záklním modelem je model CMY (Cyan (azurová), Magenta (fialová), Yellow (žlutá)) založený na substraktní (rozdílové) míchání barev. Model CMYK (Black (černá)) je modelem odvozeným a byl vytvořen na základě potřeb praxe. V praxi je totiž obtížné namíchat se skutečných barev opravdovou černou a když se to nějak podaří, tak pouze za cenu velké spotřeby jednotlivých barev. Proto jsou především inkoustové tiskárny doplněny ještě o barvu černou.
HSB, HLS Představují modely "lidského vnímání". Fyzika popisuje barvu třemi vlastnostmi: vlnovou délkou, jasem a intenzitou. Zkratky těchto modelů znamenají: Hue Saturation Brightness a Hue Lightness Saturation.
A - sytost, B, D - odstín, C - jas
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
YUV Základní model YUV se používá pro přenos televizních signálů v normě PAL. Obdobně existují i modely YIQ pro americkou normu NTSC a model YCBCR pro normu SECAM. Jejich společným rysem je oddělení jasové složky Y od barevných informací tak, aby mohly být používany na černobilých i barevných televizorech.
3D grafika 3D grafika je jedno z poměrně mladých a rychle se rozvíjejících odvětví počítačové tvorby. Zatímco před 10 lety jen ti největší optimisté věřili, že by snad počítačová animace mohla být hlavní technikou při tvorbě celovečerního filmu, dnes je toto již "všední" realita.
3D grafický obrázek
Tvorba 3D grafiky je poněkud odlišná od 2D. Finálním výstupem je sice opět 2D obrázek (třeba ve formátu *.jpg) nebo animace (např. ve formátu *.avi), ale pracuje se ve 3D světě. Téměř nutností je zde práce v několika různých pohledech.
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
Práce v programu Photoshop Rozdíl v práci s vektorovým programem Zoner Callisto a Photoshopem je hlavně v tom že ZonerCallisto je určen hlavně na prácí z vektorovými objekty složených z mnoha matematicky definovaných bodů. Zatím to co Photoshop je rastrový program který přes svou rozsáhlost umí kromě práce z rastrovými obrázky i částečnou práci z vektory, ale hlavní zaměření photoshopu je na práci a úpravami dnes tak rozšířenými digitálními fotkami.
Úprava fotografií pomocí Photoshopu Správné oříznutí fotografie
Fotografie se musí oříznout vždy tak aby hlavní podstata nevymizela a zároveň aby se co nejvíce zvýraznila znamená to že se zaměříme vždy na objekt který má být dominantní a jeho střed umístíme kousek nad středovou oblast budoucího obrázku. Samozřejmě že to zaleží na povaze obrázku ale vychází to s toho že člověk se nejprve zaměří svůj pohled do horní časti fotografie.
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
Odstranění efektu červených očí
Začneme z nejednoduší úpravou fotografie s jakou se můžeme setkat je to efekt červených očí pokud chceme tento nepříjemný efekt z fotografií odstranit uděláme to velmi snadno a to tak že si do fotoshopu vložíme obrázek který chceme upravit přiblížíme si oblast na které chceme provést požadované úpravy a pomocí nástroje laso provedeme výběr červené oblasti tak abychom zakryli celé červené místo a v menu obraz vybereme přizpůsobení, odstín a sytost, pomocí táhel přizpůsobíme barvu okolí a tím efekt červených očí odstraníme.
Před úpravou
Po úpravě
Práce s vrstvami ve Photoshopu
Pokud potřebujete smíchat více obrázků a vytvořit s něho jeden celistvý například nějakou koláž. K tomu to účelu ve photoshopu jsou vrstvy. Vrstvy slouží k tomu abychom mohli do každé vložit nějaký obrázek nebo objekt který spolu z dalšími vrstvami vytvoří celistvý obrázek. S vrstvami lze dělat různé
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
operace dají se vzájemně překrýt zesvětlit. Každá vrstva má určité pořadí podle toho kolikátá je tak se nám zobrazuje na obrázku.
Odstranění odlesku na fotce
Tato nepříjemná věc se velmi špatně odstraňuje nejednoduší je takovouto fotku oříznout ovšem tato operace ne vždy proveditelná. Druhá možnost že se pokusíte dané místo ztmavit a s tím ztmavíte i celo fotografii. A nebo třetí možnost že si zkrátka vezmete štětec nebo klonování razítko a snažíte se co nejvíce zamaskovat.
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
Práce s výběrem objektů (kouzelná hůlka)
Potřebujete-li do fotografie vložit nějakou část jiné fotografie. Například chceteli se podívat jak by na vás vypadalo tetování. Aniž by jste museli nevratně nechat po tetovat je daleko snadnější se nechat vyfotit a následně místo na kterém jste si budoucí tetování představovali vložit za pomocí vrstev a kouzelné hůlky. Postup je následující do photoshopu vložíme fotografii vás samotného nebo kohokoliv jiného u koho si přejete udělat tuto proměnu. Dále potřebujete vzor samotného tetování z kterého budete provádět výběr. Takže otevřete oba obrázky společně a u vzoru tetování provedete výběr za pomocí kouzelné hůlky. Kliknete pravým tlačítkem a zvolíte vytvoření vrstvy vyjmutím tuto novou vrstvu chytnete a přetáhnete do vašeho obrázku tím vám tam vznikne nová vrstva pouze se samotným tetováním toto tetování můžete dále upravovat za pomocí transformací v menu úpravy nebo měnit barvy.
Vytváření objektů ve photoshopu (šachová figurka) Začněme novým obrázkem, zvolíme přiměřenou velikost, barvu pozadí bílou, režim barev RGB. A pustíme se do tvorby šachové figurky. Musíme mít samozřejmě představu tvaru, jakého chceme dosáhnout.
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
Takový tvar lze velmi jednoduše reprezentovat křivkovými primitivy. Přesněji řečeno: čtyřmi elipsami a jednou kružnicí.
Figurka je souměrná, vyplatí se nám tedy hned na začátek si vytáhnout svislé vodítko jako její „osu souměrnosti“. Kreslit začneme nad vodítkem jako místem středu kružnice, držíme Shift, díky němuž bude výška i šířka elipsy stejná = kružnice a Alt, který zajistí, že se kreslí ze středu. Pomocí Ctrl+C a Ctrl+V ji duplikujte. Pak stačí jen několikerým stisknutím klávesy „šipka dolů“ posunout novou elipsu o něco níž. Tak vznikne spodek figurky. Přichází na řadu tělo pěšce. Nakreslete elipsu tak, aby tvořila jednu hranu figurky duplikujte jí.
Jenže to nám bohužel nestačí, protože zabraná plocha figurky ještě ne zcela odpovídá naším představám. Kdybychom nyní vybarvili figurku, dostali bychom něco takového: Abychom mohli vybarvit jednotlivé části figurky. Pomůžeme si tedy logickou funkcí průnik. Ta jde použít jen nad křivkami definované objekty a výsledkem průniku A a B je to, co mají A i B společné. Naše elipsy nemají ještě nic společného, musíme si je tedy trošku upravit. Vezme nástroj Direct Selection Tool ,
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
který nám umožňuje označit jednotlivé body, kterými je křivka definována, a označte u pravé elipsy vnější dva body (ten horní a ten vpravo). Nyní je musíme přetáhnout přes střed, podobně jako to naznačuje šipka na obrázku níže. Důvod, proč to děláme, je ten, že takhle převrátíme plochu křivky na opačnou stranu a překryjeme tak střed, který byl ještě doteď prázdný, ale my jej chceme mít přece plný. Obdobně to provedeme s levou stranou. Klidně přesuňte ty body dál než blíž, na výsledném tvaru tolik nezáleží, přebytku se hned zbavíme, podstatné je, aby se nehnulo s těmi body, které tvoří hranu figurky a aby byl střed celý překrytý. Nástrojem Path Selection Tool vyberte oba útvary co nám teď vznikly, stiskněte Combinovat – tak proběhne slibovaný průnik. Ovšemže, ještě to není úplně ono, potřebujeme se zbavit toho zbytku dole. Přiblížíme si a podíváme se, kde se dotýká křivka těla spodní elipsy. Vodorovným vodítkem si pak rozdělíme tělo figurky na dolní polovinu těla, které se chceme zbavit, a horní, kterou chceme pak spojit s dolním oválem. Nástrojem Add Anchor Point Tool vytvořte v křížících se místech kotevní body. Vodítko by vám mělo pomoci, abyste body na obou stranách přidali stejně. Máme-li křivku pěšce hotovou a jsme-li s ní spokojeni, můžeme se pustit do jejího vybarvování. Vytvořte novou vrstvu, pojmenujte ji třeba „pozadí“ a vyplňte ji černou. Vytvořte ještě jednu novou vrstvu a tu pojmenujte „spodek“. Ujistěte se, že je vybraná a přepněte se do paletky Paths. Označte spodní elipsu, barvu popředí zvolte bílou a pak už jen tu vrstvu vyplňte.
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
Podobně to udělejte i u zbývajících dvou částí, ale každou vyplňte do jiné vrstvy; pojmenujte je příhodně: „spodek“, „tělo“ a „hlava“. „Hlava“ v nejvyšší vrstvě, „spodek“ v nejnižší. Získali jsme tak bílou siluetu figurky.
Zkopírujte si texturu dřeva, vytvořte nový obrázek, Photoshop vám automaticky nabídne rozměry obrázku, který máte v paměti, vložte jej a položkou Edit -> Define Pattern... vytvoříte novou texturu. Obrázek dřeva můžete zavřít (není potřeba ukládat) a vraťte se zpět do projektu s šachovou figurkou. Vyberte vrstvu „tělo“, protože na ní nejsnáze zjistíme, jestli je zvolený materiál vhodný, a dvojím poklepáním nebo výběrem z kontextového menu vyvolejte Blending Options (Volby prolnutí). Zaškrtněte volbu Pattern Overlay (Překrýt vzorkem), čímž docílíme toho, že se vrstva bude potahovat zvolenou texturou. Vyberte ze seznamu vzorků ten, co jsme právě vytvořili. Měřítko upravte, aby to působilo co nejvěrohodněji (mně se hodilo 50%). Tak jsme docílili dřevěné figurky. A výsledek muže vypadat třeba takhle.
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
Samozřejmě lze podobným postupem vytvářet daleko složitější figurky jako třeba v tomto případě lze přidávat spoustu jiných efektů stínů a podobně pokud si budete s photoshopem dlouho hrát lze vytvořit docela pěkné obrazky.
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.
Literatura [ŽAR92] Jiří ŽÁRA a kol.: Počítačová grafika - principy a algoritmy, Grada 1992 [ŽAR98] Jiří ŽÁRA a kol.: Moderní počítačová grafika, Computer Press 1998 Pavel ROUBAL: Počítačová grafika pro úplné začátečníky, Computer Press 2003 Josef PELIKÁN: Barevné sýstémy - html, KSVI MSS UK Praha 1995 Ben Willmore: Velká Kniha k Adobe Photoshop CS, Computer Press 2005 Grafika ON-LINE
http://www.grafika.cz/photoshop/
Created with novaPDF Printer (www.novaPDF.com). Please register to remove this message.