Co se týče barevného konceptu, uvažovali jsme, že to uděláme velmi jednoduše a redukovaně s modrým pozadím a žlutým textem. Modrá a žlutá jsou komplementární barvy, skvěle se čtou a hezky se od sebe odlišují.

Teoreticky bychom mohli vytvořit novou barevnou plochu, dát ji modrou a pak text zbarvit žlutě. To bychom mohli udělat, ale pak bychom měli problém, jak v animaci uprostřed obrazu položit setírátko, které barvy obrátí.

Můžeme zkusit vytvořit nastavenou vrstvu přes Layer>New>Adjustment Layer nebo stisknutím Ctrl+Alt+Y a poté na ni aplikovat efekt Invert Channel. Ale uvidíme, že naše barvy nejsou docela komplementární. K modré by bylo komplementární oranžová, což sem tolik nesedí, nepovedeme se k těmto barvám.

Animace snadná: Barvy


Ale určitě to chci udělat a existuje způsob.


Krok 1

Budeme to udělat následujícím způsobem: Vezmeme královsky modrou barevnou plochu a zmáčkneme Ctrl+Shift+Y nebo půjdeme do Layer>Solid Settings a změníme barvu na černou.

Animace snadno udělaná: Barvy

To pak bude krásně změněno a After Effects dokonce přejmenuje barevnou plochu.

Nyní napíšeme text „Animace snadno provedena“ prostě bíle.

Animace snadno provedena: Barvy.

Máme černou a bílou bez průhlednosti a můžeme to snadno obrátit.

Animace snadno proveditelná: Barvy



Nicméně zůstane jen u černé a bílé, ale já chci modrou a žlutou.

Krok 2

Takže vytvoříme ještě jednu nastavenou vrstvu pomocí Ctrl+Alt+Y ("Nastavené vrstvy 2") a na ni aplikujeme efekt Effects>Color Correction>Tint.

Efekt je velmi jednoduchý a prostě přemapuje barvy. Berou černou a bílou a přiřadí jim jinou barevnou hodnotu.

Animace snadno udělaná: Barvy

Pak vezmeme tu černou a přizpůsobíme naši modrou. Už jsem si jednou poznamenal kód barvy "008FF", to je ta krásná modrá.

A bílou přizpůsobíme podle té žluté, hodnota barvy je "FFF000", opravdu sytá žlutá.

Animace snadno udělaná: Barvy.

Krok 3

Nyní jsme to použili po obrácení vrstvy. Také to nějak pojmenuji na „Změna barev“ a „Barvení“.

Zamkneme si také vrchní vrstvu, protože už se k ní nikdy nebudeme muset vracet.

Animace snadno vytvořit: Barvy.

Když zapnu a vypnu „Změnu barev“, dostaneme nádherné obrácení barev, aniž bychom sklouzli do oranžové nebo fialové.

Animace snadno vytvořená: Barvy.



Ale jak uděláme přechod? Můžeme „Změnu barev“ vrstvu posunout zleva doprava nebo shora dolů přes obraz a tak vytvořit přechod. To ale není tak zajímavé.

Rád bych udělal něco víc a to celé rozdělit do pruhů a tyto pruhy budou překrývat obraz, aby byly hrany trochu zlomené. Jak to udělat nejlépe?

Krok 4

Existují efekty jako například v Effects>Transition Effects; tam máme Line Sweep, který jde do této oblasti, ale nepravidelný je pro mě důležitý.

Animace snadno dosažená: Barvy

Krok 5

Proto to uděláme nejlépe pomocí Maskování. Dvojkliknutím na symbol masky vytvoříme masku, která přesně padne na mé rozměry. To je velmi užitečná funkce, kterou později ještě využijeme.

Animace snadno provedena: Barvy

Krok 6

Tuto masku chci rozdělit na 20 kusů, abychom měli 20 jednotlivých sloupců. S běžnými prostředky After Effects to nejde.

V takových případech si pro to jednoduše napíšu skript. Pro věci, které zde využíváme, jsem připojil skripty ke každému tutoriálu.

Najdeme zde Layer Chainer, Mask Slicer a Sequence Strokes. Mask Slicer je to, co zde potřebujeme, jak si dokážete představit.

Tento symbol před názvem souboru patří k Extendscript Toolkit, mohu to tady spustit. Když to spustím, spustí se i toto Extendscript Toolkit.

Tento Toolkit je třeba nainstalovat zvlášť, protože není standardně nainstalován. To byste ještě měli udělat, lze to velmi snadno přes CreativeCloud udělat.

V tomto skriptu nahoře máme pár nastavení. Pro všechny tyto skripty jsem nevytvořil uživatelské rozhraní, protože jsou pro mé vlastní použití. To znamená, že veškerá nastavení budete muset upravit přímo v textovém souboru.

V tomto případě můžeme změnit dvě hodnoty: „noOfSplices“, tedy kolik jednotlivých plátků chceme nakonec mít.

A „separateLayers“, může být napsáno true nebo false. Při true se pro každý plátek přidá nová vrstva.

Zkuste to experimentálně s 4 plátky, ...

Animace snadno proveditelná: Barvy

… jdeme do After Effects a vybereme masku, kterou chceme nakrájet. To je velmi důležité.

Poté vybereme nahoře v cílové aplikaci After Effects CC. Uvidíte, že jsou zde i další programy, tento toolkit slouží k psaní a testování skriptů.

V tomto případě tedy vybereme After Effects, poté stisknu tlačítko Spustit

Animace snadno proveditelná: Barvy

… a vrátíme se zpět do After Effects. Zde máme nové vrstvy, z nichž každá se skládá z jedné vrstvy.

A pokud teď vytvořím 4-farebný přechod,

Animace snadná: Barvy

… uvidíte, že všechno dohromady vytvoří obrázek. Ve skutečnosti to je vrstva s jednou souřadnicí, pouze jsou nakrájeny masky. To znamená, že máme jednotlivé kousky této vrstvy, což může být velmi užitečné, protože můžeme pohybovat a otáčet každý zvlášť.

Animace snadno proveditelná: Barvy



Ale to tady nepotřebujeme. Chtěl bych něco jiného.

Krok 7

Chci mít na jedné vrstvě všechny masky, a to ne 4, ale 20.

A seperateLayers nastavíme na nepravda. Uložím, znovu stisknu Spustit,

Animace snadno vytvořená: Barvy

… a nyní máme všechny 20 masek na jedné vrstvě.

Očísluji je od 1 do 20 a stisknu Ctrl+C nebo cmd+C. Poté smažu původní masku a vložím je všechny na jejich místo zde.

Nyní jsou všechny přítomny a rád bych je v dalším kroku animoval.

Animace snadno vytvořená: Barvy.

Krok 8

Masky bohužel nemají transformační vlastnosti jako rotace a škálování, pouze mají cestu masky. To ale není problém.

Označíme všechny masky a rozbalíme je. Pak klikneme na Cesta masky, nastavíme klíčový snímek a jdeme o trochu dál do kompozice, kde pak všechny masky posuneme dolů z obrazu.

Animace snadno vytvořená: Barvy

Krok 9

Podívejme se na to. Hudba hraje v pozadí, sedí to. A nyní máme dva lineární klíčové snímky, což není příliš zajímavé.


Animace snadno udělaná: Barvy

Krok 10

Klikneme na Editor diagramu. Zde dostanu křivky, se kterými se při bouncing balu seznámíme přesněji.

Chci se omezit na maskové cesty, takže označím všechny masky a stisknu U, abych získal všechny animované vlastnosti.

Animace snadno udělaná: barvy

Nyní vidíme křivku rychlosti, speed graph. S tím se nepracuje tak hezky jako s hodnotovou křivkou, uvidíme to později. Ale s ním se dá dobře pracovat, pokud chceme animovat mnoho vlastností současně.

Chci tomu nejprve dát Snadný náběh, buď s F9 nebo s tímto tlačítkem.

Tím se graf drasticky změnil. Vlevo byla konstantní rychlost, začínáme s určitou rychlostí a náhle končíme.

S Snadným náběhem začínáme s nulovou rychlostí, pomalu stoupáme nahoru a pak zase dolů. Pak se jedná o tvar paraboly.

Animace snadno uděláno: Barvy

Chci to trochu extrémnější. Vezmu si tečku a trochu s ní zatáhnu, abychom opravdu měli vrchol uprostřed.

Takový nádech, uvidíme, jak to vypadá …

Animace snadná: Barvy



Nechejme to běžet a uvidíme: To plyne přímo nad tím. Uprostřed máme mnohem rychlejší pohyb než na začátku nebo na konci. To se mi líbí.

Krok 11

Takovéto bychom to mohli udělat i s pozicí - proč jsme ale vytvořili kousky?

Nyní to hezky nepravidelně rozmísťujeme v čase a klíčové snímky tady uspořádáme jako náhodně, abychom do formy odhalení přidali trochu rozmanitosti. Linky by neměly všechny proběhnout najednou.

Nakonec to vypadá trochu jako skyline. Tato jedna linie, která obvykle oddělovala náš obraz, chceme rozdělit. Někdy stačí jen na jedné straně nebo vpředu či vzadu. Snažím se zabránit tomu, aby končily ve stejné výšce.

To vypadá dobře.

Animace snadno udělat: Barvy

A vidíte, když povolíte náhled - vypadá to skvěle. Fantastické.

Animace snadno udělat: Barvy.

Krok 12

A tuto vrstvu teď můžeme vzít, otočit, změnit velikost, přesunout a samozřejmě také používat častěji, protože je to pouze efekt změny.

Zduplikujeme ji, posuneme časově a změníme z žluté na modrou a z modré na žlutou.

Animace snadno provedena: Barvy



V tomto případě je však předtím zobrazeno a poté už ne. To musíme ještě obrátit, protože chci, aby na začátku nebyla vrstva a aby se vrstva posunula dopředu.

Takže ještě jednou smažu zduplikovanou vrstvu a aktivuji vrstvu "Změnit barvy". Poté označíme všechny klíčové snímky tažením obdélníku.

Pravým kliknutím přejdu ke asistentu klíčových snímků a pak najdu úplně dole Obrátit pořadí klíčových snímků.

Animace snadno uděláno: Barvy.

Právě jsem to stiskl a teď se žlutá barva posouvá zespodu do modré.

A teď by to mělo fungovat i tehdy, když zduplikuji vrstvu a celé to posunu trochu vzad.

Přecházíme nyní z jedné barvy na druhou a zase zpět. Perfektní.

Animace snadno vytvořena: Barvy.



Už to funguje. Naše další práce v další části tohoto tutoriálu bude potom text.