Animace loga je proces zavedení pohybu nebo změn do vizuálních prvků v logu, aby bylo dynamičtější a atraktivnější. Může být aplikován na různé části loga, jako je text, obrázky, barvy a tvary, a může mít různou míru složitosti, od jednoduchých animací, jako je blikající text nebo blednutí barev, až po složité animace zahrnující objekty pohybující se nebo interaktivní. efekty.
Animace loga je stále běžnější. Mezi chytrými telefony a obecným rozvojem internetových technologií jsou nyní loga v digitálních prostorech mnohem běžnější, a to otevírá dveře vizuálním efektům, jako je animace, které u fyzických produktů nejsou možné. Rostoucí obliba animace loga samozřejmě znamená, že ji bude potřebovat stále více značek, aby zůstaly konkurenceschopné. Naučit se animovat logo tedy může být cennou dovedností, která posune vaše logo na další úroveň.
Současně se také animační software stal všudypřítomnějším, jednodušším a intuitivnějším, aby podpořil tuto rostoucí uživatelskou základnu. Bez ohledu na to, jak technická a složitá animace loga může znít, i začátečníci nyní mohou vytvářet jednoduché, ale účinné animace.
Animace loga v After Effects -
Krok 1. Připravte si soubor s logem.
Ve skutečnosti začneme náš tutoriál o tom, jak animovat logo v aplikaci Adobe Illustrator (nebo podobném softwaru pro návrh loga). To je nezbytné, abychom zajistili, že náš soubor logo nastavené pro animaci.
Přestože je samotný animační software rastrový, původní soubory loga musí být ve vektorovém formátu. To vám umožní změnit je bez poškození pro kvalitu obrazu (například přiblížení rastrového loga má za následek pixelizaci), a to se bude hodit později při práci s vrstvami tvarů.
Ujistěte se, že je vaše logo rozděleno do vrstev pomocí panelu Vrstvy.
Logo by také mělo být vícevrstvé, nikoli seskupené do jednoho objektu. Díky tomu lze snadno vytvářet složitější animace animací jednotlivých částí loga. Nové vrstvy můžete vytvořit pomocí " Přidat novou vrstvu" v dolní části panelu Vrstvy a poté do nich zkopírujte a vložte části svého loga.
A konečně, protože animace je digitální povahy, pracujeme také s barvami RGB. Pokud je váš soubor Illustratoru nastaven na CMYK, můžete to změnit tak, že vyberete své logo a přejdete na Úpravy > Upravit barvy > Převést na RGB.
Až budete připraveni, exportujte své logo jako plně vrstvený vektorový soubor. Protože typy souborů After Effects jsou součástí rodiny softwaru Adobe, uložím vytvořené logo jako soubor AI (Adobe Illustrator), ale pokud používáte jiný software, můžete si vybrat z několika různých typů vektorových souborů.
Krok 2: Importujte své logo do After Effects. Animace loga
Otevřete After Effects. Rozhraní se může na první pohled zdát složité, pojďme si tedy rozebrat základy:
- Panel nástrojů : zde máte přístup k hlavnímu grafické nástrojejako je nástroj pero, textový nástroj atd.
- Panel projektu : Zde můžete spravovat a organizovat mediální soubory pro celý projekt.
- Kompoziční okno : Toto je okno náhledu videa, kde si můžete prohlédnout animaci pro aktuální kompozici (často nazývanou kompozici), na které pracujete. Kompozice jsou v podstatě scény, z nichž každá má vlastní samostatnou časovou osu animace. Kompozici si podrobněji probereme v další části.
- Časová osa : Zde vytvoříte svou animaci. Skládá se jak z doslovné časové osy vpravo (kde nastavíte události animace, které se mají spouštět na časové ose), tak z oblasti rozvržení vlevo (kde překryjete a upravíte atributy svých mediálních prostředků).
- Ovládací panel : Zde máte přístup k různým podpůrným funkcím, jako jsou informace o médiích, možnosti odstavců a zarovnání a předem vytvořené knihovny animací a vizuálních efektů zabudované do After Effects.
Pokud si nejste jisti nástrojem nebo tlačítkem, najedete na něj myší a zobrazí se vám popis.
Chcete-li importovat soubor loga, jednoduše jej přetáhněte do panelu Projekt nebo vyberte Soubor" > „ Import" > „ Soubor" . V dalším dialogovém okně vyberte Importovat média jako záběry a sloučené vrstvy .
Krok 3: Nastavte si kompozici. Animace loga.
Kompozice (comp) je kontejner, který umožňuje skládat, upravovat a aplikovat animaci na mediální soubory. Větší produkce, jako je film, bude obsahovat více stop uspořádaných v projektovém panelu. Takže si můžete představit stopy jako jednu scénu v tomto filmu a každá stopa bude mít svou vlastní samostatnou časovou osu. V našem případě animace loga, která trvá méně než pět sekund, vyžaduje velmi málo kompozic.
Chcete-li upravit svou kompozici, přetáhněte mediální soubory na levou stranu panelu časové osy.
Začněme jednoduchým pozadím. Klikněte pravým tlačítkem myši na panel rozložení a vyberte „ Vytvořit" > „ Pevný" . Protože moje logo je bílé, zvolil jsem pevné černá barva, ale můžete si vybrat jakoukoli barvu. V dalším okně pojmenujte těleso (v mém případě "BG"), klikněte na " Udělejte velikost počítač“ a vyberte „ OK" . Nyní přetáhněte soubor svého loga z panelu Projekt na panel Časová osa a měli byste vidět náhled svého loga v okně kompozice. Pokud ne, nezapomeňte vrstvy uspořádat přetažením plného pozadí pod soubor loga.
Klepněte pravým tlačítkem myši na soubor loga v panelu rozvržení a vyberte Vytvořit" > „ Převést na vícevrstvou kompozici" . Tím se váš soubor loga změní na jinou kompozici (uvidíte, že se ikona změnila). Poklepáním na soubor loga se nyní otevře nová karta a dostanete se do této nové kompozice obsahující všechny jednotlivé vrstvy, které jste nastavili v Illustratoru. Nyní můžete vidět, jak kompy fungují: jsou v podstatě jako podsložky.
Animace loga
Pokud chcete, můžete každou z těchto vrstev převést na samostatné kompozice kliknutím pravým tlačítkem myši a výběrem Předběžné složení" . To dá této vrstvě vlastní časovou osu animace vnořenou do předchozí kompozice. A pokud chcete animovat celé logo najednou, měli byste použít časovou osu spojenou s hlavní kompozicí.
S tím mimo, pojďme pochopit, jak tyto časové osy fungují pro animaci.
Krok 4: Animujte logo pomocí klíčových snímků
After Effects (a většina animačního softwaru) funguje pomocí klíčových snímků. Klíčové snímky jsou v podstatě značky, které můžete nastavit na časové ose a určit, kdy má nastat počáteční a koncový stav vaší animace.
Začněme například velmi jednoduchou animací: prolínání. K objektu jsou připojeny různé atributy a atributy, které se v průběhu daného časového období mění, jsou v podstatě animace. Chcete-li tyto atributy zobrazit, klikněte na ikonu Rozbalit vedle loga a poté na ikonu vlastnost "Převést" .
Vytvořte klíčové snímky kliknutím na ikonu stopek vedle Vlastnosti na panelu Časová osa.
U animace slábnutí chcete pracovat s atributem, který měří viditelnost objektu: opacity. Neprůhlednost je nastavena na 100 %, protože ve výchozím nastavení je logo zcela viditelné.
Klikněte na ikonu stopek vedle možnosti Opacity a uvidíte kosočtverec, kde je nastavena značka přehrávací hlavy (slabá modrá čára protínající časovou osu). Toto je klíčový snímek, v podstatě snímek aktuální hodnoty zadaného atributu. Přesuňte klíčový snímek kliknutím a přetažením na značku 2 sekund na časové ose. Přetáhněte posuvník zpět na značku 0 sekund, poté vytvořte další klíčový snímek a nastavte krytí na 0 %. Stisknutím mezerníku zobrazíte animaci v okně kompozice.
After Effects
Uvidíte, že jste vytvořili plynulou animaci prolínání změnou krytí z 0 % na 100 % za 2 sekundy s pouhými dvěma klíčovými snímky. Takto se provádí veškerá animace v After Effects. Počáteční klíčový snímek a koncový klíčový snímek můžete vytvořit v různých intervalech na časové ose a After Effects automaticky vypočítá potřebné přechody snímků, abyste se dostali z bodu A do bodu B (tradičně nazývané snímky doplnění v oboru animace).
Jednoduchá plynulá animace je vytvořena pomocí dvou klíčových snímků pro vlastnost Opacity.
Vidíte, že existuje řada atributů, se kterými můžete pracovat Transformovat nemovitost, které zde stručně vysvětlíme. Nebojte se experimentovat s klíčovými snímky a každý z nich upravte, abyste získali představu o jejich schopnostech animace:
- Pozice : Tento atribut popisuje polohu loga v prostoru X, Y na obrazovce rozvržení a umožňuje animaci lineárního pohybu.
- Měřítko : Tento atribut popisuje velikost loga (jako procento plné velikosti původního souboru) a umožňuje vytvářet animace přiblížení nebo zmenšení.
- Rotace : Tento atribut popisuje orientaci ve stupních a umožňuje vytvářet animace otáčení.
Rada od profesionála :
Pokud jde o animaci loga, má smysl pracovat pozpátku (jako jsme to dělali s fade-in), protože animace by měla končit na hotovém, kompletním logu. To znamená, že musíte vytvořit klíčové snímky, než cokoli změníte, abyste měli snímky hodnot atributů v jejich výchozím stavu. Tyto klíčové snímky pak můžete přesunout do požadovaného koncového bodu na časové ose (jak dlouho chcete, aby animace trvala) a vytvořit nové klíčové snímky pro změny na začátku časové osy.
Krok 5. Animujte logo pomocí vrstev tvaru.
Nyní přejdeme k zajímavějším technikám animace pomocí vrstev tvarů. Vrstvy tvarů jsou objekty, které obsahují informace o cestě, jako jsou kotevní body a spojnice (podobné těm ve vektorových programech), a manipulace s nimi otevírá dveře k celé řadě možností animace za hranicemi. Transformovat vlastnosti .
Jak vybrat správnou barvu pro vaše logo?
Nejprve převedeme logo na vrstvu tvaru. Na panelu Layered Composition (vrstvy vytvořené v kroku 3) vyberte všechny vrstvy, klikněte pravým tlačítkem a vyberte " Vytvořit" > „ Vytvářejte tvary z vektorové vrstvy" . Uvidíte, že každá vrstva je duplikována a vedle ní je hvězdička – toto je vrstva tvaru. Vnořeno pod vrstvou tvaru, najdete Vlastnost obsahu navíc Transformovat nemovitost . Napravo od Vlastnosti obsahu také uvidíte tlačítko " Přidat" , což vám umožní vybrat ještě více atributů k animaci.
Vrstvy tvaru obsahují tlačítko Přidat (napravo od vlastnosti Obsah), které vám umožňuje přidat všechny druhy animovaných vlastností, jako jsou ořezové cesty.
Změna měřítka objektu v Adobe Illustratoru
Ořízněte cesty
Pro své logo jsem použil celkem běžnou a užitečnou animaci pomocí vlastnosti Trim Paths. K tomu jsem přidal "Cesty oříznutí" pomocí tlačítka " Přidat" do vrstev tvaru pro každé písmeno nastavte klíčový snímek atributu End na 0 % na začátku časové osy a 100 % po přibližně 1 sekundě. Jak vidíte, obrys písmen se zdá být nakreslen neviditelnou rukou v reálném čase.
Použití vlastnosti Trim Paths umožňuje animovat čáry tak, aby se samy kreslily v reálném čase.
Navíc jsem chtěl přidat nějakou akcentovou animaci na pozadí. Jelikož pracuji černobíle, zvolil jsem efekt smyčkového tunelu připomínající Twilight Zone. K tomu jsem použil nástroj mnohoúhelník na panelu nástrojů k nakreslení tvaru do středu mé kompozice, čímž jsem vytvořil novou vrstvu tvaru.
Pak jsem přidal vlastnost Repeater, vycentroval pozici a zvýšil počet kopií. To duplikuje tvar a vytváří zdánlivě nekonečný tunel. Úprava měřítka zvětší prostor mezi každou kopií a změna otočení orientuje kopie v různých směrech pro vizuální zajímavost.
Nakonec, abych to okořenil, jsem na začátku časové osy klíčoval offset 0 a později jsem jej na časové ose nastavil na zápornou hodnotu.
Pomocí vrstvy polygonálního tvaru a vlastnosti Repeater jsem byl schopen vytvořit animované pozadí.
Pravděpodobně jste uhodli, že existuje mnoho možností pro vrstvy tvarů. Je to pravda: na internetu jsou kompletní online kurzy na toto téma a měli byste si udělat čas experimentovat, cvičit a učit se.
Také vám nemohu říci, který styl animace vám bude vyhovovat logo nebo jaké konkrétní nástroje animací, které budete k dosažení tohoto stylu potřebovat. Mohu vám však poradit, jak to sami objevit. Hledejte inspiraci v jiných animovaných logách, jako jsou vaši konkurenti, značky, které obdivujete, a/nebo stránky jako Pinterest nebo Dribbble – stejně jako jste to dělali, když jste logo původně vytvořili.
Zjistíte, že jakmile je začnete analyzovat pomocí svých nových znalostí o tom, jak animovat logo, mnoho z nich je založeno na jednoduchých manipulace s tvary a proměnami (i těmi, které jsou zřetelně vrstvené pokročilými stylizovanými efekty). Jakmile najdete několik, které se vám líbí, můžete v After Effects pracovat zpětně a pokusit se tyto animace procvičit zpětně.
Krok 6: Nastavte čas.
Pojďme se bavit o čase, který popisuje tempo animačních snímků v průběhu animace. Vizuální znázornění času můžete vidět v Editoru grafů. Chcete-li to provést, klikněte na ikonu grafu (označenou jako Editor grafů, když na ni najedete myší) v horní části panelu časové osy a tím se časová osa změní na spojnicový graf.
Pokud kliknete na jeden z atributů klíčového snímku, uvidíte rovnou čáru od jednoho klíčového snímku k dalšímu. Právě teď, protože jsme klíčovali pouze počáteční a koncové body, nechali jsme After Effects, aby načasování provedli. Bez směru posouvá After Effects každý snímek animace rovnoměrně, výsledkem je dokonale rovná čára.
Editor grafů zobrazuje časování klíčových snímků, jak je znázorněno na spojnicovém grafu.
Účelná změna v čase je však to, co dodává animaci pocit realističnosti. Například v animaci skákajícího míče se míč pohybuje pomaleji ve výšce odrazu a rychleji, když se přibližuje k zemi v důsledku hybnosti a gravitace. Jinými slovy, nepohybuje se stejnou rychlostí po celou dobu animace, a pokud ano, vyčníval by jako robot.
Bezierovy nástroje umístěné ve spodní části editoru grafů umožňují upravit zakřivení čáry grafu.
Převést klíčové snímky na Auto Bezier
Editor grafů vám umožňuje upravit načasování vlastní animace pomocí takzvaných Bezierových úchytů k transformaci čáry grafu na křivku. V pravém dolním rohu editoru grafů uvidíte několik ikon čtvercových teček připojených k čarám – jedná se o Bezierovy nástroje.
Klikněte na jeden z klíčových snímků a umístěte ukazatel myši na nástroje Bezier, dokud nenajdete snímek označený „ Převést klíčové snímky na Auto Bezier" . Když na to kliknete, uvidíte v grafu žlutou značku. Přetažením tohoto úchytu se čára ohne a tím se změní načasování animace. Kde je křivka výraznější, budou se snímky přehrávat rychleji, a kde je křivka plynulejší, budou se snímky přehrávat pomaleji.
Ostřejší křivka odpovídá rychlejší synchronizaci a hladší křivka pomalejší synchronizaci.
Skutečné pochopení nuancí úpravy vlastního načasování vyžaduje zkušenost s animací, a proto je ruční úprava Bézierových křivek pokročilejším tématem. V této příručce pro začátečníky doporučuji použít nástroj Bezier Snadná Snadnost (který aplikuje automatickou křivku na vybraný klíčový snímek) pro všechny časové intervaly animace. Můžete se přihlásit Snadná Snadnost na klíčový snímek mimo editor diagramu výběrem klíčového snímku a kliknutím pravým tlačítkem.
Krok 7: Exportujte své logo.
Až budete připraveni exportovat hotové animované logo, vyberte „ Soubor" > „ Vývozní" > „ Přidat Adobe Media Encoder do fronty" . After Effects exportuje ve výchozím nastavení soubor ve formátu mp4, který je vhodný pro video. Protože chceme vytvořit soubor obrázku našeho loga, který lze sdílet, vyexportujeme jej jako animovaný GIF. V okně Media Encoder klikněte na šipku vedle zvýrazněného modrého řádku textu pod slovem „Formátovat“ a vyberte „ Animovaný GIF" . Můžete také nastavit cílovou složku pro hotový soubor kliknutím na modrý text pod slovy „Výstupní soubor“.
Chcete-li exportovat soubor, přejděte na Soubor > Exportovat > Přidat do fronty Adobe Media Encoder a vyberte Animovaný Gif z rozevíracího seznamu ve sloupci Formát.
Poklepáním na zvýrazněný modrý text pod předvolbou otevřete okno Možnosti exportu. Existuje několik možností, na které se budete chtít podívat, jak zmenšit velikost souboru: Kvalita (nastavil jsem ji na 20), Frame Rate (nastavil jsem ji na 10, i když pro video se doporučují vyšší snímkové frekvence (fps)) a Duration, což je modrý pruh pod náhledem (ten jsem zkrátil na 4 sekundy). Vybrat OK, pro zavření tohoto okna.
Až budete hotovi, vyberte zelenou ikonu Přehrát v pravém horním rohu Media Encoder a váš soubor se zobrazí ve vámi zvolené cílové složce. To je ono: dokončená animace loga!
Oživte svou značku pomocí animace loga.
-
Animace loga je víc než jen populární trend, který jsou značky nuceny následovat. Animace loga má také nepopiratelné kouzlo a je to skvělý způsob, jak vytvořit okamžik vizuálního potěšení pro každého, kdo je v interakci s vaší značkou. A naštěstí se animační software vyvinul tak, že téměř každý, bez ohledu na dovednosti, může přidat trochu toho kouzla do svého vlastního loga.
I když je tento tutoriál určen k tomu, abyste začali se základy animace loga, je potřeba hodně pokusů a omylů, praxe a experimentů, abyste získali něco nad rámec základní animace. Pokud chcete opravdu speciální animaci loga, vyplatí se investovat do profesionálního animátora loga.
Zanechat komentář