Animácia loga je proces zavádzania pohybu alebo zmien do vizuálnych prvkov v logu, aby bolo dynamickejšie a atraktívnejšie. Dá sa použiť na rôzne časti loga, ako je text, obrázky, farby a tvary, a môže mať rôzny stupeň zložitosti, od jednoduchých animácií, ako je blikanie textu alebo slabnúce farby, až po zložité animácie zahŕňajúce pohybujúce sa alebo interaktívne objekty. účinky.
Animácia loga je čoraz bežnejšia. Medzi smartfónmi a všeobecným rozvojom internetových technológií sú logá v súčasnosti oveľa bežnejšie v digitálnych priestoroch, čo otvára dvere vizuálnym efektom, ako sú animácie, ktoré nie sú možné s fyzickými produktmi. Samozrejme, rastúca popularita animácie loga znamená, že ju bude potrebovať stále viac značiek, aby zostali konkurencieschopné. Naučiť sa animovať logo teda môže byť cenná zručnosť, ktorá posunie vaše logo na ďalšiu úroveň.
Zároveň sa stal animačný softvér všadeprítomnejší, efektívnejší a intuitívnejší, aby podporil túto rastúcu používateľskú základňu. Takže bez ohľadu na to, ako technicky a zložito môže znieť animácia loga, aj začiatočníci môžu teraz vytvárať jednoduché, ale efektívne animácie.
Animácia loga v After Effects -
Krok 1. Pripravte si súbor s logom.
V skutočnosti začneme náš tutoriál o tom, ako animovať logo v aplikácii Adobe Illustrator (alebo podobnom softvéri na návrh loga). Je to potrebné na zabezpečenie toho, aby náš súbor logo nastavené na animáciu.
Hoci je samotný animačný softvér rastrový, pôvodné súbory loga musia byť vo vektorovom formáte. To vám umožní zmeniť ich bez škody pre kvalitu obrazu (napríklad pri priblížení rastrového loga dochádza k pixelizácii), čo sa vám bude hodiť neskôr pri práci s vrstvami tvarov.
Uistite sa, že je vaše logo rozdelené do vrstiev pomocou panela Vrstvy.
Logo by tiež malo byť viacvrstvové a nie zoskupené do jedného objektu. To uľahčuje vytváranie zložitejších animácií animovaním jednotlivých častí loga. Môžete vytvoriť nové vrstvy pomocou " Pridať novú vrstvu" v spodnej časti panela Vrstvy a potom do nich skopírujte a prilepte časti svojho loga.
A napokon, keďže animácia má digitálny charakter, pracujeme aj s farbami RGB. Ak je váš súbor Illustrator nastavený na CMYK, môžete to zmeniť tak, že vyberiete svoje logo a prejdete na Upraviť > Upraviť farby > Previesť na RGB.
Keď budete pripravení, exportujte svoje logo ako plne vrstvený vektorový súbor. Keďže typy súborov After Effects sú súčasťou rodiny softvéru Adobe, logo, ktoré som vytvoril, uložím ako súbor AI (Adobe Illustrator), ale ak používate iný softvér, môžete si vybrať z niekoľkých rôznych typov vektorových súborov.
Krok 2: Importujte svoje logo do After Effects. Animácia loga
Otvorte After Effects. Rozhranie sa môže na prvý pohľad zdať komplikované, poďme si teda rozobrať základy:
- Panel s nástrojmi : tu máte prístup k hlavnému grafické nástrojeako napríklad nástroj pero, nástroj na zadávanie textu atď.
- Panel projektu : Tu spravujete a organizujete mediálne súbory pre celý projekt.
- Kompozičné okno : Toto je okno ukážky videa, kde si môžete prezrieť animáciu aktuálnej kompozície (často nazývanej kompozícia), na ktorej pracujete. Kompozície sú v podstate scény, z ktorých každá má svoje vlastné samostatné animačné časové osy. Zloženiam sa budeme podrobnejšie venovať v ďalšej časti.
- Časová os : Tu vytvoríte svoju animáciu. Pozostáva z doslovnej časovej osi vpravo (kde nastavíte udalosti animácie tak, aby sa spúšťali na časovej osi) a oblasti rozloženia vľavo (kde prekryjete a upravíte atribúty svojich mediálnych aktív).
- Панель управления : Tu máte prístup k rôznym podporným funkciám, ako sú informácie o médiách, možnosti odsekov a zarovnaní a vopred vytvorené knižnice animácií a vizuálnych efektov zabudované do After Effects.
Ak si nie ste istí nástrojom alebo tlačidlom, ukážte naň myšou a zobrazí sa popis.
Ak chcete importovať súbor s logom, jednoducho ho presuňte na panel Projekt alebo vyberte súbor" > « Importovať “ > « súbor" . V ďalšom dialógovom okne vyberte možnosť Importovať médiá ako zábery a zlúčené vrstvy .
Krok 3: Nastavte si kompozíciu. Animácia loga.
Kompozícia (comp) je kontajner, ktorý vám umožňuje skladať, upravovať a aplikovať animáciu na mediálne súbory. Väčšia produkcia, ako napríklad film, bude obsahovať viacero skladieb usporiadaných v paneli projektu. Takže si môžete predstaviť stopy ako jednu scénu v tomto filme a každá stopa bude mať svoju vlastnú samostatnú časovú os. V našom prípade animácia loga, ktorá trvá menej ako päť sekúnd, vyžaduje veľmi málo kompozícií.
Ak chcete prispôsobiť kompozíciu, potiahnite mediálne súbory na ľavú stranu panela časovej osi.
Začnime s jednoduchým pozadím. Kliknite pravým tlačidlom myši na panel rozloženia a vyberte „ Vytvoriť " > « pevné" . Keďže moje logo je biele, zvolil som pevné čierna farba, ale môžete si vybrať akúkoľvek farbu. V ďalšom okne pomenujte teleso (v mojom prípade "BG"), kliknite na tlačidlo " Urobte veľkosť počítač" a zvoľte " Dobre " . Teraz potiahnite súbor s logom z panela Projekt na panel Časová os a v okne kompozície by ste mali vidieť ukážku svojho loga. Ak nie, nezabudnite zmeniť usporiadanie vrstiev potiahnutím plného pozadia pod súbor s logom.
Kliknite pravým tlačidlom myši na súbor s logom na paneli rozloženia a vyberte Vytvoriť " > « Previesť na viacvrstvovú kompozíciu" . Tým sa váš súbor s logom zmení na inú kompozíciu (uvidíte, že ikona sa zmenila). Dvojitým kliknutím na súbor s logom sa teraz otvorí nová karta a dostanete sa do tejto novej kompozície obsahujúcej všetky jednotlivé vrstvy, ktoré ste nastavili v Illustratore. Teraz môžete vidieť, ako kompy fungujú: sú v podstate ako podpriečinky.
Animácia loga
Ak chcete, môžete každú z týchto vrstiev previesť na samostatné kompozície kliknutím pravým tlačidlom myši a výberom Predbežné zloženie" . To dá tejto vrstve vlastnú časovú os animácie vnorenú do predchádzajúcej kompozície. A ak chcete animovať celé logo naraz, mali by ste použiť časovú os spojenú s hlavnou kompozíciou.
S tým preč, poďme pochopiť, ako tieto časové osi fungujú pre animáciu.
Krok 4: Animujte logo pomocou kľúčových snímok
After Effects (a väčšina animačného softvéru) funguje pomocou kľúčových snímok. Kľúčové snímky sú v podstate značky, ktoré môžete nastaviť na časovej osi, aby ste určili, kedy má nastať počiatočný a koncový stav vašej animácie.
Začnime napríklad veľmi jednoduchou animáciou: miznutie. K objektu sú pripojené rôzne atribúty a atribúty, ktoré sa menia v priebehu daného časového obdobia, sú v podstate animácie. Ak chcete zobraziť tieto atribúty, kliknite na ikonu Rozbaliť vedľa loga a za ním vlastnosť "Konvertovať" .
Vytvorte kľúčové snímky kliknutím na ikonu stopiek vedľa položky Vlastnosti na paneli Časová os.
Pre slabnúcu animáciu chcete pracovať s atribútom, ktorý meria viditeľnosť objektu: nepriehľadnosť. Nepriehľadnosť je nastavená na 100 %, pretože v predvolenom nastavení je logo úplne viditeľné.
Kliknite na ikonu stopiek vedľa možnosti Opacity a uvidíte diamant, kde je nastavená značka prehrávacej hlavy (slabá modrá čiara pretínajúca časovú os). Toto je kľúčová snímka, v podstate snímka aktuálnej hodnoty zadaného atribútu. Presuňte kľúčovú snímku kliknutím a potiahnutím na značku 2 sekúnd na časovej osi. Posuňte posúvač späť na značku 0 sekúnd, potom vytvorte ďalšiu kľúčovú snímku a nastavte nepriehľadnosť na 0 %. Stlačením medzerníka zobrazíte animáciu v okne kompozície.
After Effects
Uvidíte, že ste vytvorili plynulú animáciu prechodu zmenou nepriehľadnosti z 0 % na 100 % za 2 sekundy iba s dvoma kľúčovými snímkami. Takto sa robí všetka animácia v After Effects. Počiatočnú kľúčovú snímku a koncovú kľúčovú snímku môžete vytvoriť v rôznych intervaloch na časovej osi a After Effects automaticky vypočíta potrebné prechody snímok, aby ste sa dostali z bodu A do bodu B (tradične nazývané snímky doplnenia v animácii).
Jednoduchá plynulá animácia je vytvorená pomocou dvoch kľúčových snímok pre vlastnosť Opacity.
Môžete vidieť, že existuje množstvo atribútov, s ktorými môžete pracovať Transformácia majetku, ktoré tu stručne vysvetlíme. Neváhajte experimentovať s kľúčovými snímkami a upravte každú z nich, aby ste získali predstavu o ich schopnostiach animácie:
- pozície : Tento atribút popisuje polohu loga v priestore X, Y na obrazovke rozloženia a umožňuje animovať lineárny pohyb.
- mierka : Tento atribút popisuje veľkosť loga (ako percento plnej veľkosti pôvodného súboru) a umožňuje vytvárať animácie priblíženia alebo zmenšenia.
- otáčania : Tento atribút popisuje orientáciu v stupňoch a umožňuje vám vytvárať animácie otáčania.
Rada od profesionála :
Pokiaľ ide o animáciu loga, má zmysel pracovať spätne (ako sme to urobili s fade-in), pretože animácia by mala skončiť na hotovom úplnom logu. To znamená, že musíte vytvoriť kľúčové snímky predtým, ako niečo zmeníte, aby ste mali snímky hodnôt atribútov v ich predvolenom stave. Potom môžete tieto kľúčové snímky presunúť do požadovaného koncového bodu na časovej osi (akokoľvek dlho chcete, aby animácia trvala) a vytvoriť nové kľúčové snímky pre zmeny na začiatku časovej osi.
Krok 5. Animujte logo pomocou vrstiev tvaru.
Teraz prejdime k zaujímavejším animačným technikám pomocou vrstiev tvarov. Vrstvy tvarov sú objekty, ktoré obsahujú informácie o ceste, ako sú kotviace body a spojovacie čiary (podobné tým vo vektorových programoch), a manipulácia s nimi otvára dvere k celej škále možností animácie mimo Transformovať vlastnosti .
Ako si vybrať správnu farbu pre svoje logo?
Najprv prevedieme logo na vrstvu tvaru. Na paneli Layered Composition (vrstvy vytvorené v kroku 3) vyberte všetky svoje vrstvy, kliknite pravým tlačidlom myši a vyberte " Vytvoriť " > « Vytvárajte tvary z vektorovej vrstvy" . Uvidíte, že každá vrstva je duplikovaná s hviezdou vedľa nej - toto je vrstva tvaru. Vnorené pod vrstvou tvaru, nájdete Vlastnosť obsahu Okrem tohoto Transformácia majetku . Napravo od Vlastnosti obsahu uvidíte aj tlačidlo " Pridať" , čo vám umožní vybrať ešte viac atribútov na animáciu.
Vrstvy tvarov obsahujú tlačidlo Pridať (napravo od vlastnosti Obsah), ktoré vám umožňuje pridať všetky druhy animovaných vlastností, ako sú orezové cesty.
Zmena mierky objektu v aplikácii Adobe Illustrator
Orezať cesty
Pre svoje logo som použil pomerne bežnú a užitočnú animáciu pomocou vlastnosti Trim Paths. Na tento účel som pridal „Cesty orezania“ pomocou tlačidla „ Pridať" do vrstiev tvaru pre každé písmeno, nastavte kľúčovú snímku s atribútom End na 0 % na začiatku časovej osi a 100 % po približne 1 sekunde. Ako vidíte, obrys písmen sa zdá byť nakreslený neviditeľnou rukou v reálnom čase.
Použitie vlastnosti Trim Paths vám umožňuje animovať čiary tak, aby sa kreslili v reálnom čase.
Okrem toho som chcel pridať nejakú akcentovú animáciu na pozadie. Keďže pracujem čiernobielo, zvolil som efekt slučkového tunela pripomínajúci Twilight Zone. Na tento účel som použil nástroj mnohouholník na paneli Nástroje na nakreslenie tvaru do stredu mojej kompozície, čím som vytvoril novú vrstvu tvaru.
Potom som pridal vlastnosť Repeater, vycentroval pozíciu a zvýšil počet kópií. Toto duplikuje tvar a vytvára zdanlivo nekonečný tunel. Úpravou mierky sa zväčší priestor medzi jednotlivými kópiami a zmenou otočenia sa kópie orientujú v rôznych smeroch pre vizuálny záujem.
Nakoniec, aby som to okorenil, na začiatku časovej osi som kľúčovým spôsobom zarámoval offset 0 a neskôr som ho na časovej osi nastavil na zápornú hodnotu.
Pomocou vrstvy polygonálneho tvaru a vlastnosti Repeater sa mi podarilo vytvoriť animované pozadie.
Pravdepodobne ste uhádli, že existuje veľa možností pre vrstvy tvaru. Je to pravda: existujú kompletné online kurzy na túto tému venované tejto téme a mali by ste si nájsť čas na experimentovanie, cvičenie a učenie sa.
Tiež vám neviem povedať, ktorý štýl animácie vám bude vyhovovať logo alebo aké konkrétne nástroje animácie, ktoré budete potrebovať na dosiahnutie tohto štýlu. Môžem vám však poradiť, ako ho objaviť pre seba. Hľadajte inšpiráciu v iných animovaných logách, ako sú vaši konkurenti, značky, ktoré obdivujete, a/alebo stránky ako Pinterest alebo Dribbble – presne tak, ako ste to robili, keď ste pôvodne vytvorili logo.
Zistíte, že keď ich začnete analyzovať pomocou svojich nových vedomostí o tom, ako animovať logo, mnohé z nich sú založené na jednoduchých manipulácií s tvarmi a premenami (aj tými, ktoré sú zreteľne vrstvené s pokročilými štylizovanými efektmi). Keď nájdete niekoľko, ktoré sa vám páčia, môžete v After Effects pracovať spätne a pokúsiť sa spätne analyzovať tieto animácie na precvičenie.
Krok 6: Nastavte čas.
Poďme sa baviť o čase, ktorý popisuje tempo snímok animácie v priebehu animácie. Vizuálne znázornenie času si môžete pozrieť v editore grafov. Ak to chcete urobiť, kliknite na ikonu grafu (označenú ako Editor grafov, keď na ňu umiestnite kurzor myši) v hornej časti panela časovej osi a tým sa časová os zmení na čiarový graf.
Ak kliknete na jeden z atribútov kľúčovej snímky, uvidíte priamu čiaru od jednej kľúčovej snímky k ďalšej. Práve teraz, keďže sme určovali len počiatočné a koncové body, nechali sme After Effects, aby sme spravili načasovanie. Bez smeru posúva After Effects každý snímok animácie rovnomerne, výsledkom čoho je dokonale priama čiara.
Editor grafov zobrazuje časovanie kľúčových snímok, ako je znázornené na čiarovom grafe.
Účelná zmena v čase je však to, čo dodáva animácii pocit realizmu. Napríklad v animácii odrážajúcej sa lopty sa lopta pohybuje pomalšie vo výške odrazu a rýchlejšie, keď sa približuje k zemi v dôsledku hybnosti a gravitácie. Inými slovami, počas celej animácie sa nepohybuje rovnakou rýchlosťou a ak by sa tak hýbal, vyčnieval by ako robot.
Bezierove nástroje, ktoré sa nachádzajú v spodnej časti editora grafov, vám umožňujú upraviť zakrivenie čiary grafu.
Previesť kľúčové snímky na Auto Bezier
Editor grafov vám umožňuje upraviť načasovanie vlastnej animácie pomocou takzvaných Bezierových rukovätí na transformáciu čiary grafu na krivku. V pravom dolnom rohu editora grafov uvidíte niekoľko štvorcových bodkových ikon pripojených k čiaram – toto sú Bezierove nástroje.
Kliknite na jednu z kľúčových snímok a umiestnite kurzor myši na nástroje Bezier, kým nenájdete snímku s označením „ Previesť kľúčové snímky na Auto Bezier" . Keď na to kliknete, v grafe sa objaví žltá značka. Potiahnutím tejto rukoväte sa čiara ohne a tým sa zmení načasovanie vašej animácie. Ak je krivka výraznejšia, snímky sa budú prehrávať rýchlejšie a kde je krivka plynulejšia, snímky sa budú prehrávať pomalšie.
Ostrejšia krivka zodpovedá rýchlejšej synchronizácii a hladšia krivka zodpovedá pomalšej synchronizácii.
Skutočné pochopenie nuansy úpravy vlastného načasovania vyžaduje skúsenosti s animáciou, a preto je manuálne nastavenie Bézierových kriviek pokročilejšou témou. V tejto príručke pre začiatočníkov odporúčam použiť nástroj Bezier Ľahká Ľahkosť (ktorý aplikuje automatickú krivku na kľúčovú snímku, ktorú vyberiete) pre všetky časové intervaly animácie. Môžete sa prihlásiť Ľahká Ľahkosť na kľúčovú snímku mimo editora diagramov výberom kľúčovej snímky a kliknutím pravým tlačidlom myši.
Krok 7: Exportujte svoje logo.
Keď ste pripravení exportovať hotové animované logo, vyberte „ súbor" > « Export" > « Pridať Adobe Media Encoder do frontu" . After Effects sa predvolene exportuje súbor vo formáte mp4, ktorý je vhodný pre video. Keďže chceme vytvoriť súbor s obrázkom nášho loga, ktorý možno zdieľať, exportujeme ho ako animovaný GIF. V okne Media Encoder kliknite na šípku vedľa zvýrazneného modrého riadku textu pod slovom „Formátovať“ a vyberte „ Animovaný GIF" . Môžete tiež nastaviť cieľový priečinok pre hotový súbor kliknutím na modrý text pod slovami „Výstupný súbor“.
Ak chcete exportovať súbor, prejdite do ponuky Súbor > Exportovať > Pridať do frontu Adobe Media Encoder a v rozbaľovacom zozname v stĺpci Formát vyberte položku Animovaný Gif.
Dvakrát kliknite na zvýraznený modrý text pod predvoľbou, aby ste otvorili okno Možnosti exportu. Existuje niekoľko možností, na ktoré by ste sa mali pozrieť, aby ste zmenšili veľkosť súboru: Kvalita (nastavil som ju na 20), Frame Rate (nastavil som ju na 10, aj keď pre video sa odporúča vyššia snímková frekvencia (fps)) a Trvanie, čo je modrý pruh pod náhľadom (moje som skrátil na 4 sekundy). Vyberte dobre, zatvorte toto okno.
Keď skončíte, vyberte zelenú ikonu Prehrať v pravom hornom rohu Media Encoder a váš súbor sa zobrazí vo vami zvolenom cieľovom priečinku. To je všetko: dokončená animácia loga!
Oživte svoju značku pomocou animácie loga.
-
Animácia loga je viac než len populárny trend, ktorý sú značky nútené nasledovať. Animácia loga má tiež nepopierateľné kúzlo a je to skvelý spôsob, ako vytvoriť moment vizuálneho potešenia pre každého, kto komunikuje s vašou značkou. Našťastie sa animačný softvér vyvinul tak, že takmer každý, bez ohľadu na zručnosti, môže pridať trochu tohto kúzla do svojho vlastného loga.
Aj keď je tento návod určený na to, aby vám pomohol začať so základmi animácie loga, vyžaduje si to veľa pokusov a omylov, praxe a experimentov, aby ste dostali čokoľvek nad rámec základnej animácie. Ak chcete skutočne špeciálnu animáciu loga, investícia do profesionálneho animátora loga sa oplatí.
Оставить комментарий