Allgemein

Zeitleistenanimationen mit Photoshop

Zeitleistenanimationen mit Photoshop

Wer für ein Projekt eine Datei im GIF-Format erstellen will, wird in der Regel mit Adobe Photoshop arbeiten. Hier lassen sich mit wenigen Klicks ansehnliche GIF-Animationen gestalten. Dazu benutzt Photoshop die oftmals genutzte Frame-Animation, bei welcher sich Bild für Bild etwas tut und bewegt – so wie beim Daumenkino ein Bild dem anderen folgt. Die Bewegungen laufen hierbei aber nicht unbedingt so glatt und fließend ab, wie man es gerne hätte. Da lohnt es sich, den Blick auf die Zeitleistenanimation zu werfen, die Photoshop ebenfalls zur Erstellung von GIFs anbietet. Die Bedienung wird Nutzern von Adobe After Effects oder anderen Animationsprogrammen nicht unbedingt schwerfallen.  Wer sich aber mit Programmen für Animation noch nicht beschäftigt hat, muss die Arbeitsweise erst einmal kennenlernen.
Wir stellen euch das Prinzip der Zeitleistenanimation anhand eines kleinen Beispiels vor.
 

Das Prinzip

Zunächst muss man hierfür im Zeitleisten-Fenster auf „Videozeitleiste erstellen“ klicken und sofort öffnet sich das entsprechende Bedienfeld.
 
In unserem Fall haben wir uns den Ablauf der Animation bereits überlegt und alle Dateien und Ebenen angelegt. Im Zeitleisten-Fenster werden die Ebenen untereinander dargestellt, so wie sie angeordnet wurden. Wenn man also die Reihenfolge der Ebenen ändern will, muss man dies im Ebenen-Fenster machen. Die Reihenfolge ändert sich dann automatisch auch im Animations-Bedienfeld. Jede Ebene erhält ihre eigene Zeitleiste, welche man verlängern oder verkürzen kann. Soll eine Ebene über die ganze Zeit im Video sichtbar sein, muss ihre Zeitleiste auch bis ans Ende der Animation gehen. Die Zeitleisten kann man an ihrem rechten Rand anklicken und ziehen. So ändert man ihre Länge, also Sichtbarkeit in der Animation.
 
 

 
Das Prinzip des Animierens ist relativ simpel erklärt. Man steuert mit dem Marker in der Zeitleiste den Beginn einer sich ändernden Bewegung (Erscheinen, Verschwinden, eine Transformation etc) an. Nun klickt man im Zeitleisten-Fenster auf den Pfeil neben der Bezeichnung der Ebene. Es öffnen sich die Optionen, die man hat: Transformieren, Deckkraft, Stil. Man entscheidet sich beispielsweise dazu, eine Ebene verschwinden zu lassen. Dies steuert man logischerweise über die Deckkraft. Hierzu klickt man auf die Stoppuhr neben „Deckkraft“. Dies zeigt uns den Beginn der Animation. In der Zeitleiste erscheint ein gelbes gedrehtes Quadrat, das „Keyframe“ genannt wird. Im gleichen Zug muss man das Ende dieser Aktion definieren. Hierfür navigiert man mit dem Marker auf den entsprechenden Zeitpunkt und ändert im Ebenen-Fenster die Deckkraft. Automatisch wird ein zweiter Keyframe im Fenster gesetzt und somit ist die Aktion abgeschlossen. Für jegliche Animationen braucht es also immer mindestens 2 Keyframes.
 
 

 

Unser Beispiel

Am besten versteht man Funktionsweisen natürlich, wenn man es gleich ausprobiert. Wir zeigen euch ein simples GIF, das wir für den Post erstellt haben. In unserem Fall läuft die Animation so ab:
 

  1. Wir beginnen mit der Lupe, die erscheint. Dazu setzen wir zum geplanten Beginn des Erscheinens den Marker auf den richtigen Zeitpunkt. Schließlich setzen wir den ersten Keyframe durch Klick auf die Stoppuhr und reduzieren die Deckkraft im Ebenen-Fenster auf 0. Dann wird der Marker einige Sekunden später gesetzt und wir erhöhen die Deckkraft auf 100. Schon sitzt der zweite Keyframe und die Lupe erscheint.
  1. Nun soll sich die Lupe in die linke obere Ecke bewegen und dabei kleiner werden. Hierzu markieren wir den Zeitpunkt und setzen den ersten Keyframe bei Transformieren. Wir bewegen den Marker einige Sekunden vor und transformieren wie gewohnt die Ebene mit Photoshop. Die Bewegung zwischen den beiden Keyframes wird angeglichen und läuft flüssig ab.
  1. Im nächsten Moment erscheint unser vollständiges Logo. Diese Aktion lösen wir wie beschrieben mit den beiden Keyframes der Deckkraft.
  1. Es erscheinen ebenfalls zwei weitere Bildelemente: Die Navigationsleiste und die Social Media Leiste. Diese werden genau so über die Deckkraft geregelt.
  1. Die Inhalte der Webseite sollen präsenter gezeigt werden. Die 6 Bausteine erscheinen jeweils und werden dann auf ihren Platz in der Webseite bewegt. Sobald man das Prinzip begriffen hat, ist klar, dass wir hier ebenfalls mit Deckkraft und Transformation arbeiten. Hier muss jedes einzelne Bild eigens animiert werden.
  1. Und am Ende erscheinen über jeweils 2 Keyframes in der Deckkraft das Teamfoto und der Kontaktbereich.

 
Wer sich weiter ausprobieren will, wird auch noch auf Zoomen, Schwenken und Drehen der Kamera stoßen. Das ist an dieser Stelle aber schon Part der Profis. Aber gerade für animierte Werbe-Banner, die das GIF-Format benötigen, ist die Zeitleisten-Animation ideal, denn so lassen sich mit wenigen Klicks professionelle Banner erstellen.
 

The following two tabs change content below.

Julia Sinner

Hallo, ich bin Julia und unterstütze das Team der Klickkomplizen seit 2017 im Bereich Web- und Printdesign. Ich habe ein Faible für typografische Feinheiten und bin überzeugt von Design, das konzeptionell durchdacht und ästhetisch vollendet ist.

Neueste Artikel von Julia Sinner (alle ansehen)

NEU im #Klickkomplizen Blog: Was hat uns bewegt - November! ❄ Online: - Black Friday Wahnsinn - #WhatsApp bleibt… https://t.co/jSyuskEVC5
8 wichtige Call-to-Actions für euren #YouTube Kanal!📽 Elegante Methoden zur CTA Integration: - Pre-Rolls - Videov… https://t.co/Cz0XJy9JUo
Stories in #Facebook Gruppen - Verwaltung und Chancen! 🗣👥 - Veröffentlichung durch Nutzer kann/sollte moderiert we… https://t.co/QRJAIlvSsc
Tipps & Tricks für ein besseres #Google Ranking - Unterstützung bei Suche nach Antworten, Angeboten und Lösungen. 🔎… https://t.co/1cs68IEGzd
So sieht das optimale #Instagram Posting aus! 📸 Die Studie: 44.000 Accounts, 9 Mio. Posts Die Ergebnisse: - Im Sc… https://t.co/0pRj9ipnTN
NEU im #Klickkomplizen Blog: Die Klickies Weihnachtsfeier! 🍫 Selbstgekochtes Schokoladen-Menü: - Schaumsüppchen m… https://t.co/2kcTtt6vgi
#Google Tool-Tipps von der SEOkomm: - Die neue Google Sarch Konsole ( Neuer Anstrich, mehr Daten, genau Prüfungen)… https://t.co/HSvYb9qZv1
Marketing in Streaming und Gaming!🎮 - Enorme Reichweite (Twitch, Periscope, Facebook) - Branding durch Sponsoring… https://t.co/hM4MaN0ITQ
#YouTube launcht Stories! Ab 10.000 Abonnenten, für 7 Tage sichtbar. 📽 - Spontane, individuelle Interaktion - Beka… https://t.co/8seAHk0oRO
NEU im #Klickkomplizen Blog: #Facebook Messenger Bots: Ein Gespräch mit dem Geschenkeberater von LEGO! 🤖 Alter, Bu… https://t.co/esOu6KpxyA
Tipps von den Profis: Mehr Interaktionen auf Instagram durch Video Content und weniger Hashtags! 📽 Videos > Karuss… https://t.co/kfMb7dUMm5
NEU im #Klickkomplizen Blog: Neue Webseite für den TLV! 💻 Thüringer Lehrerverband setzt auf Klickies! Gewinnung ne… https://t.co/QBSiyuwwYU
#YouTube Werbespots im Doppelpack? 📺📺 Was ist mit euch - Lieber einmal viel Werbung am Stück oder mehrmals kleine… https://t.co/oZK70IKZbb
Zeitgemäßes Webdesign: Mobile only? What's next? 🖌 Kontext bestimmt die Funktion - Gesunde Mischung aus Funktional… https://t.co/trULRVoS0T
6 #Facebook Marketing-Hacks für mehr organische Reichweite! ✈ - Gehen Sie live - Persönliche Einladungen - Zeit fü… https://t.co/0u0V0uTt7h
NEU im #Klickkomplizen Blog: Besser organisiert mit TRELLO! 🗃 Webbasiertes Projektmanagement: - Terminplanung - T… https://t.co/wfmwvMzGAg
#Facebook veröffentlicht "Time Spent"-Dashboard! 😱⏰ Erfahrt jetzt, wieviel Zeit ihr täglich bei FB verbringt. (Nur… https://t.co/rOSnJxJI2c
SEO-Tipps zu Weihnachten direkt von #Google ! Google veröffentlicht Analyse der beliebtesten Shopping Keywords. -… https://t.co/iHgfI7hHmH
NEUes #Facebook Feature: Beiträge in Stories teilen! 💬 = Erweiterte Sharing-Optionen für Seitenbetreiber führen zu… https://t.co/GIqafwUBMb
90 wertvolle Tools für #WordPress Web Designer und Developer! 🛠 Effizienz & Kostenoptimierung durch WordPress Tool… https://t.co/VT0dkDlWkv
Share This