Photoshop tutoriál: Diagonální vzorky - pixelová animace

V pokračování seriálu o vzorcích v Photoshopu si ukážeme využití pixelových vzorků při jednoduché animaci. Tu pak můžete použít na WWW stránkách nebo jen poslat všem známým a kamarádům ...

05.10.2007   Václav Krejčí   Photoshop   Tutoriál  

V dnešním článku si ukážeme, jak udělat animaci střídání (přechodu) dvou obrázků. Princip bude jednoduchý - vytvoříme několik pixelových diagonálních vzorků, od nejtenčího po nejtlustší. S nimi vytvoříme X vrstev, přičemž v animaci se budou zobrazovat postupně. Jakmile dojdeme do fáze nejtlustšího vzorku, přehodíme obrázky a celý proces zopakujeme, nicméně naopak. Pokud nechápete, nevadí, hned se všechno dozvíte na konkrétních příkladech.

Začneme - jak už jistě tušíte - pixelovými vzorky. Pokud jste pozorně sledovali minulý výklad, jistě víte, co vás čeká. Vytvořte nový dokument a pozadí vyplňte světle šedou barvou (ať pak dobře vidíte na vzorky). Vytvořte novou vrstvu a v ní vyplňte několik čtverců velikosti 5 x 5 pixelů bílou barvou. Asi tak, jak ukazuje obrázek:

A začněte kreslit vzorky. První bude standardní, jednopixelový.

Druhý o pixel širší.

Třetí o dva.

Čtvrtý o tři. A to je konec. Přidáním další řady už by vzniknul černý čtverec - a to není žádný vzorek, ale prostá jednobarevná plocha.

Takže zvolte nástroj pro obdélníkový výběr, a postupně jeden vzorek po druhém označte ...

... a z menu Úpravy (Edit) zvolte Definovat Vzorek (Define Pattern).

Tím máme vzorky připraveny a obstaráme si nějaké obrázky. Třeba tyto dva. Uložte si je a zkopírujte do nového dokumentu, který bude stejně velký, jako obrázky. Tj. 150 x 200 pixelů.

Dokument by mohl vypadat nějak takto:

Postupně přidáme jeden vzorek za druhým. V paletce vrstev klikněte na ikonku černobílého kruhu, a zvolte Vzorek (Pattern).

V dialogu vyberte první ze vzorků a potvrďte OK.

Aby byla vidět pouze černá barva, nastavíme vrstvě interakci na Násobení (Multiply).

A abychom nemuseli nastavovat tuto interakci každé další vrstvě zvlášť, nebudeme další vrstvu vytvářet přes tlačítko na paletce, ale tuto vrstvu zkopírujeme zkratkou Ctrl + J.

Následně stačí pouze dvakrát kliknout na náhled vzorku, a zvolit další - o pixel tlustší.

A úplně stejně ještě dvakrát. V náhledu vrstvy krásně vidíme, že všechny čtyři vzorky jsou správně po sobě.

Zbývá podklad pro poslední fázi animace - černou plochu, na které se přehodí obrázky. Buď vytvoříme novou vrstvu, kterou vyplníme černou barvou, nebo opět zvolíme vrstvu úprav, tentokrát Barva (Solid Color).

Tu nastavte na černou a potvrďte OK. Všechny vrstvy jsou na svém místě, takže nezbývá nic jiného, než se přepnout do programu ve kterém bude možné obrázek animovat - ImageReady.

K tomu slouží následující ikonka, nebo zkratka Ctrl + Shift + M. Tu si ale pamatovat opravdu nemusíte.

Od Photoshopu se prostředí programu liší jen minimálně. Pro nás je nedůležitější paletka Animace (Animation), takže pokud ji nemáte zobrazenou, udělejte to - v menu Okna (Window).
Poznámka: Od Photoshopu verze CS2 je tato paletka součástí Photoshopu, a tak není nutné do programu ImageReady přepínat.

V paletce animace je vybrán první snímek, a tak nastavíme, co bude na tomto snímku viditelné. Moc toho nebude - vlastně jenom jedna fotka psa. Takže paletka vrstvy bude vypadat takto:

V paletce animace najdeme tlačítko pro nový snímek a ten vytvoříme.

V tomto snímku chceme mít zobrazený první vzorek, takže jej zviditelníme kliknutím na oko vedle vrstvy.

A stejným způsobem vytvoříme i další čtyři snímky. Tři budou obsahovat pixelový vzorek, na posledním bude zobrazená už jen černá vrstva:

V tomto snímku také obměníme obrázky - jeden skryjeme a druhý zobrazíme.

A stejným způsobem vytvoříme zbývající snímky. Postupujeme pouze naopak - jednotlivé vrstvy zneviditelňujeme, až nakonec zbude pouze samotná fotka psa. Zde je zmenšený náhled na všechny snímky:

Zbývá nastavit správné časování. Zatím mají všechny snímky 0 sec., což znamená, že by animace běžela rychlostí, ze které bychom neměli žádný požitek. Proto všechny snímky označíme, klikneme na malou šipečku vedle času a nastavíme čas na 0,1 sekundy, což je optimální pro animaci.

První a poslední snímek ale chceme mít zobrazený déle. U nich tedy zvlášť nastavíme čas na cca 2 sekundy.

Animace zkontrolujeme - klikem na tlačítka Přehrát (Play).

Pokud je vše v pořádku, nastavíme uložení do GIFu (v jiném formátu se animace neuloží) a obrázek uložíme v menu Soubor - Uložit optimalizovaný (File - Save Optimized).

Pokud jste vše dělali podle návodu, měli byste dostat přibližně takovouto animaci. Díky použité technice není soubor nijak závratně velký a je přidána pouze jedna barva navíc (černá):

Proto můžete malinko experimentovat a přidat i přechod z druhého obrázku do prvního.

To je pro dnešek vše. I v dalším díle tohoto seriálu vám přineseme zajímavé ukázky využití diagonálních vzorků.

Autor článku Václav Krejčí se zabývá grafikou a GUI designem, své zkušenosti nejnověji zúročil v knize "Adobe Photoshop: design grafiky GUI", věnované tvorbě grafických uživatelských rozhraní.