Grafika – opakování Číslo projektu CZ.1.07/1.5.00/

Prezentace na téma: "Grafika – opakování Číslo projektu CZ.1.07/1.5.00/"— Transkript prezentace:

1 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 ; třída O7 Zdroje uvedeny na konci dokumentu, obrázky jsou z vlastních zdrojů

2 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

3 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í

4 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

5 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)

6 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

7 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

8 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

9 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

10 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

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