Logo animáció

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.

Egyre elterjedtebb a logó animáció. 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 egyre inkább azt jelenti márkák szüksége lesz 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ó.

Logó regisztráció

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.

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:

 

1. Eszköztár : itt érheti el a fő grafikus eszközökpéldául a Toll eszköz, a Típus eszköz stb.
2. Projekt panel : Itt kezelheti és rendszerezheti a teljes projekthez tartozó médiafájlokat.
3. Ö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.
4. 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).
5. 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.

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 kompozíciók: lényegében olyanok, mint a beágyazottak mappá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 .

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ő é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 (az animációban hagyományosan köztes képkockáknak nevezik). üzleti).

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 .

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.

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. Erre használtam szerszám sokszöget az Eszközök panelen, hogy egy alakzatot rajzoljon a kompozícióm közepére, új formaréteget hozva létre.

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.

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ége 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.

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 több is látható ikonok a vonalakhoz rögzített négyzetes pontok 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.

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" . Telepítheti is mappa a kész fájl célállomásához kattintson a kék szövegre a „Kimeneti fájl” szavak alatt.

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, ügyességtő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.

 АЗБУКА

 

GYIK. Logo animáció.

1. Mi az a logó animáció?

Az embléma animációja az a folyamat, amikor mozgást vagy vizuális effektusokat adnak a logóhoz, hogy dinamikusabbá és szemet gyönyörködtetőbbé tegyék.

2. Miért van szükség logó animációra?

A logóanimáció segít kitűnni a versenytársak közül, javítja a márka megítélését, felkelti a figyelmet, és emlékezetessé teheti logóját.

3. Milyen programokkal készítenek logóanimációkat?

• Adobe After Effects: Professzionális program komplex animáció és vizuális effektusok készítésére.
• keverőgép: Ingyenes és hatékony 3D animációs szoftver.
• Cinema 4D: Népszerű 3D modellező és animációs szoftver a szakemberek körében.
• Adobe animálja: Program 2D ​​animáció készítésére.
• Mozgás: Az Apple animációs szoftvere, amelyet elsősorban videókészítéshez használnak.

4. Milyen típusú logóanimáció létezik?

• 2D animáció: Egyszerű mozgások és effektusok 2D logókhoz.
• 3D animáció: Bonyolultabb és valósághűbb mozgások 3D logókhoz.
• Morfondírozás: Sima alakváltozás ill logó színei.
• Sorozat animáció: A logó összeáll vagy részenként szétesik.
• Tipográfiai animáció: Logo szöveg animáció.

5. Mennyi ideig tartson az embléma animációja?

A logó animációja általában 3-10 másodpercig tart. Fontos, hogy ne legyen túl hosszú, és ne vonja el a figyelmet a fő tartalomról.

6. Hol használhatok logóanimációt?

• Webhelyek: Tovább honlap vagy betöltőképernyőként.
• Videó: A videók nyitó és záró részében.
• Szociális hálózatok: Rövid videóbejegyzésekben vagy történetekben.
• Előadások: Vállalati és marketing előadásokon.
• hirdetés: A digitálisban és a televízióban hirdető.

7. Melyek a legjobb gyakorlatok logóanimáció készítésekor?

• Márkamegfelelőség: Az animációnak tükröznie kell a márka stílusát és értékeit.
• Nyugalom: A túl összetett animáció elvonja a néző figyelmét és lesújtó lehet.
• Minőség: Высокое качество az animáció segít professzionális arculat kialakításában.
• Tömörség: A rövid animációk hatékonyabbak és emlékezetesebbek.

8. Mennyi ideig tart egy logó animáció elkészítése?

Az elkészítési idő az animáció összetettségétől és a tervező készségeitől függ. Egy egyszerű animáció több órát is igénybe vehet, míg az összetett projektek hetekig tartó munkát igényelhetnek.

9. Milyen költségekkel jár a logó animáció elkészítése?

A költség a munka összetettségétől és a tervező tapasztalatától függően változik. Az egyszerű animáció 100-500 dollárba kerülhet, míg az összetettebb és professzionálisabb munka 1000 dollárba vagy még többbe kerülhet.

10. Animálhatok egy meglévő logót?

Igen, animálhatja meglévő logóját mozgás és effektusok hozzáadásával. Fontos megőrizni a logó eredeti stílusát és elemeit.

11. Milyen logóelemeket lehet animálni?

• szöveg: Megjelenik, eltűnik, megváltoztatja a szöveg méretét és színét.
• Grafikus elemek: Forgatás, méretezés, áthelyezés, szín és forma módosítása.
• háttér: Átmenetek, színátmenetek és egyéb vizuális effektusok.

12. A logóanimáció milyen trendjei aktuálisak ma?

• minimalizmus: Egyszerű és tiszta animációk.
• Ручная работа: Olyan effektusok, amelyek a kézzel rajzolt elemek érzetét keltik.
• 3D animáció: 3D effektusok és modellek használata.
• Színátmenetek és színátmenetek: Sima szín- és árnyalatváltozás.
• Interaktív elemek: Animáció, amely reagál a felhasználói műveletekre.