Logo Animatioun ass de Prozess fir Bewegung oder Ännerungen un de visuellen Elementer an engem Logo aféieren fir et méi dynamesch an attraktiv ze maachen. Et kann op verschidden Deeler vun engem Logo applizéiert ginn, wéi Text, Biller, Faarwen a Formen, an et kann ënnerschiddlech Grad vu Komplexitéit hunn, rangéiert vun einfachen Animatiounen wéi Text blénken oder verschwannen Faarwen, bis komplex Animatiounen mat Objeten déi bewegen oder interaktiv sinn. Effekter.

Logo Animatioun gëtt ëmmer méi heefeg. Tëscht Smartphones an der allgemenger Entwécklung vun der Internettechnologie sinn Logoen elo vill méi heefeg an digitale Raum, an dat mécht d'Dier op fir visuell Effekter wéi Animatioun, déi mat kierperleche Produkter net méiglech sinn. Natierlech bedeit déi wuessend Popularitéit vun der Logo Animatioun datt ëmmer méi Marken et brauchen fir kompetitiv ze bleiwen. Also léiere wéi een e Logo animéiert kann eng wäertvoll Fäegkeet sinn, déi Äre Logo op den nächsten Niveau bréngt.

Wéi wielen ech déi richteg Faarf fir Äre Logo?

Zur selwechter Zäit ass Animatiounssoftware och méi ubiquitär, streamlined an intuitiv ginn fir dës wuessend Benotzerbasis z'ënnerstëtzen. Also, egal wéi technesch a komplex Logo Animatioun kléngt, och Ufänger kënnen elo einfach awer effektiv Animatiounen erstellen.

 

Logo Animatioun an After Effects -

Schrëtt 1. Preparéieren Är logo Fichier.

Mir fänken eigentlech eisen Tutorial un wéi een e Logo an Adobe Illustrator (oder ähnlech Logo Design Software) animéiert. Dëst ass néideg fir sécherzestellen datt eise Fichier Logo fir Animatioun ageriicht.

Logo Aschreiwung

Och wann d'Animatiounssoftware selwer Raster ass, mussen d'Original Logo Dateien am Vektorformat sinn. Dëst erlaabt Iech hinnen ouni änneren Schued fir Bildqualitéit (zum Beispill d'Erhéijung vun der Skala vun engem Rasterlogo féiert zu Pixeléierung), an dëst wäert spéider nëtzlech sinn wann Dir mat Formschichten schafft.

Adobe Illustrator Screenshot mat Logo bannen Logo Animatioun.

Gitt sécher datt Äre Logo a Schichten getrennt ass mat der Layer Panel.

De Logo soll och multi-layered sinn anstatt an een Objet gruppéiert. Dëst mécht et einfach méi komplex Animatiounen ze kreéieren andeems Dir eenzel Deeler vum Logo animéiert. Dir kënnt nei Schichten erstellen mat der "  Nei Layer derbäi" um Enn vun der Layer Panel, a kopéiert dann Deeler vun Ärem Logo an hinnen.

Schlussendlech, well Animatioun digital an der Natur ass, schaffe mir och mat RGB Faarwen. Wann Är Illustrator Datei op CMYK gesat ass, kënnt Dir dëst änneren andeems Dir Äre Logo auswielt a navigéiert op Edit> Ännere Faarwen> Convertéieren op RGB.

Wann Dir prett sidd, exportéiert Äre Logo als eng voll Layer Vektordatei. Well After Effects Dateitypen Deel vun der Adobe Software Famill sinn, späicheren ech de Logo deen ech als AI Datei erstallt hunn (Adobe Illustrator), awer et gi verschidde verschidden Aarte vu Vektordateien fir ze wielen wann Dir aner Software benotzt.

Schrëtt 2: Import Äre Logo an After Effects. Logo Animatioun

Open After Effects. D'Interface kann op den éischte Bléck komplizéiert schéngen, also loosst eis d'Grondlage opbriechen:

Adobe After Effects Logo Animatioun

 

 
  1. Toolbar : hei kënnt Dir Zougang zu der Haaptrei Grafiken Toolswéi de Pen Tool, Typ Tool, etc.
  2. Projet Panel : Dëst ass wou Dir Mediendateien fir de ganze Projet verwalten an organiséiert.
  3. Zesummesetzung Fënster : Dëst ass eng Video Virschau Fënster wou Dir d'Animatioun vun der aktueller Zesummesetzung (dacks eng Zesummesetzung genannt) kënnt Dir schafft. Kompositioune si wesentlech Szenen, jidderee mat hiren eegene separaten Animatiounszäitlinnen. Mir wäerte Kompositioune méi am Detail an der nächster Sektioun diskutéieren.
  4. Timeline : Dëst ass wou Dir Är Animatioun erstellt. Et besteet aus enger wuertwiertlecher Timeline op der rietser Säit (wou Dir Animatiounsevenementer opstellt fir op der Timeline ze lafen) an engem Layoutberäich op der lénker Säit (wou Dir d'Attributer vun Äre Medienverméigen iwwerlagert an ännert).
  5. Kontroll Rot : Hei kënnt Dir Zougang zu verschiddenen Ënnerstëtzungsfeatures wéi Medieninformatioun, Paragraphe- an Ausriichtungsoptiounen, a pre-built Animatioun a visuell Effektbibliothéiken agebaut an After Effects.

Wann Dir net sécher sidd iwwer en Tool oder Knäppchen, andeems Dir Är Maus driwwer hänkt, kritt Dir eng Beschreiwung.

Fir eng Logodatei z'importéieren, zitt se einfach an de Project Panel oder wielt  Datei "  > «  Importéieren "  > «  Datei " . An der nächster Dialogbox, wielt Import Medien als  Footage a fusionéiert Schichten .

Schrëtt 3: Setzt Är Kompositioun op. Logo Animatioun.

Eng Kompositioun (Comp) ass e Container deen Iech erlaabt Animatioun op Mediendateien ze komponéieren, z'änneren an z'applizéieren. Eng gréisser Produktioun, sou wéi e Film, enthält verschidde Tracks, déi an engem Projektpanel organiséiert sinn. Also kënnt Dir un d'Lidder als eng eenzeg Szen an deem Film denken, an all Streck wäert seng eege separat Timeline hunn. An eisem Fall brauch eng Logoanimatioun déi manner wéi fënnef Sekonnen dauert ganz wéineg Kompositioune.

After Effects mat der erstallt Kompositioun. Logo Animatioun

Fir Är Kompositioun ze personaliséieren, zitt Mediendateien op déi lénks Säit vun der Timeline Panel.

Loosst eis mat engem einfachen Hannergrond ufänken. Riets-klickt op de Layout Panel a wielt " Schafen "  > «  Solid" . Well mäi Logo wäiss ass, hunn ech fest gewielt schwaarz Faarf, mee du kanns all Faarf wielen. An der nächster Fënster, nennt de Feststoff (a mengem Fall "BG"), klickt op "  Maacht Gréisst  Computer" a wielt "  OK" . Zréck elo Är Logodatei vum Project Panel op d'Timeline Panel an Dir sollt Äre Logo an der Zesummesetzungsfenster gesinn. Wann net, gitt sécher d'Schichten nei ze arrangéieren andeems Dir de festen Hannergrond ënner der Logo Datei zitt.

Riets-klickt op d'Logodatei am Layoutpanel a wielt Schafen " > « Konvertéieren an eng Multi-Layer Kompositioun" . Dëst wäert Är Logo Datei an eng aner Zesummesetzung maachen (Dir gesitt datt d'Ikon geännert huet). Duebelklick op d'Logodatei wäert elo en neien Tab opmaachen an Iech op dës nei Zesummesetzung huelen, déi all eenzel Schichten enthält, déi Dir am Illustrator ageriicht hutt. Elo kënnt Dir gesinn wéi Comps funktionnéieren: si si wesentlech wéi Ënnerfolder.

Logo Animatioun

Wann Dir wëllt, kënnt Dir all eenzel vun dëse Schichten an getrennte Kompositioune konvertéieren andeems Dir klickt a wielt  Virleefeg Zesummesetzung" . Dëst gëtt dëser Layer seng eege Animatioun Timeline, nest bannent der viregter Zesummesetzung. A wann Dir de ganze Logo op eemol wëllt animéieren, sollt Dir eng Timeline benotzen, déi mat der Haaptkompositioun ass.

Mat deem aus dem Wee, loosst eis verstoen wéi dës Timelines fir Animatioun funktionnéieren.

Schrëtt 4: Animéiert de Logo mat Keyframes

After Effects (an déi meescht Animatiounssoftware) funktionnéiert mat Keyframes. Keyframes si wesentlech Markéierer déi Dir op der Timeline setze kënnt fir ze bestëmmen wéini d'Start- an Ennstaate fir Är Animatioun solle geschéien.

Zum Beispill, loosst eis mat enger ganz einfacher Animatioun ufänken: verschwannen. En Objet huet verschidden Attributer u sech verbonnen, an Attributer déi sech iwwer eng bestëmmten Zäit änneren si wesentlech Animatioun. Fir dës Attributer ze gesinn, klickt op d'Ikon erweideren nieft dem Logo gefollegt vun Immobilie "Convertéieren" .

Adobe After Effects Timeline Panels Logo Animatioun

Erstellt Keyframes andeems Dir op d'Stopwatch Ikon nieft Properties an der Timeline Panel klickt.

Fir eng verschwannen Animatioun wëllt Dir mam Attribut schaffen, deen d'Visibilitéit vun engem Objet moosst: Opazitéit. D'Opazitéit ass op 100% gesat well Par défaut ass de Logo komplett sichtbar.

Klickt op d'Stopwatch Ikon nieft der Opazitéit Optioun an Dir gesitt en Diamant wou de Playhead Marker gesat ass (déi schwaach blo Linn iwwer d'Timeline). Dëst ass e Keyframe, am Fong e Snapshot vum aktuelle Wäert vun engem spezifizéierte Attribut. Beweegt de Keyframe andeems Dir klickt an zitt et op d'2 Sekonnen Mark op der Timeline. Drag de Schieber zréck op d'0 Sekonn Mark, erstellt dann en anere Keyframe a setzt d'Opazitéit op 0%. Dréckt Spacebar fir d'Animatioun an der Kompositiounsfenster ze gesinn.

After Effects

Dir gesitt datt Dir eng glat Fade-in Animatioun erstallt hutt andeems Dir d'Opazitéit vun 0% op 100% an 2 Sekonnen mat nëmmen zwee Keyframes ännert. Dëst ass wéi all Animatioun an After Effects gemaach gëtt. Dir kënnt e Start Keyframe an en Enn Keyframe op verschiddenen Intervalle laanscht d'Timeline erstellen, an After Effects berechent automatesch déi néideg Frametransitioune fir vum Punkt A op de Punkt B ze kommen (traditionell genannt Tween Frames am Animatiounsgeschäft).

Animéiert Gif vun enger steigender Animatioun an After Effects

Eng einfach glat Animatioun gëtt erstallt mat zwee Keyframes fir d'Opazitéit Eegeschafte.

Dir kënnt gesinn, datt et eng Rei vun Attributer sinn, datt Dir mat schaffen kann an Immobilie transforméieren, déi mir hei kuerz erklären. Fillt Iech gratis mat Keyframes ze experimentéieren an all eenzel z'änneren fir e Gefill fir hir Animatiounsfäegkeeten ze kréien:

  • Positioun : Dëst Attribut beschreift d'Positioun vum Logo am X, Y Raum um Layoutbildschierm an erlaabt linear Bewegung ze animéieren.
  • Skala : Dëst Attribut beschreift d'Gréisst vum Logo (als Prozentsaz vun der voller Gréisst vun der ursprénglecher Datei) an erlaabt Iech Animatiounen ze vergréisseren oder ze schrumpfen.
  • Rotatioun : Dëst Attribut beschreift d'Orientéierung a Graden an erlaabt Iech Rotatiounsanimatiounen ze kreéieren.

Rotschléi vun engem professionelle :

Wann et drëm geet e Logo ze animéieren, mécht et Sënn fir no hannen ze schaffen (wéi mir mam Fade-in gemaach hunn), well d'Animatioun sollt um fäerdegen, komplette Logo ophalen. Dëst bedeit datt Dir Keyframes erstellen musst ier Dir eppes ännert, sou datt Dir Snapshots vun den Attributwäerter an hirem Standardzoustand hutt. Dir kënnt dann dës Keyframes op de gewënschten Ennpunkt op der Timeline réckelen (egal wéi laang Dir wëllt datt d'Animatioun dauert) an nei Keyframes erstellen fir d'Ännerungen am Ufank vun der Timeline.

Schrëtt 5. Animéiert de Logo mat Formschichten.

Loosst eis elo op méi interessant Animatiounstechnike weidergoen mat Formschichten. Formschichten sinn Objeten déi Weeinformatioun enthalen wéi Ankerpunkten a Verbindungslinnen (ähnlech wéi déi a Vektorprogrammer), a manipuléiert se mécht d'Dier op fir eng ganz Rei vun Animatiounsméiglechkeeten doriwwer eraus. Eegeschaften transforméieren .

Wéi wielen ech déi richteg Faarf fir Äre Logo?

Als éischt wäerte mir de Logo an eng Formschicht konvertéieren. An der Layered Composition Panel (d'Schichten erstallt am Schrëtt 3), wielt all Är Schichten, klickt mat riets a wielt "  Schafen "  > «  Erstellt Formen aus Vektorschicht" . Dir gesitt datt all Schicht mat engem Stär niewendrun duplizéiert gëtt - dëst ass eng Formschicht. Nestéiert ënner der Form Schicht, fannt Dir Inhalt Propriétéit zousätzlech zu Eegentum transforméieren . Riets vun Inhaltlech Eegeschaften Dir gesitt och e Knäppchen " Fügen " , wat Iech erlaabt nach méi Attributer ze wielen fir ze animéieren.

Adobe After Effects Timeline Panels

Formschichten enthalen e Add-Knäppchen (riets vum Inhaltseigenschaften) deen Iech erlaabt all Zorte vun animéierten Eegeschaften ze addéieren, sou wéi Ausschnëttweeër.

Skaléieren vun engem Objet am Adobe Illustrator

Trimm Weeër

Fir mäi Logo hunn ech eng zimlech allgemeng an nëtzlech Animatioun benotzt mat der Trim Paths Eegeschafte. Fir dëst ze maachen hunn ech "Crop Paths" bäigefüügt mam Knäppchen " Fügen " op d'Formschichten fir all Bréif, set den End Attribut Keyframe op 0% am Ufank vun der Timeline an 100% no ongeféier 1 Sekonn. Wéi Dir gesitt, schéngt d'Kontur vun de Bréiwer vun enger onsichtbarer Hand an Echtzäit gezeechent ze ginn.

Trim Paths erlaabt Iech Linnen ze animéieren. Logo Animatioun

D'Benotzung vun der Trim Paths Eegeschafte erlaabt Iech Linnen ze animéieren sou datt se sech an Echtzäit zéien.

Ausserdeem wollt ech eng Akzentanimatioun an den Hannergrond setzen. Well ech schwaarz-wäiss schaffen, hunn ech e Looping-Tunneleffekt gewielt deen un d'Twilight Zone erënnert. Fir dëst ze maachen, hunn ech de Polygon-Tool an der Tools Panel benotzt fir eng Form am Zentrum vu menger Zesummesetzung ze zéien an eng nei Formschicht ze kreéieren.

Duerno hunn ech e Repeater-Eegeschaft bäigefüügt, d'Positioun zentréiert an d'Zuel vun de Kopien erhéicht. Dëst duplizéiert d'Form, schaaft e scheinbar endlosen Tunnel. D'Ajustéierung vun der Skala vergréissert de Raum tëscht all Kopie, an d'Verännerung vun der Rotatioun orientéiert d'Kopie a verschidde Richtungen fir visuell Interessi.

Schlussendlech, fir et ze schmaachen, hunn ech am Ufank vun der Timeline en Offset vun 0 keyframed a spéider op en negativen Wäert op der Timeline gesat.

Screenshot vun Adobe After Effect

Mat enger polygonaler Formschicht an der Repeater Eegeschafte konnt ech en animéierten Hannergrond erstellen.

Dir hutt wahrscheinlech virgestallt datt et vill Méiglechkeeten fir Formschichten gëtt. Et ass wouer: et gi komplett Online Coursen zum Thema um Internet, an Dir sollt Zäit huelen fir ze experimentéieren, ze üben a léieren.

Ech kann Iech och net soen wat Animatioun Stil Är Kostüm Logo oder wat spezifesch Tools Animatiounen déi Dir braucht fir dëse Stil z'erreechen. Wéi och ëmmer, ech kann Iech Rotschléi ginn wéi Dir et selwer entdeckt. Sich no Inspiratioun vun aneren animéierten Logoen, wéi Äre Konkurrenten, Marken déi Dir bewonnert, an / oder Siten wéi Pinterest oder Dribbble - genau wéi Dir gemaach hutt wann Dir ursprénglech de Logo erstallt hutt.

Dir fannt datt wann Dir ufänkt se ze analyséieren andeems Dir Äert neit Wëssen iwwer e Logo animéiert, vill vun hinnen op einfache baséieren Manipulatiounen mat Formen an Transformatiounen (och déi, déi kloer mat fortgeschratt stiliséierter Effekter geschicht sinn). Wann Dir e puer fannt, déi Dir gär hutt, kënnt Dir an After Effects no hannen schaffen fir ze probéieren dës Animatioune fir d'Praxis ëmgedréint ze maachen.

Schrëtt 6: Setzt d'Zäit.

Loosst eis iwwer d'Zäit schwätzen, déi den Tempo vun den Animatiounsframes uechter d'Animatioun beschreift. Dir kënnt eng visuell Duerstellung vun der Zäit gesinn andeems Dir op de Graph Editor gitt. Fir dëst ze maachen, klickt op d'Grafikikon (Graph Editor markéiert wann Dir driwwer hovert) uewen op der Timeline Panel an dëst ännert d'Timeline zu enger Zeilgrafik.

Wann Dir op ee vun de Keyframe Attributer klickt, gesitt Dir eng riicht Linn vun engem Keyframe zum nächste. De Moment, well mir nëmmen d'Start- an d'Ennpunkte keyframing hunn, hu mir After Effects verlooss fir den Timing ze maachen. Ouni Richtung, bewegt After Effects all Frame vun der Animatioun gläichméisseg, wat zu enger perfekt riichter Linn resultéiert.

Grafik Editor. Logo Animatioun

De Grafikeditor weist Schlësselframe Timing wéi an der Linn Grafik gewisen.

Wéi och ëmmer, déi gezielt Ännerung vun der Zäit ass wat der Animatioun e Gefill vu Realismus gëtt. Zum Beispill, an enger Bouncing Ball Animatioun, bewegt de Ball méi lues op der Héicht vum Boun a méi séier wéi en op de Buedem kënnt wéinst Dynamik a Schwéierkraaft. An anere Wierder, hien bewegt sech net mat der selwechter Geschwindegkeet duerch déi ganz Animatioun, a wann hien dat gemaach huet, géif hien als Roboter erausstoen.

Bezier Tools Logo Animation

D'Bezier Tools, déi um Enn vum Grafikeditor läit, erlaben Iech d'Krümmung vun der Grafiklinn unzepassen.

Konvertéiert Keyframes op Auto Bezier

De Graph Editor erlaabt Iech den Timing vun Ärer eegener Animatioun unzepassen andeems Dir sougenannte Bezier Handle benotzt fir eng Grafiklinn an eng Curve ze transforméieren. Am ënneschten rietsen Eck vum Grafikeditor gesitt Dir e puer Quadratpunktikonen, déi op Zeilen befestegt sinn - dat sinn Bezier Tools.

Klickt op ee vun de Schlësselframes a hover iwwer d'Bezier Tools bis Dir deen mam Label "  Konvertéieren Keyframes op Auto Bezier" . Wann Dir op dëst klickt, gesitt Dir e giele Marker op der Grafik. Dëse Grëff ze zéien wäert d'Linn béien an dëst ännert den Timing vun Ärer Animatioun. Wou d'Kurve méi ausgeschwat ass, spillen d'Frames méi séier zréck, a wou d'Kurve méi glat ass, spillen d'Frames méi lues zréck.

Screenshot vu Bezier Tools an Adobe After Effects

Eng méi schaarf Curve entsprécht méi séier Synchroniséierung, an eng méi glat Curve entsprécht méi lues Synchroniséierung.

Fir d'Nuancen vun der Upassung vun Ärem eegenen Timing wierklech ze verstoen, erfuerdert Animatiounserfahrung, dofir ass d'Bezier-Kurven manuell unzepassen e méi fortgeschratt Thema. An dësem Ufänger Guide recommandéieren ech de Bezier Tool ze benotzen Einfach Liichtegkeet (wat eng automatesch Curve op de Keyframe applizéiert deen Dir gewielt hutt) fir all Animatiounszäitintervaller. Dir kënnt Iech bewerben  Einfach Liichtegkeet  op e Keyframe ausserhalb vum Diagrammeditor andeems Dir de Keyframe auswielt a klickt mat riets.

Schrëtt 7: Export Äre Logo.

Wann Dir bereet sidd Äre fäerdegen animéierten Logo ze exportéieren, wielt " Datei " > «  Export"  > «  Füügt Adobe Media Encoder an der Schlaang" . After Effects exportéiert par défaut Datei am Format mp4, wat fir Video gëeegent ass. Well mir eng deelbar Bilddatei vun eisem Logo erstellen wëllen, exportéiere mir et als animéierten GIF. An der Media Encoder Fënster, klickt op de Pfeil nieft der markéierter bloer Textlinn ënner dem Wuert "Format" a wielt "  Animéiert GIF" . Dir kënnt och den Destinatiounsdossier fir Är fäerdeg Datei setzen andeems Dir op de bloen Text ënner de Wierder "Output Datei" klickt.

Adobe Media Encoder

Fir eng Datei ze exportéieren, gitt op Datei> Export> Add to Adobe Media Encoder Queue a wielt Animated Gif aus der Dropdown-Lëscht an der Format Kolonn.

Duebelklick op den markéierten bloen Text ënner dem Viraussetzung fir d'Exportoptiounsfenster opzemaachen. Et ginn e puer Optiounen, déi Dir wëllt kucken fir Är Dateigréisst ze reduzéieren: Qualitéit (ech hunn et op 20 gesat), Frame Rate (ech setzen et op 10, obwuel méi héich Frame Tariffer (fps) fir Video recommandéiert sinn), an Dauer, dat ass déi blo Bar ënner Virschau (ech hunn meng op 4 Sekonnen ofgeschnidden). Wielt  OK,  fir dës Fënster zouzemaachen.

Wann Dir fäerdeg sidd, wielt déi gréng Play Ikon an der oberer rechter Ecke vum Media Encoder an Är Datei gëtt an Ärem gewielten Destinatiounsdossier ugewisen. Dat ass et: fäerdeg Logo Animatioun!

Bréngt Är Mark zum Liewen mat Logo Animatioun.
-

Logo Animatioun ass méi wéi nëmmen e populäre Trend dee Marken gezwongen sinn ze verfollegen. Et gëtt och eng onbestreideg Magie fir Logo Animatioun, an et ass e super Wee fir e Moment vu visuellem Genoss ze kreéieren fir jiddereen deen mat Ärer Mark interagéiert. A glécklecherweis huet d'Animatiounssoftware sech entwéckelt sou datt bal jiddereen, onofhängeg vun der Fäegkeet, e bëssen vun där Magie op säin eegene Logo ka addéieren.

Mat deem gesot, wärend dësen Tutorial virgesi ass fir Iech mat de Basics vun der Logo Animatioun unzefänken, brauch et vill Versuch- a Feeler, Praxis an Experimentéiere fir eppes iwwer d'Basisanimatioun ze kréien. Wann Dir eng wierklech speziell Logo Animatioun braucht, ass e professionnelle Logo Animateur d'Investitioun wäert.

 АЗБУКА

 

Web Design Definitiounen a Konditioune