Přidat článek mezi oblíbenéZasílat nové komentáře e-mailem GIMP - sestav si animaci z vlastních obrázků

Někdy bychom rádi použili na svém webu animaci, která má za úkol podtrhnout vizuální působení stránek. Například takto lze oživit akci vykonanou jejich návštěvníkem. Mě samotnou před časem napadlo vytvořit si animaci pejska odnášejícího mail ze správně odeslaného formuláře jako vizuální dodatek k textu, že zpráva byla odeslána, protože si vedu web s psí tematikou. Stáhnout hotovou animaci je pohodlné, ovšem musíme počítat s autorskými právy a také provedení nemusí být podle našich představ. A už vůbec se výtvorem nemůžeme chlubit :-). Schopnost GIMPu pracovat s mnoha vrstvami naráz nám výborně poslouží při výrobě.

1. Kde vzít obrázky k animaci?

Protože se na mě při nadělování kreslicího talentu nedostalo, ani co by se za nehet vlezlo, nezbylo mi, než si vypomoci technikou. A vlastním synem a zvířátkem. Synek se na louce s házedlem v ruce rozmáchl k hodu tenisákem do mé blízkosti, Zlatka vystřelila za míčkem jak raketa a já jsem celý proces jejího úprku natáčela na video ve foťáku. A znovu, a znovu... Kamera by neměla v tomto případě valný smysl, protože bylo stejně potřeba zmenšit rozlišení a tím i velikost výsledné animace na únosnou míru. Z půlhodiny průběžného natáčení jsem vybrala vzorek, který se mi líbil nejvíce a následovala mravenčí práce na počítači.

2. Příprava políček animace

Vybraný soubor ve formátu AVI jsem si otevřela ve VirtualDubu - programu na zpracování videa. Mně šlo v jeho případě pouze o uložení jednotlivých frame, které by na sebe relativně dobře navazovaly a jejichž poskládáním vznikne ještě plynulý pohyb. Nedařilo se mi však uložit vybraná políčka filmu jako samostatný soubor, a tak jsem použila klávesu PrintScreen a vložila do Malování ve Windows. Rozlišení bohatě dostačovalo. U snímků fenky běžící po zemi stačilo vybírat frame ob jeden až dva, protože si byly navzájem velmi podobné, ale záběry ve vzduchu po jejím výskoku už nešly ošidit - příliš se od sebe lišily. Po vyselektování 20 vhodných rámů (angl. frames) nastal čas oddělit obrys psíka od travnatého pozadí a v případě tlapky schované v trávě tuto "domalovat".
Screenů jsem sejmula pro jistotu na padesát a z nich teprve vybírala vhodné. Zde ukázka jen části nasnímaných políček (screenů) filmu:

[http://pc.poradna.net/file/view/7280-screeny-png]

3. Zrození prvního políčka do animace

Spustila jsem grafický program GIMP a otevřela první screen

[http://pc.poradna.net/file/view/7281-anim1-png]

Pomocí Beziérových křivek (cest), následně převedených na výběr, jsem vyjmula fenku z obrázku

[http://pc.poradna.net/file/view/7282-anim2-png]

Vložení výběru do nového souboru s průhledným pozadím (šachovnicí) zajistí, že hotová animace není závislá na barvě pozadí stránky.

[http://pc.poradna.net/file/view/7283-anim3-png]

Případné nerovnosti obrysu jsem doladila po aplikaci Rychlé masky a kreslením štětcem černé, popř. bílé barvy, v blízkosti obrysu

[http://pc.poradna.net/file/view/7286-anim4-png]

Potom jsem nechala Obrázek -> Automaticky oříznout obrázek a volbou Barvy -> Posterizovat... (zde na pouhých 6 barev) dostal výsledný snímek nejen jakoby kreslenou podobu, ale především výrazně menší datovou velikost. Obrázek uložíme s příponou XCF, protože lépe se nám bude v případě potřeby upravovat. Vzhledem k složení hotové animace z celkem 20 obrázků je nanejvýš žádoucí myslet na co nejmenší objem dat již na samém počátku práce.

[http://pc.poradna.net/file/view/7285-anim5-png]

Tak. A je připravený první frame z celkových 20, které reprezentují výslednou animaci. Pokračujeme stejným postupem extrakce pejska z obrázku i u zbývajících políček. Když je někde tlapka příliš schovaná v trávě, stačí z jiného obrázku dát vhodnou část tlapky do výběru a jednoduše vkopírovat místo té chybějící. Vzhledem k malé velikosti obrázků si nemusíme dělat starosti, že by byl přechod vidět.

Jakmile máme takto pracně vypreparované jednotlivé frame, nastane úkol poskládat je dohromady. V tuto chvíli je třeba mít na paměti několik podstatných momentů:

- každé políčko budoucí animace bude mít svou vlastní vrstvu
- protože moje ukázková animace začíná "zničehonic" a končí doztracena, je nutné počáteční a koncové obrázky pejska patřičně zmenšit, každý samozřejmě jinak
- aby nedošlo k nechtěnému oříznutí animace ve formátu GIF, musí mít každé políčko dostatečně velkou vrstvu

4. Odhadnutí rozměrů animace

Postupovala jsem tak, že jsem si otevřela nový obrázek (Soubor -> Nový...) s průhledným pozadím a rozměry jsem určila podle velikosti největšího políčka co do šířky a co do délky. Čili zobrazila jsem si v Průzkumníku velké náhledy již připravených jednotlivých obrázků na průhledném pozadí a od oka jsem vybrala ten nejširší. Protože jsem každý obrázek po vyhlazení obrysů a po posterizaci nechala automaticky oříznout, dala se snadno zjistit šířka tohoto obrázku v pixelech. Číslo jsem i o pár desítek pixelů zvětšila a nastavila jako šířku toho nového obrázku. Úplně stejně jsem odhadla výšku nového obrázku. Zdánlivě přehnané rozměry nejsou na škodu, protože pejsek se v animaci pohybuje a kdybych nastavila malou výchozí velikost, mohlo by se stát, že mi "vyběhne" z mantinelů a vznikla by práce navíc se zvětšováním vrstev.

5. Skládání políček do animace

V tuto chvíli máme připravenou novou prázdnou a průhlednou vrstvu a soubor můžeme pojmenovat třeba Animace. První obrázek pejska hodně zmenšíme (proto si s jeho přípravou nemusíme až tolik hrát) a vložíme do našeho připraveného nového obrázku a posuneme směrem k pravému dolnímu rohu. Vrstvu ukotvíme. Otevřeme si druhý obrázek pejska, opět zmenšíme, ale už méně než předchozí. Do obrázku s názvem Animace přidáme novou průhlednou vrstvu (je vhodné ji pojmenovat třeba číslem) a pejska do ní vložíme zase do pravé dolní čtvrtiny, ale již trošku blíž ke středu. Ukotvíme. Otevřeme si třetí obrázek, zase o něco méně zmenšíme a vložíme do třetí zase předem připravené vrstvy. Umístění jednotlivých vkládaných obrázků musíme nějak odhadnout. A tak dále a tak dále :-).

Já jsem k oživení použila navíc obrázek zavináče (napsaného pomocí textové vrstvy), který jsem od určitých políček začala vkládat i s různým natočením tak, aby to vypadalo, že pes zavináč chytá a odnáší - spolu s emailem.

V závěru bude přehled vrstev vypadat nějak takto

[http://pc.poradna.net/file/view/7287-frames-jpg]

Výhoda jednotlivých vrstev pro každé políčko animace je jednak v tom, že bez toho bychom naše dílo ani nezapsali jako animaci a také nám samostatné vrstvy dovolí hýbat jimi tak, aby animace byla plynulá. Správné umístění se nám totiž možná nepodaří hned napoprvé odhadnout.

Úplně všechny vrstvy vypadají pohromadě jako velký chumel

[http://pc.poradna.net/file/view/7288-vrstvy-jpg]

Z něj je názorně vidět, proč je důležité dát vrstvám dostatečný prostor. Protože pejsek vyskakuje do výšky a utíká zprava doleva, nebojme se výchozí vrstvu pro složení animace udělat opravdu velikou. Oříznout jde vždy, opačně o poznání hůře.
Výsledný soubor ukládáme ve formátu GIF, přičemž zvolíme Zapsat jako animaci a klikneme na Exportovat

[http://pc.poradna.net/file/view/7289-zapis-png]

Následně zvolíme vhodnou prodlevu. Nejlépe pro všechna políčka naráz. Já jsem ji změnila u políčka č. 12, kdy jsem ji zdvojnásobila.

Zde je náhled nastavení zápisu GIFu jako animace. Důležitá je prodleva a vybrat možnost Jedno políčko na vrstvu (nahradit)

[http://pc.poradna.net/file/view/7290-prodleva-png]

6. Hotová animace

A zde by už měla běhat výsledná animace pejska:

[http://pc.poradna.net/file/view/7293-50-gif][http://pc.poradna.net/file/view/7292-animace-gif]

Předmět Autor Datum
Opět krásný článek. Navrhuji k tomu ještě jeden samostatný, jak vystřihnout pejska z pozadí (či coko…
Kráťa 21.10.2011 02:54
Kráťa
paráda, jednoduchý jako facka. :beer: Vybraný soubor ve formátu AVI jsem si otevřela ve VirtualDubu…
kmochna 22.10.2011 19:22
kmochna
Prima, dělám si další zářez od spokojeného čtenáře, díky! Ano, vím, že se to takto dělá, ale z nějak…
Joan 22.10.2011 21:30
Joan
Skvělý! Celkem jednoduché a nepotřebuju k tomu nic stahovat jak u jiných návodů pro gimp. ;) poslední
astat 23.08.2014 13:18
astat

Opět krásný článek. Navrhuji k tomu ještě jeden samostatný, jak vystřihnout pejska z pozadí (či cokoli jiného z odkudkoli - ne z jednobarevného pozadí) a různými metodami (výběr polygon, inteligentní nůžky), začištění (ta rychlá maska) protože jsem na to už četl hodně dotazů a někteří tázající si také často myslejí, že když budou mít software za 50 000, že se to udělá nějak samo.
Já zrovna na tohle mohu sepsat článek, jak se to Dělá v Photofiltre, kde nejsou cesty, vrstvy...

P. S. Líbí se mi, jak ten pejsek uteče z animace úplně pryč :-)

edit://Já dělám animace v Microsoft gif animatoru a koukám, že v GIMPu je to mnohem přehlednější. Až budu nějakou dělat, vyzkouším.

paráda, jednoduchý jako facka. :beer:

Vybraný soubor ve formátu AVI jsem si otevřela ve VirtualDubu - programu na zpracování videa. Mně šlo v jeho případě pouze o uložení jednotlivých frame, které by na sebe relativně dobře navazovaly a jejichž poskládáním vznikne ještě plynulý pohyb. Nedařilo se mi však uložit vybraná políčka filmu jako samostatný soubor, a tak jsem použila klávesu PrintScreen a vložila do Malování ve Windows.

virtual dub: file/ export/ image sequence.
avidemux: soubor/ uložit/ uložit výběr jako jpg...

Prima, dělám si další zářez od spokojeného čtenáře, díky!
Ano, vím, že se to takto dělá, ale z nějakého důvodu mi to haprovalo, soubor se neukládal a než zkoušet instalovat jen kvůli sejmutí jednotlivých políček jinou verzi, přišlo mi jednodušší použít PrintScreen :-).

Zpět na články Přidat komentář k článku Nahoru