Digitální grafika

 

Obsah této stránky:
Digitální záznam
Analogový záznam
Digitální obrázky
Typy grafického záznamu
Barvy v digitálním obrazu
Pořízení digitálního obrázku  
Formáty grafických souborů
Velikost digitálního obrázku
Rozlišení fotoaparátů
Vytvoření barevného obrazu   
Průhledný obrázek
Animovaný GIF
GIF Animator
Různé tipy
Fotogalerie google
Obrázek s okrajem do ztracena    
Zvětšení obrázku pomocí AI
Tvorba obrázku s pomocí AI
Ú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:

Barvy v digitálním obrazu

Displej (mobil, tv, monitor…) - barvu pixelu "míchá" různými intenzitami (jak moc svítí) 3 základních barev - Red Green Blue
Bod displeje (pixel) je tvořen třemi jednobarevnými body (nebo proužky).   (phys.class, skládání, vid:physfun 3:03)
(všechny 3 barvy na maximum = bílá)

Na papíře (tiskárnou) - barvy se "sčítají nanášením"- CMYK (Cyan+Magenta+Yellow+blacK)
(součet všech barev = černá)    (vašč, vid:physfun 2:36, sitotisk)

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

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  
1280×720 HD 1 720p, "úsporné" video  
1600×1200   2 starý fotoaparát 2 Mpix  
1920×1080 full HD 2 1080p, 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)

Vytvoření barevného obrazu

Na papíře (tiskárnou) - barvy se "sčítají nanášením" (součet všech = černá) - CMYK (cyan+magenta+Yellow+blacK) physfun 2:36, sitotisk

Displejem (mobil, tv, monitor…) - sčítá se světlo ve 3 barvách (součet všech světel = bílá) - RGB (Red+Green+Blue) physfun 3:03

Vrstvy

Vrstvy - užití při animaciObrázek s vrstvami vypadá podobně, jako pohled shora do domu se skleněnými patry. Obsah vyššího patra překrývá vše, co je pod ním.
Co má být za objektem je na nižších vrstvách, objekt je překrýván obsahem vyšších pater.
(obrázek je z webu irozhlas)

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 Malování 3D (není-li nainstalováno, zdarma stáhni v Microsoft store)

  1. Obrázek otevři v Malování 3D (P myšítkem->Otevřít v programu…)
  2. Nástrojem Oříznout ořízni obrázek (ať nemá zbytečně velké okraje).
  3. Nástrojem Kouzelný výběr vyber objekt (s co nejmenším okrajem)  -> Další
    Zůstane-li část objektu nevybraná nástrojem Přidat (Odebrat) udělej ČÁRKU přes oblast, kterou chceš přidat (odebrat).
    Pak: ->Hotovo
  4. Vybraný objekt už nemá pozadí. Odsuň jej mimo původní obrys obrázku.
  5. Označ (vyber) původní obrys obrázku a smaž jeho plochu (Delete) - zůstane jednobarevná.
  6. Objekt vrať do původního místa na obrázku (objekt dle potřeby zmenši).
  7. Nabídka->Uložit jako->Obrázek->Uložit jako typ:PNG, Průhlednost, ->Uložit (pojmenuj: objekt-pruhledny)

Při opětovném otevření obrázku v Malování 3D už musí být pozadí bez barvy.

 

Postup vytvoření obrázku s průhledným pozadím v programu Photo Filtre - info+získání:

  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. Obrázky načti do webu ezgif, nastav všem (v poli pod obrázky) stejný čas zobrazení 30 setin sekundy a výsledný animovaný GIF stáhni (animace-[tvé_příjmení]).
    Spojit lze i pomocí programu MS GIFanimator (či Unfreez animator) do jediného "animovaného GIFu".

Výsledná animace

Tvorba animace - posloupnosti obrázků

  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). Obrázek lze buď posunovat (pohyb objektu) nebo dokreslovat (růst květiny).
    Jednotlivé fáze lze snadněji tvořit např. v Libre Office Draw, příp. PowerPoint.
    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. Fáze seřaď 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ášť v GIF), může mít animace zkreslené barvy (GIF vybere jen právě použité barvy).

Vytvoření animace spojením posloupnosti obrázků

Online

Server ezgif (Procházet - vyber posloupnost obrázků, Upload and make GIF, nastav čas zobrazení 30 setin s a ulož do počítače).

GIF Animator

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

Unfreez animator (stažení zde)

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 (obrázek vpravo).

MS GIF Animator (stažení zde)

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í 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ň 700×550 (další požadavky jsou výše)
  2.       –   |   |    –  2 barevné objekty (obrázky - výška objektu na nich min. 300 - pohled z boku 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 (pozadí) Vložit->Obrázek, 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 online webem ezgif
    (případně 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 (nebo příjezd, kombinaci obou) k nějakému místu ve tvém městě (zoo, náměstí…).
Návod: jednotlivé obrázky = místa důležitá pro průjezd (či odbočení) vyznačená v mapce města (s postupně dokreslovanou šipkou postupu). Na každý obrázek (~mapku) vlož i pohled cestovatele (např. ze StreetView nebo Panorama).


Různé tipy

Generátor fotografií lidí (prostřednictvím AI) na thispersomdoesnotexist.com.

Fotogalerie google (nefunguje u účtu do 18 let spravovaného školou)

je sada obrázků, které mají něco společného (zážitek, autora, účel…).

Vytvoření fotogalerie (alba) na webu Fotky Google:

  1. (obrázky budu načítat) Načti sadu fotografií na Fotky Google, po načtení se web zeptá na založení fotogalerie (alba) - pojmenuj.
    (fotografie už jsou ve Fotkách) Fotky označ zatržítkem v rohu, pak (nahoře na stránce)-> Přidat do alba ->(nové nebo existující)
  2. Album (máš otevřené nebo vyber ve sloupci) -> -> Možnosti ( Spolupráce, Komentáře, Sdílení přes odkaz).
  3. Odkaz si zkopíruj - přes něj lze otevřít fotogalerii.

Obrázek s okrajem do ztracena
  1. Program Gimp - otevři obrázek s objektem (a jeho dostatečně velkým okolím).
  2. Zvol nástroj Elipsa, volby nástroje: Prolnout okraje
  3. Výběr (po vložení jinam) má okraje "do ztracena".

Zvětšení obrázku pomocí AI

Na webu Anyrec.io lze zvětšit fotografii obličeje až 8×. Trochu to trvá.

Zvětšení obrázku pomocí AI - okolí vyfotografovaného objektu

Obrázek s dobře viditelným objektem, kolem objektu dostatek místa ve všech směrech.
Okolí objektu nastav jako průhledné (postup výše) nebo jej zprůhledni níže nástrojem guma.

  1. Zaregistruj se na OpenAI.com a přihlas se
  2. Po přihlášení (labs.openai.com) lze vygenerovat lib. obrázek (anglicky popiš, co na obrázku má být) nebo načíst svůj obrázek (Upload image).
  3. Vybraný obrázek chce oříznout (Crop). Pak lze upravovat (Edit), případně generovat podobné obrázky.
  4. Z ikon pod obrázkem zvol "Add generation frame") a rámeček nasaď na obrázek.
  5. Nástrojem guma (alespoň 1 tah) vygumuj lib. místo v obrázku.
    Až tím se zobrazí rám pro zapsání textu, co má obrázek obsahovat.
    Vepiš angl. text (jako např. "house between the roads in the middle of the old village"), pak tlačítko Genetate.
  6. Vygeneruje 4 varianty - lze je stáhnout.

Bezplatný účet je omezen velikostí obrázku 1024×1024 px.

info: seznam
video: kousek návodu

Vytvoření obrázku s pomocí AI

nVidia (výrobce grafických karet) nabízí aplikace pro výkonný počítač:
- nVidia Canvas - tvorba fotografie do nastavených oblastí: videa postupu dvojka kopec hory
- nVidia Broadcast - úprava videa v reálném čase (oční kontakt): video

Adobe Firefly

Copilot - programátorův pomocník - ukázka vytvoření fotky s volbou: šaty obr

AI tvoří obrázek

Generování obličejů: faces (ne thp, th-p)
Generování kresby Midjourney
Generování lib. obrázku s lib. obsahem: labs.openai.com
Generování neex. obrázků: car


Ukázky: video: Jak se dříve točil animovaný seriál Pat a Mat obr:1scéna

Odkazy: skládání barev vímproč, malování světlem

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

Gimp: Gimp ve Vv, mater. ZŠ