Vytvořte si vlastní cinemagraf

Design Tomáš Melich

Animace ve statickém snímku – právě tomuto spojení se říká cinemagraf. Je to vlastně gifová animace, ale pohyb v ní je omezen jen na část obrazu, např. pohupující se stébla trávy v krajině, vlající vlasy stojící modelky atd. Lepší než vysvětlování bude určitě názorná ukázka. Existuje spousta webů prezentující cinemagrafy. Nejhezčí najdeme na stránce tvůrců prvních cinemagrafů – Kevina Burg a Jamie Beck – http://cinemagraphs.com.

Cinemagraf se dostává mezi web designové trendy poslední doby, pojďme si tedy ukázat jak si ho vyrobit. Vše připravíme v Adobe Photoshop (dále jen PS). Výroba gifu není nijak náročná ale přesto je potřeba mít o programu alespoň základní povědomí: masky, vrstvy, časová osa a export.

Zmrazení rybářů

Základem je libovolná video stopáž, ve které probíhá nějaký pohyb. Já si pro názorný příklad vybral scénu, kde se pohybuje jak hladina moře, tak rybáři na skále. Zastavením jednoho z těchto pohybů získám hezký kontrast. Rozhodl jsem se „zmrazit“ rybáře.

Stopáž je dobré si dopředu pokrátit v libovolném video editoru. Lépe se s kratším úsekem pracuje na časové ose. Video jednoduše přetáhnu do PS nad základní vrstvu. Pro další práci budeme potřebovat panel časová osa, ten najdeme v záložce okno/časová osa. Po otevření okna vidíme naši stopáž rozloženou na časové ose. Pomocí táhla si vybereme nad osou úsek, který budeme chtít zacyklit. Mě stačí cca dvě vteřiny pohybující se vodní hladiny.

Cognito – jak vytvořit cinemagraf

Nyní je potřeba začátek i konec výseku navázat v jeden co nejplynulejší pohyb zaručující zacyklení gifu. Zkopírujeme si proto vrstvu stopáže (CRTL+J) a její konec posuneme táhlem na úroveň začátku původní stopáže.

Cognito – jak vytvořit cinemagraf 2

Začátek této zkrácené stopáže posuneme na začátek stopáže původní. Tyto kroky vypadají složitě, ale jsou logické a stačí sledovat doprovodné obrázky. Původní stopáž teď musíme zčásti zprůhlednit.

Každá vrstva na časové ose má určité vlastnosti, které se dají stejně jako třeba v After Effect animovat přes klíčové body. My využijeme vlastnost krytí. Uprostřed stopáže si naklikneme (ikona stopek) klíčový bod 1. Ten má defaultně nastavenou hodnotu 100 % (tedy zcela neprůhledný), tu vidíme v panelu vrstvy. Další klíčový bod umístíme nakonec výseku a určíme mu hodnotu 0 %. Pokud si nyní přehrajeme výsek, uvidíme zacyklený pohyb. Podle potřeby můžeme se 100% klíčovým bodem pohybovat po časové ose a ovlivňovat tím dynamiku prolnutí obou stopáží.

Cognito – jak vytvořit cinemagraf 3

Na stopážích se nám stále pohybují jak vlny, tak i rybáři. Pro zamražení rybářů si nyní stačí zkopírovat stopáž 1 (CTRL+J), kliknout na ni pravým tlačítkem a převést ji sloučením vrstvy na statickou. Statické vrstvě zapneme masku a vymaskujeme černou barvou vše, co se má ve výsledném gifu hýbat, u mě je to vodní hladina.

Cognito – jak vytvořit cinemagraf 4

Na závěr už stačí scénu vyexportovat – Soubor/export/exportovat pro web. V panelu vybereme gif. V počtu opakování ve spodní části vybereme stále. Ovlivnit můžeme celkovou velikost i vzhled dalšími parametry jako je počet barev, rozměry gifu, rozklad, průhlednost...

Cognito – cinemagraf

Co si dále přečíst