Essential Motion Graphics-Vorlagen: Gestaltung von ansprechenden Lower Thirds mit Adobe After Effects

1. Einführung: Sie möchten also ausgefallene Bewegungsgrafiken für Ihre Social-Media-Inhalte wie diesen oder vielleicht diesen haben. Sie möchten jedoch nicht viel Geld für ein teures Motion-Graphics-Preset-Paket ausgeben. Nun, ich werde Ihnen zeigen, wie Sie mit Adobe After Effects Ihre eigenen Animationen erstellen können, und zwar so , dass Sie Ihre fertigen Animationen direkt in Premiere Pro verwenden können Ihre fertigen Animationen direkt in Premiere Pro verwenden können direkt in Premiere Pro ohne After Effects erneut berühren zu müssen. Selbst wenn Sie noch keine Erfahrung mit After Effects haben, können Sie diesem Kurs folgen. Marcus. Und ich habe vor mehr als zehn Jahren, 2012, als ich noch zur Schule ging, angefangen, Videos für YouTube zu erstellen, was letztendlich dazu führte, dass ich Medien und Informatik studierte. Damals, als ich anfing, Videos für YouTube zu erstellen, war ich immer auf der Suche nach Preset-Paketen, die kostenlos heruntergeladen werden konnten, weil ich ein pleite Student war. Und irgendwann war ich so genervt davon, dass ich beschloss, einfach mein eigenes zu bauen Inzwischen habe ich unzählige Animationen mit After Effects erstellt und sogar ein kleines Unternehmen daraus gemacht, indem ich mein eigenes Preset-Paket für Textanimationen auf meiner Website verkauft habe. Jetzt werde ich eine sehr schlechte Geschäftsentscheidung treffen und all dieses Wissen mit Ihnen teilen , damit Sie mein Preset-Paket nicht kaufen müssen , weil Sie einfach Ihr eigenes erstellen können. Zunächst werden wir uns mit den Grundlagen der Animation mit After Effects befassen Wir werden kurz in die Welt von Adobe Illustrator eintauchen und ich werde Ihnen zeigen, wie Sie Elemente vorbereiten , die Sie später in Ihren Animationen verwenden können Aber keine Sorge, wir werden schnell zu After Effects zurückkehren und die Grundlagen dessen behandeln, was in der Welt von After Effects als Expression bezeichnet wird After Effects bevor wir schließlich alles für unsere endgültige Animation zusammenstellen . Aber das ist es noch nicht, denn der letzte Schritt wird darin bestehen, die Animation in ein geeignetes Preset zu exportieren , sodass Sie sie dann direkt in Premiere Pro verwenden können , wenn Sie Ihre Videos bearbeiten. Ich freue mich sehr über diesen Kurs. Und ich kann es kaum erwarten, all die tollen Animationen zu sehen , die ihr alle erstellen werdet. Lasst uns also keine Zeit mehr verschwenden und endlich loslegen. Ich hoffe, wir sehen uns im Kurs. 2. Kursorientierung: Unser Clus-Projekt für diesen Kurs wird darin bestehen, ein ähnliches unteres Drittel in den sozialen Medien zu schaffen Ich zeige Ihnen jeden Schritt und erkläre Ihnen, wie Sie diese spezielle Animation nachbilden Aber das ist natürlich nur als Beispiel gedacht , mit dem wir für diesen Kurs arbeiten können Mit den Schritten und Prinzipien, die ich erkläre, können Sie tatsächlich auch viel komplexere Animationen erstellen. Das Einzige, was Sie für diesen Kurs benötigen , ist natürlich Adobe After Effects, aber auch etwas weniger offensichtlicher Adobe Illustrator, dem wir Elemente für die spätere Animation vorbereiten werden Und das ist alles. Du brauchst nichts anderes. Sie benötigen auch keine Vorkenntnisse in After Effects, da wir in diesem Kurs alle Grundlagen behandeln werden . Wenn Sie jedoch zu irgendeinem Zeitpunkt das Gefühl haben, dass ich mich beeile und Sie nicht in der Lage sind, dem zu folgen, was ich sage, würde ich vorschlagen, dass Sie meinen Kurs über Textanimation mit Adobe After Effects besuchen, in dem ich näher auf die Grundlagen eingehe In diesem Kurs werden wir auch einige fortgeschrittenere Techniken behandeln Nichtsdestotrotz handelt es sich immer noch um einen Anfängerkurs, und ich verspreche , dass Sie ihn auch dann befolgen können , wenn Sie After Effects noch nie zuvor angefasst haben . Natürlich werden wir in der ersten Lektion dieses Kurses die Grundlagen der Animation mit Adobe After Effects behandeln und einige erste, sehr grundlegende Animationen erstellen , um zu verstehen, was eine Komposition ist, was Keyframes sind und wie wir sie für Animationen in After Effects verwenden können. Wir haben diese Grundlagen behandelt, wir werden dann zu Adobe Illustrator springen , Adobe Illustrator springen bereiten Sie einige Elemente für unsere eigentliche Animation im unteren Drittel vor, und wir werden diese Elemente dann wieder in After Effects importieren . Danach werden wir das Konzept der Ausdrücke in After Effects besprechen , das für neue After Effects-Benutzer oft etwas entmutigend klingt , weil man programmieren muss, aber ich verspreche, dass sie nicht so Und dann werden wir letztendlich unsere eigentliche Animation im unteren Drittel zusammenstellen , und ich werde Ihnen sogar zeigen, wie Sie und ich werde Ihnen sogar zeigen, wie Sie sie so exportieren können , dass Sie sie direkt in Premier Pro verwenden und sogar noch Dinge anpassen können . Wenn Sie den Kurs also bis zum Ende verfolgen, werden Sie diesen Kurs mit Ihrem eigenen sozialen Netzwerk verlassen und haben die Möglichkeit, fast jede Animationsgrafik zu erstellen fast jede Animationsgrafik Sie für Ihre Inhalte benötigen. Also, worauf warten wir? Lass uns zu unserem ersten springen 3. Grundlagen von After Effects: Okay, alle zusammen. Willkommen zur ersten eigentlichen Lektion dieses Kurses. Ich verspreche Ihnen also, dass Sie an diesem Kurs teilnehmen können, auch wenn Sie noch keine Erfahrung mit Adobe After Effects haben . In dieser Lektion werden wir alle Grundlagen behandeln. Auch wenn Sie bereits Erfahrung mit After Effects haben, sollten Sie diese Lektion vielleicht als Auffrischung betrachten Wenn Sie Adobe After Effects zum ersten Mal öffnen, Sie damit begrüßt, und das allererste, was wir tun werden, ist natürlich auf Projekt zu klicken Wie Sie sehen können, ist das Fenster jetzt in vier Hauptbereiche gegliedert Das erste davon ist das Projektfenster hier oben. Das Projektfenster ist unser unverzichtbarer Knotenpunkt für unsere Vermögenswerte. Wenn wir also zum Beispiel hier doppelklicken, öffnet sich automatisch der Import-Dialog. Wir können aber auch zum Beispiel Ordner hier und sogar Unterordner und so weiter und so fort erstellen. Das funktioniert im Grunde wie jeder andere Dateibrowser du von deinem Betriebssystem kennst, wie zum Beispiel der Finder in macOS oder der Windows Explorer unter Windows. Normalerweise erstelle ich mir immer mindestens zwei Ordner. Den ersten nenne ich Null, Null Assets, und den zweiten nenne ich 01 Kompositionen. Und es sollte kein Unterordner sein. Ich möchte es auf derselben Ebene haben wie den Ordner Null, Null Wie Sie sehen können, neige ich dazu, meine Ordner mit Präfixzahlen zu benennen meine Ordner mit Präfixzahlen Dadurch bleiben sie in einer ganz bestimmten Reihenfolge , die ich leicht kontrollieren kann Ich weiß, das klingt ein bisschen nerdig und es ist definitiv kein Muss, aber es ist eine Methode, die ich persönlich mag weil ich alles so strukturieren kann , wie ich es will Und ich würde Sie sehr ermutigen, zumindest eine Form von Struktur beizubehalten Weil ich verspreche, dass Sie nicht mit einem chaotischen Projekt enden wollen . Ich weiß es Ich habe dort nach dieser einen Datei gesucht , von der Sie ganz sicher sind, dass Sie sie importiert haben, aber Sie können sie nicht finden, was sehr, sehr nervig ist. zweite Fenster, das wir haben, ist das Kompositionsfenster, das wir hier sehen können. Das Kompositionsfenster wird später eine Live-Vorschau dessen zeigen , woran wir gerade arbeiten. Es funktioniert im Grunde wie ein Media Player. Sie sehen, was wir gerade tun. Wenn wir zum Beispiel Star Wars importieren und dann Star Wars in After Effects spielen würden , würden Sie das in diesem Fenster sehen. Das Kompositionsfenster bietet aber auch einige erweiterte Funktionen, die ein normaler Media Player nicht bietet. Sie können beispielsweise auch im Drei-D-Raum arbeiten. uns können Sie auch in After Effects sehr komplexe Drei-D-Animationen erstellen . Aber das ist sehr fortgeschritten und nichts, was wir in diesem Kurs wirklich tun werden. Und drittens haben wir hier unten unseren Zeitplan. Timeline werden wir später unsere verschiedenen Elemente übereinander schichten, weil After Effect in einem mehrschichtigen Ansatz arbeitet, anders als beispielsweise Davini Resolve oder Node-basierte Programme wie Blender Ich weiß, dass es Leute gibt, die sagen, dass ein knotenbasierter Ansatz viel leistungsfähiger ist , weil man mehr damit machen kann, aber meiner Meinung nach wird er sehr, sehr kompliziert, weshalb ich ihn mit einem mehrschichtigen Ansatz bevorzuge Und zu guter Letzt ist unser viertes Fenster hier eines mit verschiedenen Einstellungen, wie zum Beispiel Effekten und Presets, dem sich Effekte und Presets gut befinden Ich habe schon ein paar Mal über Kompositionen gesprochen. Ich habe diesen Ordner Kompositionen genannt, und ich habe dieses Fenster Kompositionsfenster genannt. Aber was ist überhaupt eine Komposition? Sie können sich eine Komposition als einen Container für Ihre eigentliche Animation vorstellen , da Sie in demselben After Effects-Projekt natürlich in demselben After Effects-Projekt natürlich mehrere verschiedene Animationen erstellen können. Und jede dieser Animationen wird dann in eine Komposition verpackt. Und diese Komposition definiert auch einige allgemeine Regeln für Ihre Animation, wie z. B. die Bildrate, die Abmessungen und ähnliches. Um unsere allererste Animation zu erstellen, müssen wir einfach auf diese Schaltfläche hier unten klicken. Nun, das könnte beängstigend aussehen. Es ist nicht so gruselig. Das einzige, was wir jetzt anpassen werden , sind die Abmessungen. Wir werden das auf 3840 mal 2160 einstellen, das sind genau vier K. Aber du könntest das zum Beispiel auch auf 1920 mal 12 80 setzen, so wie es vorher war, was genau Full-HD wäre, oder du könntest es auch auf genau Full-HD wäre, oder ein beliebiges Format einstellen Zum Beispiel, wenn du eine vertikale Animation für TikTok oder etwas Ähnliches benötigst eine vertikale Animation für TikTok oder etwas Ähnliches Aber wir werden uns vorerst für vier K entscheiden . Die Bildrate werden wir tatsächlich auf 24 Bilder pro Sekunde einstellen, und wir passen auch die Dauer an 20 Sekunden an. Und bevor wir auf „Okay“ klicken, um unsere allererste Animation zu erstellen, geben wir ihr noch einen Namen, denn wie der großartige After Effect Stub Ban Mario immer sagt, beschriften wir unsere Ebenen immer Und ich stimme voll und ganz zu, dass wir unsere Ebenen immer beschriften, damit alles strukturiert bleibt Also werden wir anrufen. Das sind die Grundlagen der Imation. Und dann klicke ich einfach auf Enter oder Sie können klicken, um unsere allererste Animation zu erstellen Wie Sie sehen können, wurde dadurch das Kompositionsfenster plötzlich zu einem schwarzen Rechteck. Denn bis jetzt ist unsere Komposition völlig leer. Da ist nichts drin, also haben wir nur einen schwarzen Raum. Um dann tatsächlich unser allererstes Element zu erstellen , das wir dann animieren können Wir können zum Beispiel hier oben auf das Rechteckwerkzeug klicken und dann ziehen und gedrückt halten, hier oben auf das Rechteckwerkzeug klicken und dann ziehen und um unser allererstes zu erstellen . Nun, wie Sie sehen können, damit nicht nur das Rechteck hier oben in unserem Kompositionsfenster erstellt, sondern auch eine Formebene hier unten in der Timeline Diese Ebene in der Timeline enthält tatsächlich alle Eigenschaften, die wir dann animieren können Wenn wir zum Beispiel die Transformation öffnen, können wir hier die Position sehen, hier die Skala, hier die Drehung, und wir können diese Werte sogar ändern Um diese Werte tatsächlich zu animieren, brauchen wir immer noch eine Möglichkeit, After Effects mitzuteilen , wann welcher Wert angezeigt werden soll Um das zu tun, werden wir einen sogenannten Keyframe verwenden. Ein Keyframe ist im Grunde genau das. W, wo und welcher Wert. Um unseren allerersten Keyframe zu erstellen, müssen wir hier einfach auf das Stoppuhrsymbol klicken, wodurch diese kleine Rautenform entsteht, ich genau gesprochen habe, ein Nun, dieser spezielle Keyframe teilt After Effects bei der Null-Sekunden-Marke mit, dass die Drehung beispielsweise bei Ich weiß nicht, sagen wir, -20 Grad erfolgen beispielsweise bei Ich weiß nicht, sagen wir, -20 Grad sagen wir Wenn wir dann zum Beispiel zur Drei-Sekunden-Marke gehen und diese auf 40 Grad setzen, wird ein weiterer Keyframe erstellt, und jetzt, nachdem Effect schneit, 3 Sekunden, wollen wir das bei 40 Grad haben Und wenn ich jetzt schnell durch die Timeline scrubbe , siehst du, ah ha, es gibt tatsächlich Bewegung, und wir können das sogar abspielen, und du siehst, wie unsere Und dann hört es plötzlich auf. Und da haben wir's. Wir haben unsere allererste Animation. Danke für die Teilnahme an meinem Kurs. War nur ein Scherz. Wir sind noch nicht fertig. Nun, diese Animation ist natürlich immer noch etwas abgehackt, weil sie plötzlich anfängt, sich zu bewegen, und dann, nach 3 Sekunden, hört sie plötzlich wieder auf, sich zu bewegen Das liegt daran, dass es sich bei dieser Animation um eine lineare Animation handelt. After Effects interpoliert einfach die Werte zwischen diesen beiden Und wir können tatsächlich sehen, dass es sich um eine streng lineare Animation handelt eine streng lineare Animation den Diagrammeditor mit dieser Schaltfläche öffnen Im Moment haben wir keinen Wert ausgewählt, aber wenn wir auf die Drehung klicken, können Sie sehen, ha, da ist unsere Animation. Es fängt plötzlich hier an und dann hört es hier plötzlich wieder auf. Jetzt können wir das etwas flüssiger machen, indem wir etwas , das als Easing bezeichnet wird, anwenden , um automatisch Easing anzuwenden Wir müssen einfach beide Keyframes auswählen und dann F neun drücken Sie können sehen, wie sich diese Animation von einer strikten linearen Animation zu dieser glatten S-Kurve ändert , was bedeutet, dass die Animation langsam beginnt, dann schneller und dann wieder langsamer wird Schauen wir uns das schnell an. Wie Sie sehen können, sieht das jetzt schon viel glatter aus. Aber wir können das tatsächlich genau so anpassen , wie wir es wollen Wenn wir zum Beispiel möchten, dass diese Animation sehr schnell startet und dann langsam ausgeblendet wird, würde sie ungefähr so aussehen. Sieht schon ziemlich cool aus, oder? den meisten Fällen wird die automatische Lockerung, die Sie mit F Nine anwenden können , jedoch zu sehr guten Ergebnissen Nun sind Keyframes natürlich nicht auf eine einzelne Eigenschaft beschränkt, wie in diesem Fall die Drehung Wir können tatsächlich so viele Keyframes erstellen wie wir möchten, für so viele Eigenschaften, wie es gibt Wenn wir zum Beispiel schnell die Diagrammansicht wieder schließen und dann ein weiteres Keyframe für die Opazität und ein weiteres nach exakt 3 Sekunden erstellen ein weiteres Keyframe für die Opazität , Protip übrigens, wenn wir die Shift-Taste gedrückt halten, während wir uns hierher bewegen, können Sie sehen, dass unsere Timeline tatsächlich an bestehenden Keyframes festhält Wir wollen also einen weiteren Keyframe bei 100% haben. Ich kann einen erstellen, indem ich auf diese Diamantform klicke. Eigentlich wollen wir den ersten wieder auf Null setzen. Dann wählen wir einfach wieder unsere beiden Keyframes aus und drücken F neun, um die automatische Lockerung anzuwenden, und dann haben wir diese coole Überblendung Um ehrlich zu sein, ist das eigentlich die Grundlage für fast jede Animation Indem Sie Keyframes kreativ erstellen und sie dann lockern, können Sie tatsächlich Tonnen von sehr, sehr coolen Animationen erstellen Tonnen von sehr, sehr Lassen Sie uns zusammenfassen, was wir in dieser Lektion gelernt haben. In After Effects gibt es vier Hauptfenster. Das Projektfenster zur Strukturierung Ihrer Elemente, das Kompositionsfenster, um zu sehen, was Sie gerade tun, die Timeline, um Ihre verschiedenen Ebenen zu stapeln, und dann ein Fenster mit einer Reihe anderer Einstellungen. Wir haben auch gelernt, was eine Komposition ist. Es ist der Container für deine individuellen Animationen, und wir haben auch gelernt, wie man eine erstellt. Wir haben auch gelernt, wie man Grundformen erstellt, wie zum Beispiel ein Rechteck. Nicht zuletzt das wichtigste Merkmal von After Effects: Wir haben gelernt, was ein Keyframe ist und wie wir ihn verwenden können, um grundlegende Eigenschaften zu animieren Dann habe ich dir gezeigt, was Easing ist und wie wir es auf unsere Animationen anwenden können , die wir mit unseren Keyframes erstellt haben Bevor Sie mit der nächsten Lektion beginnen, würde ich dringend empfehlen, dass Sie After Effects selbst öffnen und mit all dem herumspielen, denn wie ich bereits gesagt habe, können Sie mit diesem Grundwissen wirklich supercoole Animationen erstellen mit diesem Grundwissen 4. Vorbereiten von Assets mit Adobe Illustrator: Richtig. Willkommen zurück, alle zusammen. Heute werden wir uns damit befassen, wie Sie mit Adobe Illustrator Elemente für Ihre Animationen erstellen können mit Adobe Illustrator Elemente für Ihre Animationen Die allererste Frage, die wir uns stellen sollten, ist, warum wollen wir das überhaupt tun? Es gibt zwei Hauptgründe, warum ich mich ausdrücklich dafür entschieden habe, meine Assets mit Adobe Illustrator und nicht mit einem anderen Programm vorzubereiten nicht mit einem anderen Programm Denn man könnte natürlich auch Assets mit einem anderen Bildeditor wie Photoshop vorbereiten oder sogar alles mit Formen direkt und After Effects zusammenfügen direkt und After Effects Obwohl das sehr umständlich wäre. Grund Nummer eins: Adobe Illustrator ist ein vektorbasiertes Bildbearbeitungsprogramm eher ein vektorbasiertes Bildbearbeitungsprogramm als ein pixelbasiertes, wie beispielsweise Adobe Photoshop Was zur Hölle bedeutet das? Sagen wir, wir haben eine sehr einfache Form, zum Beispiel ein Dreieck. Ein pixelbasiertes Bildbearbeitungsprogramm würde jedes einzelne Pixel dieses Dreiecks speichern. Wenn Sie also dieses Dreieck vergrößern würden, würden Sie einfach alle Pixel vergrößern, und Sie würden so eine Art Treppeneffekt bekommen , wenn Sie stark hineinzoomen Ein vektorbasiertes Bildbearbeitungsprogramm hingegen speichert für jeden Pfad unseres Dreiecks einen Vektor Wenn wir also diesen Vektor vergrößern, erhalten wir immer noch eine perfekt glatte Kante für unser Dreieck, weil diese Kante als Vektor gespeichert wird. Das heißt, wenn wir unsere Assets mit dem Dobie-Illustrator vorbereiten , haben wir viel mehr Freiheit bei der Skalierung unserer Assets, ohne die Qualität zu beeinträchtigen Außerdem nimmt das einfache Speichern von drei verschiedenen Vektoren weniger Speicherplatz auf Ihrer Disc in Anspruch und speichern dann Tonnen von Pixeln einzeln, und das ist der zweite Grund Dieser Grund gilt nicht im Vergleich zu Adobe Photoshop, sondern im Vergleich zu Bildbearbeitungsprogrammen , die nicht von der Firma Adobe stammen. Aber Adobe Illustrator lässt sich einfach nahtlos in After Effects integrieren, wodurch Sie jede Menge Zeit sparen können Ich werde es dir später zeigen , wenn wir dort ankommen. Aber der Import-Workflow von Adobe Illustrator nach Adobe After Effects ist wirklich ein Kuss des Chefs, ich liebe ihn einfach. Es ist so einfach Okay. Nochmals zur Erinnerung. Das ist die Animation, die wir versuchen nachzubilden. Lassen Sie uns also tatsächlich zu Illustrator springen und unsere Assets für diese Animation vorbereiten. Sollen wir? Auch hier besteht der allererste Schritt, genau wie in Adobe After Effects, darin, einfach auf eine neue Datei zu klicken. Anders als in Adobe After Effects erhalten wir jetzt tatsächlich ein paar Voreinstellungen, und wir können einfach zu Füllen und Video gehen und die Vier-K-UHD-Vorlage auswählen die Vier-K-UHD-Vorlage da diese bereits die genauen Abmessungen hat Wir wollen 3840 mal 2160 Pixel . Sehr wichtig ist auch, dass dies im RGB-Farbmodus und nicht im CM K-Farbmodus Wir können also einfach auf Erstellen klicken und schon haben wir unsere allererste Basis-Canvas. Das allererste, was ich tun werde, ist ein Hintergrundbild zu importieren, indem ich es einfach per Drag-and-Drop ziehe, nur als Referenzbild dafür, wie unsere endgültige Animation tatsächlich aussehen wird, zusätzlich zu dem, worauf wir sie später platzieren werden. In Ordnung. Gehen wir nun zu Ebenen und erstellen eine neue Ebene, die wir ein Hintergrundfeld nennen werden, und wir werden diese Ebene Hintergrund nennen. Bild, und wir können diese Ebene bereits sperren , da wir nur am Hintergrundbild nichts ändern werden. Lassen Sie uns das auch etwas vergrößern , damit wir auch die Namen richtig sehen können. In Ordnung. Lassen Sie uns zunächst unser Rechteck erstellen, das wie das Basisrechteck ist , auf das wir die Animation legen wird 38, 40 Pixel weiß sein , also die volle Breite, und wir geben ihm eine Höhe von 600 Pixeln. Lassen Sie uns das an die richtige Position bringen. Gehen Sie zurück zu den Eigenschaften und wählen Sie eine Vollfarbe aus reinem Schwarz, reduzieren Sie jedoch die Deckkraft auf 30% Außerdem wollen wir keinen Strich haben, also setzen wir diesen Wert einfach auf 20. Das ist jetzt kaum sichtbar, aber es ist wie die Basisebene für unsere Animation. Als Nächstes werden wir die weiße Linie oben und unten erstellen. Dafür gehen wir noch einmal hierher. Nun, das ist das Rechteckwerkzeug, wie Sie sehen können, aber wenn wir hier mit der rechten Maustaste klicken, können wir ein paar weitere Werkzeuge auswählen, und dafür werden wir das Linienwerkzeug verwenden. Dann gehen wir genau auf diesen Anker und ziehen einfach hierher und drücken die Umschalttaste. Wir können sicherstellen, dass dies genau eine gerade Linie ist, und wir wollen, dass es vorbei ist. Hier. Also, das braucht einen Schlaganfall. Wir wollen wahrscheinlich einen Strich von etwa zehn Pixeln und setzen ihn auf reines Weiß. Okay. Zehn Pixel sehen für mich ein bisschen dick aus. Lassen Sie uns das vielleicht auf sieben reduzieren. Jetzt brauchen wir natürlich auch die andere Zeile unten, also können wir einfach unsere Zeile auswählen, die alte Taste gedrückt halten und dann einfach alles nach unten ziehen, und dann einfach alles nach unten ziehen das vorherige Element dupliziert. Jetzt habe ich bereits ein Social-Media-Symbol vorbereitet, das wir hier einfach einfügen können. Machen Sie es etwas kleiner und halten Sie dabei die Umschalttaste gedrückt, wodurch es proportional umgewandelt wird Wenn ich die Umschalttaste nicht gedrückt halte, sehen Sie, wie sich die Abmessungen Ich möchte also die Shift-Taste gedrückt halten, sie etwas kleiner machen und ungefähr hier etwas positionieren. Wenn Sie nun nach dem Social-Media-Symbol oder einem anderen Symbol suchen , das Sie hier einfügen möchten, weil es Sie hier einfügen möchten, weil es kein Social-Media-Symbol sein muss, würde ich dringend empfehlen, nach einer SVG-Datei zu suchen , anstatt beispielsweise nach einer PNG-Datei. B, das ist genau der Unterschied, über den ich vorhin gesprochen habe Eine SVG-Datei ist eine Vektordatei, während eine PNG-Datei pixelbasiert ist Illustrator kann zwar mit pixelbasierten Dateien arbeiten, wir möchten die volle Qualität der Datei beibehalten, daher ist es besser, eine SVG-Datei zu verwenden. Aber ich denke immer noch, dass das ein bisschen zu groß ist, also machen wir es wahrscheinlich Sogar ein bisschen kleiner. Ja. So etwas sieht gut aus. Und zu guter Letzt brauchen wir immer noch den Text. Also wählen wir das Text-Tool aus und schreiben hier den Namen unserer Social-Media-Plattform. Mach das alles viel größer, mach es noch größer. Auch hier halte ich die Shift-Taste gedrückt, während die Größe ändere, sonst würde es so aussehen. Das ist nicht das, was wir wollen. Bring es in die richtige Position. Das ist jetzt sehr groß, aber zuerst wählen wir eine andere Schrift aus. Ich werde Proxima Nova Bold verwenden , das ist eigentlich dieselbe Schriftart, die TikTok verwendet Also verwende ich in diesem Fall diese Schriftart, aber Sie können jede beliebige Schriftart auswählen Lassen Sie uns auch ein reines Weiß daraus machen , damit es besser sichtbar und etwas kleiner Ja. So etwas sieht gut aus. Jetzt wählen wir noch einmal das Rechteckwerkzeug aus und zeichnen hier unten ein weiteres weißes Rechteck, etwa so. Gehe erneut zum Textwerkzeug und erstelle unseren Text. Und verschiebe den Text an seinen Platz. Der obere Text sieht etwas groß und der untere Text ist etwas klein, also lassen Sie uns den oberen Text etwas kleiner machen. Wir können hier auch die Größe des Rechtecks reduzieren und den unteren Text etwas vergrößern. Ja, wahrscheinlich so etwas. Jetzt müssen wir auch die Größe des Rechtecks erneut ändern. Ja, so etwas sieht gut aus. Jetzt werden wir die Texte in OB After Effects tatsächlich wieder ersetzen, die Texte in OB After Effects tatsächlich wieder weil wir sie als native Textebenen in After Effects haben wollen , aber ich habe sie auch hier erstellt, um eine visuelle Vorstellung davon zu haben eine visuelle Vorstellung davon , wie alles am Ende aussehen wird. Nun, ich muss zugeben, das war eigentlich ein sehr einfacher Fall. Die Elemente für diese Animation hätten leicht direkt in After Effects reproduziert werden können, aber ich wollte Ihnen den gesamten Workflow zeigen , weil es meiner Meinung nach wirklich sehr, sehr vorteilhaft ist, Ihre Assets in Illustrator vorzubereiten Ihre Assets in Illustrator und sie dann nach After zu übertragen Vor allem, wenn Sie viel komplexere Animationen mit viel mehr Elementen erstellen als in diesem Fall Bevor wir nun zurück zu After Effects springen und unsere Assets dort importieren, müssen wir das alles noch in separate Ebenen aufteilen, sodass wir alles als verschiedene Elemente haben, und wir können zum Beispiel die obere Zeile von rechts und die untere Zeile von links verschieben und die untere Zeile von links und all das lustige Zeug. Lassen Sie uns eine Ebene für die oberste Zeile erstellen und unsere oberste Zeile auswählen. Das ist die unterste Zeile. Das ist die oberste Zeile. Erstellen Sie eine weitere Ebene für die untere Zeile und verschieben Sie die untere Zeile hinein Erstellen Sie eine weitere Ebene für das Social-Media-Symbol. Lassen Sie uns das gesamte Mediensymbol dorthin verschieben. Und dann zu guter Letzt eine Textebene. Und wir können einfach unseren gesamten Text in unsere Textebene einfügen , denn wie ich bereits gesagt habe, werden wir diese später und nach den Effekten ersetzen. Wie auch immer. In Ordnung. Lass uns auf Datei klicken und speichern. Ja, ich möchte es auf meinem Computer speichern und dann den richtigen Ordner auswählen. Wir möchten es speichern, da unsere Säuren keine AI-Datei sind. Speichere es mit Version 2020, nicht mit einer der alten Versionen, also können wir einfach darauf klicken. Okay. Jetzt zurück und nach After Effects können wir einfach unsere Datei assets.ai per Drag & Drop in das Projektfenster ziehen und uns dann fragen, wie wir diese Adobe Illustrator-Datei importieren möchten diese Adobe Illustrator-Datei importieren möchten Jetzt könnten wir zum Beispiel alles als zusammengeführte Ebenen importieren alles als zusammengeführte Ebenen Das würde alles wieder zusammenführen, oder wir könnten zum Beispiel bestimmte Ebenen für den Import auswählen, bestimmte Ebenen für den Import auswählen, aber wir werden hier oben die Komposition wählen und die Ebenengröße als die Abmessungen des Filmmaterials beibehalten die Ebenengröße als und dann einfach klicken. Okay. Wie Sie sehen können, dadurch automatisch eine neue Komposition namens Assets erstellt . Außerdem wurde ein Ordner mit unseren Assets-Ebenen importiert. Und wenn wir das öffnen, können Sie all die verschiedenen Ebenen, die wir erstellt haben, als unterschiedliche Elemente sehen all die verschiedenen Ebenen, die wir erstellt haben, , die wir auch verwenden und in andere Kompositionen importieren können . Wenn wir die Asset-Komposition öffnen, können Sie sehen, dass dies genau das ist, was wir in Illustrator erstellt haben, auch als verschiedene Ebenen Und es hat automatisch die Abmessungen unserer Zeichenfläche in Illustrator beibehalten , die wir speziell auf vier K gesetzt Bevor wir mit haben. Bevor wir mit der Arbeit an dieser Komposition beginnen, ich die Projektstruktur bei, wähle all diese Elemente aus und verschiebe sie in den Ordner „Elemente“ Dann können wir diese Komposition löschen und den Ordner für Kompositionen Sie denken vielleicht, dass wir fertig sind, aber es gibt noch zwei weitere Dinge, die ich Ihnen zeigen werde, bevor wir diese Lektion beenden. Die erste Sache ist, dass wir After Effects tatsächlich anweisen müssen , diese Ebenen als Vektorebenen zu behandeln. Ich verstehe wirklich nicht, warum After Effects das nicht automatisch macht, aber aus irgendeinem Grund tun sie es nicht. Wenn wir zum Beispiel unsere sozialen Medien nehmen und es tonnenweise vergrößern würden , würden Sie sehen, dass es tatsächlich pixelig wird , weil es das momentan Pixelebene und nicht als Vektorebene behandelt Um After Effects mitzuteilen, dass sich tatsächlich um eine Vektorebene handelt es sich tatsächlich um eine Vektorebene handelt und dass sie als Vektorebene behandelt werden sollte, müssen wir dieses Kästchen hier ankreuzen Also dieser kleine Stern, wenn wir ihn ankreuzen, können Sie sehen, ha, plötzlich ist alles scharf und klar und nicht pixelig Aus irgendeinem Grund können Sie dieses Start-Kontrollkästchen hier nicht sehen Möglicherweise haben Sie gerade andere Modi aktiviert. Hier unten gibt es eine Taste zum Umschalten zwischen den Modi. Wenn wir hier klicken, sehen Sie, dass sich alles ändert. Es gibt jetzt andere Konfigurationen. Wenn Sie diese Konfiguration haben und das Kontrollkästchen für die Behandlung von Ebenen als Vektorebenen nicht angezeigt wird, klicken Sie einfach auf Modus umschalten und schon ist es da Und lassen Sie uns auch hier die Skala etwas zurückdrehen. Wir wollen nicht, dass die Ikone der sozialen Medien so groß ist. Und zweitens wollen wir, wie bereits erwähnt, die Textebenen durch tatsächliche Textebenen von Adobe After Effects ersetzen . Also werden wir hier oben das Textwerkzeug auswählen. Klicken Sie einfach hier, um unseren Text neu zu erstellen. Noch einmal, wir wollen das in Proxima Nova haben. Und die Größe kann viel größer sein, wahrscheinlich so etwas. Bring es hierher. Erstellen Sie hier unten ein weiteres Rechteck, das nicht rot, sondern weiß sein sollte. Wählen Sie erneut das Textwerkzeug aus und schreiben Sie unseren Text hier hinein. Das sollte natürlich schwarz und viel kleiner sein, verschiebe es hierher. Dann können wir tatsächlich einfach unsere ursprüngliche Textebene entfernen unsere ursprüngliche Textebene indem wir auf die Entfernen-Taste drücken, und los geht's. Wir haben alle unsere Assets bereit, um tatsächlich mit der Animation zu beginnen. In Ordnung. Was haben wir in dieser Lektion gelernt? Ich habe Ihnen erzählt, warum ich speziell Adobe Illustrator zur Vorbereitung meiner Assets verwendet Adobe Illustrator zur Vorbereitung meiner Assets Erstens, weil es sich eher um ein vektorbasiertes Bildbearbeitungsprogramm als um ein pixelbasiertes Bearbeitungsprogramm Zweitens ist das Importieren von Assets aus Illustrator nach After Facts eigentlich sehr einfach Außerdem habe ich Ihnen kurz gezeigt, wie Sie Adobe Illustrator tatsächlich zur Vorbereitung Ihrer Assets verwenden Dann habe ich Ihnen gezeigt , wie Sie diese Elemente wieder in AB After Now übertragen können, bevor wir diese Animation tatsächlich vollständig neu erstellen können. Es gibt noch eine weitere Sache, über die wir lernen müssen Dieses Ding nennt man die Ausdrücke im W After Effect Wie Sie vielleicht vermutet haben , werden wir genau das in der nächsten Lektion behandeln 5. Die Grundlagen von Expressions: B, alle zusammen. Ich habe das Gefühl, dass dies die Klasse ist, vor der einige von Ihnen Angst haben könnten, zumindest wenn Sie schon einmal von den Ausdrücken in After Effects gehört haben . Aber lassen Sie mich Ihnen versichern, dass ich auch Angst hatte, mit den Expressions zu arbeiten , als ich anfing , mit After Effects zu arbeiten, aber sie sind absolut nicht so gruselig, wie sie aussehen. Nun, um ehrlich zu sein, könnte diese ganze Animation tatsächlich gemacht werden , ohne jemals Ausdrücke zu verwenden. Aber inzwischen liebe ich sie so sehr, dass ich jedes Mal, wenn ich etwas mit einem Ausdruck lösen kann, dazu neige, mich dafür zu entscheiden, weil es sich als viel schneller und in vielen Fällen sogar viel stabiler herausstellt , um die Animationen später zu verfeinern und zu überarbeiten Okay. Jetzt, wo eigentlich jeder Angst vor den Ausdrücken hat, weil ich so viel Drama um sie herum gemacht habe. Lassen Sie uns tatsächlich wieder zu After Effects zurückkehren. Sollen wir? Ich habe bereits gesagt, dass das Einzige, was Sie wissen müssen, um Animationen zu erstellen und Werte in After Effects im Laufe der Zeit zu ändern , die sogenannten Keyframes sind Aber das ist eigentlich nicht wahr. Es gibt noch eine andere Möglichkeit, Werte zu ändern und sie im Laufe der Zeit sogar zu animieren. Dabei handelt es sich , wie Sie vielleicht vermutet haben, um Ausdrücke Sie können einen Ausdruck ganz ähnlich wie einen Keyframe erstellen Aber wir klicken nicht einfach auf das Stoppuhrsymbol, sondern halten die alte Taste und klicken gleichzeitig auf das Stoppuhr-Econ Wie Sie sehen können, öffnen Sie dabei dieses kleine Textfenster Dieses Textfenster erwartet nun einen Wert im exakt gleichen Format wie der Wert, den Sie ändern möchten. Wenn wir also in diesem Fall beispielsweise die Drehung anpassen möchten, bei der sich um einen einzelnen numerischen Wert handelt, erwartet dieses Textfeld einen einzelnen numerischen Wert. Wenn wir also zum Beispiel hier einfach eine Zehn hineinschreiben , dann schließen wir alles. Sie sehen, das hat unser Rechteck um genau zehn Grad gedreht . Aber das Tolle an diesem Fenster ist, dass Sie hier tatsächlich Code in einer Programmiersprache eingeben können. Für diejenigen unter Ihnen , die schon einmal mit Programmiersprachen gearbeitet haben , ist dies tatsächlich eine modifizierte Version von Java-Skript. Ich könnte zum Beispiel eine Variable namens R für die Rotation erstellen und dieser Variablen dann einen Wert von sagen wir 90 zuweisen. Und wenn wir dann am Ende dieses R zurückgeben, können Sie sehen, dass unser Rechteck um genau 90 Grad gedreht wurde. Dies eröffnet tatsächlich viele Möglichkeiten , Werte auf sehr kreative Weise zu ändern. Weil wir zum Beispiel plötzlich Berechnungen durchführen und dann die Werte auf der Grundlage dieser Berechnungen definieren können . Es gibt auch einige vordefinierte Variablen, wie zum Beispiel die variable Zeit. Wenn wir einfach die Zeit zurückgeben , sodass Sie sehen können, ob sich nichts geändert hat, aber wenn wir durch die Zeitleiste blättern, dreht sich das Rechteck langsam, weil die Zeit tatsächlich variabel von der Zeit zu diesem Zeitpunkt in Sekunden ist tatsächlich variabel von der Zeit zu diesem Zeitpunkt in Sekunden 10 Sekunden hätte sich unser Rechteck zum Beispiel genau um zehn Grad gedreht Wenn wir nun zum Beispiel denken, dass diese Drehung zu langsam ist und wir sie schneller machen wollten, könnten wir sie zum Beispiel einfach mit zwei multiplizieren. Und dann bei 10 Sekunden ist zehn mal zwei natürlich 20 Grad. Das ist schon bei 20 Grad, und somit ist die ganze Rotation immer noch sehr langsam, aber zumindest ein bisschen schneller. Wir können zum Beispiel auch auf die ursprünglichen Werte zugreifen, indem wir den Variablenwert eingeben. Jetzt wird einfach der ursprüngliche Wert zurückgegeben und wir könnten Berechnungen mit dem ursprünglichen Wert durchführen . Wenn wir den ursprünglichen Wert beispielsweise auf zehn Grad setzen , würde er ständig um zehn Grad gedreht. All dies wird etwas komplizierter wenn mit Werten gearbeitet wird, die zwei Zahlen benötigen, wie zum Beispiel die Position. wir noch einmal die alte Taste gedrückt und klicken Sie hier auf das Stoppuhr-Symbol, und da haben wir unseren Ausdruck für die Position Da die Position nun zwei Werte und keinen einzigen benötigt , müssen wir das zurückgeben, was in der Programmierung als Array bezeichnet wird Ein Array ist im Grunde nur eine Liste von Werten, und in diesem Fall benötigen wir zwei Werte. Bevor wir das Array tatsächlich erstellen, setzen wir es schnell auf Null. Um nun ein Array zu erstellen, müssen Sie es als solches in eckige Klammern schreiben und dann die Werte durch ein Komma trennen. Wenn wir zum Beispiel 00 in eckigen Klammern eingeben. Sie können sehen, dass unser Rechteck auf die Position Null, Null verschoben wurde . Dieses Prinzip bleibt exakt gleich , auch wenn Sie mehr als zwei Werte benötigen. Wenn Sie beispielsweise in einem Raum mit drei D arbeiten, in dem Sie nicht nur einen X-Wert und einen Y-Wert haben, sondern auch einen Wert, müssten Sie ein Array mit drei Werten zurückgeben. Aber das Tolle an den Ausdrücken ist, dass wir zum Beispiel auch bestimmte mathematische Funktionen verwenden können . Definieren wir zum Beispiel schnell einen Variablenaufruf. X, das wir vorerst auf Null setzen , und eine weitere Variable namens y, die wir ebenfalls auf Null setzen, und dann geben wir diese auf einen Strahl zurück. Lassen Sie uns sie eigentlich nicht auf Null setzen, sondern auf ihren ursprünglichen Wert zurück. Was wir tun können, wie Sie bereits wissen indem wir das Schlüsselwort value verwenden. Nun, das Value-Schlüsselwort in diesem Fall natürlich auch ein Array zurück. Um ein bestimmtes Element aus diesem Array zu erhalten, benötigen wir wieder die eckigen Klammern, die wir einfach hinter den Wert setzen können. Wenn wir nun den ersten Wert aus diesem Array bekommen wollen, was etwas verwirrend sein könnte, müssen wir Null schreiben, denn eigentlich beginnen die Indizes von Arrays immer bei Null Also mit Null bekommen wir das erste Element mit Eins, wir bekommen das zweite Element und so weiter und so fort, das mag am Anfang etwas verwirrend sein, aber es funktioniert tatsächlich in fast allen Programmiersprachen so in fast allen Programmiersprachen Wie Sie vielleicht erraten haben, verwenden wir, wenn wir den Y-Wert ermitteln wollen , erneut das Value-Schlüsselwort und schreiben dann eins. Nun können Sie sehen, dass unser Rechteck dadurch wieder an seine ursprüngliche Position zurückgebracht wurde. Also, wie gesagt, wir wollten hier einige mathematische Funktionen verwenden. Zum Beispiel geht die Sinusfunktion, die Sie wahrscheinlich alle die Sie wahrscheinlich alle bereits kennen, einfach auf eins bis minus eins, dann wieder auf eins und setzt das einfach bis in alle Ewigkeit fort Wenn wir hier den mathematischen Punkt-Sinus hinzufügen, der auf der Zeit basiert. Das fügt eine Wackelbewegung hinzu, weil es eins addiert, eins subtrahiert, eins addiert, eins subtrahiert und so weiter und so fort Da die Sinusfunktion nur auf eins und dann auf minus eins geht, werden wir immer nur ein einzelnes Pixel addieren und subtrahieren Also, wenn wir das spielen, siehst du nicht wirklich etwas. Ein einzelnes Pixel zu bewegen ist nicht so viel. Lassen Sie uns das nochmal in Klammern kapseln und das mit 100 multiplizieren Dadurch wird schon alles um 100 Pixel verschoben, was viel mehr ist als nur ein einzelnes Wenn wir das jetzt abspielen, können Sie sehen, ah, unser Rechteck bewegt sich um 100 Pixel auf der X-Achse hin und her. Wenn wir nun genau dasselbe für den Y-Wert plus hinzufügen , wollen wir aber den Kosinus anstelle von Design verwenden Nochmals, multipliziert mit 100. Wenn wir das noch einmal spielen, können Sie sehen, dass sich unser Rechteck plötzlich genau in einem perfekten Kreis bewegt Nun, das mag sehr, sehr einfach aussehen, aber eine perfekte Kreisbewegung nur mit Keyframes zu erzeugen , ist eigentlich fast unmöglich. Es so mit einem Ausdruck zu erstellen , war eigentlich gar nicht so kompliziert. Nun, wofür wir eigentlich einen Ausdruck für diese Animation verwenden werden, ist, diesen Teil der Animation zu machen. Weil wir wollen, dass das Rechteck immer genau um den Text herum liegt, auch wenn wir den Text anpassen. Also wenn mein Name in den sozialen Medien zum Beispiel nicht Fogel Fog wäre, aber ich weiß es nicht Ein Mr. Best-Imitator. Sie können sehen, dass unser Rechteck seine Größe nicht an den neuen Text anpasst Um dies zu erreichen, werden wir als Erstes unsere Ebene umbenennen, denn wie Sie sehen können, spiegelt der Ebenenname im Moment immer den tatsächlichen Text wider. Also zuerst war es Fogel Fok und jetzt ist es ein Mr. Best-Imitator, aber wir brauchen diesen Namen später, also nennen wir ihn Und so ändert sich der Name nicht mehr, auch wenn wir ihn wieder auf die Ebene setzen , die Ebene heißt immer noch Boxtext, was genau das ist, was Was das Rechteck angeht, werden wir dieses Rechteck vorerst entfernen, aber ein neues erstellen, indem wir das Rechteckwerkzeug verwenden und dann einfach darauf doppelklicken. Wie Sie sehen können, ist dadurch ein Rechteck entstanden , das eigentlich unsere gesamte Leinwand einnimmt. Aber da wir die Größe des Rechtecks mit einem Ausdruck definieren wollen des Rechtecks mit einem Ausdruck anstatt es vordefiniert zu haben, ist das eigentlich völlig in Ordnung. Das erste, was wir tun werden, ist, unsere Formebene wieder unter unseren Boxtext zu verschieben , und dann öffnen wir das Inhaltsrechteck und dann den Rechteckpfad, und genau hier haben wir unsere Größe, und wenn wir das ziehen, können Sie sehen, dass es tatsächlich die Größe des Rechtecks anpasst die Größe des Rechtecks Nun, wir wollen das nicht manuell anpassen, sondern wir wollen noch einmal einen Ausdruck dafür erstellen Also halten wir die alte Taste gedrückt und klicken erneut auf das Stoppuhr-Symbol, und los geht's, wir haben unser Ausdrucksfenster Wir benötigen zwei Variablen, eine für die Breite, die wir festlegen werden Lassen Sie uns sie vorerst auf 100 setzen Dann noch eine für die Höhe, die wir vorerst ebenfalls auf 100 setzen werden , und dann geben wir diese beiden zurück, die Breite und die Höhe. Noch einmal, in einem Array, wie ich bereits erklärt habe, und da können Sie sehen, haben wir hier in der Mitte plötzlich ein sehr kleines Rechteck. Nun wollen wir natürlich nicht, dass Breite und Höhe nur 100 Pixel betragen, sondern wir wollen, dass sie der Größe unserer Textebene entsprechen. Als Nächstes holen wir uns diese Textebene und speichern sie in einer anderen Variablen. Also werden wir es Text nennen. Ebene, und wir können die Ebene erhalten, indem wir diese Komposition schreiben, die auf diese Komposition verweist Aus dieser Komposition wollen wir eine bestimmte Ebene herausholen, und dann können wir in diesen Klammern definieren, welche Ebene wir wollen Und die Ebene, die wir wollen, ist natürlich unser Boxtext. Und genau aus diesem Grund haben wir die Ebene umbenannt, damit sie ihren Namen nicht ständig ändert, aber wir wollen immer, dass sie Boxtext heißt , damit wir hier darauf verweisen können. Und dann beenden wir unsere Zeile mit einem Semikolon. Unsere Textebenenvariable verweist jetzt also, ja, auf unsere Textebene. Um nun die tatsächliche Größe unserer Textebene zu ermitteln, benötigen wir eine weitere Funktion, die zu einem bestimmten Zeitpunkt als Source Wrecked bezeichnet wird Zeitpunkt als Source Wrecked bezeichnet Klingt ein bisschen kompliziert, aber wir geben sie einfach source wecked at Sie können sehen, nachdem die Fakten bereits darauf hindeuten, dass wir wahrscheinlich danach suchen. Also ja, das ist es. Und das ist eine Funktion , die die Größe einer Ebene zu einem bestimmten Zeitpunkt ermittelt. Da wir also der Größe genau folgen und immer der exakten Größe der Textebene entsprechen wollen , geben wir einfach unsere Zeitvariable ein. Das ist also immer die Größe zum aktuellen Zeitpunkt. Und wenn wir jetzt unsere Breite einstellen, nicht auf 100, sondern auf die Punktbreite der Textebene und die Höhe auf die Punkthöhe der Textebene. Das kannst du sehen. Unser Rechteck hat plötzlich genau die Größe unseres Textes. Sie sehen aber auch, dass die Position nicht so weit passt, weil wir natürlich auch wollen, dass sich das Rechteck genau an wollen, dass sich das Rechteck genau an der gleichen Position wie unsere Textebene befindet. So können wir der Position der Formebene sagen , dass sie einfach der Position unserer Textebene folgt. Dazu klicken wir auf unsere Formebene und drücken dann P, wodurch die Position und auch unser Boxtext automatisch geöffnet werden . Klicken Sie erneut auf P, um die Position zu öffnen. Wir könnten das jetzt natürlich wieder mit einem Ausdruck lösen, indem einfach die Position des Boxtextes in unsere Formebene kopieren , aber es gibt tatsächlich eine Möglichkeit, dies viel schneller zu tun, indem Sie einfach dieses Picket-Tool hier verwenden Sie können sehen, dass dadurch diese blaue Linie entsteht, und wenn wir sie für unsere Position auswählen, dann folgt sie automatisch exakt der gleichen Position wie unsere Textebene Nun, nicht wirklich die exakt gleiche Position, aber der Ankerpunkt beider Ebenen befindet sich jetzt an exakt derselben Position. Wenn wir hier klicken, können Sie sehen der Ankerpunkt unseres Rechtecks genau hier in der Mitte befindet und der Ankerpunkt unseres Textes auch genau hier in der Mitte ist. Aber da der Text nach rechts ausgerichtet ist, wächst er immer noch aus der Box heraus, aber wir können das schnell beheben, indem einfach auf Ausgerichtet klicken. Normalerweise befindet sich der Ankerpunkt der Ebene nun standardmäßig genau in der Mitte der Ebene. Aus irgendeinem Grund haben sich die Jungs von Adobe entschieden, das nicht für Textebenen zu tun. Aber der Ankerpunkt folgt, wie Sie gesehen haben, tatsächlich der Textausrichtung, und am unteren Rand befindet sich der Ankerpunkt am unteren Rand unseres Textes, abzüglich der Zeichen, die aus dem unteren Rand des Textes herauswachsen, wie zum Beispiel A G. Richten Sie das nun perfekt aus und stellen Sie sicher, dass unser Text tatsächlich genau über unserer Form liegt. Wir könnten natürlich den Ankerpunkt unseres Boxtextes öffnen, indem wir auf A klicken und ihn dann grob verschieben, sodass er genau an die Position unseres Rechtecks passt. Aber wie Sie vielleicht schon vermutet haben, wollen wir es nicht nur grob machen, wir wollen es genau machen, und das können wir mit einem anderen Ausdruck tun Wir halten erneut die alte Taste gedrückt und klicken auf unser Stoppuhrsymbol, um eine Variable zu erstellen X, das wir für den Moment einfach auf Null setzen werden , und Variable y, die wir ebenfalls für einen Moment auf Null setzen und dann diese beiden Variablen x und y zurückgeben werden. Da wir uns nun auf der X-Achse befinden, befinden wir uns bereits an exakt derselben Position Für die X-Achse müssen wir diesen Wert eigentlich nicht auf Null setzen, sondern wir können einfach dem ursprünglichen Wert folgen, und sie sind der erste Wert in der Reihe. Für unsere zweite Position wollen wir wieder die Höhe unserer Ebene ermitteln und diese durch zwei teilen, um sicherzustellen , dass wir uns genau in der Mitte befinden. Wir können das also ganz einfach tun, indem wir diese Ebene bekommen. Dann werden wir wieder unsere Funktion Source Wrecked at Time verwenden unsere Funktion Source Wrecked at Time Wir wollen auch immer der aktuellen Uhrzeit folgen, also geben wir unsere Zeitvariable erneut Dann wollen wir die Höhe ermitteln, und das alles teilen wir einfach durch zwei. Wenn wir jetzt auf unsere Ebene klicken, können wir Woops sehen Dadurch wurde unser Ankerpunkt verschoben, aber in die falsche Richtung, weil er dadurch aus der Box heraus statt in die Box verschoben dadurch aus der Box heraus statt in die Box Wir können das also beheben, indem wir einfach direkt davor ein Minus hinzufügen. Und dann stellen wir fest, dass ich glaube, dass ich einen Fehler gemacht habe. Ich weiß, was ich falsch gemacht habe, denn unser Ankerpunkt befindet zunächst nicht genau am unteren Rand der Ebene, sondern am unteren Rand unseres Textes, wenn wir ihn dann um die halbe Höhe der Ebene verschieben. Er landet tatsächlich nicht genau in der Mitte der Ebene, sondern naja , auf halber Höhe über dem, wo er ursprünglich war. Was wir also eigentlich tun wollen, ist schnell eine neue Variable zu definieren, die wir Ebenengröße nennen werden. Und dann wenden Sie diese Ebenenquelle an. Zu der Zeit auf diese neue Variable gestoßen. Und dann werden wir tatsächlich die Ebenengröße als Punkt oben angeben Das wäre genau an der Spitze der Ebene, und dann addieren wir die Punkthöhe der Ebenengröße geteilt durch zwei, wodurch sie dann um die halbe Höhe der Ebene nach unten verschoben wird , die genau in der Mitte unserer Ebene sein sollte. Und da haben wir es. Dennoch ist das nicht genau das, was wir wollen, weil es eigentlich sehr nah beieinander liegt, weil die Größe unseres Rechtecks genau der Größe unserer Textebene entspricht. Und wir wollten dieser Größe folgen, aber immer nur ein bisschen größer sein. Wir kehren also schnell zu unserer Form zurück : Inhalt: Rechteck, Rechteck, Pfadgröße. Und hier werden wir eine weitere Variable definieren, die wir Padding nennen werden, und wir werden einfach das Polsterrohr festlegen Sagen wir vorerst 50. Und wenn wir das dann sowohl zur Breite als auch zur Höhe addieren , haben wir ein Rutschfeld. Gehen wir nun zurück zur Anpassung unserer Kompositionsgröße, und jetzt können wir die Position unseres Boxtextes ermitteln, und wie Sie wissen, folgt unsere Formebene genau dieser Position, und wir können sie wieder an die Stelle verschieben, an der sie sein sollte Ja, ich schätze, du weißt inzwischen, wie unglaublich mächtig die Ausdrücke sind und dass es möglich ist, sehr, sehr fortgeschrittene Dinge mit ihnen zu machen . Aber lassen Sie uns kurz zusammenfassen, was wir in dieser Lektion gelernt haben. Wir haben gelernt, dass wir die Werte einer Eigenschaft nicht nur mit einem Schlüsselbild, sondern auch mit Ausdrücken ändern können nicht nur mit einem Schlüsselbild, sondern auch mit Ausdrücken Wenn nun Ausdrücke eingegeben werden, erwarten Eigenschaften, die einen einzigen Wert erwarten, nur, dass ein Wert dieses Typs zurückgegeben wird. Für Eigenschaften, die mehrere Werte benötigen, müssen wir ein Array zurückgeben. Ein Array ist einfach eine Liste von Werten, die wir in eckige Klammern einkapseln müssen, und dann trennen wir die verschiedenen Werte einfach durch ein Wir haben auch gelernt, dass es einige spezifische vordefinierte Variablen gibt , wie zum Beispiel die Zeitvariable, die die aktuelle Uhrzeit erhält, oder zum Beispiel die Wertvariable, die den Anfangswert einer Eigenschaft erhält den Anfangswert einer Eigenschaft erhält Wenn dieser Anfangswert ein Array ist, können wir wieder mit eckigen Klammern auf die Werte dieses Arrays zugreifen . Denken Sie immer daran, dass die Indizes eines Arrays immer mit Null beginnen. Dann gibt es noch diese Comp-Variable. Dadurch wird eigentlich nur die aktuelle Komposition abgerufen, und dann können Sie beispielsweise die Ebenenfunktion verwenden, um eine bestimmte Ebene zu erhalten Oder wenn Sie versuchen würden, die aktuelle Ebene abzurufen, an der Sie gerade arbeiten, könnten Sie das mit dieser Ebenenvariablen tun. Dann gibt es noch die Funktion Source Wrecked at Time, die wir ein paar Mal verwendet haben Diese Funktion ermittelt die Breite und Höhe einer Ebene Wir gehen auch kurz auf die beiden mathematischen Funktionen mathematischer Punktsinus und mathematischer Punktkosinus Aber wie Sie sich vorstellen können, gibt es noch jede Menge mehr mathematische Funktionen Sie könnten zum Beispiel eine Variable erhalten, die etwa Pi mit dem mathematischen Punkt Pi übereinstimmt. Wir haben dann all dieses Wissen angewendet , um eine Box zu erstellen, die exakt immer um einen Text passt und seiner Größe folgt, auch wenn sich der Text ändert. Damit haben wir eigentlich alle Grundlagen, wir müssen unsere endgültige Animation zusammenstellen. Wenn du abenteuerlustig bist, kannst du schon versuchen die Animation selbst zusammenzustellen und dann mit der nächsten Lektion weitermachen um zu sehen, wie ich es selbst gemacht habe 6. Zusammenfügen unserer Animation: Es wird spannend, lassen Sie uns unsere letzte Animation im unteren Drittel zusammenstellen . Sollen wir? Da wir in unserer Illustrator-Lektion bereits alle unsere Assets importiert haben, beginnen wir mit der eigentlichen Animation Lassen Sie uns also unseren Text, unsere Formebene, unseren anderen Text und unsere sozialen Medien Ich kann vorerst unsichtbar sein und mit der Animation der Linien im Hintergrundfeld beginnen . Jetzt soll unsere oberste Linie von rechts einfliegen. Wenn wir also auf P an der vierten Position klicken, erhalten wir unseren Positionswert, kehren zum Anfang zurück und gehen dann zehn Frames vorwärts. Stellen Sie hier einen Schlüsselrahmen für unsere endgültige Position ein. Gehen Sie dann zurück zum Anfang und bewegen Sie es dann so nach rechts, sodass es genau außerhalb des Bildschirms ist. Nun bewegen wir uns in der Linie, aber das ist immer noch eine lineare Animation, also wollen wir das Ganze cooler aussehen lassen indem wir beide Keyframes auswählen und F 9 drücken, wodurch die automatische Lockerung angewendet wird Aber lassen Sie uns schnell den Diagrammeditor öffnen . Übrigens können Sie Ihre Keyframes im Diagrammeditor perfekt zentrieren Ihre Keyframes im , indem Sie hier unten auf diese Schaltfläche klicken. Sie sehen, dass der Graph-Editor automatisch auf unsere aktuelle Animation zentriert wurde. Und wie Sie auch sehen können, da wir zwei Werte haben , die wir hier animieren, den X- und den Y-Wert, gibt es tatsächlich zwei Linien im Diagramm. Wir haben nichts an der Y-Koordinate geändert, das ist also eine perfekt gerade Linie, aber wir haben nur etwas an der X-Koordinate geändert Leider zeigt After Eats bei der Arbeit mit zwei Werten nicht Ihre Griffe an, mit denen Sie dies nach Belieben ändern Ich habe keine Ahnung warum, aber wir können das schnell mit einem Rechtsklick und dann mit separaten Dimensionen beheben . Jetzt haben wir eine Eigenschaft für die X-Position und eine Eigenschaft für die Y-Position. Wenn wir wieder zur X-Position gehen, wählen Sie unsere beiden P-Frames aus und drücken Sie F neun. Sie werden wieder automatisch gelöscht. Und los geht's, wir haben unsere Griffe die Lockerung anpassen können Die Art und Weise, wie wir die Lockerung anpassen wollen , ist, dass sie sehr schnell eingeht und dann langsam wieder ausgeblendet , so etwas, das, wenn wir es uns dann ansehen, ungefähr so aussehen wird Sieht ziemlich cool aus, würde ich sagen. Jetzt machen wir genau dasselbe in der unteren Zeile, aber nur von der linken Seite. Schließen Sie also den Diagrammeditor. Gehen Sie zur untersten Zeile und klicken Sie erneut auf P, um die Positionseigenschaft zu öffnen. Scrollen Sie ganz zurück zum Anfang. Lass uns das schnell wieder ein bisschen größer machen. Wenn wir dann noch einmal die Umschalt-Taste gedrückt halten und hierher gehen, können Sie sehen, dass es automatisch bei den Keyframes bleibt Jetzt wollen wir, dass das letzte Schlüsselbild hier und das erste Schlüsselbild wieder hier ist Dann werden wir wieder unsere Dimensionen trennen. Tatsächlich können wir die Keyframes aus der Y-Position entfernen , da wir dort nichts ändern, und wir können dasselbe für die oberste Zeile tun. Wählen Sie dann unsere X-Position und öffnen Sie den Diagrammeditor. Und mir wurde gerade klar, dass ich bisher nicht einmal etwas an der Position geändert habe. Also wollen wir das natürlich so weit rausziehen , dass es auch außerhalb des Bildschirms erscheint Klicken Sie also noch einmal hier auf diese Schaltfläche, um unsere Animation zu zentrieren, und wählen Sie beide Schlüsselbilder Und drücken Sie F neun, um die automatische Lockerung anzuwenden. Und dann machen wir im Grunde dasselbe. Wir möchten , dass diese Animation ebenfalls schnell beginnt und dann langsam ausgeblendet wird, ungefähr so. Lass uns vergleichen. Ja, es sieht ziemlich ähnlich aus. Nur der eine geht runter, der andere steigt , weil sie von unterschiedlichen Schildern herkommen. Und wenn wir uns unsere Animation ansehen, ist Lo gut zu mir. Jetzt, zur gleichen Zeit, während sich diese beiden von den Seiten her bewegen, wollen wir langsam in unserer Hintergrundbox verblassen. Wir schließen erneut den Diagrammeditor und klicken auf T, um die Transparenz zu öffnen. Lassen Sie uns die Position schnell wieder öffnen, indem wir P drücken , damit wir die Keyframes an genau derselben Position positionieren können . Unsere endgültige Position ist hier. Dort sollte unsere Opazität bei 100% und bei 0% beginnen Für diese beiden wenden wir einfach die automatische Lockerung an. Wählen Sie beide aus, drücken Sie F neun, und das ist für die Opazität völlig in Ordnung . Sieht ziemlich cool Ich würde sagen. Jetzt wollen wir als Nächstes das Social-Media-Symbol an die richtige Position bringen. Machen wir es also schnell wieder sichtbar. Zoomen Sie ein bisschen hinein. Und ich habe gerade gemerkt, dass das nicht wirklich perfekt zentriert ist, also lass mich die Position öffnen und sie ein bisschen nach oben verschieben. Ja, das sieht gut aus. Und so etwas soll unsere endgültige Position sein. Also lass mich schnell hierher gehen. Klicken Sie dann erneut auf die Schaltfläche „Nächstes Bild“, um zehn Frames vorwärts zu gehen. Klicken Sie also zehnmal darauf. Lassen Sie uns eigentlich weitermachen. 20 Frames. Also können wir entweder noch einmal auf die Schaltfläche für das nächste Bild klicken oder wir können es hier anpassen. Wir wollen zwei Frames machen. 30. Dies soll unsere endgültige Position sein, also werden wir hier einen Positions-Schlüsselrahmen festlegen. Gehen Sie dann zehn Frames zurück, setzen Sie ein weiteres Position-Keyframe, und für dieses wollen wir es genau in die Mitte unserer Komposition verschieben , was wir tun könnten, indem wir es hierher ziehen oder wir die Lin-Option verwenden Wir möchten die Ebene an der Komposition und der Mitte der Komposition ausrichten . Dann gehen wir zurück zu Hier und öffnen auch die Skalierungseigenschaft, was wir tun können, indem wir auf S klicken . Erstellen Sie dafür einen Keyframe, und wenn wir jetzt U drücken, werden tatsächlich alle Eigenschaften geöffnet , die Keyframes enthalten In diesem Fall also die Position und das Ende der Skalierung gleichzeitig Und dann können wir hier rüber gehen, einen weiteren Skalierungs-Keyframe erstellen, zum ersten zurückkehren und eine Basis 20 setzen Wenn wir jetzt alle unsere Keyframes auswählen und F 9 drücken, wir uns an, wie das aussieht Lass mich schnell zurückgehen , um mir alles anzusehen. Das sieht ziemlich cool aus. Das würde ich sagen. Um unseren Text so zu animieren, wie wir es wollen, brauchen wir eigentlich ein Tool brauchen wir eigentlich ein Tool, über das wir noch nicht gesprochen haben, nämlich einen sogenannten Textanimator, denn wenn wir die Eigenschaften öffnen würden, lassen Sie uns den Text wieder sichtbar machen und dann die Position anpassen Dadurch wird natürlich die Position des gesamten Textes angepasst die Position des gesamten Aber wir wollen eine Möglichkeit haben, jeden Charakter einzeln zu animieren, und das können wir mit einem Textanimator tun Um einen zu erstellen, klicken wir hier auf die Schaltfläche Animieren und erstellen einen Textanimator für die Positionseigenschaft. Anschließend fügen wir eine weitere Eigenschaft Anschließend fügen wir eine weitere Eigenschaft Keine Skala, so heißt es. Mit diesen beiden Werten beginnen wir. Denn unser Textanimator animiert unsere Textebene von den Positionen aus, die wir hier wieder auf ihren ursprünglichen Wert setzen hier wieder auf ihren ursprünglichen Am Anfang möchten wir also, dass die Position hier ganz oben und wir uns dann langsam in allen Ebenen bewegen Alle Charaktere, ich meine, tut mir leid. Denn am Anfang wollen wir den Text da oben haben und ihn dann Zeichen für Zeichen wieder nach unten verschieben. Und wir wollen auch, dass sie leicht vergrößert werden. Also werden wir die Skala auf „Ich weiß nicht“ reduzieren, sagen wir, wahrscheinlich auf 60. Wenn wir jetzt unseren Bereichswähler öffnen und anfangen mit dem Startwert zu spielen, können Sie ein ha sehen Dort bewegen sich tatsächlich alle unsere Charaktere einzeln nach unten. Falls das aus irgendeinem Grund bei dir nicht funktioniert, es aber das ganze Wort gleichzeitig bewegt, solltest du das vorher überprüfen, das ist auf zeichenbasiert eingestellt. Denn wenn wir es anhand von Wörtern einstellen und es dann anpassen würden , würde es tatsächlich das ganze Wort verschieben. Aber wir wollen es für Charaktere haben, also werde ich es wieder auf Charaktere setzen. Dann werde ich wieder zu unserem letzten Schlüsselbild des Social-Media-Symbols zurückkehren, den Start wieder auf Null setzen und ein Schlüsselbild erstellen. Gehen Sie noch einmal zehn Keyframes vorwärts und stellen Sie diesen Wert auf 100 ein. Dann wählen wir wieder unsere beiden Keyframes aus und drücken F neun, um die automatische Lockerung anzuwenden Sieht ziemlich cool aus. Also, ich würde das hier gerne ein bisschen aufdrehen. Wir wählen unsere Immobilie aus und öffnen dann erneut den Diagrammeditor Ich wähle den unteren aus und ziehe ihn ein bisschen weiter hierher und mache dasselbe für den oberen. Das ist im Grunde das Gleiche wie automatischen Easing, aber extremer Es beginnt viel langsamer, wird dann viel schneller und wird dann langsam wieder ausgeblendet Natürlich wollen wir zunächst nicht, dass der Text sichtbar ist und in der Luft fliegt , aber wir wollen, dass er nur innerhalb dieses Rechtecks sichtbar Was wir dafür verwenden werden, ist eine Trainingsmatte. Um das zu tun, werden wir einfach unser Hintergrundfeld duplizieren, was wir tun können, indem wir Control D verwenden, Pork Man D verwenden, wenn Sie sich auf einem MC befinden, und dieses Feld dann ganz nach oben über unseren Text verschieben oben über und es unsichtbar machen , weil wir es nicht wirklich brauchen. Wir brauchen nur die Form. Wenn wir dann unsere Switch-Modi hier nach unten umschalten, werden wir sehen, dass wir unsere Track-Mat haben, und wir wollen die Track-Mat der TikTok-Ebene auf unseren Hintergrundblock setzen der TikTok-Ebene auf unseren Hintergrundblock Oder zwei. Dadurch wird nun sichergestellt, dass unsere Textebene tatsächlich nur sichtbar ist , wenn die Ebene, die wir als Track-Matte festgelegt haben , auch sichtbar wäre. Aber ich habe gerade ein Problem damit festgestellt , weil unser Hintergrundfeld natürlich leicht transparent ist , was bedeutet, dass unser Text auch in diesem Fall leicht transparent ist. Um das zu beheben, werden wir eigentlich keine Trainingsmatte verwenden, aber zumindest haben wir über sie gesprochen, wir werden stattdessen eine Maske verwenden. Lassen Sie uns das schnell wieder auf „Keine Matte“ setzen , und wir können diese Ebene auch wieder entfernen und hier leicht heranzoomen, unser Rechteckwerkzeug unsere Textebene auswählen. Wenn wir dann von der oberen Zeile zur unteren Zeile ziehen und gedrückt halten. Dadurch wird tatsächlich eine Maske erstellt, was bedeutet, dass alles, was sich außerhalb dieser Maske befindet, sichtbar ist. Wenn wir unsere Komposition auf die gesamte Größe der Leinwand zurückstellen , können Sie sehen, ah ha, da bewegt sie sich nur von innen in die Box hinein, weil die Maske alles einschränkt , was sich außerhalb Unsere Animation, die wir jetzt zusammengestellt haben, sieht so aus. guter Letzt müssen wir jetzt unseren unteren Text wieder hinzufügen. Auch diesen werden wir maskieren, aber dieses Mal werden wir die Maske tatsächlich animieren Als Erstes wählen wir beide aus, klicken mit der rechten Maustaste und erstellen dann eine Unterkomposition. Dadurch werden diese beiden Ebenen in eine neue Komposition verschoben , die dann Teil dieser Komposition ist, und wir möchten eigentlich alle Attribute in die neue Komposition verschieben in die neue Komposition Und wir werden dieses Feld Text nennen. Weil wir unsere Ebenen immer beschriften und klicken. Okay. Nun, was wir damit gemacht haben, ist, dass wir diese beiden Ebenen im Wesentlichen zu einer einzigen Ebene zusammengeführt haben, auf die wir jetzt eine Maske auftragen können. Gehen wir also hier zu unserem letzten Keyframe. Gehen Sie zu dieser Ebene, bewegen Sie sich etwas nach unten, wählen Sie erneut unser Rechteckwerkzeug und zeichnen Sie mit der ausgewählten Ebene eine Maske, die gerade noch endet Hier. Jetzt ist also alles, was sich außerhalb dieser Maske befindet, wieder unsichtbar, was im Grunde alles auf dieser Ebene ist. Aber wir wollen diese Maske jetzt animieren, wie ich schon gesagt habe. Wir werden nun unsere Maskeneigenschaften öffnen und unseren Maskenpfad animieren Noch einmal erstellen wir dafür ein Schlüsselbild, um zehn Frames vorwärts zu gehen Dann können wir diese beiden Punkte einfach hier auswählen und sie ganz zur Seite verschieben. Sie können sehen, dass wir das nach Belieben anpassen können, und wenn wir die Shift-Taste drücken und gedrückt halten, werden sie tatsächlich auf einer Linie bewegt, und wir wollen das animieren, also verschieben wir das hier drüben Wählen Sie dann erneut unsere beiden Keyframes aus und drücken Sie F 9, um die automatische Lockerung anzuwenden Und wenn wir dann zurückgehen und nachschauen, los geht's. Wir haben unsere letzte Animation im unteren Drittel. Lassen Sie uns zusammenfassen, was wir in dieser Lektion gelernt haben. Wir haben das Wissen, das wir in den letzten Lektionen gelernt haben, im Grunde genommen angewendet , um unsere endgültige Animation zu erstellen. Aber nicht nur das. Wir haben tatsächlich auch ein paar neue Dinge gelernt. Wir haben gelernt, was ein Textanimator ist und dass wir ihn verwenden können , um die Charaktere eines Textes separat zu animieren Wir haben auch schnell über Track-Matten gesprochen, sie dann aber nicht wirklich benutzt Aber wir haben stattdessen eine Maske verwendet und auch gelernt, wie man eine Maske animiert Aber wie nutzen wir jetzt tatsächlich unser unteres Drittel für unsere Social-Media-Inhalte Denn im Moment befindet es sich nur über einer Bilddatei und nicht über unserem eigentlichen Videoinhalt. Wie Sie vielleicht vermutet haben werden wir uns in der nächsten Lektion genau damit befassen 7. Exportieren unserer Animation in eine Bewegungsgrafikvorlage: Okay, wir haben also gelernt, wie unsere Animation im unteren Drittel erstellen. Aber einer der wichtigsten Teile fehlt immer noch. Wie bringen wir unsere Animationen auf unser eigentliches Filmmaterial, damit wir sie in unseren Social-Media-Inhalten verwenden können? Jetzt könnten Sie Ihr Filmmaterial natürlich direkt in After Effects importieren , Ihre Animation direkt in After Effects darüber legen, alles rendern und Feierabend Aber stellen Sie sich vor, Sie müssten das für jede kleine Animation tun , die Sie zu Ihren Social-Media-Inhalten hinzufügen möchten Sehr schnell sehr umständlich werden. Nun, wie Sie sich nach dieser Einführung wahrscheinlich vorgestellt haben, gibt es tatsächlich einen besseren Weg, dies zu tun, indem ein sogenanntes MOG RT nutzen, was die Abkürzung für Motion Graphics Template ist MOGRT ist im Wesentlichen eine Animationsvorlage für Premier Pro , mit der Sie Ihre Animation direkt in Premiere verwenden und dennoch einige Einstellungen anpassen können , z. B. Ersetzen von Texten und dergleichen Wenn wir nun Premier öffnen und direkt in Premiere zum Fenster mit den wichtigsten Grafiken wechseln , können Sie sehen, dass es bereits einige vordefinierte MOGRTs gibt einige vordefinierte Nun, diese MOD-RTs werden direkt in Premier Pro mitgeliefert, sie sind also bereits im Lieferumfang enthalten. Wenn wir eines davon öffnen, wie zum Beispiel den modernen Titel, meine ich, ich persönlich würde es nicht modern, sondern super duper ultra hässlich bezeichnen sondern super duper Aber das ist nur meine Meinung. Die Frage ist, wie bekommen wir unsere eigene Animation in hier in Premier unsere eigene Animation in das Fenster mit den wichtigsten Grafiken. Lassen Sie uns dazu schnell zu After Effects zurückkehren und auch in After Effects zu Fenster gehen und das wichtige Grafikfenster öffnen. In diesem Fenster müssen wir nun zunächst eine Komposition auswählen , die wir als MOG RT exportieren möchten Jetzt werden wir natürlich die Zusammensetzung unserer Vermögenswerte exportieren natürlich die Zusammensetzung unserer Vermögenswerte Und als ich das sagte, wurde mir klar , dass wir diese Zusammensetzung nicht richtig benannt haben. Bevor wir also ausgewählt haben, kehren wir zu unserem Kompositionsordner zurück. Klicken Sie mit der rechten Maustaste auf den Namen und nennen Sie ihn Social Media. Banner. Das ist ein viel besserer Name. Wählen Sie jetzt unsere Social-Media-Banner-Komposition und nennen Sie sie MOG RT Genau das Gleiche. Wir werden es auch Social-Media-Banner nennen. Jetzt müssen wir nur noch alle Eigenschaften, die wir in Premier Pro bearbeiten möchten, in dieses Fenster hier oben ziehen wir in Premier Pro bearbeiten möchten, in dieses Fenster hier oben Der wichtigste Teil ist jetzt natürlich der Text. Wenn wir zum Beispiel möchten, dass der obere Text anpassbar ist, öffnen wir die Eigenschaften unserer obersten Textebene und ziehen dann unseren Quelltext hierher. Dadurch ist unser Text hier anpassbar, aber auch unser Text wird später in Premier Pro anpassbar sein. Also zum Beispiel, ob wir das auf Ich weiß nicht ändern würden . Sagen wir Instagram, es wird automatisch in unserer Komposition aktualisiert. Bisher wird es jedoch nur den Inhalt des Textes anpassbar machen. Was ist nun, wenn Sie zum Beispiel die Schriftart oder die Größe von allem ändern möchten? Um dies zu aktivieren, können wir auf Eigenschaften bearbeiten klicken und die benutzerdefinierte Schriftauswahl aktivieren Anpassung der Schriftgröße aktivieren. Und aktiviere Fo-Stile. Wenn wir jetzt klicken, siehst du aha, es wurde jetzt auch ein lustiger Selektor hinzugefügt und all das lustige Zeug Was wäre, wenn wir noch mehr anpassen wollten, wie zum Beispiel die Farbe des Textes Wie Sie sehen können, ist dies bisher nicht möglich. Es gibt hier keine Anpassungsoption , um die Farbe des Textes zu ändern, und wir können auch nicht die Füllfarbe hierher ziehen und hierher Das funktioniert einfach nicht. Aber wir können das mit einem kleinen Trick ermöglichen. Dafür werden wir tatsächlich den Fülleffekt verwenden. Also gehen wir zu den Effekten und Voreinstellungen, suchen nach dem Fülleffekt und ziehen den Fülleffekt dann per Drag-andhold auf unseren Text Sie können sehen, dass unser Text plötzlich rot ist, weil der Fülleffekt eigentlich nur Ändern der Farbe einer Ebene ermöglicht Lassen Sie uns das schnell wieder auf Weiß setzen . Und dann öffne hier unten unsere Effekte, unseren Fülleffekt, und dann ziehe und halte unsere Farbe hier oben. Derzeit wird dies einfach als Füllfarbe bezeichnet. damit gefüllt werden würde, wenn wir es später in Premier Pro verwenden Woher würden wir wissen, welche Ebene damit gefüllt werden würde, wenn wir es später in Premier Pro verwenden würden? Lassen Sie uns diesen beiden Eigenschaften eigentlich genauere Namen geben . Wir werden diesen einen Top-Text und diesen einen Top-Text Farbe nennen . Wir können das sogar noch weiter anpassen , indem wir einige Formatierungsoptionen hinzufügen, wie zum Beispiel eine Gruppe. Wir könnten diese Gruppe zum Beispiel Top-Text nennen und dann unseren obersten Text und auch unsere Farbe hierher ziehen und auch unsere Farbe hierher Jetzt haben wir einen Ordner, den wir einfach schließen können der später in Premier L genauso sichtbar sein wird . Fügen wir weitere Eigenschaften hinzu Natürlich wollen wir auch, dass der untere Text anpassbar ist. Dazu können wir einfach unsere Pre-Comp öffnen, indem wir hier doppelklicken, und dann können wir unseren Quelltext einfach per Drag & Drop von diesem Text in die gleichen wichtigen Grafiken Jetzt nennen wir das Bottom-Text und fügen eine weitere Gruppe hinzu, die wir auch Bottomtext nennen, und verschieben diese Eigenschaft hierher und schließen dann alles Wir haben also alles sauber und aufgeräumt. Jetzt könnten wir den Fülleffekt natürlich auch wieder verwenden , um zum Beispiel die Farbe der Form oder des Textes zu ändern, aber das werde ich jetzt nicht tun, weil Sie bereits wissen, wie es funktioniert Wenn Sie es also selbst tun möchten, machen Sie bitte weiter Aber es gibt noch eine andere Sache, die ich dir zeigen wollte, denn was wäre zum Beispiel, wenn wir die Größe der Polsterung unserer Box anpassen wollten die Größe der Polsterung unserer Box Nun, es ist natürlich auch nicht möglich, einen Ausdruck in unser Fenster mit wichtigen Grafiken zu ziehen , denn wenn wir hier rein gehen und dann die Größe nach oben ziehen, wird diese Eigenschaft durch einen Ausdruck gesteuert Das Ändern der Eigenschaft selbst wird also eigentlich nichts ändern, weil wir sie mit einem Ausdruck überschreiben Also lass es uns wieder entfernen. Das einzige, was wir anpassen möchten ist unser Padding, das wir derzeit hier in einer Variablen gespeichert haben derzeit hier in einer Variablen gespeichert Derzeit ist es auf 50 Pixel eingestellt. Jetzt können wir das wieder mit einem kleinen Trick ermöglichen. Wir werden wieder einen bestimmten Effekt verwenden, nämlich den Slider-Effekt. Wir ziehen den Slider-Effekt einfach per Drag & Drop auf unsere Formebene, und dann haben wir hier oben einen Slider. Dieser Slider macht derzeit absolut nichts. Aber wir können ihn mit einem Ausdruck verbinden. Wir könnten das tun, indem den spezifischen Effekt erzielen. Oder ein kleiner Trick. Ich wollte es dir auch zeigen, wenn wir einfach hier reingehen und dann noch einmal unser Pick-Peitschen-Symbol auswählen und es auf den Slider Es wird automatisch den Code zur Auswahl des Sliders schreiben den Code zur Auswahl des Jetzt nimmt unsere Padding-Variable automatisch den Wert an, der in unserem Slider-Steuerungseffekt auf dem Slider steht , zum Beispiel momentan Null ist, aber wenn wir sie auf, ich weiß nicht, 500 Pixel einstellen , dann haben wir plötzlich einen riesigen Abstand Aber lassen Sie uns das vorerst wieder auf 50 Pixel setzen und dann unsere Effekte, unsere Slider-Steuerung, öffnen und dann können wir diesen Slider per Dragonhold in unsere wichtigsten diesen Slider Lassen Sie uns das nun umbenennen, um ihm einen besseren Namen als Slider-Steuerung zu geben einen besseren Namen als Nennen wir es eine Kiste. Fügen Sie es hinzu und verschieben Sie es auch in unsere unterste Textgruppe. Wahrscheinlich unter dem Text. Das Letzte, bevor wir unser MOU TRT exportieren , ist, dass ich zu unserer Social-Media-Banner-Komposition zurückkehre zu unserer Social-Media-Banner-Komposition zurückkehre und unser Beispielbild unsichtbar mache , weil wir nicht möchten, dass unser Beispielbild in der eigentlichen endgültigen Animation landet in der eigentlichen endgültigen Nehmen wir nun an, wir sind mit all den Dingen zufrieden, die wir zu unseren grundlegenden Grafiken hinzugefügt haben Dies sind die einzigen Werte, die wir in Premier Pro anpassen möchten. Wenn Sie möchten, dass weitere Werte einstellbar sind, können Sie sie natürlich einfach nach Belieben hinzufügen. Aber nehmen wir an, wir sind mit dem, was wir gerade haben, einverstanden. Um dies nun als Animationsvorlage zu exportieren, klicken wir auf die Schaltfläche Animationsvorlage exportieren . Wer hätte das gedacht? Dann, nachdem Et uns mitteilt , muss das Projekt zuerst gespeichert werden. Das ist in Ordnung. Just A After Effects öffnet diesen Dialog, in dem wir unsere Animationsvorlage speichern möchten. Jetzt müssen MOGRT-Dateien tatsächlich in einem ganz bestimmten Ordner abgelegt werden einem ganz bestimmten Ordner , damit Premier sie tatsächlich abrufen kann Wenn wir also den lokalen Vorlagenordner wählen, legt After Effects die Datei automatisch in diesen bestimmten Ordner und Premier Pro nimmt sie automatisch Wenn Sie möchten, können Sie natürlich auch das lokale Laufwerk auswählen und dann auf Durchsuchen klicken, und dann auf Durchsuchen klicken um einen beliebigen Ordner auszuwählen, in dem Sie die Datei speichern möchten. Und dann könnten Sie die MODRT-Datei aus diesem Ordner nehmen und sie beispielsweise mit Kollegen oder anderen Inhaltserstellern teilen oder sie sogar verkaufen, wie ich es mit meinem Essential-Textpaket mache Aber wir werden vorerst einen lokalen Vorlagenordner auswählen und darauf klicken Okay? Und wenn wir jetzt wieder zu Premier Pro wechseln und in unserem Fenster mit den wichtigsten Grafiken unserem Social-Media-Banner suchen. Da ist unser Social-Media-Banner. Und wenn wir es jetzt in unsere Komposition ziehen und gedrückt halten, ja, wir wollen die vorhandenen Einstellungen beibehalten und alles abspielen. Tada, an dritter Stelle steht unser Social Media L, und auf der Registerkarte Bearbeiten unseres wichtigsten Grafikfensters haben wir sogar alle Eigenschaften, die wir zu unserem MOGRT hinzugefügt Wenn wir zum Beispiel den oberen Text ändern möchten, könnten wir diese Gruppe öffnen unseren Text erneut ändern, und er passt sich automatisch Und das ist alles. So können Sie Ihre Animationen ganz einfach exportieren, um sie direkt in Premiere nutzbar zu machen. 8. Fazit: Herzlichen Glückwunsch, alle zusammen. Sie können sich jetzt als Adobe After Effects-Experte bezeichnen. Okay, vielleicht ist Expert etwas übertrieben, aber zumindest sind Sie jetzt in der Lage, diese wunderschöne Lower-Thirds-Animation zu erstellen Und Sie können dieses Wissen auch anwenden, um selbst Tonnen mehr Animationsgrafiken zu erstellen Sie wissen auch, warum es von Vorteil ist, Ihre Animationselemente mit Adobe Illustrator zu erstellen Ihre Animationselemente mit Adobe Illustrator Sie wissen, wie Expressions funktionieren und dass Sie mit ihnen sehr, sehr leistungsstarke Dinge tun können, und Sie haben sogar gelernt, wie Sie aus Ihrer Animation eine MO-GRT erstellen , die direkt in Premier Pro verwendet und angepasst werden kann direkt in Premier Pro verwendet und angepasst Wenn es also eine wichtige Sache gibt die Sie aus diesem Kurs mitnehmen können, dann ist es, dass Animationsanimationen nicht so schwer sind wie ein T. Drei. Fast alle Animationen sind nur ein Haufen von Schlüsselbildern. Vielleicht mit etwas Ausdruck obendrauf, aber oft nicht Ich kann es kaum erwarten, all die tollen Animationen zu sehen , die ihr alle erstellen werdet Sobald ihr sie vollständig animiert habt, sie gerne auf der Klassenseite unter Projekte und Ressourcen hochladen , damit wir uns austauschen und uns gegenseitig Feedback geben und eventuell eine Diskussion über Animationsabstimmungen bekommen können . Oh, und wenn du die After Effects-Projektdatei haben möchtest , die ich während der Dreharbeiten zu diesem Kurs für dich erstellt habe, lade ich sie hoch und verlinke sie in der Projektbeschreibung. Oder falls du auch nach diesem Kurs immer noch zu faul bist, die Lower 30 selbst zu bauen, habe ich eine vollwertige Version mit tonnenweise weiteren Anpassungen als vorgefertigte MOG Erhältlich entweder bei meinem Patron im Rahmen meiner Mitgliedschaft oder in meinem Shop als einmaliger Kauf Jetzt kann ich nur noch sagen: Vielen Dank, dass Sie sich diesen Kurs bis zum Ende angesehen haben. Wenn Sie an noch mehr interessiert sind, freue ich mich, wenn Sie in meinen sozialen Netzwerken vorbeischauen. Also wir sehen uns dort drüben.