Pravidla Ucet
Nepřihlášen

Článek

Menu

Photoshop - animace
Napsal: bedikk
Přidáno: 05.08. 2010

Víte jak udělat animaci v Photoshopu? Je to velmi jednoduché a intuitivní! Pojďme si ukázat, jak jednoduše rozhýbat obrázek do hry. Upozorňuji, že článek je převeden z prvního VCH.

Tak je to již delší dobu, co jsme si vytvořili našeho prvního vektorového robota. Práce to pro některé z vás jistě lehká nebyla, ale doufám, že jste vše nakonec zvládli bez větších obtíží. Jak již nadpis napovídá, dnes se budeme zabývat animací. Ano, budeme animovat ve Photoshopu CS3, pokud máte někdo třeba jen verzi CS2, nevadí, práce v Photoshopu CS3 a Image Ready se více méně neliší. Když už jsme na serveru zabývajícím se tvorbou her, tak nás bude asi zajímat animace použitelná do hry, to znamená pohyb a třeba nějaká střelba atd.

Vektor má tu výhodu, že se skládá z objektů. Ty objekty sou samostatné, a proto si můžeme bez obtíží hýbat nohou, aniž bychom zasáhli do ostatních částí obrázku.

Co je nutné si k animacím v PS říci? Je to výborný nástroj, pokud chcete pouze hýbat objekty. To znamená měnit jejich pozice. Nevýhodou je, že pokud chcete změnit úhel natočení objektu, tak ho musíte vytvořit znovu, tím novým pootočit a ve správnou chvíli mu akorát zapnout viditelnost (rozumí se, že v tom případě vypnout viditelnost 1. Objektu). Také pokud chcete změnit body ve vektoru, tak si musíte vytvořit nový objekt. Dám příklad: Když jsem dělal animace do Kingdom Defenderu, tak jsme si s rukama vymysleli, že se dělo bude „nafukovat“. Takže před každým výstřelem se nafoukne. Animace jsem dělal 3 framové(3 subimage). Když jsme se tedy podívali do PSD souboru děla s animací, tak tam byli 3 složky: „delo_krok1“, „delo_krok2“ a „delo_krok3“. Možná vám to přijde složité, ale vězte, že není.

Animace pohybu Robota

Jelikož někteří možná robota minule nedělali, ale chtějí si animaci zkusit, tak přikládám PSD soubor. Nejprve bych trochu popsal paletku animace (Okna>Animace).

1- Číslo podotázku v animace (fram)

2- Nastavíte, kolikrát se má animace zopakovat

3- Náhled daného obrázku (části animace)

4- Nastavíte, jak dlouho má být ten daný fram zobrazen

5- Tlačítka pro přehrávání animace

6- Funkce dopočítat (viz níže)

7- Nový obrázek v animace (fram) – tímto uděláte kopii vybrané části animace, kterou dále upravujete

8- Smazat vybraný snímek

9- Místo pro snímky

10- Přepne na režim časové osy

Doufám, že jste pochopili, k čemu slouží všechny nástroje, a můžeme pokračovat. Když jsme si tedy řekli, že budeme tvořit animaci pohybu, tak já si u takovéto robota představím, jak se klepe a nějak hýba těmi pásy. Pojďme na to.

Aby animace byla krásně plynulá a my si nepřidělávali práci, tak si už teď na začátku musíme rozmyslet, co všechno budeme animovat. Protože když vytváříme další snímek, tak vlastně duplikujeme ten předchozí. Takže když v každé nové animaci přidáme objektu třeba + 5px po X souřadnici, vznikne nám krásný plynulý pohyb. Ale kdybychom si nejdříve udělali 10 snímků, že je budeme animovat později, tak by to pro nás znamenalo, že v 2. Snímku bychom museli přidat 5px, v 3, už 10px, ve 4. Už 15px atd. Rozumíte? Nejlepší asi bude, když si toto někdy zkusíte sami a zjistíte, že to opravdu není to pravé ořechové. Ale konec řečí a rychle do práce.

Základní snímek tedy máme. Abychom udělali další snímek, stiskněte tlačítko Nový snímek (v mém popisu číslo 7). Všimněte si, že nyní máme animaci o dvou snímcích, které jsou ale úplně stejné, takže to vypadá, jakoby animace stále (po spuštění přehrávání). Nyní musíme v 2. Snímku s něčím pohnout. Bude to spodní část nohy, tedy takový ten trojúhelník.

Když máte takto všechny vrstvy toho pásu vybrány a jste ve druhém snímku, tak můžete vzít nástroj na posun (v paletě nástrojů hned 1.). Nyní stačí pomocí směrových kláves posunout vybranými objekty JEDNOU (stiskněte 1x šipku) do prava. Ve stejném snímku totoproveďte i u druhé nohy.

Nemá cenu sem dávat obrázky, protože rozdíl byste asi jen stěží viděli. Takže nyní pohneme celým dělem a vším co je na něm připevněno. Dejme tomu zase o jeden px dolu.

Nyní vezmeme jen výfuk a hýbneme jím samostatně doprava a nahoru (jednou). Nebo ještě můžeme hýbnout střílnou a raketou, třeba o 1px do leva. Nakonec posuneme mráček a kousek doleva a nahoru, o kolik nechám na vás, to není tak podstatné. Ještě jednou se podívejte na mráček. Já si myslím, že by měl mizet, takže si vyberte vrstvu s mráčkem a snižte mu krytí na takových 80%. To by asi zatím stačilo.

Přejděme na další (3.) snímek.

Nyní potřebujeme hýbnou pásy. A to zpět na původní pozici. Takže si vyberte pásy (viz výše) a hýbněte jimi jednou doleva. Výfukem rovněž hýbneme zpět. Tedy dolů a doleva. Tělo necháme dole. Nakonec hýbneme mráčkem zase o kus a snížíme mu krytí tak na 40%.

Jdeme na snímek 4. Kde na začátku zase hýbneme pásy o pixel dopředu. Nyní popadneme zase všechny části těla a posuneme jimi o pixel nahoru. Dokončíme animaci mráčku tím, že ho necháme úplně zmizet. Nakonec hýbneme střílnou a raketou o 1px nahoru.

Nyní máme animaci pohybu robota. U všech snímků nastavte 0,1s a můžete si výsledek pustit. Nyní uložíme animaci jako animaci: Soubor>Uložit pro web a zařízení. Pokud není nastaven formát gif, učiňte tak.

Nyní nastavíte vhodné pozadí, popřípadě k celé animaci uděláte alpha masku a můžete ho vesele použít do své hry (samozřejmě ne s mým robotem).

Funkce Doplnění

Tato funkce složí k dopočítání pozic, mezi 2 snímky. Dám příklad, tak se to ukazuje nejlépe.

Vytvoříme si objekt na určité pozici. Nyní si vytvoříme další snímek v animaci a v tom 2. Snímku si objekt posuneme o hodně velikou vzdálenost. Toto je jako animace samozřejmě nepoužitelné, protože objekt se nehýbe, ale skáče. K tomu složí dopočítávání. Vybereme oba snímky a klepneme na dopočítat. Nyní už jen vybereme, na kolik snímků se má ten pohyb rozložit, OK a je to. Nyní máme krásně plynulou animaci.


Ostatní díly seriálu:
[05.08. 2010] - Photoshop - barvy
[05.08. 2010] - Photoshop - křivky
[05.08. 2010] - Photoshop - PixelArt
[05.08. 2010] - Photoshop - vektor
Klíčová slova: photoshop ps cs3 animace 2d grafika
 

Komentáře:

Napsal: Grabby
Přidáno: 27.11. 2010

A kde mám tu funkci dopočítat najít?

Trvalý odkaz

Velkej Chytrák
Copyright (c) 2001-2010