Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Bilder & Vektorgrafiken bearbeiten » Animationen: Der 3-Frame-Trick

Animationen: Der 3-Frame-Trick

Um Speicherplatz zu sparen sollte man möglichst wenige Schlüsselbilder in einer Animation einsetzen. Trotzdem braucht man auf tolle Effekte nicht zu verzichten. Das menschliche Auge ist träge. Bei schnellen Bewegungen erkennt es das Animationsobjekt nur noch...

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Frank Puscher
  • 15. Dezember 2004
Bookmarke mich
Share on pocket

von Frank Puscher

Um Speicherplatz zu sparen sollte man möglichst wenige Schlüsselbilder in einer Animation einsetzen. Trotzdem braucht man auf tolle Effekte nicht zu verzichten.

Das menschliche Auge ist träge. Bei schnellen Bewegungen erkennt es das Animationsobjekt nur noch schemenhaft. Macht man sich diesen Umstand zunutze, dann kann man die Kausalität umkehren: Erzeugen Sie eine schemenhafte Darstellung eines Objekts und das menschliche Gehirn meint, es liegt eine Animation vor.

Der Trick basiert immer auf folgendem Grundprinzip. Jede Animation besteht nur aus drei Schlüsselbildern. Wenn Sie die Animation in Flash herstellen, können Sie dazu noch Tweenings für die Übergänge einsetzen. Das gilt aber nicht, wenn Sie ein animiertes GIF exportieren wollen. Hier würde Flash die Zwischenstadien des Tweenings ebenfalls in Schlüsselbilder umrechnen und so die Dateigröße deutlich erhöhen.

Schärfeverlagerung
Der Animationstrick besteht im Grund nur aus einem einzigen Bild, nämlich dem mittleren. Das erste und das letzte Bild der Animation stehen ja fest. Nehmen wir ein Motiv mit markantem Vorder- und Hintergrund. Im ersten Bild setzen Sie den Vordergrund, also beispielsweise den fotografierten Menschen unscharf. Hierzu wählen Sie das Objekt aus, und wenden einen Gaußschen Weichzeichner an. Exportieren Sie das Motiv als JPEG.

Screenshot
Die Schärfe verlagert sich von der Frau im Hintergrund zum Mann

Machen Sie nun das Weichzeichnen rückgängig und wenden Sie es statt dessen auf den Hintergrund an. Exportieren Sie das Ergebnis als Schlussbild. Machen Sie das Weichzeichnen erneut rückgängig und wenden Sie es auf beide Bilder an. Dieses unscharfe Bild ist der Zwischenschritt.

Wenn Sie nun alle drei Bilder in schneller Folge laufen lassen, haben Sie das Gefühl einer flüssigen Bewegung. Übrigens: Je nach Speicherplatz können Sie natürlich auch mehr als einen Zwischenschritt erzeugen.

PowerZoom
Das Prinzip bleibt das Gleiche. Zeichnen Sie im ersten Frame das komplette Motiv weich. Erzeugen Sie als Zielbild einen vergrößerten Ausschnitt eines wichtigen Details. Für das mittlere Bild verwenden Sie wieder das Ausgangsmotiv in Originalgröße. Hier wenden Sie einen radialen Weichzeichner an und aktivieren die Option „strahlenförmig“. Der Filter verzerrt das Bild so, dass man den Eindruck bekommt, dass die Kamera mit hoher Geschwindigkeit in das Bild zoomt.

Screenshot
Der radiale Weichzeichner orientiert sich an der Mitte des Motivs

Tipp: Der Effekt wird noch verstärkt, wenn man mehrere Zwischenschritte erzeugt, die den Filter unterschiedlich stark einsetzen.

Reißschwenk
Statt der dynamischen Kamerafahrt, können wir selbige auch vor dem Objekt schwenken. Hierzu nehmen Sie ein breites Motiv oder vergrößern Ihr Bild so, dass es breiter wird, als die sichtbare Fläche. Nun schieben Sie es zuerst ganz nach links und exportieren das Startbild. Als nächstes schieben Sie das Motiv ganz nach rechts und erzeugend as Endbild. Nun schieben Sie das Motiv in die Mitte und wenden den Filter Bewegungsunschärfe an. Hier wählen Sie eine horizontale Achse und lassen den Filter stark wirken, so dass er das Ergebnis deutlich verfremdet.

Screenshot
Auch bei diagonalen Achsen funktioniert der Reißschwenk

Fly-In
Eine Variante des Reißschwenk ist eine Animation, in der nur ein Teil des Bilder bewegt wird. Typischerweise verwendet man diesen Effekt, um Texte ins Bild fliegen zu lassen. Erzeugen Sie also zunächst ein Motiv ohne Text und dann eines mit dem Text in der Endposition. Aus beiden Situationen exportieren Sie die JPEGs. Nun verschieben Sie den Text etwa in die Mitte der Bewegung und verwenden erneut die Bewegungsunschärfe in Flugrichtung. Wenn Sie Photoshop verwenden müssen Sie die Textebene vorher rastern.

Die Textebene muss vor dem verzerren gerastert werden

Flash-Fly-In
Sogar mit nur zwei Bildern kommt ein ganz ähnlicher Effekt in Flash aus. Die beiden Bilder markieren Anfangs- und Endpunkt des fliegenden Objekts. Um die Bewegung zu simulieren, erzeugen Sie dazwischen ein Oval mit einem runden Farbverlauf, der auf beiden Seiten die Hauptfarbe des animierten Objekts aufnimmt.

Screenshot
In Flash ersetzt ein ovaler Verlauf die Unschärfe

Die rechte Farbe wird aber im Farbmischer transparent gesetzt. Nun vergrößern Sie das Oval so, dass es mit den Rändern gerade die Anfangs- und Endposition des fliegenden Objekts berührt. Fertig. Demo ansehen.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Frank Puscher

Frank Puscher

arbeitet seit über 20 Jahren als Berater und Trainer in den Themengebieten E-Commerce und Onlinemarketing. Er berät Führungskräfte und unterstützt sie bei der Stärkung ihrer Onlinekompetenz. Frank hat mehrere Bücher über Webdesign, Kreativität und Usability geschrieben.

Agenturpartner

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

minddraft AG

Allenwinden

Orange Services

München

4eck Media GmbH & Co. KG

Waren (Müritz)

marketer UX

Düsseldorf

Alle Agenturpartner

Jobs

Sprachtalente

Volkach oder Würzburg

Webtexter für SEO Agentur

Salzburg (Österreich)

Copywriter – Vollzeit

Remote

Online Marketing Manager

München

Senior SEO Manager

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

10 phantastische Photoshop-Alternativen, fast alle kostenlos

Adobe Photoshop ist der Platzhirsch, doch es gibt kostenlose Photoshop-Alternativen, die je nach Bedarf dem großen Bruder in nichts nachstehen. Zeit zu wechseln?

 →   

Designpreis Focus Open 2022

So ein Designpreis ist eine feine Sache, wenn man ihn auch gewinnt. Insbesondere Werbeagenturen können und wollen auf ihrer Website mit solch einem Preis werben.

 →   

Alle wichtigen Photoshop Shortcuts und Tastenkombinationen auf einem Blick

Diese Tipps werden Dir das Arbeiten in Photoshop wesentlich erleichtern. Wenn man die Shortcuts in Photoshop so verwendet wie in den Standardeinstellungen, muss man wegen der Doppelbelegung bei jedem Werkzeugwechsel erst überprüfen, ob man auch das richtige erwischt hat. Heute zeige ich Dir, wie man diese Shortcuts sinnvoll anpasst.

 →   

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.