Barvy a barevné systémy Formáty obrázků pro WWW

Podobné dokumenty
Barvy a barevné systémy Formáty obrázků pro WWW

Barvy a barevné systémy. Ivo Peterka

VYUŽITÍ POČÍTAČOVÉ GRAFIKY

Barvy v počítači a HTML.

Úvod do počítačové grafiky

Digitální učební materiál

Co je počítačová grafika

Webové stránky. 6. Grafické formáty pro web. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

POČÍTAČOVÁ GRAFIKA. Lenka Bednaříková

Počítačová grafika. OBSAH Grafické formy: Vektorová grafika Bitmapová (rastrová grafika) Barevné modely

1. ZÁKLADNÍ POJMY POČÍTAČOVÉ GRAFIKY

Konverze grafických rastrových formátů

Rastrová grafika. Grafický objekt je zaznamenán jednotlivými souřadnicemi bodů v mřížce. pixel ( picture element ) s definovanou barvou

Počítačová grafika SZŠ A VOŠZ MERHAUTOVA 15, BRNO

Registrační číslo projektu: CZ.1.07/1.5.00/ Elektronická podpora zkvalitnění výuky CZ.1.07 Vzděláním pro konkurenceschopnost

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Reprodukce obrazových předloh

Práce na počítači. Bc. Veronika Tomsová

Využití ICT techniky především v uměleckém vzdělávání. Akademie - VOŠ, Gymn. a SOŠUP Světlá nad Sázavou

Gymnázium a Střední odborná škola, Rokycany, Mládežníků 1115

Informační a komunikační technologie Inovace výuky prostřednictvím šablon pro SŠ

Téma: Barevné modely, formáty souborů

Světlo. Podstata světla. Elektromagnetické záření Korpuskulární charakter. Rychlost světla. Vlnová délka. Vlnění, foton. c = ,8 km/h

Gymnázium Jana Pivečky a Střední odborná škola Slavičín. III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT

Barvy a barevné modely. Počítačová grafika

On-line škola mladých autorů , pořadatel: ČVUT FEL. Jak na obrázky? Martin Žáček

Rastrový obraz, grafické formáty

Počítačová grafika - úvod

Základy informatiky. 10 Počítačová grafika

Práce s obrazovým materiálem CENTRUM MEDIÁLNÍHO VZDĚLÁVÁNÍ. Akreditované středisko dalšího vzdělávání pedagogických pracovníků

Funkce grafiky na webu. Primární grafická informace Fotografie Schémata Diagramy Loga Bannery

DATOVÉ FORMÁTY GRAFIKY, JEJICH SPECIFIKA A MOŽNOSTI VYUŽITÍ

Úvod do počítačové grafiky

Zdroj:

5.3.1 Disperze světla, barvy

III/ 2 Inovace a zkvalitnění výuky prostřednictvím ICT

Grafické systémy. Obrázek 1. Znázornění elektromagnetického spektra.

Registrační číslo projektu: CZ.1.07/1.5.00/ Elektronická podpora zkvalitnění výuky CZ.1.07 Vzděláním pro konkurenceschopnost

Komprese obrazu. Michal Bujalka, Ondrej Kováč. Gymnázium Botičská. Botičská 1, Praha 2

Tvorba posterů v PowerPointu a InDesignu

Elektromagnetické záření. Zdroj:

Kde se používá počítačová grafika

Stejná stránka se v různých prohlížečích může zobrazit odlišně.

Světlo, které vnímáme, představuje viditelnou část elektromagnetického spektra. V

Fungování předmětu. 12 vyučovacích hodin ve 3 blocích Evidence docházky Zápočtový test Aktuální informace a materiály na smetana.filmovka.

Kde se používá počítačová grafika (PG)?

CAD II přednáška č. 5. Grafické formáty PCX GIF TIFF BMP

ODRAZ A LOM SVĚTLA. Mgr. Jan Ptáčník - GJVJ - Septima - Fyzika - Optika

Barvy na počítači a grafické formáty

Barva. v počítačové grafice. Poznámky k přednášce předmětu Počítačová grafika

Úvod do počítačové grafiky

Barvy v počítačové grafice

(22) Počítačová grafika

Pavel Roubal Výukový modul projektu: Nové formy výuky ve školách kraje Vysočina

B_PPG PRINCIPY POČÍTAČOVÉ GRAFIKY

Webové stránky. 16. Obrázky na webových stránkách, optimalizace GIF. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

IVT. 8. ročník. listopad, prosinec Autor: Mgr. Dana Kaprálová

Gymnázium Jana Pivečky a Střední odborná škola Slavičín. III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT

Zásady prezentace CENTRUM MEDIÁLNÍHO VZDĚLÁVÁNÍ. Akreditované středisko dalšího vzdělávání pedagogických pracovníků

Webové stránky. 13. Obrázky na webových stránkách, modul Uložit pro web a zařízení. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch

Digitální grafika. Digitální obraz je reprezentace dvojrozměrného obrazu, který používá binární soustavu (jedničky a nuly).

Grafika a grafický design. Internetové publikování

Informatika Počítačová grafika Mgr. Jan Jílek (v.11/12) Počítačová grafika

Základy graky. Jan Hamá ek. 13. zá í 2016

Multimediální systémy. 02 Reprezentace barev v počítači

Digitální učební materiály ve škole, registrační číslo projektu CZ.1.07/1.5.00/

(15) Výstupní zařízení

Rastrové grafické formáty. Václav Krajíček KSVI MFF UK, 2007

Základy počítačové grafiky

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 3 VY 32 INOVACE

Tvorba posterů prakticky

2D počítačová grafika

Rastrové počítačové obrazy (poněkud sporně často označované jako bitmapové) jsou pravděpodobně nejběžnější variantou obrazů v počítači.

Přednáška kurzu MPOV. Barevné modely

Obrazová data. Biofyzikální ústav Lékařské fakulty Masarykovy univerzity Brno. prezentace je součástí projektu FRVŠ č.2487/2011

Evropský sociální fond Praha & EU: Investujeme do vaší budoucnosti

Počítačová grafika. Studijní text. Karel Novotný

Barvy v počítačové grafice

POČÍTAČOVÁ GRAFIKA. Počítačová grafika 1

Řízení robota pomocí senzoru barev. Tematický celek: Světlo. Úkol:

Variace. Počítačová grafika

Grafické editory. Ing. Jan Steringa 2008

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 1 VY 32 INOVACE

DUM 02 téma: Formáty souborů rastrové grafiky

Rozšíření bakalářské práce

Geometrická optika. Vnímání a měření barev. světlo určitého spektrálního složení vyvolá po dopadu na sítnici oka v mozku subjektivní barevný vjem

Počítačová grafika a vizualizace I

Registrační číslo projektu: CZ.1.07/1.5.00/ Elektronická podpora zkvalitnění výuky CZ.1.07 Vzděláním pro konkurenceschopnost

TECHNICKÁ UNIVERZITA V LIBERCI

Adobe Photoshop 18. Ukládání dokumentu formáty

Digitální fotografie. Mgr. Milana Soukupová Gymnázium Česká Třebová

Barevné modely, práce s barvou. Martin Klíma

Barvy v počítačové grafice

2.5 Nejčastěji používané formáty souborů s obrázky

FORMÁTY PRO RASTROVOU GRAFIKU

1.0 Lekce 1: Seznámení s prostøedím. 2.0 Lekce 2: Základní opravy fotografie

Zpracovnání digitální fotografie

Grafika na webu. Lukáš Bařinka

Vstupní požadavky, doporučení a metodické pokyny

Rastrová grafika. body uspořádané do pravidelné matice

Transkript:

Barvy a barevné systémy Formáty obrázků pro WWW

Viditelné světlo. Elektromagnetické záření o vlnové délce 390 760 nanometrů. Jsou-li v konkrétním světle zastoupeny složky všech vlnových délek, vnímáme toto světlo jako bílé. Je-li v konkrétním světle obsaženy pouze záření konkrétních délek, vnímáme toto světlo jako barevné.

Aditivní skládání barev Výslednou barvu získáme pomocí přidávání barevných složek. Příklad: Máme baterku s červenou žárovkou a baterku se zelenou žárovkou. Posvítíme-li oběma baterkami na bílou zeď (ta odráží celé barevné spektrum), dostaneme žlutou barvu (za předpokladu stejné intenzity světla z obou baterek).

Subtraktivní skládání barev. Výslednou barvu dostaneme odebíráním částí barevného spektra od bílé. Příklad: položíme-li na sebe žluté a modrozelené (cyan) průhledné sklo a posvítíme na něj bílým světlem, bude výsledná barva zelená.

Barevný systém RGB Celé barevné spektrum se dá rozložit do tří složek červené, zelené a modré. Což ovšem neznamená, že mícháním těchto složek dostaneme všechny barvy barevného spektra. Monitory počítačů mají červené, zelené a modré krystaly výsledného barevného vjemu na obrazovce dosáhneme různou intenzitou osvětlení (vyzařování) konkrétních krystalů. Používá se tedy aditivní skládání barev. Přidáním všech složek získáme bílou barvu.

Barevný systém RGB Každá barevná složka může mít intenzitu v rozsahu jednoho byte. 1byte = 8bit 1bit může nabývat hodnot 0 nebo 1. Kolik úrovní intenzit máme k dispozici? Celkem máme k dispozici 2 8 = 256 úrovní intenzity

Barevný systém RGB Celkový počet barev v systému RGB je 256 3 =16777216 Této barevné hloubce se také říká TrueColor. Na některých zařízeních se používá nižší barevné hloubky HighColor 5bitů pro červenou složku, 5 bitů pro zelenou složku a 6 bitů pro modrou dohromady 65536 různých možností.

Šestnáctková soustava. Používá se pro zápis barev nejen v HTML. Má na rozdíl od dekadické navíc číslice A, B, C, D, E, F každá pozice v čísle tak může nabývat šestnácti hodnot v rozsahu 0.. F zapisují se ve tvaru 0xA3 0xA3C=10 16 2 3 16 1 12 16 0 =10 256 3 16 12 0=2620 0xFF=15 16 1 15 16 0 =15 16 15 1=255 350/16=21 zbytek 14 E,21/16=1 zbytek 5,1/16=0 zbytek 1 350=0x15E

Šestnáctková soustava. barvu je možno zapsat pomocí šestice hexadecimálních číslic: #FFFFFF pro bílou, #FFFF00 pro žlutou, #FF0000 pro červenou.

Barevná paleta. Ve starších formátech obrázků se používá omezené množství barev 256. Tyto jsou vybírány z celé barevné hloubky TrueColor. Adaptivní barevná paleta je vytvářena na základě původní barevnosti obrázku tak, aby byla zachována co nejbližší podobnost.

Barevný systém CMYK Používá se na tiskárnách. Jedná se o systém se subtraktivním skládáním barev. Základní barvy jsou cyan (modrozelená), magenta (fialová) a yellow (žlutá). K je pro černou (black). V CMYK existují barvy, které neexistují v RGB. V RGB existují barvy, které neexistují v CMYK. Vytištěný obrázek se může barevně lišit od reprezentace n monitoru

Grafické formáty pro WWW Pro vkládání obrázků do WWW stránek se používají pouze následující formáty Graphics Interchange Format (GIF) Joint Photo Expert Group (JPEG) Portable Network Graphics (PNG) HTML 5 přináší vektorový formát SVG Ivo Peterka, FHS UK 25.02.2013

Graphics Interchange Format Vznikl v osmdesátých letech dvacátého století (firma Compuserve). Byl určen pro přenos obrázků po pomalých linkách Programy umí pouze jednu 256-ti barevnou paletu pro obrázek. Lze zobrazit i více barev najednou, ale málokdo tuto vlastnost podporuje např. Mozilla Firefox takový obrázek naanimuje po ukončení animace se správně zobrazí. Ivo Peterka, FHS UK 25.02.2013

Graphics Interchange Format. Prokládání obrázků (je rozpoznatelný i když dorazí pouze část, postupně se zostřuje.) Umožňuje průhlednost a animace. Bezeztrátová komprese Dostanete přesně ten obrázek, který ukládáte (omezený jen co se týče počtu barev). Ivo Peterka, FHS UK 25.02.2013

Graphics Interchange Format. Dnes je již tento formát do značné míry zastaralý Například použití 256 barevné palety je dnes už méně používané formát umí i více barev, ale téměř nikdo to neimplementoval V době rozkvětu tohoto formátu bylo jeho používání utlumeno nároky firmy Unisys na patentovaný kompresní algoritmus LZW, který byl ve formátu použitý Ivo Peterka, FHS UK 25.02.2013

Portable Network Graphics Vznikl jako reakce patentové nároky vůči GIF. Neobsahuje žádné patentované technologie. Je modernější. Pracuje s TrueColor barevnou hloubkou. Neumí animace. Umí průhlednost 256 úrovní průhlednosti v porovnání s jedinou v GIF. Také používá bezeztrátovou kompresi. Ivo Peterka, FHS UK 25.02.2013

Joint Photo Expert Group Používá ztrátovou kompresi Velmi účinná (několikanásobně vyšší komprese oproti PNG nebo GIF). Ve výsledku žádný bod znovuotevřeného obrázku nemusí mít stejnou barvu jako originál. Vhodný pro fotografie (i když ne pro vědecké). Nevhodný tam, kde se vyskytují v obrázku ostré hrany, nebo při potřebě naprosté věrnosti obrázku. Ivo Peterka, FHS UK 25.02.2013

Scalable Vector Graphics Obrázek není popisován jako seznam barevných bodů, ale pomocí různých tvarů (čáry, kružnice, křivky) dá se bez problémů zvětšovat a zmenšovat K jednotlivým částem SVG se dá v HTML přistupovat pomocí javascriptu Ivo Peterka, FHS UK 25.02.2013

Více o formátech http://www.root.cz/serialy/graficky-format-gif/ http://www.root.cz/clanky/jpeg-kral-rastrovych-grafickych-formatu/ http://www.libpng.org/pub/png/ http://www.w3-.org/graphics/svg/ http://www.root.cz/clanky/vektorovy-graficky-format-svg/ Ivo Peterka, FHS UK 25.02.2013