Logo-animatie is het proces waarbij beweging of veranderingen in de visuele elementen in een logo worden geïntroduceerd om het dynamischer en aantrekkelijker te maken. Het kan worden toegepast op verschillende delen van een logo, zoals tekst, afbeeldingen, kleuren en vormen, en kan een verschillende mate van complexiteit hebben, variërend van eenvoudige animaties zoals knipperende tekst of vervagende kleuren, tot complexe animaties waarbij objecten bewegen of interactief zijn. Effecten.
Logo-animatie wordt steeds gebruikelijker. Tussen smartphones en de algemene ontwikkeling van internettechnologie komen logo's nu veel vaker voor in digitale ruimtes, en dit opent de deur naar visuele effecten zoals animatie die niet mogelijk zijn met fysieke producten. De groeiende populariteit van logo-animatie betekent uiteraard dat steeds meer merken het nodig zullen hebben om concurrerend te blijven. Het leren animeren van een logo kan dus een waardevolle vaardigheid zijn die uw logo naar een hoger niveau tilt.
Tegelijkertijd is animatiesoftware alomtegenwoordiger, gestroomlijnder en intuïtiever geworden om deze groeiende gebruikersbasis te ondersteunen. Dus hoe technisch en complex logo-animatie ook mag klinken, zelfs beginners kunnen nu eenvoudige maar effectieve animaties maken.
Logo-animatie in After Effects -
Stap 1. Bereid uw logobestand voor.
We beginnen eigenlijk met onze tutorial over het animeren van een logo in Adobe Illustrator (of vergelijkbare logo-ontwerpsoftware). Dit is nodig om ervoor te zorgen dat ons bestand logo opgezet voor animatie.
Hoewel de animatiesoftware zelf raster is, moeten de originele logobestanden in vectorformaat zijn. Hierdoor kunt u ze zonder wijzigingen wijzigen schade voor de beeldkwaliteit (inzoomen op een rasterlogo resulteert bijvoorbeeld in pixelvorming), en dit zal later handig zijn bij het werken met vormlagen.
Zorg ervoor dat uw logo in lagen is verdeeld met behulp van het deelvenster Lagen.
Het logo moet ook uit meerdere lagen bestaan en niet in één object zijn gegroepeerd. Dit maakt het eenvoudig om complexere animaties te maken door afzonderlijke delen van het logo te animeren. U kunt nieuwe lagen maken met behulp van de " Nieuwe laag toevoegen" onder aan het deelvenster Lagen en kopieer en plak vervolgens delen van uw logo erin.
Omdat animatie digitaal van aard is, werken we tenslotte ook met RGB-kleuren. Als uw Illustrator-bestand is ingesteld op CMYK, kunt u dit wijzigen door uw logo te selecteren en naar Bewerken > Kleuren bewerken > Converteren naar RGB te gaan.
Wanneer u klaar bent, exporteert u uw logo als een volledig gelaagd vectorbestand. Omdat After Effects-bestandstypen deel uitmaken van de Adobe-softwarefamilie, ga ik het logo dat ik heb gemaakt opslaan als een AI-bestand (Adobe Illustrator), maar er zijn verschillende soorten vectorbestanden waaruit u kunt kiezen als u andere software gebruikt.
Stap 2: Importeer uw logo in After Effects. Logo-animatie
Open After Effects. De interface lijkt op het eerste gezicht misschien ingewikkeld, dus laten we de basisbeginselen op een rij zetten:
- toolbar : hier heeft u toegang tot de hoofdpagina grafische hulpmiddelenzoals het gereedschap Pen, het gereedschap Tekst, enz.
- Projectpaneel : hier beheert en ordent u mediabestanden voor het hele project.
- Compositievenster : dit is een videovoorbeeldvenster waarin u een voorbeeld kunt bekijken van de animatie voor de huidige compositie (vaak een compositie genoemd) waaraan u werkt. Composities zijn in wezen scènes, elk met hun eigen afzonderlijke animatietijdlijnen. We zullen composities in meer detail bespreken in de volgende sectie.
- Tijdlijn : Hier maakt u uw animatie. Het bestaat uit zowel een letterlijke tijdlijn aan de rechterkant (waar u animatiegebeurtenissen instelt die op de tijdlijn worden uitgevoerd) als een lay-outgebied aan de linkerkant (waar u de kenmerken van uw media-items over elkaar legt en bewerkt).
- Bedieningspaneel : hier heeft u toegang tot verschillende ondersteunende functies, zoals media-informatie, alinea- en uitlijningsopties en vooraf gebouwde bibliotheken met animaties en visuele effecten die in After Effects zijn ingebouwd.
Als u niet zeker bent over een tool of knop, kunt u door er met de muis overheen te bewegen een beschrijving krijgen.
Om een logobestand te importeren, sleept u het eenvoudigweg naar het projectpaneel of selecteert u Bestand" > " Importeren" > " Bestand" . In het volgende dialoogvenster selecteert u Media importeren als beeldmateriaal en samengevoegde lagen .
Stap 3: Stel uw compositie in. Logo-animatie.
Een compositie (comp) is een container waarmee u animaties kunt samenstellen, bewerken en toepassen op mediabestanden. Een grotere productie, zoals een film, zal meerdere tracks bevatten, georganiseerd in een projectpaneel. Je kunt de nummers dus zien als één enkele scène in de film, en elk nummer heeft zijn eigen afzonderlijke tijdlijn. In ons geval vereist een logo-animatie die minder dan vijf seconden duurt heel weinig composities.
Om uw compositie aan te passen, sleept u mediabestanden naar de linkerkant van het tijdlijnpaneel.
Laten we beginnen met een eenvoudige achtergrond. Klik met de rechtermuisknop op het lay-outpaneel en selecteer " Creëren" > " Stevig" . Omdat mijn logo wit is, heb ik voor effen gekozen zwarte kleur, maar u kunt elke kleur kiezen. Geef in het volgende venster de vaste stof een naam (in mijn geval "BG"), klik op de " Maat maken computer" en selecteer " OKE" . Sleep nu uw logobestand van het projectpaneel naar het tijdlijnpaneel en u zou een voorbeeld van uw logo in het compositievenster moeten zien. Als dit niet het geval is, zorg er dan voor dat u de lagen opnieuw rangschikt door de effen achtergrond onder het logobestand te slepen.
Klik met de rechtermuisknop op het logobestand in het lay-outpaneel en selecteer Creëren" > " Converteren naar een meerlaagse compositie" . Hierdoor krijgt uw logobestand een andere compositie (u zult zien dat het pictogram is gewijzigd). Als u dubbelklikt op het logobestand, wordt er nu een nieuw tabblad geopend en gaat u naar deze nieuwe compositie met alle afzonderlijke lagen die u in Illustrator hebt ingesteld. Nu kun je zien hoe composities werken: ze lijken in wezen op submappen.
Logo-animatie
Als u wilt, kunt u elk van deze lagen omzetten in afzonderlijke composities door met de rechtermuisknop te klikken en te selecteren Voorlopige compositie" . Hierdoor krijgt deze laag een eigen animatietijdlijn, genest in de vorige compositie. En als u het hele logo in één keer wilt animeren, moet u een tijdlijn gebruiken die aan de hoofdcompositie is gekoppeld.
Laten we, nu dat uit de weg is, eens kijken hoe deze tijdlijnen werken voor animatie.
Stap 4: Animeer het logo met behulp van keyframes
After Effects (en de meeste animatiesoftware) werkt met keyframes. Keyframes zijn in wezen markeringen die u op de tijdlijn kunt instellen om te bepalen wanneer de begin- en eindstatus van uw animatie moet plaatsvinden.
Laten we bijvoorbeeld beginnen met een heel eenvoudige animatie: infaden. Aan een object zijn verschillende attributen verbonden, en attributen die in de loop van een bepaalde tijdsperiode veranderen, zijn in wezen animatie. Om deze kenmerken te zien, klikt u op het pictogram Uitvouwen naast het logo, gevolgd door eigendom "Converteren" .
Maak keyframes door op het stopwatchpictogram naast Eigenschappen in het tijdlijnpaneel te klikken.
Voor een vervagende animatie wil je werken met het attribuut dat de zichtbaarheid van een object meet: dekking. De dekking staat op 100% omdat het logo standaard volledig zichtbaar is.
Klik op het stopwatchpictogram naast de optie Dekking en je ziet een ruit op de plek waar de afspeelkopmarkering is geplaatst (de vage blauwe lijn die de tijdlijn kruist). Dit is een keyframe, in feite een momentopname van de huidige waarde van een opgegeven attribuut. Verplaats het keyframe door erop te klikken en het naar de markering van 2 seconden in de tijdlijn te slepen. Sleep de schuifregelaar terug naar de markering van 0 seconden, maak vervolgens een nieuw hoofdframe en stel de dekking in op 0%. Druk op de spatiebalk om de animatie in het compositievenster te bekijken.
After Effects
U zult zien dat u een vloeiende fade-in-animatie hebt gemaakt door de dekking in slechts twee seconden van 0% naar 100% te wijzigen met slechts twee keyframes. Dit is hoe alle animaties in After Effects worden uitgevoerd. U kunt op verschillende intervallen langs de tijdlijn een start-keyframe en een eind-keyframe maken, en After Effects berekent automatisch de noodzakelijke frame-overgangen om van punt A naar punt B te komen (traditioneel tween-frames genoemd in de animatiewereld).
Er wordt een eenvoudige, vloeiende animatie gemaakt met behulp van twee hoofdframes voor de eigenschap Opacity.
Je ziet dat er een aantal attributen zijn waarmee je kunt werken Transformeer eigendom, die we hier kort zullen toelichten. Voel je vrij om met keyframes te experimenteren en ze allemaal aan te passen om een idee te krijgen van hun animatiemogelijkheden:
- Positie : dit attribuut beschrijft de positie van het logo in de X- en Y-ruimte op het lay-outscherm en maakt het mogelijk om lineaire bewegingen te animeren.
- Schaal : dit attribuut beschrijft de grootte van het logo (als een percentage van de volledige grootte van het originele bestand) en stelt u in staat inzoom- of verkleiningsanimaties te maken.
- Rotatie : dit attribuut beschrijft de oriëntatie in graden en stelt u in staat rotatie-animaties te maken.
Advies van een vakman :
Als het gaat om het animeren van een logo, is het logisch om achteruit te werken (zoals we deden met de fade-in), aangezien de animatie zou moeten eindigen op het voltooide, volledige logo. Dit betekent dat u keyframes moet maken voordat u iets wijzigt, zodat u momentopnamen heeft van de attribuutwaarden in hun standaardstatus. Vervolgens kunt u deze keyframes naar het gewenste eindpunt op de tijdlijn verplaatsen (hoe lang u de animatie ook wilt laten duren) en nieuwe keyframes maken voor de wijzigingen aan het begin van de tijdlijn.
Stap 5. Animeer het logo met vormlagen.
Laten we nu verder gaan met interessantere animatietechnieken met behulp van vormlagen. Vormlagen zijn objecten die padinformatie bevatten, zoals ankerpunten en verbindingslijnen (vergelijkbaar met die in vectorprogramma's), en het manipuleren ervan opent de deur naar een hele reeks animatiemogelijkheden die verder gaan dan alleen Transformeer eigenschappen .
Hoe kiest u de juiste kleur voor uw logo?
Eerst gaan we het logo omzetten in een vormlaag. Selecteer in het deelvenster Gelaagde compositie (de lagen die u in stap 3 hebt gemaakt) al uw lagen, klik met de rechtermuisknop en selecteer " Creëren" > " Vormen maken van vectorlaag" . Je zult zien dat elke laag wordt gedupliceerd met een ster ernaast - dit is een vormlaag. Genest onder de vormlaag zul je vinden Inhoud eigendom in aanvulling op Transformeer eigendom . Rechts van Inhoudseigenschappen je ziet ook een knop " Toevoegen" , waarmee u nog meer attributen kunt selecteren om te animeren.
Vormlagen bevatten een knop Toevoegen (rechts van de eigenschap Contents) waarmee u allerlei geanimeerde eigenschappen kunt toevoegen, zoals uitknippaden.
Een object schalen in Adobe Illustrator
Trim paden
Voor mijn logo heb ik een vrij algemene en nuttige animatie gebruikt met behulp van de eigenschap Trim Paths. Om dit te doen heb ik "Crop Paths" toegevoegd met behulp van de knop " Toevoegen" voor de vormlagen voor elke letter, stelt u het sleutelframe End-attribuut in op 0% aan het begin van de tijdlijn en op 100% na ongeveer 1 seconde. Zoals u kunt zien, lijkt het alsof de omtrek van de letters in realtime door een onzichtbare hand is getekend.
Met de eigenschap Trim Paths kunt u lijnen animeren, zodat ze zichzelf in realtime tekenen.
Daarnaast wilde ik wat accentanimatie aan de achtergrond toevoegen. Omdat ik in zwart-wit werk, heb ik gekozen voor een looping-tunneleffect dat doet denken aan de Twilight Zone. Om dit te doen, heb ik het polygoongereedschap in het deelvenster Gereedschappen gebruikt om een vorm in het midden van mijn compositie te tekenen, waardoor een nieuwe vormlaag ontstond.
Vervolgens heb ik een Repeater-eigenschap toegevoegd, de positie gecentreerd en het aantal kopieën verhoogd. Hierdoor wordt de vorm gedupliceerd, waardoor een schijnbaar eindeloze tunnel ontstaat. Door de schaal aan te passen wordt de ruimte tussen elke kopie vergroot, en door de rotatie te wijzigen worden de kopieën in verschillende richtingen georiënteerd voor visuele interesse.
Om het nog spannender te maken, heb ik aan het begin van de tijdlijn een offset van 0 keyframed en deze later op een negatieve waarde op de tijdlijn ingesteld.
Met behulp van een veelhoekige vormlaag en de eigenschap Repeater kon ik een geanimeerde achtergrond maken.
Je hebt waarschijnlijk al geraden dat er veel opties zijn voor vormlagen. Het is waar: er zijn complete online cursussen over dit onderwerp op internet, en je moet de tijd nemen om te experimenteren, oefenen en leren.
Ik kan je ook niet vertellen welke animatiestijl bij je past logo of welke specifieke tools animaties die je nodig hebt om deze stijl te bereiken. Wel kan ik je advies geven over hoe je het zelf kunt ontdekken. Zoek inspiratie bij andere geanimeerde logo's, zoals die van je concurrenten, merken die je bewondert en/of sites als Pinterest of Dribbble, net zoals je deed toen je het logo oorspronkelijk maakte.
U zult merken dat, zodra u ze begint te analyseren met behulp van uw nieuwe kennis over het animeren van een logo, veel ervan gebaseerd zijn op eenvoudige manipulaties met vormen en transformaties (zelfs als ze duidelijk gelaagd zijn met geavanceerde gestileerde effecten). Zodra je er een paar hebt gevonden die je leuk vindt, kun je in After Effects achteruit werken en proberen die animaties te reverse-engineeren om te oefenen.
Stap 6: Stel de tijd in.
Laten we het hebben over de tijd, die het tempo van animatieframes gedurende de animatie beschrijft. U kunt een visuele weergave van de tijd bekijken door naar de Grafiekeditor te gaan. Om dit te doen, klikt u op het grafiekpictogram (met de naam Graph Editor als u erover beweegt) bovenaan het tijdlijnpaneel. Hierdoor wordt de tijdlijn gewijzigd in een lijngrafiek.
Als u op een van de keyframe-attributen klikt, ziet u een rechte lijn van het ene keyframe naar het volgende. Omdat we nu alleen het begin- en eindpunt aan het keyframen waren, hebben we After Effects verlaten om de timing te doen. Zonder richting verplaatst After Effects elk frame van de animatie gelijkmatig, wat resulteert in een perfect rechte lijn.
De grafiekeditor toont de sleutelframetiming zoals weergegeven in de lijngrafiek.
Het is echter de doelbewuste verandering in de tijd die de animatie een gevoel van realisme geeft. In een stuiterende balanimatie beweegt de bal bijvoorbeeld langzamer op het hoogtepunt van de stuitering en sneller wanneer deze de grond nadert vanwege momentum en zwaartekracht. Met andere woorden: hij beweegt niet gedurende de hele animatie met dezelfde snelheid, en als hij dat wel zou doen, zou hij opvallen als robot.
Met de Bezier-gereedschappen, die zich onder aan de grafiekeditor bevinden, kunt u de kromming van de grafieklijn aanpassen.
Converteer sleutelframes naar Auto Bezier
Met de Graph Editor kunt u de timing van uw eigen animatie aanpassen door zogenaamde Bezier-handvatten te gebruiken om een grafieklijn in een curve om te zetten. In de rechterbenedenhoek van de grafiekeditor ziet u enkele vierkante puntpictogrammen die aan lijnen zijn gekoppeld. Dit zijn Bezier-gereedschappen.
Klik op een van de keyframes en beweeg over de Bezier-tools totdat u het frame vindt met de naam ' Converteer sleutelframes naar Auto Bezier" . Wanneer u hierop klikt, ziet u een gele markering in de grafiek verschijnen. Als u deze hendel versleept, buigt de lijn en dit verandert de timing van uw animatie. Waar de curve duidelijker is, worden de frames sneller afgespeeld, en waar de curve vloeiender is, worden de frames langzamer afgespeeld.
Een scherpere curve komt overeen met een snellere synchronisatie, en een vloeiendere curve komt overeen met een langzamere synchronisatie.
Om de nuances van het aanpassen van je eigen timing echt te begrijpen, heb je animatie-ervaring nodig. Daarom is het handmatig aanpassen van Bezier-curven een geavanceerder onderwerp. In deze beginnershandleiding raad ik aan de Bezier-tool te gebruiken Gemakkelijk gemak (die een automatische curve toepast op het hoofdframe dat u selecteert) voor alle animatietijdsintervallen. Je kunt solliciteren Gemakkelijk gemak naar een hoofdframe buiten de diagrameditor door het hoofdframe te selecteren en met de rechtermuisknop te klikken.
Stap 7: Exporteer uw logo.
Wanneer u klaar bent om uw voltooide geanimeerde logo te exporteren, selecteert u ' Bestand" > " Exporteren" > " Voeg Adobe Media Encoder toe aan de wachtrij" . After Effects exporteert standaard bestand in het formaat mp4, geschikt voor video. Omdat we een deelbaar afbeeldingsbestand van ons logo willen maken, exporteren we dit als een geanimeerde GIF. Klik in het Media Encoder-venster op de pijl naast de gemarkeerde blauwe tekstregel onder het woord 'Formaat' en selecteer ' Geanimeerde GIF" . U kunt ook de doelmap voor uw voltooide bestand instellen door op de blauwe tekst onder de woorden "Uitvoerbestand" te klikken.
Als u een bestand wilt exporteren, gaat u naar Bestand > Exporteren > Toevoegen aan Adobe Media Encoder Queue en selecteert u Animated GIF in de vervolgkeuzelijst in de kolom Formaat.
Dubbelklik op de gemarkeerde blauwe tekst onder de voorinstelling om het venster Exportopties te openen. Er zijn een paar opties waar u naar wilt kijken om uw bestandsgrootte te verkleinen: Kwaliteit (ik heb deze ingesteld op 20), Framesnelheid (ik heb deze ingesteld op 10, hoewel hogere framesnelheden (fps) worden aanbevolen voor video), en Duur, de blauwe balk onder het voorbeeld (ik heb de mijne ingekort tot 4 seconden). Selecteer OKE, om dit venster te sluiten.
Wanneer u klaar bent, selecteert u het groene afspeelpictogram in de rechterbovenhoek van Media Encoder en wordt uw bestand weergegeven in de door u gekozen doelmap. Dat is alles: voltooide logo-animatie!
Breng uw merk tot leven met logo-animatie.
-
Logo-animatie is meer dan alleen een populaire trend die merken moeten volgen. Logo-animatie heeft ook een onmiskenbare magie en het is een geweldige manier om een moment van visueel plezier te creëren voor iedereen die met uw merk te maken heeft. En gelukkig is animatiesoftware zo geëvolueerd dat bijna iedereen, ongeacht zijn vaardigheden, een beetje van die magie aan zijn eigen logo kan toevoegen.
Dat gezegd hebbende, hoewel deze tutorial bedoeld is om je op weg te helpen met de basisprincipes van logo-animatie, kost het veel vallen en opstaan, oefenen en experimenteren om iets verder te komen dan basisanimatie. Als je een echt bijzondere logo-animatie wilt, is een professionele logo-animator de investering waard.
Laat een reactie achter