Logotypanimering

Logotypanimering är processen att introducera rörelse eller förändringar av de visuella elementen i en logotyp för att göra den mer dynamisk och attraktiv. Det kan appliceras på olika delar av en logotyp, såsom text, bilder, färger och former, och det kan ha olika grader av komplexitet, allt från enkla animationer som text som blinkar eller bleknar färger, till komplexa animationer som involverar objekt som rör sig eller interaktiva effekter.

Logotypanimering blir allt vanligare. Mellan smartphones och den allmänna utvecklingen av internetteknik är logotyper nu mycket vanligare i digitala utrymmen, och detta öppnar dörren till visuella effekter som animering som inte är möjliga med fysiska produkter. Naturligtvis innebär den växande populariteten för logotypanimering att fler och fler varumärken kommer att behöva den för att förbli konkurrenskraftiga. Så att lära sig hur man animerar en logotyp kan vara en värdefull färdighet som tar din logotyp till nästa nivå.

Hur väljer man rätt färg för din logotyp?

Samtidigt har animationsmjukvaran också blivit mer allmänt förekommande, strömlinjeformad och intuitiv för att stödja denna växande användarbas. Så, oavsett hur teknisk och komplex logotypanimering kan låta, kan även nybörjare nu skapa enkla men effektiva animationer.

 

Logotypanimering i After Effects -

Steg 1. Förbered din logotypfil.

Vi börjar faktiskt vår handledning om hur man animerar en logotyp i Adobe Illustrator (eller liknande logotypdesignprogram). Detta är nödvändigt för att säkerställa att vår fil logotyp inställd för animering.

Logga registrering

Även om själva animeringsmjukvaran är raster, måste de ursprungliga logotyperna vara i vektorformat. Detta gör att du kan ändra dem utan skada för bildkvalitet (exempelvis att öka skalan på en rasterlogotyp leder till pixelering), och detta kommer att vara användbart senare när du arbetar med formlager.

Logotypen bör också vara flerskiktad snarare än grupperad i ett objekt. Detta gör det enkelt att skapa mer komplexa animationer genom att animera enskilda delar av logotypen. Du kan skapa nya lager med "  Lägg till nytt lager" längst ned på panelen Lager och kopiera sedan och klistra in delar av din logotyp i dem.

Slutligen, eftersom animering är digital till sin natur, arbetar vi också med RGB-färger. Om din Illustrator-fil är inställd på CMYK kan du ändra detta genom att välja din logotyp och navigera till Redigera > Redigera färger > Konvertera till RGB.

När du är redo exporterar du din logotyp som en vektorfil i hela lager. Eftersom After Effects-filtyper är en del av Adobes programvarufamilj, kommer jag att spara logotypen jag skapade som en AI-fil (Adobe Illustrator), men det finns flera olika typer av vektorfiler att välja mellan om du använder annan programvara.

Steg 2: Importera din logotyp till After Effects. Logotypanimering

Öppna After Effects. Gränssnittet kan verka komplicerat vid första anblicken, så låt oss bryta ner grunderna:

 

1. verktygsfältet : här kan du komma åt huvudsidan grafiska verktygsåsom pennverktyget, typverktyget, etc.
2. Projektpanel : Det är här du hanterar och organiserar mediafiler för hela projektet.
3. Kompositionsfönster : Detta är ett videoförhandsgranskningsfönster där du kan förhandsgranska animeringen för den aktuella kompositionen (kallas ofta en komposition) du arbetar med. Kompositioner är i huvudsak scener, var och en med sina egna separata animationstidslinjer. Vi kommer att diskutera kompositioner mer i detalj i nästa avsnitt.
4. Tidslinje : Det är här du kommer att skapa din animation. Den består av både en bokstavlig tidslinje till höger (där du ställer in animationshändelser som ska köras på tidslinjen) och ett layoutområde till vänster (där du ska lägga över och redigera attributen för dina medietillgångar).
5. Kontrollpanelen : Här kan du komma åt olika stödjande funktioner som mediainformation, stycke- och justeringsalternativ och förbyggda animations- och visuella effektbibliotek inbyggda i After Effects.

Om du är osäker på ett verktyg eller en knapp kan du få en beskrivning genom att hålla musen över den.

För att importera en logotypfil, dra den helt enkelt till projektpanelen eller välj  Fil"  > "  Importera"  > "  Fil" . I nästa dialogruta väljer du Importera media som  film och sammanslagna lager .

Steg 3: Ställ in din komposition. Logotypanimering.

En komposition (komp) är en behållare som låter dig komponera, redigera och applicera animationer på mediefiler. En större produktion, till exempel en film, kommer att innehålla flera spår organiserade i en projektpanel. Så du kan tänka på spåren som en enda scen i den filmen, och varje spår kommer att ha sin egen separata tidslinje. I vårt fall kräver en logotypanimering som varar mindre än fem sekunder väldigt få kompositioner.

Låt oss börja med en enkel bakgrund. Högerklicka på layoutpanelen och välj " Skapa"  > "  Fast" . Eftersom min logga är vit valde jag solid svart färg, men du kan välja vilken färg som helst. I nästa fönster, namnge den fasta substansen (i mitt fall "BG"), klicka på "  Gör storlek  dator" och välj "  OK" . Dra nu din logotypfil från projektpanelen till panelen Tidslinje och du bör se din logotyp förhandsgranskad i kompositionsfönstret. Om inte, se till att ordna om lagren genom att dra den solida bakgrunden under logotypen.

Högerklicka på logotypfilen i layoutpanelen och välj Skapa" > " Konvertera till en flerskiktskomposition" . Detta kommer att förvandla din logotypfil till en annan sammansättning (du kommer att se att ikonen har ändrats). Genom att dubbelklicka på logotypen öppnas nu en ny flik och tar dig till den här nya kompositionen som innehåller alla individuella lager som du har ställt in i Illustrator. Nu kan du se hur comps fungerar: de är i grunden som undermappar.

Logotypanimering

Om du vill kan du konvertera vart och ett av dessa lager till separata kompositioner genom att högerklicka och välja  Preliminär sammansättning" . Detta kommer att ge detta lager en egen animeringstidslinje, kapslad i den tidigare kompositionen. Och om du vill animera hela logotypen på en gång, bör du använda en tidslinje kopplad till huvudkompositionen.

Med det ur vägen, låt oss förstå hur dessa tidslinjer fungerar för animering.

Steg 4: Animera logotypen med nyckelbildrutor

After Effects (och de flesta animeringsprogram) fungerar med nyckelbildrutor. Nyckelrutor är i huvudsak markörer som du kan ställa in på tidslinjen för att bestämma när start- och sluttillstånden för din animering ska inträffa.

Låt oss till exempel börja med en mycket enkel animation: tona in. Ett objekt har olika attribut kopplade till sig, och attribut som ändras under en given tidsperiod är i huvudsak animationer. För att se dessa attribut, klicka på ikonen Expandera bredvid logotypen följt av egenskapen "Konvertera" .

För en blekande animering vill du arbeta med attributet som mäter ett objekts synlighet: opacitet. Opaciteten är inställd på 100 % eftersom logotypen är helt synlig som standard.

Klicka på stoppursikonen bredvid alternativet Opacitet och du kommer att se en diamant där spelhuvudsmarkören är placerad (den svaga blå linjen som korsar tidslinjen). Detta är en nyckelbildruta, i grunden en ögonblicksbild av det aktuella värdet för ett specificerat attribut. Flytta nyckelbildrutan genom att klicka och dra den till 2-sekundersmarkeringen på tidslinjen. Dra skjutreglaget tillbaka till 0-sekundersmarkeringen, skapa sedan en ny nyckelbildruta och ställ in opaciteten till 0 %. Tryck på mellanslagstangenten för att visa animeringen i kompositionsfönstret.

Bieffekter

Du kommer att se att du har skapat en mjuk intoningsanimation genom att ändra opaciteten från 0 % till 100 % på 2 sekunder med bara två nyckelbildrutor. Så här görs all animering i After Effects. Du kan skapa en startnyckelbildruta och en slutnyckelbildruta med olika intervall längs tidslinjen, och After Effects beräknar automatiskt de nödvändiga bildruteövergångarna för att komma från punkt A till punkt B (traditionellt kallade interpoleringsramar i animeringsbranschen).

Du kan se att det finns ett antal attribut som du kan arbeta med i Förvandla egendom, som vi kort ska förklara här. Experimentera gärna med nyckelbildrutor och modifiera var och en för att få en känsla för deras animeringsförmåga:

• Position : Det här attributet beskriver logotypens position i X, Y-utrymmet på layoutskärmen och gör att linjära rörelser kan animeras.
• skala : Det här attributet beskriver storleken på logotypen (som en procentandel av originalfilens fulla storlek) och låter dig skapa animeringar för att zooma in eller krympa ut.
• vridning : Det här attributet beskriver orienteringen i grader och låter dig skapa rotationsanimationer.

Råd från en professionell :

När det gäller att animera en logotyp är det vettigt att arbeta baklänges (som vi gjorde med fade-in) eftersom animeringen ska sluta på den färdiga, kompletta logotypen. Det betyder att du måste skapa nyckelbildrutor innan du ändrar något så att du har ögonblicksbilder av attributvärdena i deras standardläge. Du kan sedan flytta dessa nyckelbildrutor till önskad slutpunkt på tidslinjen (hur länge du än vill att animeringen ska pågå) och skapa nya nyckelbildrutor för ändringarna i början av tidslinjen.

Steg 5. Animera logotypen med hjälp av formlager.

Låt oss nu gå vidare till mer intressanta animeringstekniker med hjälp av formlager. Formlager är objekt som innehåller väginformation såsom ankarpunkter och kopplingslinjer (liknande de i vektorprogram), och manipulering av dem öppnar dörren till en hel rad animeringsmöjligheter bortom Förvandla egenskaper .

Hur väljer man rätt färg för din logotyp?

Först ska vi konvertera logotypen till ett formlager. I panelen Layered Composition (lagren som skapades i steg 3), välj alla dina lager, högerklicka och välj "  Skapa"  > "  Skapa former från vektorlager" . Du kommer att se att varje lager är duplicerat med en stjärna bredvid - det här är ett formlager. Kapslad under formlagret, hittar du Innehållsegenskap Dessutom Förvandla egendom . Till höger om Innehållsegenskaper du kommer också att se en knapp " Lägg till" , vilket gör att du kan välja ännu fler attribut att animera.

Skala ett objekt i Adobe Illustrator

Trimningsbanor

För min logotyp använde jag en ganska vanlig och användbar animation med egenskapen Trim Paths. För att göra detta lade jag till "Crop Paths" med knappen " Lägg till" till formlagren för varje bokstav, ställ in End-attributet nyckelbildruta till 0 % i början av tidslinjen och 100 % efter cirka 1 sekund. Som du kan se verkar konturerna av bokstäverna vara ritade av en osynlig hand i realtid.

Genom att använda egenskapen Trim Paths kan du animera linjer så att de ritar sig själva i realtid.

Dessutom ville jag lägga till lite accentanimation i bakgrunden. Eftersom jag jobbar i svart och vitt valde jag en looping tunnel effekt som påminner om Twilight Zone. För att göra detta använde jag polygonverktyget i verktygspanelen för att rita en form i mitten av min komposition och skapa ett nytt formlager.

Sedan lade jag till en Repeater-egenskap, centrerade positionen och ökade antalet kopior. Detta duplicerar formen och skapar en till synes oändlig tunnel. Om du justerar skalan ökar utrymmet mellan varje kopia, och om du ändrar rotationen orienteras kopiorna i olika riktningar för visuellt intresse.

Slutligen, för att krydda det, använde jag en förskjutning på 0 i början av tidslinjen och satte den senare till ett negativt värde på tidslinjen.

Du har säkert gissat att det finns många alternativ för formlager. Det är sant: det finns kompletta onlinekurser i ämnet på Internet, och du bör ta dig tid att experimentera, öva och lära dig.

Jag kan inte heller berätta vilken animationsstil som passar din logotyp eller vilka specifika verktyg animationer du behöver för att uppnå denna stil. Däremot kan jag ge dig råd om hur du kan upptäcka det själv. Leta efter inspiration från andra animerade logotyper, som dina konkurrenter, varumärken du beundrar och/eller webbplatser som Pinterest eller Dribbble - precis som du gjorde när du ursprungligen skapade logotypen.

Du kommer att upptäcka att när du börjar analysera dem med din nya kunskap om hur man animerar en logotyp, är många av dem baserade på enkla manipulationer med former och transformationer (även de som är tydligt skiktade med avancerade stiliserade effekter). När du väl har hittat några som du gillar kan du arbeta baklänges i After Effects för att försöka reverse engineering av dessa animationer för övning.

Steg 6: Ställ in tiden.

Låt oss prata om tid, som beskriver takten för animeringsramar genom hela animeringen. Du kan se en visuell representation av tid genom att gå till Graph Editor. För att göra detta klickar du på grafikonen (märkt Graph Editor när du håller muspekaren över den) överst på tidslinjepanelen och detta kommer att ändra tidslinjen till en linjegraf.

Om du klickar på ett av nyckelbildrutornas attribut kommer du att se en rak linje från en nyckelbildruta till nästa. Just nu, eftersom vi bara nyckelbildade start- och slutpunkterna, lämnade vi After Effects för att göra timingen. Utan riktning flyttar After Effects varje bildruta i animationen jämnt, vilket resulterar i en perfekt rak linje.

Den målmedvetna förändringen i tid är dock det som ger animationen en känsla av realism. Till exempel, i en studsande boll-animation, rör sig bollen långsammare i höjd med studsen och snabbare när den närmar sig marken på grund av momentum och gravitation. Med andra ord, han rör sig inte i samma hastighet genom hela animationen, och om han gjorde det skulle han sticka ut som en robot.

Bezier-verktygen, som finns längst ner i grafredigeraren, låter dig justera kurvlinjen för graflinjen.

Konvertera nyckelbildrutor till Auto Bezier

Graph Editor låter dig justera tidpunkten för din egen animation genom att använda så kallade Bezier-handtag för att omvandla en graflinje till en kurva. I det nedre högra hörnet av grafredigeraren ser du några fyrkantiga prickikoner fästa på linjer – de här är Bezier-verktyg.

Klicka på en av nyckelbildrutorna och håll muspekaren över Bezier-verktygen tills du hittar den märkt "  Konvertera nyckelbildrutor till Auto Bezier" . När du klickar på denna kommer du att se en gul markör visas på grafen. Om du drar detta handtag kommer linjen att böjas och detta kommer att ändra tidpunkten för din animering. Där kurvan är mer uttalad kommer bildrutorna att spelas upp snabbare, och där kurvan är jämnare spelas bildrutorna upp långsammare.

För att verkligen förstå nyanserna i att justera din egen timing krävs animationserfarenhet, varför justera Bezier-kurvor manuellt är ett mer avancerat ämne. I den här nybörjarguiden rekommenderar jag att du använder Bezier-verktyget Lätt Lätthet (som tillämpar en automatisk kurva på nyckelbildrutan du väljer) för alla animeringstidsintervall. Du kan ansöka  Lätt Lätthet  till en nyckelbildruta utanför diagramredigeraren genom att välja nyckelbildrutan och högerklicka.

Steg 7: Exportera din logotyp.

När du är redo att exportera din färdiga animerade logotyp, välj " Fil" > "  Exportera"  > "  Lägg till Adobe Media Encoder i kö" . After Effects exporterar som standard fil i format mp4, som är lämplig för video. Eftersom vi vill skapa en delbar bildfil av vår logotyp exporterar vi den som en animerad GIF. I Media Encoder-fönstret klickar du på pilen bredvid den markerade blå textraden under ordet "Format" och väljer "  Animerad GIF" . Du kan också ställa in målmappen för din färdiga fil genom att klicka på den blå texten under orden "Utdatafil".

Dubbelklicka på den markerade blå texten under förinställningen för att öppna fönstret Exportalternativ. Det finns några alternativ du vill titta på för att minska din filstorlek: kvalitet (jag ställer in den på 20), bildhastighet (jag ställer in den på 10, även om högre bildhastigheter (fps) rekommenderas för video) och Duration, vilket är den blå stapeln under förhandsgranskning (jag trimmade min till 4 sekunder). Välj  OK,  för att stänga det här fönstret.

När du är klar, välj den gröna Play-ikonen i det övre högra hörnet av Media Encoder och din fil kommer att visas i din valda målmapp. Det var allt: färdig logotypanimering!

Ge ditt varumärke liv med logotypanimering.
-

Logotypanimering är mer än bara en populär trend som varumärken tvingas följa. Det finns också en obestridlig magi i logotypanimering, och det är ett utmärkt sätt att skapa ett ögonblick av visuell njutning för alla som interagerar med ditt varumärke. Och lyckligtvis har animationsmjukvaran utvecklats så att nästan vem som helst, oavsett skicklighet, kan lägga till lite av den magin till sin egen logotyp.

Med det sagt, även om den här handledningen är avsedd att komma igång med grunderna för logotypanimering, krävs det mycket försök och fel, övning och experiment för att få allt utöver grundläggande animering. Om du vill ha en riktigt speciell logotypanimering är en professionell logotypanimatör värt investeringen.

 АЗБУКА

 

Definitioner och villkor för webbdesign