Motion Tween in Photoshop Werbung Blinkie

• Kann 3, 2024

In diesem Photoshop CS3-Tutorial beenden wir das Werbe-Blinkie, indem wir den Text und die Marienkäfer vom Blinkie entfernen und leer lassen, um die Animation erneut zu starten. Im letzten Tutorial haben wir das Text-Morphing in Frame 74 abgeschlossen.

Jetzt werden wir beginnen, den roten Marienkäfer unter dem Cameo in Richtung des Textes zu bewegen (J 3 Designs). Geben wir dem Marienkäfer 15 Frames, um den rechten Rand des Textes zu erreichen. Ab diesem Zeitpunkt verschieben wir sowohl den Text als auch den Marienkäfer 60 Frames zusammen, bis sie vom Blinkie verschwinden. Als nächstes bewegen wir den goldenen Marienkäfer von der unteren linken Ecke zur oberen rechten Ecke und vom Blinkie weg. Geben wir diesem Marienkäfer 20 Frames für diese Aufgabe.

Zu diesem Zeitpunkt ist der Blinkie leer. Lassen Sie uns dem Publikum eine kleine Ruhezeit von 5 Bildern geben, bevor wir den goldenen Marienkäfer wieder in seine ursprüngliche Position in der unteren linken Ecke des Blinkies bringen. Dies vervollständigt die gesamte Animation, die wiederholt wird, bis die Welt untergeht.

Öffnen Sie Ihre blinkie2.psd-Projektdatei in Photoshop^R. und fangen wir an.

1. Unser erster Schritt ist, den roten Marienkäfer in Richtung Text zu bewegen. Fügen Sie Frame 75 hinzu und setzen Sie die Dauer auf 0,1 Sekunden zurück. Fügen Sie Frame 76 hinzu und klicken Sie in der Ebenen-Palette auf die Ebene Roter Marienkäfer. Klicken Sie nun auf das Verschieben-Werkzeug und verschieben Sie damit den Marienkäfer am rechten Ende des Textes. Sie können den Marienkäfer auch mit den Richtungspfeilen auf Ihrer Tastatur positionieren.
   
   
2. Wählen Sie sowohl Bild 75 als auch Bild 76 aus und erstellen Sie ein Motion Tween mit einer Dauer von 15 Bildern. Sie sollten jetzt 91 Frames haben.
   
   
3. Jetzt verwenden wir ein Motion Tween mit 60 Bildern, um sowohl den Fehler als auch den Text außer Sichtweite zu bringen. Wählen Sie in Bild 91 in der Ebenenpalette die Ebenen Roter Marienkäfer und J 3 Designs aus. Fügen Sie einen neuen Frame 92 hinzu und ziehen Sie sowohl den Fehler als auch den Text nach links und vom Blinkie weg. Wählen Sie beide Frames 91 und 92 aus und fügen Sie ein Tween von 60 Frames hinzu. Sie sollten 152 Frames haben.
   
   Jetzt wäre ein guter Zeitpunkt, um die Animation zu testen.
   
   
4. Es ist Zeit, diesen goldenen Marienkäfer aufzuwecken und sie zur Arbeit zu bringen. Fügen Sie einen neuen Frame 153 hinzu und wählen Sie die Ebene Gold Ladybug in der Ebenen-Palette aus. Fügen Sie einen weiteren Rahmen 154 hinzu und ziehen Sie den goldenen Marienkäfer nach rechts oben und vom Blinkie weg. Wählen Sie beide Frames 153 und 154 aus und fügen Sie ein Tween mit 20 Frames hinzu. Sie sollten 174 Frames haben.
   
   
5. Wir möchten, dass der Blinkie für die Länge von fünf .l Sek. Frames leer ist. Ändern wir also die Dauer von Frame 174 auf 0,5 Sekunden.
   
   Schließlich müssen wir den goldenen Marienkäfer wieder in ihre Ausgangsposition bringen.
   
   
6. Kehren Sie zu Bild 1 zurück und klicken Sie im Popup-Menü der Animationspalette auf Bild kopieren. Wählen Sie den letzten Frame (174) aus und klicken Sie auf Frame einfügen. Wählen Sie im Dialogfeld Rahmen einfügen die Option Nach Auswahl einfügen und klicken Sie auf OK. Dadurch wird Frame 175 hinzugefügt.
   
   
7. Fügen Sie einen neuen Frame 176 hinzu, um Frame 175 zu duplizieren. Gehen Sie zurück zu Frame 175 und ziehen Sie den Marienkäfer nach unten und vom Blinkie weg, während die Ebene "Gold Ladybug" noch in der Ebenen-Palette ausgewählt ist.
   
   
8. Wählen Sie beide Frames 175 und 176 aus und fügen Sie ein Tween mit 10 Frames hinzu. Sie sollten 186 Frames haben.
   
   
9. Stellen Sie sicher, dass die Looping-Optionen auf Forever (unten in der Animationspalette) eingestellt sind, und speichern Sie Ihr Blinkie als AdvBlinkie.psd. Gehen Sie zurück zu Bild 1 und testen Sie Ihren fertigen Blinkie. Sie sollten auch die Option Für Web und Geräte speichern im Menü Datei verwenden, um Ihr Blinkie im GIF-Format für das Web zu speichern.
   
   

Copyright 2018 Adobe Systems Incorporated. Alle Rechte vorbehalten. Screenshots von Adobe-Produkten mit Genehmigung von Adobe Systems Incorporated. Adobe, Photoshop, Photoshop-Album, Photoshop-Elemente, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere-Elemente, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst und Flash Paper ist / sind entweder [eine] eingetragene Marke (n) oder eine Marke (n) von Adobe Systems Incorporated in den USA und / oder anderen Ländern.

Video-Anleitungen: How to Create an Animated Glowing Button in Photoshop (Kann 2024).