After Effects

Mire használd az animációt és mire jó az After Effects?

Mi is az az animáció?

Mikor képeket, ábrákat, rajzokat mozgóképként jelenítünk meg, azaz átalakítjuk, manipuláljuk őket, akkor animációt hozunk létre, életre keltjük a halott, statikus formákat. Régebben celluloid lapokra vitték fel a képeket, a mozdulatsorokat, hátteret stb. és azt lefényképezve összeállították a filmet. A Walt Disney Stúdió első rajzfilmjei, és a régi nagy magyar rajzfilm sikerek, mint a Mézga-család kalandjai, vagy a Vuk még ilyen technikával készültek. Ma már a számítógépé a főszerep, amivel 2D-s és 3D-s animáció is készíthető és megjeleníthető.

Ezeket az animált hatásokat speciális, erre a célra kifejlesztett programokkal hozzák létre és szerkesztik, az egyik legismertebb az Adobe After Effects programja. Ez egy előfizetéses animációs eszköz, egy szoftver, amit főleg már kész filmeknél vagy műsoroknál alkalmaznak utólag. De kreatívan használható a webes felületeken weboldalak, vagy csak hirdetések animálásánál is.
After Effects
After Effects


2019-ben a program Oscar-díjat nyert tudományos és technikai teljesítmény témában. Az After Effects mindenképpen kikerülhetetlen iparági standardnak számít.

Mit tud a program? Milyen eszköz-készlettel dolgozik?

Vizuális effektek létrehozásához, mozgóképek és hangok összeállításához használják elsősorban. Számos területen alkalmazzák a filmgyártás, a televíziós produkció készítés, és a webes videók létrehozása során. A neve is utal rá, az After Effects azt jelenti: “utóhatások”, azaz a kész műveket manipulálják a program eszközkészletével.

Jelenet a Dr. Strange című filmből


Ha a Photoshopban elérhető tulajdonságokat - mint pl. szín, méret, pozíció stb. időben haladva megváltoztatjuk, már létre is jött egy animáció. Minden időpontban új paramétereket adhatsz az adott grafika, rajz vagy videó tulajdonságaihoz, minden egyes új paramétert egy kulccsal rögzítesz az idővonalon.
Tavaszi háttér animáció



A felület első pillantásra meglehetősen bonyolultnak tűnik. Az alsó idővonalon lehet a videószakaszokat vágni, a hangot akár különválasztva hozzáadni a videóhoz.

After Effects

Néhány alap animáció példával

Talán a legegyszerűbben példák segítségével lehet megvilágítani, mi mindenre jó az animáció.

1. Karakteranimációk

Mozoghat a karakter szeme, szája esetleg a végtagjai is szinkronban a további kommunikációs elemekkel, beúszó szövegekkel.

Egyszerű karakter animáció
Teáskanna


2. Szöveg animáció

Oktató vagy marketing videók esetében a fontos kommunikációs elemek kiemelésére is alkalmas a szöveg animáció. Nem érdemes hosszú, olvasható szövegeket megmozgatni, de a rövidebb címsorok, vagy a tevékenységre felszólító üzenetek hangsúlyosabbak lehetnek akár egyfajta gépelést utánzó animációval.

Popup ablak



Az alábbi animációban a hernyóként tekergőző feliratok csak díszítenek, szórakoztatnak, esélytelen, hogy el tudja olvasni az ember. Viszont elterelik a figyelmet a fent megjelenő címről. Közösségi médiás posztok esetében nagyon népszerűek ezek az animált tartalmak, sok esetben csak azért, mert érdekesebbek, felkeltik az érdeklődést és jobban lekötik a figyelmet.

Hernyószövegek



Óriási trend most az amorf, teljesen egyedi tipográfia alkalmazása akár a logótervezés, akár a plakátok, grafikai tervezési munkák esetében. Ezek animálása is nagyon népszerű a weboldalakon.

Charlie Le Maignan portfolio – awwwards
Variable font animation - Safari Riot –awwwards


3. 2D vektor animáció

A geometriai alakzatok színe, mérete, alakja és pozíciója is megváltozhat.

Utazás - Facebook-ra



Az éppen aktuális grafikus illusztrációs trendek hatását tovább fokozhatjuk animációval. Akár egy blogbejegyzésben, akár a közösségi médiás fiókokban garantáltan magára vonja a figyelmet, és több felhasználót bír rá a kapcsolatteremtésre. Több like több hozzászólás, és végül több vásárlás lesz a végeredmény.

Utazás - Instagramra
Tavasz



Az animált hátterek éppen csak egy leheletnyi csavart visznek a szokásos vizuális kommunikációs elemekbe.

Laptop


4. Alap 3D animáció

A kamerák lehetővé teszik, hogy térben körbejárjunk, megforgassunk, vagy bemozdítsunk egy tárgyat. 3D-s modelleket nem lehet az AE-ben létrehozni, de integrálni és animálni tudjuk a máshonnan érkező kész 3D-s objektumokat. Számtalan példa elképzelhető a bonyolult berendezések pásztázásától az infografika jellegű bemutatókig. Nézz meg néhány példát a 3D termék bemutató videókra (kicsit lassan töltődik az oldal, de érdemes kivárni).

3D product display - Rimowa Unique – awwwards

3D Product Page Navigation – awwwards



Forrás: Tubik agency



Tipikus példák a portfólió bemutató animációk is, még akkor is, ha csak egy képzeletbeli, fiktív „lapot” emelnek ki a térbe, és így mutatják be a honlapterveket.

Website-presetation



Forrás: Tubik agency


Kalánka



Forrás: Tubik agency

5. UI/UX animáció

Az egyik legfontosabb alkalmazási terület, amikor az apró, pici mozgásokkal, animált változásokkal a felhasználó tevékenységeit, interakcióját emeljük ki. Így még véletlenül sem kerülhető el a figyelmét, hogy egy elem kattintható, hogy éppen megnyomott egy gombot.

Cute hover microinteractions - Nathan Taylor portfolio – awwwards




Ilyen esetekben nagyon fontos, hogy az illusztrációnak használt, szórakoztató kis mozgások arányosan kevésbé hangsúlyosak legyenek, mint a gomb megnyomását jelző animáció. A felső mozgó doboz eltereli a figyelmet a gomb animációról.

UI-UX-gomb



Ezeknél az animált webshop ikonoknál a rajzolási sebességet a környezethez kell igazítani. Mivel a rajzos elemeket dolgozza fel az agyunk a leggyorsabban, az ikon felismeréséhez szükséges részeknek viszonylag gyorsan ki kell rajzolódniuk.



Forrás: Tubik agency



Mire nem használjuk az After Effects programot

Füst, robbanás, légörvény vagy fényhatás, nincs lehetetlen az AfterEffects számára. A 3D-s modelleket nem az AE-ben hozzuk létre, de animálni tudjuk a már kész 3D-s objektumokat. A három dimenziós/3D-s modellezés nem csak a mérnökök, gyártók számára fontos, hanem a filmek, videók és animációk világában is. Itt is szeretnénk megjeleníteni a 2D-s síkon, a monitoron, a térben az alakot vagy egy terméket, amit például éppen reklámozni fogunk. Erre a CAD programok alkalmasak, ezek vektor alapú programok, melyek elkészítik és ha kell elmetszik, vagy csak a burkoló héjat ábrázolják, akár meg is forgatják a térben. Az így készült modell integrálható az AE programba.

Videószerkesztésre sem használjuk az AE-t. Arra alkalmasabb a Premier Pro, ami szintén az Adobe CC tagja. Úgy fogalmaznék, hogy az After Effects és a Premier Pro eszközök kiegészítik egymást. A felvevő eszközön készült filmet a Premier Pro-ban vágjuk. Azaz a videó, film azon részeit megtartjuk, ami kell, a rosszul sikerül, rossz minőségű és felesleges részeket kivágjuk a felvételből, beemelhetünk más videókat és képeket. Beilleszthető szöveges rész, zenei elemek és átmeneti effektek is. A bonyolultabb szöveges animációt már inkább After Effects-ben végezzük.

After Effects alternatívák

A vidók tervezése - a forgatókönyv

Nemcsak az After Effects felhasználói felülete lehet ijesztő egy kezdőnek, de érdekes kérdés az is, hogyan tervezel meg egy animációt. A sima illusztrációkhoz képest, itt az időbeliséggel is számolni kell. Számít, hogy mi történik az első másodpercekben, mennyire észlelhető az adott mozgás, milyen az egyes események ritmusa. nem könnyű ráérezni, hogyan kell animációkat tervezni.

A Storyboard, az animációs videó forgatókönyve. Valójában egy képes forgatókönyv, rajzok sorozata, készülhet például Photoshop-ban is. Beszerezhető storyboard template is, amibe a rajzok kerülnek.
Van, aki színesben készíti, de lehet csak vonalakkal is. Úgy kell elkészíteni, hogy végig lapozva kellően érthető legyen. Nézd meg, hogyan kell egy marketing videóhoz storyboardot készíteni. A megértést segíti:

  • Feliratokkal kell ellátni a rajzokat
  • A kamera mozgását nyilak segítségével szemléltetni
  • A fő elemet, objektumot ki kell emelni, például színekkel

Szöveg esetén először készül egy szövegkönyv, azután lehet a storyboardot szinkronba hozni a szövegkönyvvel. Nézz meg további példákat a marketing storyboardokra.

After Effects
After Effects



A jelenlegi webdesign trendeket figyelembe véve érdemes az animációra szakosodni, mert kevesen járják végig a hosszabb tanulási utat. Egyrészt nagyobb a hardver igénye az animációkészítésnek, mint a sima digitális képkészítésnek, de ez még megugorható.

Akadály lehet az is, hogy sokkal kevesebb magyar nyelvű tananyag érhető el. De a legfontosabb, hogy nem könnyű rátanulni az időbeliségre, nem tud az ember azonnal, magától értetődő természetességgel forgatókönyvekben gondolkodni. Egy néhány másodperces kis animációnak is saját ritmusa van, és nem mindegy, hogy az egyes történések, az egyes elkülöníthető szakaszok milyen hosszúak, vagy az átváltozások milyen gyorsak.

Névjegy - Czeglédi Katalin

Kata már egy sikeres karrier után kezdett új szakmát tanulni. Elmélyülten és kitartóan alapozta meg a saját márkáját, építette fel a Web6 Webdesign alapjait.
"Az egész élethosszig tartó tanulás nálam szó szerint értendő. Ennek az egyik fontos állomása, hogy régi álmomat valóra váltva  webdesigner lettem. Hogy mennyire összetett ez a feladatkör, csak a WEBARTERY tanfolyam elvégzése közben
vált világossá .

A közös munka az ügyfelekkel egy személyesen bonyolított interjúval indul, de hosszú az út a modern megjelenésű, igényes és informatív weboldalak átadásáig. Szeretem, hogy nem minden márka és weboldal különbözik, és kihívást jelent, hogy az
ügyfelek egyre okosabb oldalakat rendelnek, egyre több funkcióval.Például időpont foglaló bővítményt, ami más megoldást igényel egy szálloda vagy egy fogorvos esetében. Minden projekt egyben új ismereteket is hoz. Az elmúlt néhány évben az animáció is elterjedt a social-media-ban, és a marketingben. Nem véletlen, hogy egyre több szituációban alkalmazzuk, hiszen nagy sikere van a felhasználók körében a mozgó megjelenéseknek. Nagyon érdekelt, hogyan lehet animált logókat, vagy Instagram posztokat készíteni, így a tanfolyam után erre a területre szakosodtam."

Animáció használata a webdesign-ban
Szerző: Czeglédi Katalin, webdesigner, Web6 Webdesign

Share this post