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

Barvy v počítači a HTML.

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

Ú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á

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. OBSAH Grafické formy: Vektorová grafika Bitmapová (rastrová grafika) Barevné modely

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

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

Konverze grafických rastrových formátů

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

Š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

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

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

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ů

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

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

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

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ů

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

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

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

Tvorba posterů v PowerPointu a InDesignu

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

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

Elektromagnetické záření. Zdroj:

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

Úvod do počítačové grafiky

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

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

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

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

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

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

(22) Počítačová grafika

Barvy v počítačové grafice

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

B_PPG PRINCIPY POČÍTAČOVÉ GRAFIKY

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

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

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

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

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

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

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

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

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/

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.

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

Základy počítačové grafiky

Tvorba posterů prakticky

2D počítačová grafika

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ý

Grafické editory. Ing. Jan Steringa 2008

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:

Počítačová grafika a vizualizace I

Variace. Počítačová grafika

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

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

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

Grafika na webu. Lukáš Bařinka

Výukový materiál v rámci projektu OPVK 1.5 Peníze středním školám

b) červená, zelená, modrá, c) černá, bílá, d) černá, bílá, šedá. 5. PNG je formát: a) textový,

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

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

VY_32_INOVACE_INF4_12. Počítačová grafika. Úvod

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

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

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

FORMÁTY PRO RASTROVOU GRAFIKU

Barvy v počítačové grafice

Barva na mapách. Barva. Opakování barevné modely

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

Hexadecimální zápis barvy. barvu je možno zapsat pomocí šestice hexadecimálních číslic: #FFFFFF pro bílou, #FFFF00 pro žlutou, #FF0000 pro červenou. Jedná se o starší způsob, nově se v CSS zapisuje barva také například rgb(255,255,0) pro žlutou.

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 na 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 24.10.2011

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 24.10.2011

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 24.10.2011

Graphics Interchange Format. Po delším používání se firma Unisys přihlásila k patentu na kompresní algoritmus použitý ve formátu (LZW). Bylo by potřeba platit licenci za každý SW pracující s GIF formátem (koncem devadesátých let se na internetu objevila akce Burn all GIFs ). V současné době již platnost licence vypršela. Ivo Peterka, FHS UK 24.10.2011

Portable Network Graphics Vznikl jako reakce na omezenou použitelnost GIF formátu díky patentu. Neobsahuje žádné patentované technologie. Je modernější. Pracuje s TrueColor barevnou hloubkou. Neumí animace. Umí průhlednost. Také používá bezeztrátovou kompresi. Ivo Peterka, FHS UK 24.10.2011

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 24.10.2011

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 24.10.2011

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 24.10.2011