Grafika – opakování Číslo projektu CZ.1.07/1.5.00/34.0950 Kódování materiálu vy_32_INOVACE_inf3_web08 Označení materiálu web08_grafika_opakovani.pptx Název školy Gymnázium Kladno Autor Mgr. Pelikánová Lucie Anotace Prezentace opakuje základní pojmy z oblasti počítačové grafiky, které jsou důležité pro použití grafiky na webových stránkách. Zaměřuje se zejména na rozlišení obrázků a formáty, které jsou vhodné pro tvorbu webu. Předmět Informatika a výpočetní technika Tematická oblast Tvorba webových stránek Téma Grafika opakování Očekávané výstupy Opakování základních pojmů počítačové grafiky, přehled základních formátů rastrových obrázků, seznámení se se základními postupy při používání webové grafiky Klíčová slova Rastrový obrázek, pixel, rozlišení, ppi, komprese ztrátová a neztrátová, formáty rastrových obrázků (jpg, gif, png) Druh učebního materiálu prezentace (výkladová) Ročník 3 Cílová skupina vyšší stupeň osmiletého gymnázia, čtyřleté gymnázium Ověřeno 13.11.2012; třída O7 Zdroje uvedeny na konci dokumentu, obrázky jsou z vlastních zdrojů

Tvorba webových stránek Výukový materiál Pelikánová Lucie 2012/2013 Grafika opakování Tvorba webových stránek Výukový materiál Pelikánová Lucie 2012/2013

Rastrový obrázek se skládá z malých „čtverečků“ (dlaždiček), pro které se používá název pixely každý pixel může mít jinou barvu čím více pixelů tím „lépe“, ale pozor na velikost závisí také na tom, co plánuji s obrázkem dělat dále jemnost pixelové reprezentace vyjadřujeme pojmem rozlišení

Rozlišení obrázku (I. způsob) 591 x 881 pixelů vchod1.jpg 300 PPI 295 x 441 pixelů vchod2.jpg 150 PPI 98 x 147 pixelů vchod3.jpg 50 PPi

Rozlišení ppi (pixel per inch) Potřebuji konkrétní velikost obrázku (fotografie) obrázek chci mít 10 cm široký zjistím, na jakém zařízení budu obrázek zobrazovat spočítám, kolik potřebuji pixelů na cm (bývá zvykem počítat spíše na palce)

Vhodná rozlišení Monitor Fotolab nebo tisk obrázku 70 – 100 ppi (lze spočítat podle nastaveného rozlišení a rozměru monitoru) Fotolab nebo tisk obrázku 150 – 300 ppi

Rastrové grafické formáty rastrové obrázky jsou tvořeny body (pixely) dvojrozměrná matice pixelů (BMP formát) komprese obrazových dat neztrátová informace o barvě se neztrácí jen jsou úsporně uloženy formát GIF, PNG ztrátová část informace je vypuštěna tak, aby oko nic nepoznalo formát JPG

Rastrové formáty vhodné pro WWW JPEG velká barevná hloubka zmenšení velikosti souboru ztrátová komprese Použijete když: potřebujete malou velikost souboru hodně barev nevýhoda možné zhoršení kvality obrazu nepoužívat na černobílé obrázky nelze mít průhlednou barvu GIF standardní formát neztrátová komprese obrázky na WWW Použijete na: obrázky s omezenými barvami mapy, loga GIF89 vytváření jednoduchých animací více obrázků v jednom souboru

PNG Portable Network Graphics vytvořen již v roce 1996 měl nahradit GIF formát komprimovaný, neztrátový barevná hloubka až 48 bitů umožňuje definovat průhlednost a průsvitnost

Jak optimalizovat grafiku pro webové stránky nastavit vhodné rozlišení oříznout obrázky na správnou velikost vybrat vhodný formát (kompresi) pro uložení grafiky vybrat vhodnou paletu barev pro prezentaci

Použitá literatura ROUBAL, Pavel. Počítačová grafika pro úplné začátečníky. 2. vyd. Brno: Computer Press, 2004, 171 s. ISBN 80-722-6896-1. ŽÁRA, Jiří, Bedřich BENEŠ a Petr FELKEL. Moderní počítačová grafika. Vyd. 1. Praha: Computer Press, 1998, xvi, 448 s. ISBN 80-722-6049-9.