Archiv rubriky: Grafika

gv51 Stín za textem

Aktualizace 01. 01. 2021, vržený stín, obálka, vektor, Inkscape

Stín v obálce za textem

Úlovek tlející od roku 2011 na YouTube popisuje oblíbený efekt vržený stín v kombinaci s jeho vytvarováním do obálky (Envelope). Vytvořeno v Inkscape.

Inkscape 2011, stín vytvarovaný do obálky, © Libor First, jenseneboj.com
Popis YouTube

Inkscape verze 0.47. Videonávod na využití Extensions, změna na křivky, obálka na příkladu textu s vrženým stínem v perspektivním vidění pomocí vytvarovaného duplikátu textu do obálky. Vytvořeno ze snímků obrazovky (Print Screen), doplněno titulky v CZ.
Jen se neboj nahlédnout. Open Source software Inkscape verze 0.47

gi03 Dávka v Irfanu

IrfanView, hromadné dávkové zpracování, dávková konverze a přejmenování, batch aktualizace 7. 2. 2021

Dávkové zpracování grafiky

Jedna z velmi užitečných funkčností Irfanu, nabízí tyto možnosti:

  • Pouze přejmenování
    zejména očíslovat, použít část starého názvu
  • Pouze konverzi
    změnit formát a kompresi
  • Obé současně
  • Rozšířené možnosti umožňují téměř vše co Irfan umí.
IrfanView (? 2012): Široké možnosti přejmenování

Povšimněte si ve jméno vzoru zápisu $N. Vloží původní název.
Nahradit text(1-3) nahradí v názvu i000 za login_,
část názvu _big „nahradí ničím“.
Výsledek – vaše login v názvu a zachované číslování 765–773.

Irfan (v4.42): Nápověda. Možností k vložení do budoucího názvu souborů je hodně.
Nejčastěji využívám $W (šířka) × $H (výška).

Rozšířené možnosti

IrfanView (2012): Pro ukázku pouze přejmenování. V obrázku níže je vidět výsledek.
IrfanView (2012): Umožní oříznout, změnit velikost nebo hloubku barev, upravit barvy, přidat text, zaostřit aj.
Na obrázku je nastavena pouze změna velikosti (loga budou stejně velká), jména souborů ponechá, upraví barvy a zaostří. Uloží jako GIF

Zpracování neskenovaného sešitu

Pokud skenujete pár stránek z knížky nebo kamarádovy poznámky, nedá se to vložit do podavače. Snímáte proto dvojstrany, které jsou pak na monitoru malé a nepřehledné.

Irfan (v4.42): V titulku je Selection: 330, 50; 1420×2170; 0.654, tj. X,Y; šířka×výška; poměr stran

Nastavte výběr na vhodnou velikost jedné stránky a v případě potřeby poopravte hodnoty na desítky pixelů. Vyzkoušejte si, jestli poloha a velikost výběru vyhovuje taky druhé – pravé stránce.

Dávka v Irfanu (v4.42): Ořez je nastaven na pravou stránku. Osa X změněna na 1800 px, ostatní hodnoty stejné!.
Povšimněte si, z titulku mohu opsat nastavené hodnoty, tentokrát nepoužiji.
Irfan (v4.42): Symboly ## vloží do názvu 2 číslice (01–99)
Začne číslovat od 7 a přičítat bude 2. Ideální pro číslování stránek

Vložení textu do obrázku

IrfanView (2011): Vpravo dole je vidět vymezený prostor pro text. Volbami bude upraven na X 10, Y 10, šířka 330, výška 60. Povšimněte si ve stavovém řádku šířky celého obrázku. Vytvořte si představu, kam vkládáte text.

gt00 Odkazy grafika & texty

odkazy, letáky, koláže, mezititulky, ukázky prací

Pár odkazů

Roubal Pavel: Web o základech grafiky

Ukázka vektorové skládačky

Textové dokumenty

Cvičení TXT Na rychlé trati, oddíly, zalomení sloupce

Letáky a koláže – grafické principy

gt01 Barvy

O barvách v počítači

Co je to barva?

Vskutku zajímavý zdroj informací – wikisofia.cz tentokrát o barvách

Oblíbená pomůcka pana učitele na zjištění barvy v IrfanView.

PIXY a jeho profesionální pomůcka pro webdesignéry paletton.com

Odkaz studenta/tky A. N. na YouTube.
Téma FPS, celý článek na Alza.cz (autor Alza.cz)

Snímková frekvence videa a co s tím. (Alza.cz)

Doplnit barevné modely/prostory, barevná hloubka

gi02 Optimalizace grafiky

Jak zmenšit obrázek? Desítky miliónů pixelů, k čemu? Oříznutí. IrfanView

Zmenšení obrázku

Proč snížit počet pixelů?

Pro vložení grafiky do Wordu, prezentace nebo na web je to více než vhodné. Přenášíme zbytečná data, zatěžujeme paměť zařízení a nakonec je grafika vyhodí a zobrazí jen co zobrazovací jednotka umožňuje. A nejsou to desítky megapixelů (MPx).
Úpravě se taky říká převzorkování, škálování.

Jak na to?

Před mnoha lety jsem na starém Jenseneboji připravil lekci IRF05 s videonávodem.
Video jsem znova nahrál při přehrávání 🙁 Poradí někdo v komentáři?

Reexportované interaktivní SWF do MP4. Mohlo být hůř, proto 2 myši.

wo04 Obrázky ve Wordu

Průhlednost, zarovnání a pořadí objektů

Hrátky s obrázky

Video ukazuje, jak na průhlednost ve Wordu. Pokud si stáhnete z webu pixabay.com legálně PNG obrázek, můžete mu snadno zprůhlednit okolí a nechat obtékat těsně. Upravit hraniční body můžete jakémukoliv objektu. Viz příspěvek Na rychlé trati.
Průhlednost platí pro všechny grafické prvky Wordu – šipky, bubliny, WordArty, rámce apod. Vyzkoušejte si.
Je zde taky ukázána možnost zarovnání a pořadí objektů obdobně jako v grafických editorech.

Hrátky s obrázky ve Wordu (1)

Apps v mobilu1

foto a video v mobilu

Ukázky snímků z mobilu

Pár screenšotků (dále jen SS) z mobilu k tématu úpravy fotek a videa v mobilu.
Když teď na to koukám, tak jsem udělal chybu, že pomocí Google FOTKY upravuji fotku appky PowerDirector. To může zamotat šiškou.
Možná někdy (v příštím životě) opravím.

Studio YouTube nemám vyzkoušeno. To je na dobrovolnících. Napište do komentáře, použijte školní email.

gi01 Irfan instalace

Instalace Irfan View

Proč zrovna Irfan View?

Jednoduchý rychlý přehledný prohlížeč. Jistě existují lepší programy, ale jsou legálně zadarmo? Nemění stále menu nebo klávesové zkratky. Umí česky? Poskytují pro ajťáky informace na tzv. první dobrou?
Řekněte mi v komentáři o jaký program se jedná a možná podlehnu.

Kde najít IrfanView ke stažení?

Irfan má sice českou oficiální stránku, ale zdá se neudržovaná. Je lepší jít ke kováři než kovaříkovi na irfanview.com, tam najdete vše potřebné a hlavně aktuální. Kdo má nový počítač, má zřejmě i 64bitový procesor. Pro starší PC doporučuji radši 32-bit.

Bez Plugins ani ránu

Stáhněte si All Plugins 64 nebo 32bitovou verzi Windows Installer.
Jablíčkáři si pořeší sami…
Stačí spustit a je to. Krom mnoha jiných funkcí umí zobrazit Flash videa (SWF), jimž končí podpora v prohlížečích.

Naučme ho česky

Na stránce LANGUAGES si vyberte jazyk a možnost Installer. Stačí ho spustit a menu Irfanu přiřadit češtinu.

gf03 Histogram a křivky

DUM: VY_32_INOVACE_VTS_02.3.07 Obsah prezentace: Úprava fotografie 1
Moodle: Pondělí, 19. říjen 2015, 09.41, upraveno

Úprava fotografií vedoucí ke zlepšení.

Budeme se zabývat především úpravou expozice fotografií. Přestože odstranění nežádoucího efektu červených očí od blesku vylepší vzhled osoby, nebudeme tuto úpravu do této kategorie zahrnovat. Ani rámeček kolem fotografie, který mnohdy vylepší celkový dojem nebudeme do této kategorie zahrnovat.

Úpravy vedoucí ke zlepšení (viz Roubal Pavel, IVTSS-P/43). Je to velmi sporný pojem, ale jsou tím myšleny pouze úpravy, které korigují nedokonalý postup fotografování a nezasahují zásadním způsobem do fotografie.

  • Otočení, zrcadlení
  • Oříznutí (při té příležitosti vylepšení kompozice)
  • Jas – kontrast – barvy, histogram, křivky
  • Zaostření

Některé další vhodné a žádoucí postupy, ale už s podstatnými zásahy do fotografie jsou:

  • Redukce „červených“ očí (specializované retušovací filtry)
  • Úprava padajících svislic (deformace úpravou perspektivy)
  • Retušování (klonovací razítko, rozmazání/doostření, zesvětlení/ztmavení)
  • (Snad i rámečky kolem fotografie)
  • a další

Co je to histogram?

Jedná se o sloupcový graf, do kterého jsou vyneseny informace o úrovních jasu (barev) ve fotografii. Na vodorovné ose jsou indexy (čísla) barev nebo jasu (odstín šedi), kterých je 256 (od 0 po 255). Svislá osa pak ukazuje, kolik pixelů má příslušná barva – jas.

Videonávody

Histogram v IrfanView

Nástroje pro zlepšení expozice, jako jsou histogram a křivky, jsou prakticky ve všech „slušných“ grafických editorech. Prohlížeč Irfan View nepovažuji za grafický editor, je to prohlížeč. Přesto umí histogram zobrazit. Poskytuje tím cenné informace o kvalitě expozice fotografie. Dnes (2020) zobrazí histogram běžný digitální fotoaparát.
Pro ukázku práce s nástroji histogramem a křivky jsem netradičně zvolil on-line grafický editor PIXLR.COM (2020, dnes vybral photopea.com). Myslím, že návodů pro PhotoShop a GIMP je již dost (viz odkazy v předchozích lekcích) a práce s těmito nástroji je prakticky stejná. Pár odkazů následuje, zbytek a hlavně nové pohledejte sami…

Pár odkazů

Práce s histogramem v online editoru PIXLR

Práce s křivkami v online editoru PIXLR

Několik obrázků

Histogram ve starším GIMPu. Úprava úrovní barev a jasu.
Histogram ve starším GIMPu. Úprava úrovní barev a jasu.
Histogram ve starším GIMPu. Úprava úrovní barev a jasu.

Úkoly histogram a křivky

Zadání

Soubory pojmenujte pro GIMP nebo pro Photoshop
LOGIN_histogram.jpg, (upraveno pomocí histogramu – úrovní)
LOGIN_krivky.jpg (upraveno pomocí křivek)

Dále použijte online https://www.photopea.com/
(dříve jsem používal www.pixlr.com/editor)
Soubory pojmenujte
LOGIN_histogram_pp.jpg, (upraveno pomocí histogramu – úrovní)
LOGIN_krivky_pp.jpg (upraveno pomocí křivek)

RSS – Root.cz: seriál „Úpravy fotek v GIMPu“

Publikace grafiky on-line

Převzato z jenseneboj.com >…>Fotoalba (asi 2014) a upraveno

Správa fotografií a webová fotoalba

Jak vytvořit HTML album?

Cvičné fotoalbum

V hodinách IKT jsme před lety vytvářeli fotoalba. Jedna pokusná ukázka je Zde k nahlédnutí. Jiné cvičné fotalbum.

Obsah lekce

  • Jak zacházet s „desetitisíci“ fotografiemi
  • Jak na to v operačním systému
  • Prohlížeče versus editory
  • Picasa versus Zoner Photo Studio
  • Software pro tvorbu webového fotoalba: Irfan View, JAlbum, LightBox2, Picasa, Zoner Photo Studio
  • Úkoly a obrázky na starém jenseneboji. 

Jak na padesát tisíc fotografií?

Pokud technický nadšenec, který neumí fotit (to jsem já v roce 2002), dostane do rukou digitální fotoaparát. Cvaká, fotí a plní harddisk jako smyslů zbavený. Je mu líto smazat jedinou fotku, byť je rozmazaná. „Ale ten úsměv ten je, že jo.“ „Ten záběr je neopakovatelný!“ A podobné důvody k nesmazání. Po pár letech zjistíte, kolik máte fotografií. Máte je, ale v životě je neuvidíte.
Proč?
Dejme tomu že „nacvakáte“ 500 až 1000 fotek měsíčně. Za 4 roky to máme až 48 000 mizerných snímků. Bez popisu, bez pojmenování s původními názvy z aparátu. Na jednu fotku si vyčleňte například 10 sekund, tj. asi 134 hodin. Pokud hodinu a půl každý večer 5 dní v týdnu budete přebírat fotky, tak to máte téměř 5 měsíců… Radši to rovnou smažte, ty fotky si už nikdy neprohlédnete.

Rady

Smažte co můžete ihned ve fotoaparátu a nekopírujte to do PC. Neplňte disk stovkami stejných fotek.
Foťte s rozvahou a myslete na kompozici, na protisvětlo a pozadí už při focení. Nastavujte vhodné režimy.

  • Ostraňte, co můžete, ihned ve fotoaparátu.
  • Okamžitě v počítači vymázněte podstatnou část.
  • Hromadným dávkovým přejmenováním (IrfanView) pojmenujte fotky.

Používejte systém pojmenování složek RRMMDD_kratky_popis.
Složky RRMMDD_kratky_popis a
Soubory RRMMDD_kratky_popis_###. (### číslování)

Prostým hledáním ve Windows již v tímto pojmenováním lecos najdete. Vřele však doporučuji specializovaný software pro správu fotografií.

Prohlížeče versus editory

Zbývá zvolit vhodný prohlížeč nikoliv grafický editor.

Prohlížeč Irfan View

Prohlížeč musí být rychlý, nesmí zbytečně zatěžovat hardware apod. Ve škole jsme upřednostnili Irfan View před XnView a jinými podobnými. Bez zbytečně naročného grafického prostředí a přesto s mnoha dalšími funkcemi a s množstvím klávesových zkratek.

Ani PhotoShop, ani GIMP

Je naprosto nevhodné používat hardwarově náročné editory Adobe PhotoShop, GIMP apod. k pouhému prohlížení grafiky.

Ani Prohlížeč obrázků a faxů

Systémový (Windows) Prohlížeč obrázků a faxů je zase klopotně ovladatelný a nemá mnoho funkcí (2014). Dnes (2020) ve Win10 je situace jiná…

Specializovaný software pro správu

Český produkt Zoner Photo Studio nebo Google Picasa (2014)? Oba produkty umí mnohonásobně více než jen organizaci množství grafických souborů. Mezi nejdůležitější funkčnost obou produktů považuji vyhlednávání podle klíčových slov nebo algoritmus rozpoznávání obrazu.
Dnes (2020) je toho schopna apps Google Fotky, ale moc pozadu nezůstává ani MS Fotky.

Nechci dále popisovat funkčnosti jednotlivých programů, vyhledejte si na jejich domovských stránkách.

Český Zoner Photo Studio

Já osobně bych dal přednost českému produktu Zoner. Jeho síla je však především v úpravách fotografií. Ve škole radši používáme bezplatný software, pokud to není na újmu výuky.

Google Picasa (2014)

V Picase je zajímavá provázanost s Gmailem, ale je zároveň nebezpečná pro únik soukromí. Další zajímavá funkčnost v Google Picasa je zobrazení fotoalb v moderních TV přijímačích s přístupem na internet. Osobně vyzkoušeno, doporučuji.

Software pro tvorbu webového fotoalba

Irfan View

Jednoduchá strohá přehledná fotoalba. Snadno editovatelný kód.

JAlbum

Obrovské množství šablon s moderním designem a možnosti. JavaScript.

LightBox2

Také moderní vzhled. Používají jej profesionální portály. JavaScript.

Picasa

Správa a základní úprava fotek v jednom. Koláže, prezentace a videa z fotografií. Jednoduchá fotoalba sdílená pomocí dalších aplikací Google např. Gmail. Prohlížení fotoalb v televizi s internetem. (2014)

Zoner Photo Studio

Správa a pokročilá úprava fotek v jednom. Prezentace a fotoalba.
Každý rok během prázdnin bývá zdarma v příloze odborných časopisů „téměř“ plná verze.

Úkoly

Neřeším zde tvorbu fotoalba pomocí Irfan View ani JAlbum, ale jak publikovat fotoabum.

Zkopírujte webalbum vytvořené pomocí Irfan View do složky album1, tj. všechny soubory a složky

Do složky album2 zkopírujte vše potřebné, co vytvořil program JAlbum.

Spusťte PSPad a v menu SOUBOR > Nový...> šablona> HTML5 Vytvoří základní „prázdnou“ strukturu HTML5 souboru.

Starý snímek (2014), postupujte podle pokynů uvedených níže a v hodině.

Na řádku č. 4 zkontrolujte, případně opravte kódování češtiny například na utf-8.

Pro jistotu nastavte dokumentu formátování na Vámi zvolené např. utf-8. Menu Kódová stránka > UNICODE utf-8.

Mezi značky <body>ěščřý</body> napiště něco, čím vyzkoušíte češtinu a uložte login_fotoalba.html

Uložení nyní je 2× tak důležité. Uloží ve správném kódování a místo uložení se stane výchozím místem pro odkazy na další stránky a obrázky v jiných složkách.

Napište HTML kód podle předlohy na obrázku níže. Doplňte však vlastními údaji: Jméno, třída apod.

Na řádku 6 je značka <title>Sem píše text do titulku</title> pro titulek stránky – horní modrý pruh. Napište text dle předlohy.

Na řádcích 9 a 10 jsou značky <h1>Sem píše nadpis 1. úrovně</h1> a <h2> ... </h2> po nadpisy 1. a 2. úrovně. Zapište text podle předlohy.

Řádky 11 a 13 jsou obdobné. Značka <a> má několik argumentů a je základem webu – vytváří hypertextové odkazy na jiné obrázky, stránky, weby apod.

* Argument href odkazuje na soubor, který se má zobrazit. V našem případě do podsložky album1 na soubor First_irfan.html
* Argument alt je alternativní text zobrazený místo obrázku, pokud se obrázek z nějakého důvodu nezobrazí.
* Argument title posluží vyhledávačům k zaindexování a zobrazí se pokud posečkáte myší nad odkazem.

Na řádku 12 je značka <br />. Přechod na novou řádku, ale neukončí odstavec.

A takhle by to mělo vypadat v prohlížeči.

Starý snímek (2014), postupujte podle pokynů v hodině.
Starý snímek (2014), postupujte podle pokynů v hodině. Zejména kódování utf-8