Ami a színkoncepciót illeti, mi azt fontolgattuk, hogy az egészet nagyon egyszerűen és letisztultan kék háttérrel és sárga szöveggel készítjük el. A kék és a sárga komplementer színek, így csodásan olvashatóak és szépen elütnek egymástól.

Most elméletileg létrehozhatnánk egy új színfelületet, amely a kék színt adja, majd besárgítjuk a szöveget. Ezt megtehetnénk, de akkor azzal a problémával nézünk majd szembe, hogy közepén az animációnak egy leheletnyi felületnek kell megfordulnia az egész képen, ami megfordítja a színeket.

Kipróbálhatjuk a Layer>New>Adjustment Layer vagy a Ctrl+Alt+Y módon az "Adjustment Layer" létrehozását, majd ráhelyezhetjük a "Invert Channels" effektet. Ekkor azonban látjuk, hogy a színeink mégsem teljesen komplementerek. A kékhez az narancssárga a komplementer szín, ami itt nem passzol, nem jutunk dűlőre a színekkel kapcsolatban.

Animáció könnyedén: A színek


Azt viszont mindenképpen meg akarom csinálni, és van is erre egy lehetőség.


Lépés 1

Így építjük fel: Elvesszük a királykék színfelületet, majd az "Ctrl+Shift+Y" billentyűkombinációval vagy a Layer>Layer Style módon fekete színre állítjuk be.

Animáció könnyen elkészíthető: A színek

Ezután szépen megváltozik, és az After Effects még az elnevezést is átírja a színfelületnek.

A "Könnyen készült animáció" feliratot most egyszerűen fehér színre írjuk.

Animáció könnyen elkészíthető: A színek

Vagyunk feketén és fehéren transzparencia nélkül, könnyű lesz ezt megfordítani.

Animáció könnyen elkészíthető: A színek



Azonban most marad fekete és fehér, én azonban kéket és sárgát szeretnék.

Lépés 2

Így alkalmazzuk rá az előrejelzett rétegre. Elnevezem "Színek módosítása" és "Színezés".

Tiltjuk le az első réteget, mert azt sosem kell újra megérintenünk.

Animáció könnyen elkészíthető: A színek

Ezután szabályozzuk az itt lévő fekete színt a királykékhez. Előzőleg feljegyeztem egy színkódot, az "008FF" ez a csodálatos kék.

A fehéret pedig szabállyuk a sárgához, a színérték "FFF000", egy igazán intenzív sárga.

Animáció könnyen elkészíthető: A színek

Lépés 3

Ezt követően alkalmazzuk rajta a visszafordító réteget. Ezt az egész "Color Change" és "Colorize" néven is elnevezhetjük.

Ha ki- és bekapcsolom a "Color Change"-et, akkor csodálatosan visszafordulnak a színek, anélkül, hogy narancsszínűbe vagy lilába csúsznának át.

Animáció könnyen elkészíthető: A színek



De hogyan tervezzük meg az átmenetet? A "Color Change-" réteget balról jobbra vagy fentről lefele mozgathatjuk át a képen, és így átmenetet hozhatunk létre. Ez azonban nem annyira érdekes.

Szeretnék valami többet csinálni, a teljes képet csíkokra bontani, és ezek a csíkok átsöpörhetnek a képen, hogy kissé megtörjük a széleket. Hogyan tudnánk ezt a legjobban megtenni?

Lépés 4

Vannak erre effektek, például az Effects>Transition Effects; ott van a Line Sweep, ami valamilyen irányba megy, de először készít egy sort, mielőtt a következő elindulna.

Ez számomra nem elég szabálytalan.

Animáció könnyen készítve: A színek

Lépés 5

Ezért ezt a legjobb maszkokkal csinálni. Két klikkelés a Maszk ikonra és létrehozunk egy maszkot, amely pontosan az értékeimhez illeszkedik. Ez egy nagyon hasznos funkció, amelyet később még egyszer használni fogunk.

Animáció könnyen elkészíthető: A színek

Lépés 6

Ezt a maszkot 20 részre szeretném vágni, hogy 20 különálló oszlopot kapjunk. Ez alap After Effects eszközökkel nem lehetséges.

Ilyen helyzetekben egyszerűen írok hozzá egy script-et. Az eszközökhöz, amelyeket itt használunk, mellégtem a megfelelő tutorial scripteket.

Azok között találjuk a Layer Chainer, Mask Slicer és a Sequence Strokes. Mask Slicer az, amire szükségünk van, ahogy gondolhatjátok.

Az állományneve előtt található szimbólum tartozik az Extendscript Toolkit-hez, azt most elindíthatom. Ha elindítom, akkor a Extendscript Toolkit is elindul.

Ezt a Toolt kell külön telepíteni, mert alapértelmezés szerint nem települ. Ezt még el kell végeznetek, amit nagyon egyszerűsíthet a CreativeCloud segítségével.

Ebben a scriptben fent találunk egy pár Settings-et. A scriptekhez nem építettem felhasználói felületet, mert csak saját célra készültek. Ez azt jelenti, hogy ezeket a beállításokat ti közvetlenül a szövegfájlban kell megváltoztatnotok.

Ebben az esetben két értéket változtathatunk meg: a "noOfSplices" azaz hány darab szeletet akarunk végül, és a "separateLayers", ami lehet true vagy false. A true esetében minden szeletnek új réteget ad hozzá.

Próbaképpen csináljunk 4 szeletet, …

Animáció könnyen elkészíthető: A színek

… menjünk az After Effects-be, és válasszuk ki azt a maszkot, amelyet szeletelni szeretnénk. Ez nagyon fontos.

Ezután válasszuk ki a After Effects CC alkalmazást a felső célmezőben. Látjátok, hogy más programok is vannak ott, ez a toolkit arra szolgál, hogy szkripteket írjunk és teszteljünk.

Ebben az esetben tehát a After Effects-t válasszuk ki, majd megnyomom a Lejátszás gombot …

Animáció könnyen elkészíthető: a színek

… és térjünk vissza az After Effects-be. Itt vannak az új rétegek, amelyek mindegyike egy rétegből áll.

És ha most itt egy 4-színátmenetet generálok, …

Animáció könnyedén: A színek

… láthatjátok, hogy az egész egy új képet eredményez. Tulajdonképpen ez egy réteg egy koordinátával, csak a maszkok vannak szeletelve. Tehát lényegében külön szeleteket kapunk ebből a rétegből, ami nagyon hasznos lehet, mert így külön-külön mozgathatjuk és forgathatjuk azokat.

Animáció könnyen elkészíthető: A színek



De ezt most nem kell. Mást szeretnék csinálni.

Lépés 7

Egy rétegen szeretném az összes maszkot, nem 4-et, hanem 20-at.

És a separateLayers legyen false. Elmentem, újra indítom a Lejátszást,

Animáció könnyűszerrel: A színek

… és most az összes 20 maszk egy rétegen van.

Jelöljük meg őket 1-től 20-ig, majd nyomjuk meg az Ctrl+C vagy cmd+C gombokat. Ezután töröljük az eredeti maszkot, és helyére tesszük az összeset itt.

Most mindegyik ott van, és a következő lépésben szeretném őket animálni.

Animáció könnyen elkészíthető: A színek

Lépés 8

A maszkoknak sajnos nincsenek transzformációs tulajdonságaik, mint például forgatás és méretezés, csupán a maszkpálya van megadva. Ez azonban nem jelent problémát.

Jelöljük ki az összes maszkot, és bontsuk ki őket. Ezután kattintsunk a maszkpálya gombra, helyezzünk egy kulcspontot, majd menjünk kissé később a kompozícióba, ahol az összes maszkot lefelé mozgatjuk a képből.

Animáció könnyen elkészíthető: A színek

Lépés 9

Nézzünk erre egy pillantást. A zene szól a háttérben, minden stimmel. És most két lineáris kulcspontunk van, ami nem túl izgalmas.

Szeretném ezt kicsit izgalmasabbá tenni, és nem akarok lineáris kulcsokkal dolgozni, mert már hallottuk a Disney szabályoknál: Az állandó sebesség nem fordul elő az életben, tehát nincs szükségünk rá az animációban sem.

Animáció könnyedén: A színek

Lépés 10

Ehhez kattintsunk a Diagram szerkesztő gombra. Itt találom meg azokat a görbéket, amelyeket a bouncing ballnál részletesen meg fogunk tanulni.

Hogy a maszkpályákra korlátozzam, jelöljük meg az összes maszkot, majd nyomjuk meg az U billentyűt, hogy az összes animált tulajdonságot megkapjuk.

Animáció könnyen: A színek

Itt láthatjuk most a sebességi görbét, a sebesség diagramját. Ez nem olyan szépen dolgozható, mint az érték görbe, ezt aztán még meglátjuk. Azonban jól működik, ha egyszerre sok tulajdonságot szeretnénk animálni.

Első lépésben egy Easy Ease hatást szeretnék adni neki, vagy az F9 billentyűvel, vagy ezzel a gombbal.

Ezzel a diagram nagyon drasztikusan megváltozott. A bal oldalon egy állandó sebesség lenne, egy adott sebességgel kezdünk és hirtelen leállunk.

Az Easy Ease-vel a sebesség nulláról lassan növekszik, majd újra lecsökken. Ez így egy parabol formát eredményez.

Animáció könnyedén: A színek

Szeretném ezt kicsit extrémebbé tenni. Ehhez fogom a tangenst és csak egy kicsit megfeszítem, így középen tényleg lesz egy csúcs.

Így, nézzük csak, hogy néz ki …

Animáció könnyedén: A színek



Most hadd fusson le, és nézzük: Egyenesen átszalad. Középen sokkal gyorsabb mozgás van, mint az elején és a végén. Nagyon tetszik.

Lépés 11

Ezt ugyanezzel az eljárással is megtehettük volna a pozícióval - de miért csináltuk a szeleteket?

Most szépen rendezzük át az időben egyenlőtlen módon, és véletlenszerűen helyezzük el a kulcspontokat, hogy a Reveals alakja is kicsit változatos legyen. A vonalaknak nem szabad mind egyszerre átvágtatniuk.

Az egész végül egy kicsit olyan lesz, mint egy városi égbolt. Egy vonal, amely általában a képünket kettéválasztaná, fel akarjuk törni. Néha csak az egyik oldalon van erre szükség, vagy csak elöl vagy csak hátul. Kerüljük azonos magasságban való befejezést.

Ez jól néz ki.

Animáció könnyen elkészíthető: A színek

És látjátok, amikor előnézetet aktiváltok - ez klasszul néz ki. Fantasztikus.

Animáció könnyen elkészíthető: A színek

Lépés 12

És most már vehetjük ezt a réteget, forgathatjuk, átméretezhetjük, mozgathatjuk és természetesen többször is használhatjuk, mert ez egyszerűen csak a megfordítás hatása.

Duplikáljuk, időben eltoljuk, sárgáról kékbe és kékről sárgára váltunk.

Animáció könnyen elkészíthető: A színek



Ebben az esetben azonban előbb be van kapcsolva, majd eltűnik. Ezt még meg kell fordítanunk, mivel azt szeretném, hogy az elején ne legyen rétegünk, és hogy a réteg annak előrébb tolja magát.

Ezért töröltem a duplikált réteget, majd aktiváltam a "Színváltoztatás" réteget. Ezután kiválasztjuk az összes kulcsramenetet, azzal hogy egy téglalapot húzunk rá.

Egy jobbklikkel végiglépek a Kulcsramenet Segítőn, majd lent találom meg a Kulcsramenet sorrendjének megfordítása lehetőséget.

Animáció készítése könnyen: A színek

Ezt most megnyomtam, és most a sárga szín alulról kezd el átmenni a kékbe.

És most már működnie kell, ha újra duplikálom a réteget, majd kissé távolabbra mozgatom.

Most azzal az egyik színből a másikba és vissza érkezünk. Tökéletes.

Animáció könnyen elkészítve: A színek



Működik. A következő feladatunk a következő részben az lesz, hogy a szöveget kezeljük.