Digitální grafika

 

Digitální záznam
Analogový záznam
Digitální obrázky
Typy grafického záznamu
Pořízení digitálního obrázku
Formáty grafických souborů
Velikost digitálního obrázku
Rozlišení fotoaparátů
Průhledný obrázek
Animovaný GIF
GIF Animator
Úkoly
 příprava scény
 příprava objektu
 
úkol-animace
 úkol-animace+makro
 
úkol-příjezd

Digitální záznam

Digit = číslo.
Digitální = "zaznamenaný ve formě čísel". V přístroji pouze pomocí čísel 0 a 1.
Digitální záznamy: CD (hudba, programy…), DVD (filmy, soubory…), vše v počítači, USB paměti, paměti dig. fotoaparátu, mobilu, MP3 přehrávače a dalších médií…

Analogový záznam

Audiokazeta, videokazeta - signál převedený na elektrické napětí (zapsán zmagnetováním pásku).

(videokazeta má delší životnost, než DVD)

Poškozením části analogového záznamu na videokazetě dojde jen k bliknutí, poškozené DVD však bude téměř nepoužitelné.

analogový údaj digitální údaj
měřák s ručkou měřák s displejem
ručičkové hodiny digitální hodiny
papírová fotka fotka v počítači

Digitální obrázky

Jsou zaznamenány v souborech (na disku, fotoaparátu, mobilu, flash …).

Typy grafického záznamu:

Pořízení digitálního obrázku

Skládání barev

Monitorem (RGB) - skládání, tiskárnou (CMYK) - skládání.

Formáty uložení souborů s obrázky (nejběžnější):

Komprimace (bezeztrátová komprese) = zmenšení velikosti souboru s obrázkem (úspornějším zápisem).
Ztrátová komprese = zmenšení + vypuštění části grafické informace (kterou oko skoro nerozezná)

Velikost digitálního obrázku displeje

1 bod (pixel) obrázku = 1 bod displeje (pc, TV, mobilu).
Velikost obrázku tak udáváme v bodech (pixelech).
Rozlišení = počet bodů digitálního obrázku, displeje, obrazového čipu fotoaparátu.
Lze zadat jako:
- rozměry v bodech (šířka×výška)
-
celkový počet bodů (pixelů)

rozměry v bodech    název    bodů celkem [Mpix]  užití  
640×480 VGA 0,25 starodávný monitor  
720×576 PAL 0,35 klasická televize  
1024×768 XGA 0,7 starý monitor  
1600×1200   2 starý fotoaparát 2 Mpix  
1920×1080 full HD 2 TV, monitor  
3840×2160 4K 8 TV  
4160×3120   13 fotoaparát mobilu  
7680×4320 8K 33 TV  

Čím více bodů, tím větší obrázek a lepší detaily. Zabírá však více místa na disku.
Strany digitálního obrázku bývají v poměru:

Čím větší rozlišení obrázku, tím větší fotografii lze tisknout.

Úkol: ZJISTI počet bodů zobrazených na tvém monitoru: P myšítkem na plochu->Vlastnosti->ouško Nastavení->Rozlišení obrazovky.
(např. 1600×1200 bodů …)

Úkol: KVÍZ (digit. grafika)

Průhledný obrázek

Např. v obrázku Zelená kulička chceme, aby jeho šedé pozadí bylo nahrazeno pozadím webové stránky - "průhledné" pozadí: Zelená kulička .

Postup vytvoření obrázku s průhledným pozadím v programu Photo Filtre:

  1. Spusť program Photo Filtre a obrázek v něm otevři (Soubor->Otevřít).
  2. Ořízni obrázek (ať nemá zbytečně velké okraje).
  3. (není-li celé pozadí zcela stejnou barvou) Nástrojem Magická hůlka Ikona Magická hůlkavyber celé pozadí (větší číslo Odchylka->vybere více) a SMAŽ jej (vyplní se nastavenou barvou pozadí).
    (je-li pozadí hodně různobarevné) Případně nástrojem Laso Ikona Laso objeď obrys mazané oblasti a SMAŽ ji.
  4. Pozadí vyplň barvou, která: se ve zbytku obrázku nevyskytuje
                                                
     + je podobná barvě budoucího pozadí.
  5. Nastav barvu pozadí jako průhlednou: menu Obrázek->Průhledná barva .
  6. Obrázek ulož s příponou PNG (nebo GIF - pro tvorbu animace).

Takto průhledně upravené pozadí v obrázcích zobrazují prohlížeče internetu i kancelářské aplikace.
Vložení průhledného obrázku do dokumentu (Word, Libre Office): (obrázek musí být uložen na disku) v menu Vložit->Obrázek.

Animovaný GIF

je ve skutečnosti sada obrázků (ve formátu GIF) s jednotlivými fázemi pohybu. Tyto obrázky jsou jako stránky uloženy v jediném souboru (také ve formátu GIF).
Obrázky se na sebe překreslují tak rychle, aby v mozku vytvořily dojem pohybu.
Prohlížeč internetu i prohlížeč obrázků umí správně zobrazit střídání jednotlivých obrázků (stránek).

Vytvoření jednoduchého animovaného GIFu:

  1. V bitmapovém editoru vytvoř sadu stejně velkých obrázků (předchozí uprav, pak "Uložit jako" další fázi)
     
    1. fáze 2. fáze 3. fáze
    Obrázek - 1. fáze pohybu Obrázek - 2. fáze pohybu Obrázek - 3. fáze pohybu
  2. Spoj pomocí programu MS GIFanimator (či Unfreez animator) do jediného "animovaného GIFu"

Výsledná animace

Tvorba animace

  1. Vytvoř jeden obrázek - celé pozadí s celým objektem, který se má pohybovat
    např: Auto00  ,   Kytka00
     
  2. Z tohoto obrázku vytvoř sadu ostatních fází pohybu (vždy pomocí "Uložit jako" další fázi, tu pak uprav).
    Uvedený obrázek bude jednou z fází (auto04, kytka05). Např:
auto01 auto02 auto03 auto04 auto05 auto06
auto01 auto02 auto03 auto04 auto05 auto06

nebo

kytka01 kytka02 kytka03 kytka04 kytka05
kytka01 kytka02 kytka03 kytka04 kytka05
  1. V programu GIF animator seřaď fáze tak, aby se animace mohla stále opakovat:

  

  auto01 auto02 auto03 auto04 auto05 auto06  
auto01 auto02 auto03 auto04 auto05 auto06

 

  kytka01 kytka02 kytka03 kytka04 kytka05 kytka04 kytka03 kytka02    
kytka01 kytka02 kytka03 kytka04 kytka05 kytka04 kytka03 kytka02  
 

POZN: pokud obrázky neuložíme postupně příkazem "uložit jako" (tj. tvoříme každá zvlášť), může mít animace zkreslené barvy.

GIF Animator

je program, který "spojí" řadu obrázků GIF do výsledné animace. Existuje mnoho animátorů, tento návod popisuje MS GIFanimator, Unfreez animator.
Animaci uloží jako jediný soubor - obrázek GIF (tzv. animovaný GIF).

Unfreez animator

Všechny fáze animace označ a naráz je přetáhni do okna programu (viz obr).
Výslednou animaci ulož Make Animated GIF.

MS GIF Animator

Před spojením obrázků ulož kopii poslední fáze ještě do souboru "animace-[příjmení].gif" (to pak bude výsledná animace).
Obrázky do GIF Animátoru přidávej od posledního (pořadí 6, 5, .. 2, 1).

GIF Animator - přidání obrázku  GIF Animator - opakování animace 

Výsledný animovaný GIF: Animace - auto     Animace - kytka

POZN: Při tvorbě fází vhodným posunováním (co vlevo odsunu, vpravo přidám) lze animované obrázky Auto 2 varianta poskládat vedle sebe:

Auto 2 variantaAuto 2 variantaAuto 2 variantaAuto 2 varianta

POZN: Jednotlivým obrázkům lze ještě nastavit průhlednou barvu - pak animace probíhá na průhledném pozadí.

Animaci lze tvořit také pomocí Unfreez animator, GIF animator pro Win10.


Příprava scény

  1. V Malování či Photo Filtre si ulož prázdný obrázek [tvé_příjmení]-pozadí.gif (velikost 400×300).
    Bude to pohled zboku na scénu (krajinu, stadion, pokoj…

  2. Do scény namaluj alespoň 4 objekty - náměty:
    - krajina (2 různé stromy, dům, kopec…) - pohled, jako když zboku fotografuji krajinu se silnicí
    - stadion (dole hrací plocha, mantinel či okraj, hlediště s diváky - pohled, jako když na hrací ploše fotografuji hráče, za ním je hlediště
    - pokoj (alespoň 2 kusy nábytku, televize obrazovkou sem, postel nebo stůl…)
    - pohled shora na město (domy, stromy, rybník

  3. Lze použít části KRESLENÝCH obrázků z internetu - NE fotografie!

Příprava  objektu

  1. V Malování či Photo Filtre si ulož prázdný obrázek [tvé_příjmení]-objekt.gif (velikost - menší, než pozadí - např. 100×80).
    Bude to pohled zboku na objekt (dopravní prostředek, hráče, míč, zvíře, poznatelný předmět…)

  2. Vyplň jej zeleným      pozadím.

  3. Namaluj, vlož do něj objekt, který NEOBSAHUJE tuto      barvu.

  4. Lze vložit i části KRESLENÝCH obrázků z internetu (mimo web jihlavsko.cz), NE fotografie! (např. pixabay…)

Úkol - animace

Vytvoř animovaný GIF velikosti 400 (šířka)×300(výška) s nějakým dějem (pohyb dopravního prostředku, sport, činnost, čarování…).
Návod:
- vytvoř celý obrázek se všemi objekty (do rohu alespoň tečkou nanes barvu, kterou v obrázku ještě nemáš, ale budeš chtít použít později)
- čáry tloušťkou 1
- ulož jako obr00.GIF
- objekt, který by se měl pohybovat po obrázku (auto, slunce…) ulož do zvláštního souboru objekt.GIF (opět nezapomeň na stejné tečky s týmiž barvami, jako v původním obrázku)
- obrázek s pozadím pak ulož jako obr01.GIF a proveď v něm úpravy (vlož objekt na nové místo apod.)
- obr01.GIF ulož jako obr02.GIF a opět proveď úpravy
- obr02.GIF ulož jako obr03.GIF a opět proveď úpravy
- …

Úkol - animace + makro

Vytvoř animovaný GIF se 2 objekty - 1 objekt projede přes scénu, druhý se bude pohybovat sem-tam po scéně.
Formát dokumentu A5 nebo A6. Využij k tomu NÍŽE PŘIPRAVENOU ŠABLONU.

  1. předem si připrav barevnou, kreslenou scénu (pozadí) velikosti alespoň 1000×800 (další požadavky jsou výše)
  2.       –   |   |    –  2 barevné objekty (obrázky - výška min. 300 - pohled zboku na dopravní prostředek, postavu, zvířátko…) - raději kreslené
    (vyhledávání: "pozadí kreslené", "traktor kreslený"…), nejlépe na jednobarevném pozadí
    Nejlepší jsou vektorové obrázky (např. publicdomainvectors).
  3. oba objekty uprav jako obrázky s průhledným pozadím podle postupu zde.
  4. povol makra v Libre Office (je dobré vědět tyto informace - přečti).
  5. stáhni si dokument animace-A6-sablona.odg (obsahuje makro) pro Libre Office Draw, ulož ho pod názvem animace-[tvé_příjmení].odg
  6. stažený dokument otevři
  7. (povolení sloupce s náhledy stran=panelu stránek:
  8. do prvního listu vlož obrázek scény (připravené pozadí), aby zakrýval celou bílou stránku v pozadí. Pak P myšítkem na obrázek->Ořízni vše, co stránku přesahuje (pak Enter)
  9. do listu vlož také obrázky - své 2 připravené objekty, které se budou pohybovat. Objekty zmenši dle potřeby.
  10. 1. list zkopíruj jako 2. list (klikni v L sloupci na malý náhled - Ctrl+C, pak Ctrl+V)
  11. v listu 2 posuň připravené objekty tak, aby listy tvořily fáze pohybu těchto objektů (klávesa F4->měň x-souřadnici pozice objektu vždy např. o 2 cm)
  12. 2. list zkopíruj jako 3. list a zase posuň objekty …
  13. pokračuj stejně (kopíruj+posunuj) do "přejetí" scény jedním z objektů, druhý opíše svoji dráhu a vrátí se k původní pozici.
  14. klávesnicí (PgDn a PgUp) listuj mezi stranami - ověř funkčnost animace. ULOŽ dokument.
  15. smaž vše ve složce C:\TMP (případně ji vytvoř)
  16. spusť makro "Více-Stran-Do-GIF" (jak spustit) - tím do C:\TMP vyexportuješ jednotlivé obrázky animace
  17. ve složce C:\TMP jsou obrázky 00.gif, 01.gif, 02.gif… Tyto obrázky spoj do animace-[tvé_příjmení].gif programem Unfreez Animator nebo GIF animator(viz postup).
  18. Výsledky své práce (animace-[tvé_příjmení].GIF, animace-[tvé_příjmení].ODG) odevzdej učiteli

Úkol - příjezd

Vytvoř plánek (~prezentaci) pro příchod (větší pro příjezd) k význačnému objektu ve tvém městě.
Návod: do mapky města postupně kresli šipku postupu, pak detail místa (se šipkou), obrázkem význačného objektu.

Odkazy: skládání barev vímproč

Webp formát - info, stažení, manuál