Az embléma animációja az a folyamat, amely mozgást vagy változtatásokat vezet be a logó vizuális elemeibe, hogy dinamikusabbá és vonzóbbá tegye. Alkalmazható a logó különböző részeire, például szövegre, képekre, színekre és formákra, és különböző bonyolultságú lehet, az egyszerű animációktól, például a szöveg villogó vagy halványuló színeitől a mozgó vagy interaktív objektumokat tartalmazó összetett animációkig. hatások.
A logó animáció egyre elterjedtebb. Az okostelefonok és az internetes technológia általános fejlődése között ma már sokkal elterjedtebbek a logók a digitális terekben, és ez megnyitja a kaput olyan vizuális effektusok előtt, mint például az animáció, amely fizikai termékekkel nem lehetséges. Természetesen a logóanimáció növekvő népszerűsége azt jelenti, hogy egyre több márkának lesz szüksége rá a versenyképesség megőrzéséhez. Tehát a logó animálásának megtanulása értékes készség lehet, amely a logóját a következő szintre emeli.
Ezzel egyidejűleg az animációs szoftverek is mindenütt elérhetővé, áramvonalasabbá és intuitívabbá váltak, hogy támogassák ezt a növekvő felhasználói bázist. Így bármennyire is technikás és összetett logóanimáció hangzik, már a kezdők is készíthetnek egyszerű, de hatékony animációkat.
Logo animáció az After Effectsben -
1. lépés: Készítse elő a logófájlt.
Valójában elkezdjük az oktatóanyagot arról, hogyan animálhatunk logót az Adobe Illustratorban (vagy hasonló logótervező szoftverben). Erre azért van szükség, hogy a fájlunk animációhoz beállított logó.
Bár maga az animációs szoftver raszteres, az eredeti logófájloknak vektoros formátumban kell lenniük. Ez lehetővé teszi ezek megváltoztatását anélkül kár a képminőség érdekében (például a raszteres logó nagyítása pixelezést eredményez), és ez később hasznos lesz az alakzatrétegekkel való munka során.
Győződjön meg arról, hogy logója rétegekre van osztva a Rétegek panelen.
A logónak is többrétegűnek kell lennie, nem pedig egyetlen objektumba csoportosítva. Ez megkönnyíti a bonyolultabb animációk létrehozását a logó egyes részeinek animálásával. Új rétegeket hozhat létre a " Új réteg hozzáadása" a Rétegek panel alján, majd másolja be és illessze be az embléma egyes részeit.
Végül, mivel az animáció digitális jellegű, RGB színekkel is dolgozunk. Ha az Illustrator-fájl CMYK-ra van állítva, ezt úgy módosíthatja, hogy kiválasztja az emblémát, és a Szerkesztés > Színek szerkesztése > Konvertálás RGB-re menüpontra lép.
Ha készen áll, exportálja logóját egy teljesen rétegzett vektorfájlként. Mivel az After Effects fájltípusok az Adobe szoftvercsalád részét képezik, az általam létrehozott logót AI-fájlként fogom elmenteni (Adobe Illustrator), de számos különböző típusú vektorfájl közül választhat, ha más szoftvert használ.
2. lépés: Importálja logóját az After Effectsbe. Logo animáció
Nyissa meg az After Effects alkalmazást. A felület első pillantásra bonyolultnak tűnhet, ezért bontsuk le az alapokat:
- Eszköztár : itt érheti el a fő grafikus eszközökpéldául a Toll eszköz, a Típus eszköz stb.
- Projekt panel : Itt kezelheti és rendszerezheti a teljes projekthez tartozó médiafájlokat.
- Összeállítás ablak : Ez egy videó előnézeti ablak, ahol megtekintheti az éppen készülő kompozíció animációját (amelyet gyakran kompozíciónak neveznek). A kompozíciók lényegében jelenetek, mindegyik saját animációs idővonallal. A kompozíciókat a következő részben részletesebben tárgyaljuk.
- Idővonal : Itt készítheti el az animációt. Ez egyrészt egy szó szerinti idővonalból áll a jobb oldalon (ahol beállíthatja az animációs eseményeket az idővonalon való futtatáshoz), másrészt egy elrendezési területet a bal oldalon (ahol átfedheti és szerkesztheti a médiaelemek attribútumait).
- Vezérlőpult : Itt érheti el a különféle támogató funkciókat, például a médiainformációkat, a bekezdés- és igazítási lehetőségeket, valamint az After Effectsbe beépített, előre beépített animációs és vizuális effektus-könyvtárakat.
Ha nem biztos egy eszközzel vagy gombbal kapcsolatban, az egeret rámutatva leírást kap.
Egy logófájl importálásához egyszerűen húzza át a Projekt panelre, vagy válassza ki Fájl " > « importálás" > « Fájl " . A következő párbeszédpanelen válassza a Média importálása másként lehetőséget felvételeket és egyesített rétegeket .
3. lépés: Állítsa be a kompozíciót. Logo animáció.
A kompozíció (kompozíció) egy olyan tároló, amely lehetővé teszi a médiafájlok összeállítását, szerkesztését és animáció alkalmazását. Egy nagyobb produkció, például egy film, több műsorszámot tartalmaz egy projektpanelben. Így a műsorszámokat egyetlen jelenetnek tekintheti a filmben, és minden számnak külön idővonala lesz. Esetünkben egy öt másodpercnél rövidebb logó-animációhoz nagyon kevés kompozíció kell.
A kompozíció testreszabásához húzza a médiafájlokat az idővonal panel bal oldalára.
Kezdjük egy egyszerű háttérrel. Kattintson a jobb gombbal az elrendezés panelre, és válassza a " Teremt" > « Szilárd" . Mivel a logóm fehér, ezért a szolidat választottam fekete szín, de bármilyen színt választhatsz. A következő ablakban nevezze el a szilárdtestet (esetemben "BG"), kattintson a " Készítsen méretet számítógép" és válassza a " RENDBEN" . Most húzza át a logófájlt a Projekt panelről az Idővonal panelre, és látnia kell a logó előnézetét a kompozíciós ablakban. Ha nem, akkor mindenképp rendezze át a rétegeket úgy, hogy húzza a szilárd hátteret a logófájl alatt.
Kattintson a jobb gombbal a logófájlra az elrendezés panelen, és válassza ki Teremt" > « Konvertálás többrétegű kompozícióvá" . Ezzel a logófájlt más összetételűvé alakítja (látni fogja, hogy az ikon megváltozott). A logófájlra duplán kattintva új lap nyílik meg, és megjelenik az új kompozíció, amely tartalmazza az Illustratorban beállított összes réteget. Most láthatja, hogyan működnek a kompok: lényegében olyanok, mint az almappák.
Logo animáció
Ha szeretné, ezeket a rétegeket külön kompozíciókká alakíthatja, ha jobb gombbal kattint, és kiválasztja Előzetes összeállítás" . Ez a rétegnek saját animációs idővonalat ad, amely az előző kompozícióba van beágyazva. Ha pedig egyszerre szeretné animálni a teljes logót, akkor a fő kompozícióhoz társított idővonalat kell használnia.
Ha ez nincs az útból, akkor értsük meg, hogyan működnek ezek az idővonalak az animációnál.
4. lépés: Animálja a logót kulcskockákkal
Az After Effects (és a legtöbb animációs szoftver) kulcskockákkal működik. A kulcskockák alapvetően jelölők, amelyeket beállíthat az idővonalon, hogy meghatározza, mikor következzen be az animáció kezdő és befejező állapota.
Kezdjük például egy nagyon egyszerű animációval: a fading be. Egy objektumhoz különböző attribútumok kapcsolódnak, és az adott időtartam alatt változó attribútumok lényegében animációt jelentenek. Az attribútumok megtekintéséhez kattintson a logó melletti Kibontás ikonra, majd a gombra "Konvertálás" tulajdonság .
Hozzon létre kulcskockákat az Idővonal panelen a Tulajdonságok melletti stopper ikonra kattintva.
Elhalványuló animáció esetén az objektum láthatóságát mérő attribútummal kíván dolgozni: átlátszatlanság. Az átlátszatlanság 100%-ra van állítva, mert alapértelmezés szerint a logó teljesen látható.
Kattintson az Opacity opció melletti stopper ikonra, és megjelenik egy rombusz, ahol a lejátszófej jelölője van (az idővonalat keresztező halvány kék vonal). Ez egy kulcskép, alapvetően egy adott attribútum aktuális értékének pillanatképe. Mozgassa a kulcskockát úgy, hogy rákattint, és húzza az idővonal 2 másodperces jeléhez. Húzza vissza a csúszkát a 0 másodperces jelig, majd hozzon létre egy másik kulcskockát, és állítsa az átlátszatlanságot 0%-ra. Nyomja meg a szóköz billentyűt az animáció megtekintéséhez a kompozíciós ablakban.
Utóhatás
Látni fogja, hogy zökkenőmentesen beszűrődő animációt hozott létre azáltal, hogy az átlátszatlanságot 0 másodperc alatt 100%-ról 2%-ra változtatta mindössze két kulcskockával. Így készül minden animáció az After Effectsben. Létrehozhat egy kezdő kulcskockát és egy befejező kulcskockát különböző időközönként az idővonal mentén, és az After Effects automatikusan kiszámítja a szükséges képkocka-átmeneteket, hogy eljuthasson A pontból B pontba (ezt az animációs üzletágban hagyományosan tween frame-eknek nevezik).
Egy egyszerű sima animáció jön létre az Opacity tulajdonság két kulcskockájával.
Láthatja, hogy számos attribútum van, amelyekkel dolgozhat ingatlan átalakítása, amit itt röviden kifejtünk. Kísérletezzen nyugodtan a kulcskockákkal, és módosítsa mindegyiket, hogy átérezhesse animációs képességeiket:
- pozíció : Ez az attribútum írja le a logó elhelyezkedését az X, Y térben az elrendezési képernyőn, és lehetővé teszi a lineáris mozgás animálását.
- Skála : Ez az attribútum írja le a logó méretét (az eredeti fájl teljes méretének százalékában), és lehetővé teszi nagyítási vagy kicsinyítési animációk létrehozását.
- Forgás : Ez az attribútum a fokokban kifejezett tájolást írja le, és lehetővé teszi elforgatási animációk létrehozását.
Tanácsok szakembertől :
A logó animálásakor érdemes visszafelé dolgozni (mint ahogyan az elhalványításnál is tettük), mivel az animációnak a kész, teljes logón kell véget érnie. Ez azt jelenti, hogy kulcskockákat kell létrehoznia, mielőtt bármit módosítana, hogy az attribútumértékek pillanatképei az alapértelmezett állapotukban legyenek. Ezután áthelyezheti ezeket a kulcskockákat az idővonal kívánt végpontjára (bármennyire is szeretné, hogy az animáció tartson), és új kulcskockákat hozhat létre az idővonal elején végzett változtatásokhoz.
5. lépés: Animálja a logót alakrétegekkel.
Most térjünk át az alakrétegeket használó érdekesebb animációs technikákra. Az alakrétegek olyan objektumok, amelyek útvonalinformációkat tartalmaznak, például rögzítési pontokat és csatlakozóvonalakat (hasonlóan a vektoros programokban használtakhoz), és ezek manipulálása megnyitja az ajtót az animációs lehetőségek egész sora előtt. Tulajdonságok átalakítása .
Hogyan válasszuk ki a megfelelő színt a logóhoz?
Először a logót alakréteggé alakítjuk. A Réteges kompozíció panelen (a 3. lépésben létrehozott rétegek) jelölje ki az összes réteget, kattintson a jobb gombbal, és válassza a " Teremt" > « Alakzatok létrehozása vektorrétegből" . Látni fogja, hogy minden réteg megduplázódik, mellette egy csillag – ez egy alakzatréteg. Az alakréteg alá ágyazva találja Tartalom tulajdonság továbbá A tulajdon átalakítása . -tól jobbra Tartalom tulajdonságai egy gombot is látni fog Hozzáadás " , amely lehetővé teszi, hogy még több attribútumot jelöljön ki az animációhoz.
Az alakzatrétegek tartalmaznak egy Hozzáadás gombot (a Tartalom tulajdonságtól jobbra), amely lehetővé teszi mindenféle animált tulajdonság hozzáadását, például vágógörbéket.
Objektum méretezése az Adobe Illustratorban
Utak vágása
A logómhoz egy meglehetősen gyakori és hasznos animációt használtam a Trim Paths tulajdonság segítségével. Ehhez hozzáadtam a "Vágási útvonalakat" a " gomb segítségével Hozzáadás " az egyes betűk alakzatrétegeihez állítsa az End attribútum kulcskockáját 0%-ra az idővonal elején és 100%-ra körülbelül 1 másodperc múlva. Amint látja, a betűk körvonalát úgy tűnik, mintha egy láthatatlan kéz rajzolta volna meg valós időben.
A Trim Paths tulajdonság használatával animálhatja a vonalakat, hogy azok valós időben rajzolják meg magukat.
Ezen kívül szerettem volna néhány hangsúlyos animációt a háttérbe illeszteni. Mivel fekete-fehérben dolgozom, a Twilight Zone-ra emlékeztető hurkolt alagút effektust választottam. Ehhez az Eszközök panel sokszög eszközével rajzoltam egy alakzatot a kompozícióm közepére, ezzel létrehozva egy új alakzatréteget.
Ezután hozzáadtam egy Repeater tulajdonságot, középre helyeztem a pozíciót, és megnöveltem a másolatok számát. Ez megkettőzi a formát, és egy végtelennek tűnő alagutat hoz létre. A lépték módosítása növeli az egyes másolatok közötti távolságot, az elforgatás megváltoztatásával pedig a másolatok különböző irányokba kerülnek a vizuális érdeklődés érdekében.
Végül, hogy megfűszerezzem, az idővonal elején 0-s eltolást raktam be, majd később negatív értékre állítottam az idővonalon.
Egy sokszög alakú réteg és a Repeater tulajdonság segítségével animált hátteret tudtam létrehozni.
Valószínűleg kitalálta, hogy számos lehetőség van az alakzatrétegekre. Ez igaz: teljes online kurzusok vannak a témában a témával kapcsolatban, és érdemes időt szánni a kísérletezésre, gyakorlásra és tanulásra.
Azt sem tudom megmondani, melyik animációs stílus illik hozzád logó vagy milyen konkrét eszközök animációk, amelyekre szükség lesz ennek a stílusnak az eléréséhez. Viszont tudok tanácsot adni, hogyan fedezd fel magad. Keressen ihletet más animált logókból, például versenytársaiból, márkáiból, amelyeket csodál, és/vagy olyan webhelyekről, mint a Pinterest vagy a Dribbble – ugyanúgy, mint a logó eredeti létrehozásakor.
Rá fog jönni, hogy miután elkezdi elemezni őket a logó animálásával kapcsolatos új ismeretei alapján, sok közülük egyszerű manipulációk formákkal és átalakításokkal (még azokkal is, amelyek egyértelműen fejlett stilizált hatásokkal vannak rétegezve). Miután megtalálta a kívánt animációkat, visszafelé dolgozhat az After Effectsben, és megpróbálhatja visszafejteni ezeket az animációkat a gyakorlathoz.
6. lépés: Állítsa be az időt.
Beszéljünk az időről, amely leírja az animációs képkockák ütemét az animáció során. Az idő vizuális megjelenítését a Grafikonszerkesztőben tekintheti meg. Ehhez kattintson a grafikon ikonra (amely Graph Editor felirattal van ellátva, ha fölé viszi az egeret) az idővonal panel tetején, és ez az idővonalat vonaldiagrammá változtatja.
Ha rákattint valamelyik kulcskocka-attribútumra, egy egyenes vonal jelenik meg az egyik kulcskockától a másikig. Jelenleg, mivel csak a kezdő- és végpontokat készítettük el, az After Effectsre bíztuk az időzítést. Irány nélkül az After Effects az animáció minden képkockáját egyenletesen mozgatja, ami tökéletesen egyenes vonalat eredményez.
A grafikonszerkesztő megjeleníti a kulcskockák időzítését, ahogy az a vonaldiagramon látható.
Azonban az idő céltudatos megváltoztatása az, ami az animációt realizmussá teszi. Például egy pattogó labda animációban a labda lassabban mozog a visszapattanás magasságában, és gyorsabban, ahogy közeledik a talajhoz a lendület és a gravitáció miatt. Más szóval, nem ugyanazzal a sebességgel mozog az egész animáció alatt, és ha megtenné, robotként állna ki.
A grafikonszerkesztő alján található Bezier-eszközök lehetővé teszik a grafikonvonal görbületének beállítását.
Konvertálja a kulcskockákat Auto Bezier-re
A Graph Editor lehetővé teszi, hogy beállítsa saját animációjának időzítését az úgynevezett Bezier-fogantyúk segítségével, amelyek segítségével a grafikonvonalat görbévé alakítja. A grafikonszerkesztő jobb alsó sarkában néhány négyzet alakú pont ikon látható a vonalakhoz csatolva – ezek a Bezier-eszközök.
Kattintson az egyik kulcskockára, és mutasson a Bezier-eszközök fölé, amíg meg nem találja a " Kulcskockák konvertálása Auto Bezier-re . Ha erre kattint, egy sárga jelölő jelenik meg a grafikonon. Ennek a fogantyúnak a húzásával a vonal meghajlik, és ez megváltoztatja az animáció időzítését. Ahol kifejezettebb a görbe, a képkockák gyorsabban játszódnak le, ahol a görbe simább, ott lassabban játszódnak le.
Az élesebb görbe a gyorsabb, a simább görbe pedig a lassabb szinkronizálásnak felel meg.
A saját időzítés beállításának árnyalatainak megértéséhez animációs tapasztalatra van szükség, ezért a Bezier-görbék kézi beállítása fejlettebb téma. Ebben a kezdőknek szóló útmutatóban a Bezier eszköz használatát javaslom Könnyű Könnyű (amely automatikus görbét alkalmaz a kiválasztott kulcskockára) az összes animációs időintervallumra. Jelentkezni lehet Könnyű Könnyű a diagramszerkesztőn kívüli kulcskockához a kulcskép kiválasztásával és a jobb gombbal kattintva.
7. lépés: Exportálja logóját.
Ha készen áll a kész animált logó exportálására, válassza a " Fájl " > « Export" > « Adobe Media Encoder hozzáadása a sorhoz" . Az After Effects alapértelmezés szerint exportálja formátumú fájlt mp4, amely alkalmas videózásra. Mivel szeretnénk létrehozni egy megosztható képfájlt a logónkról, animált GIF-ként exportáljuk. A Media Encoder ablakban kattintson a „Formátum” szó alatti kiemelt kék szövegsor melletti nyílra, és válassza a „ Animált GIF" . A kész fájl célmappáját is beállíthatja, ha a „Kimeneti fájl” szavak alatti kék szövegre kattint.
Fájl exportálásához lépjen a Fájl > Exportálás > Hozzáadás az Adobe Media Encoder Queue-hoz menüponthoz, és válassza a Formátum oszlop legördülő listából az Animated Gif elemet.
Kattintson duplán a kiemelt kék szövegre az előre beállított érték alatt az Exportálási beállítások ablak megnyitásához. Van néhány lehetőség, amelyeket érdemes megnézni a fájlméret csökkentése érdekében: Minőség (20-ra állítottam), Képkockasebesség (10-re állítottam, bár videóknál magasabb képkocka-sebesség (fps) ajánlott), és Időtartam, ami a kék sáv az előnézet alatt (az enyémet 4 másodpercre csökkentettem). Válassza ki RENDBEN, az ablak bezárásához.
Ha végzett, válassza ki a zöld Lejátszás ikont a Media Encoder jobb felső sarkában, és a fájl megjelenik a kiválasztott célmappában. Ennyi: kész logóanimáció!
Keltse életre márkáját logóanimációval.
-
A logóanimáció több, mint egy népszerű trend, amelyet a márkák kénytelenek követni. Az embléma animációjának tagadhatatlan varázsa is van, és ez egy nagyszerű módja annak, hogy pillanatnyi vizuális élvezetet teremtsen mindenki számára, aki kapcsolatba lép a márkával. És szerencsére az animációs szoftverek úgy fejlődtek, hogy szinte bárki, tudástól függetlenül, hozzáadhat egy kis varázslatot a saját logójához.
Ezzel együtt, bár ennek az oktatóanyagnak az a célja, hogy eligazodjon az embléma-animáció alapjaiban, sok próbálkozásra, gyakorlásra és kísérletezésre van szükség ahhoz, hogy az alapvető animáción túl bármit is elérjen. Ha igazán különleges logóanimációra van szüksége, egy profi logóanimátor megéri a befektetést.
Szólj hozzá!