Gimp.cz

V tomto díle společně nahlédneme do zákulisí tvorby animace. Ukážeme si, jak vytvořit vlastní bannery, animované filmy a jiné legrácky…

-

-

-

-

Na úvod si řekneme něco málo z teorie, v druhé praktické části tohoto dílu pak společně krok za krokem poodhalíme tajemství s ní spojené.

-

NA ZAČÁTEK TROCHA TEORIE

Animace je způsob vytváření zdánlivě se pohybujících věcí. Principem je zaznamenání sekvence snímků, které jsou sami o sobě statické a které se od sebe drobně liší.

Při rychlém zobrazování těchto snímků za sebou pak díky setrvačnosti lidského oka vzniká dojem pohybu.

-

-

Takto vypadá 6 snímků naší vzorové animace, viz. obrázek níže:

Pokud jsou rámce překreslovány rychlostí cca 10 snímků za sekundu, vzniká dojem poměrně plynulé animace.

Tip: Pro filmy je použita větší snímková frekvence, typicky 24 či 25 snímků za sekundu, musíme si však uvědomit, že filmové políčko má většinou mnohem větší rozlišení, než naše animace, takže případné „trhání“ není u nás tak patrné.

-

Takto vypadá výše zmíněná animace, přehraná rychlostí 2 snímky za sekundu:

Tip: Řečeno jazykem Gimpu = 500ms / snímek [ms = milisekunda, 10^-3].

-

A takto vypadá tatáž animace, přehraná rychlostí 10 snímků za sekundu:

Tip: Řečeno jazykem Gimpu = 100ms / snímek [ms = milisekunda, 10^-3].

-

Konec teorie, na řadě je praxe!

-

ZAČÍNÁME TVOŘIT

Spusťte Gimp. Vyberte Soubor->Nový.

Tip: K vytvoření nového obrázku můžete využít též klávesovou zkratku Ctrl+N.

Pro příklad zvolte velikost obrázku 120 x 120 pixelů, pozadí bílé:

-

Vyberte nástroj Štětec s nastavením:

• Barva popředí: Šedá
• Režim: Normální
• Krytí: 100%
• Stopa: Circle (03) – kulatá, velikost 3
• Škála: 1,00
• Další efekty: Žádné

Poté ve spodní části obrázku uděláme první tah štětcem ve směru z levé části do pravé, viz obrázek:

Tím jsme si vytvořili základní odrazový můstek pro naši animaci.

Tip: Efektivní a rychlé vynesení odrazového můstku = 1x klikneme levým tlačítkem myši ke hranici obrázku (např. vpravo), poté kurzor myši přesuneme na opačnou stranu obrázku (tedy doleva) a stiskneme klávesy v pořadí Shift+Ctrl+Levé tlačítko myši.

Vytvoříme Novou vrstvu (Ctrl+Shift+N), pozadí průhledné a pojmenujeme ji „Políčko 2“.

Zvolíme nástroj Eliptický výběr a na odrazovém můstku uprostřed vytvoříme kružnici, o průměru 30 pixelů, kterou zapustíme do poloviny výšky i šířky rampy.

Poté zvolíme nám příjemnou barvu, v mém případě je použita světlejší-modrá, s označením v šestnáctkové soustavě jako: #2b7fde. Vybereme nástroj Plechovka a vyplníme výběr.

Pokud jsme správně pracovali, měli bychom vidět něco takového, viz. obrázek:

Tip: Při práci samozřejmě pracujeme s odpovídající zvětšeninou našeho obrázku v %, nejlépe s hodnotami dělitelnými 100 (tzn. lupa 200, 300, 400% atp.). Vyhneme se tím zbytečným nepřesnostem návrhu, při nedodržení násobků pak rozmazání obrazu.

V Dialogovém okně vrstev klikneme Pravým tlačítkem myši na vrstvu „Políčko 2“ a z nabídky vybereme NEW FROM VISIBLE. Tím se nám v okně vrstev objevila vrstva nová.

Tip: Tato nově vzniklá vrstva zaznamenala aktuální obraz a všechny viditelné položky, které byly v době jejího vzniku vidět.

Stiskneme Mezerník, čímž skryjeme její náhled (očičko), viz. obrázek a vrhneme se na další části animace.

-

Levým tlačítkem myši označíme zpět vrstvu „Políčko 2“, vybereme nástroj Přesun a klikneme na obrázek. Poté posuneme vrstvu „s kuličkou“ o 6 pixelů směrem nahoru.

Tip: Efektivní přesun vrstvy = 6x krátce ťukneme do klávesy Šipka nahoru.

Pokud jsme správně pracovali, měla by se nám kulička vznést o 6 pixelů nahoru.

V Dialogovém okně vrstev poté klikneme pravým tlačítkem myši na nově vzniklou-neviditelnou(bez oka) vrstvu „Visible“, z nabídky vybereme NEW FROM VISIBLE a stiskneme Mezerník.

Znovu aktivujeme Levým tlačítkem myši vrstvu „Políčko 2“ a za pomoci nástroje Přesun klikneme do obrázku. Opět posuneme vrstvu o 6 pixelů nahoru (např. pomocí šipek) a v Dialogovém okně vrstev klikneme pravým tlačítkem myši na nově vzniklou-neviditelnou vrstvu „Visible#1“, z nabídky vybereme NEW FROM VISIBLE a stiskneme Mezerník.

Pokud jsme správně pracovali, měli bychom vidět něco takového, viz. obrázek:

-

Nyní duplikujeme vrstvu „Visible#1“, její kopii pak přesuneme v hierarchii vrstev nejvýše, tzn. nad vrstvu „Visible#2“.

Tip: Pro pohodlné vytvoření duplikátu vrstvy si označíme požadovanou / výchozí vrstvu (v našem případě „Visible#1“), poté stiskneme klávesy Ctrl+D.

Ten samý postup provedeme i s první-neviditelnou vrstvou s názvem „Visible“, její duplikát pak přesuneme nade všechny ostatní vrstvy.

UŽ TO NĚCO PŘIPOMÍNÁ

Nyní vytvoříme poslední vrstvu animace. V Dialogovém okně vrstev klikneme Levým tlačítkem myši na vrstvu „Políčko 2“. Vybereme nástroj Přesun, klikneme do obrázku a přesuneme kuličku (v našem případě o 12 pixelů níže) zpět, do výchozí pozice.

Nyní klikneme Pravým tlačítkem myši opět na vrstvu „Políčko 2“, z nabídky vybereme: Alfa do výběru. Poté zvětšíme oblast výběru pomocí nabídky Vybrat->Zvětšit o 1 pixel. Pokud jsme správně pracovali, měl by se po obvodu kuličky vytvořit výběr.

Z nabídky nástrojů vybereme nástroj Škálování a klikneme do středu kuličky. Okolo výběru by se nám měl vytvořit 1 vetší čtverec, společně s 9 menšími čtverci, které nám poslouží jako řídící body pro škálování, viz. obrázek:

-

Společně s řídícími body se nám zobrazilo i okno => Škála. Než začneme naši kuličku deformovat, je nutné v okně Škály nastavit řetízek na: Rozpojeno, aby se nám šířka i výška měnila nezávisle na sobě, viz. obrázek:

-

Nyní provedeme samotnou deformaci. Představme si na chvíli, že náš pomyslný čtverec s 9ti řídícími body představuje hodiny. 6stá hodina se nachází ve spodní části uprostřed, 12ctá hodina uprostřed nahoře atp.

Klikněme tedy Levým tlačítkem myši na řídící bod na 12té hodině a ponižme ho o 7 pixelů. Celý průběh deformace sledujeme v okně Škála, na políčku => Výška.

Změnu provedeme i na 3tí a 9té hodině. Zde ovšem potáhneme pouze o 3 pixely doprava (pro 3tí) a 3 pixely doleva (pro 9tou hodinu), tedy směrem od sebe. Celý průběh deformace opět sledujeme v okně Škála, tentokráte na políčku => Šířka.

Zdá-li se nám tvar kuličky v pořádku, klikneme v okně na tlačítko Škálovat nebo stiskneme klávesu Enter.

V Dialogovém okně vrstev se nám tímto objevila nová vrstva „Plovoucí výběr (Transformace)“. Klikneme na ni Pravým tlačítkem myši a zvolíme Ukotvit vrstvu.

Poté klikneme Pravým tlačítkem myši na vrstvu „Políčko 2“ a zvolíme Sloučit dolů.

REKAPITULACE

Pokud jsme správně pracovali, měli bychom vidět něco takového:

-

A v Dialogovém okně vrstev něco takového:

-

VDECHUJEME ŽIVOT

Nyní naši animovanou kuličku oživíme. Zvolíme nabídku Filtry->Animace->Přehrávání a spustíme přehrávání.

Tip: V této fázi se jednotlivé snímky animace přehrávají konstantní / výchozí rychlostí => 100ms za snímek, pokud není určeno jinak. Nastavení změny rychlosti přehrávání a další užitečné rady najdete na konci tohoto dílu v části nazvané Tipy a triky.

Pokud se vše povedlo, je čas sklidit plody naší práce. Klineme na nabídku Soubor->Uložit jako (nebo použijeme klávesovou zkratku Ctrl+Shift+S). Do okna „Zapsat obrázek“ vepíšeme název souboru s příponou „.gif“. Jeden z možných tvarů názvu obrázku by mohl vypadat např. takto: „něco-něco.gif“, viz. obrázek níže:

Pokud máme zadán název, klikneme na tlačítko Uložit a soustředíme se na další nabídku, která se záhy objeví „Exportovat soubor“.

-

Položky okna nastavte podle obrázku níže a klikněte na Exportovat:

-

-

Nyní se před námi objevilo poslední okno „Zapsat jako GIF“. Hodnoty opět nastavíme podle obrázku níže a zvolíme Uložit:

-

-

Dobrá práce, vše hotovo! Animace je uložena na disku, stačí ji jen vyhledat v cílovém adresáři a spustit.

-

ZÁVĚR

Pokud se Vám vše povedlo, máte velice slibný základ pro další tvorbu.

V animaci se fantazii meze opravdu nekladou. Budu velice rád, když mi do komentářů vložíte odkazy na svoje různorodá dílka, abych Vás mohl pochválit. A věřím, že nebudu sám!

Přesný tvar komentáře + postup jak vložit svou animaci, aby byla ihned viditelná, najdete na konci tohoto článku v části nazvané TIPY A TRIKY -> Postup pro zveřejnění vlastní práce.

Hodně štěstí a zábavy všem! :-)

-

-

TIPY A TRIKY

Časování snímků:
Pro změnu délky zobrazení snímku v animaci vložte do názvu vrstvy čísílko s příponou „ms“, toto číslo pak uzavřete kulatými závorkami, viz. obrázek níže:

Za takovýchto podmínek zůstane první snímek animace viditelný 500 milisekund, jinými slovy ½ vteřiny. Aplikované změny si lze okamžitě prohlédnou přes Filtry->Animace->Přehrávání.

Po opětovném uložení sekvence snímků jako GIF soubor (viz. část tutoriálu nazvaná VDECHUJEME ŽIVOT), vytvoříme novou plnohodnotnou animaci „se zpožděním“, dle nastaveného časovaní u jednotlivých snímků (vrstev).

-

Zmenšení (komprese) velikosti animace bez ztráty kvality:
Pokud zvolíte vetší rozlišení obrazu pro Vaši animaci (pixely) nebo pokryjete vetší plochu snímku barvičkami či použijete velké množství snímků k utvoření obrazu, může se stát, že Vaše animace nepříjemně nabude na objemu.

V tomto případě Vám přijde vhod poklepat nabídku Filtry->Animace->Optimalizovat (pro GIF). Tento šikovný fígl, ve většině případů, stáhnete velikost finálního GIFu až o 50% i více, oproti stávající neoptimalizované verzi.

Díky mnoha faktorům, tato metoda ale není 100%ní. Záleží na rozložení a množství barev jednotlivých snímků, směru a pohybu animovaných prvků obrazu atp.

-

Barevnost obrázku a její vliv na výstup
Pro menší výstupní velikost animace, lze mj. také vycházet z nabídky Obrázek->Režim->Indexovaná…
V této nabídce řekneme programu, kolik barev má v jednotlivých rámcích (snímcích) zobrazit.

Maximální počet barev zobrazených v jednom rámci je 256, z tohoto nastavení vychází i náš Gimp (pokud neurčíme jinak). Obecně platí = čím menší číslo, tím menší výsledná velikost obrázku.

Nesníme však zapomenou, že úsporou barev snížíme i kvalitu výstupu.

V následujícím testu uvidíte srovnání obrázkových výstupů, při snižení maximálního počtu barev za rámec. Ukázka pochází z filmu: Smajlící - Ostrov pokladů (celý si ho můžete prohlédnout na konci článku).:

-

Studujeme staré mistry
Pokud se necítíte s tvorbou animace a jejím časováním stále pevní v kramflecích, nezoufejte! Pro osvojení si základní techniky studujte již zveřejněné a osvědčené animace.

Vyhlédněte si na internetu animaci, která se Vám líbí, uložte ji na disk a poté otevřete přes GIMP. I když jste jakoby fyzicky drželi 1 soubor GIF (jednu animaci), v GIMPU se Vám zobrazí 1:1 co snímek, to nová vrstva.

Otevřete-li např. v GIMPU animaci, skládající se ze 40 snímků, zobrazí Vám program každé okénko (snímek) animace zvlášť v jiné vrstvě, společně s nabídkou časovaní, náhledem framů a dalšími užitečnými věcmi.

-

Postup pro zveřejnění vlastní práce
Tvar komentáře pro vložení:

<img src="" title="">

Kritéria pro schválení:

1. Odpovídající velikost.
2. Obrázek musí být uložený někde na internetu, na osobním FTP serveru (místo, kam se nahrávají soubory, a kde se ke službě přihlašujete pomocí jména a hesla).

Pokud jste uživatelé např. seznam.cz, uložte jej na www.sweb.cz či jiné osobní FTP! Uloz.to, edisk, leteckaposta a podobné veřejné FTP servery, jsou v tomto případě nevyhovující (animace by se nezobrazila).

V nejhorším případě můžete použít např. toto italské “FTP” http://tinypic.com/ (Jak na to? V políčku “File:” klikněte na “Vybrat…” a dejte Otevřít Váš obrázek.  Poté klikněte na zelený obdelník “CARICA ORA!”. V prohlížeči se Vám otevře nové okno se čtyřmi poli. Ve čtvrtém se nachází správný tvar odkazu s příponou “.gif”.)

Postup:

• Mezi první uvozovky, u slova SRC, vložte odkaz na obrázek(URL obrázku). Adresa, kterou zadáte mezi uvozovky musí mít koncovku “.gif”, jinak nebude odkaz fungovat!
• Mezi druhé uvozovky, u slova TITLE, vložte titulek animace. Vámi zadaný text v uvozovkách se pak zobrazí nad animací při přejetí kurzoru myši.

-

Tags: Animace, Banner

Příspěvek byl přidán dne 06. 02. 2010 v 00:54 a je zařazen do kategorií Návody.
Komentáře můžete sledovat pomocí RSS 2.0.