Gimp 091 – Kurvenlinie als GIF-Animation

Aus Filmen, vom Arzt- oder Krankenhausbesuch, kennt man sicher die Diagramme die ein EKG, oder Überwachungsgeräte aufzeichnen. Auch in Cartoons sieht man sie öfter als Fieberkurven. Hier baue ich davon eine einfache GIF-Animation.

Skills: Intermediate 2.8 out of 5 stars (2,8 / 5)
Plugin: Nein

 

Verwendet werden nur GIMP-Bordmittel, also ohne Plugin. In der Animation unten seht ihr das fertige Endergebnis.

Endergebnis in 200x200 Pixel

200×200 Pixel – 22 Kilobyte

 

Das Prinzip

Zum besseren Verständnis habe ich die Animation vorab in Schichten dargestellt.

  • Ganz unten liegt eine schwarze Ebene als Hintergrundebene.
  • Dazwischen kommt der grüne Verlauf. Der Verlauf täuscht vor, dass hinten ein Lichtschweif nachgezogen wird.
  • Und ganz oben liegt wieder eine schwarze Ebene, als Maske, mit der ausradierten Kurve.
Nur mittlere Ebene bewegt sich und scheint durch die obere Maske

Nur mittlere Ebene bewegt sich und scheint durch die obere Maske

Aus dem Prinzip wird klar, dass wenn die grüne Verlaufs-Ebene 10 Schritte macht, um von links nach rechts zu kommen, man auch 10 Maskenebenen und 10 schwarze Hintergrundebenen braucht.

Das macht 30 Ebenen die man (zeitweise) vorliegen hat. Daher keine Panik! Gewisse Animationen benötigen eben mehrere Ebenen. Sei es weil die Schritte der Bewegungen klein sind, damit alles flüssig läuft, oder eben wie hier, weil es die Konstruktion erfordert.

 

Bild anlegen

Ich erstelle ein neues Bild mit den Maßen 200x200Pixel. Ich fülle diese erste Ebene mit Schwarz und benenne sie in Background um.

Stand der Dinge: Eine Ebene mit Bezeichnung "Background"

Ebene mit Bezeichnung: Background

 

Neue Ebene und Farbverlauf

Mit einem Rechtsklick im Ebenen-Bereich erstelle ich eine neue Ebene in Transparent.

Als Nächstes wird ein Farbverlauf auf der neuen Ebene angelegt. Die HTML-Notation hat bei mir den Wert 00ff06. Das ist ein Grünton. Verlaufs Art ist linear und die Farbe von Vordergrundfarbe zu Transparent.

Dann ziehe ich ab der Bildmitte eine Rechteckauswahl auf und ziehe mit dem Verlaufs-Werkzeug von links nach rechts. Der Verlauf erscheint. Vorne Grün, hinten transparent (siehe Animation unten).

Auswahl und Verlauf ziehen

Auswahl rechte Hälfte und Verlauf ziehen

 

Neue Ebene für Herzlinien-Maske

Die nächste Ebene wird die Maske für das Kurvendiagramm.

Wieder wird eine neue Ebene erzeugt und komplett mit Schwarz gefüllt (siehe Bild unten).

Ebenen und Ebenennamen

Ebenen und Ebenennamen

 

Herzlinie mit Radiergummi

Damit man die folgenden Änderungen an der neuen schwarzen Ebenen sieht schalte ich den Hintergrund und Verlaufs Ebene auf unsichtbar.

Jetzt hat der Radiergummi seine Premiere. In den Werkzeugeinstellungen wähle ich für den Radiergummi eine runde Pinsel-Spitze mit harten Kanten außen und stelle die Größe auf 2 Pixel ein (siehe Animation unten).

Pinselform und Größe

Pinselform und Größe

Ich beginne ganz links die Herzlinie zu ziehen. Ich setze durch einen Mausklick den ersten Punkt und mit gedrückter SHIFT-Taste klicke ich mich immer weiter nach rechts. Automatisch wird von einem Klickpunkt zum anderen eine kerzengerade Linie gezogen (siehe Animation unten).

Radiergummi Einsatz

Linie ziehen/setzen mit STRG

 

Ebenen kopieren, anordnen, zusammenfügen

Soweit so gut. Ab jetzt werden nur noch Ebenen erzeugt und verschoben.

Ein Paket besteht also immer aus 3 Ebenen. Dem Hintergrund, die grüne Ebene und die schwarze Maske. Daher müssen immer alle drei kopiert und angeordnet werden. Die grüne Ebene wird dann mit jedem 3er-Paket mit der Pfeiltaste (Richtung links) auf der Tastatur weiter nach links verschoben.

Dann das nächste Paket. Kopieren. In Reihenfolge anordnen und die grüne Ebene nach links verschieben. Dann wieder das nächste 3er-Paket usw. Je feiner die Schrittchen der grünen Ebenen von rechts nach links sind, desto mehr Ebenen werden es zum Schluss.

Da heißt es: Augen zu und durch! Niemand hat je gesagt, dass Mediengestaltung/Design nicht eintönig sein kann. Es kann, je nach Arbeitsbereich, sogar sehr eintönig sein 😀

Ist man ganz links angekommen, das ist der Fall wenn die grüne Ebene links verschwunden ist, dann werden alle 3er-Pakete, eins nach dem anderen, miteinander verbunden. Dazu nutzt man die Ebenenoption Nach unten zusammenfügen.

 

Animationen optimieren und exportieren

Die letzten Schritte nimmt uns GIMP größtenteils ab. Im Idealfall hat man alle verbliebenen Ebenen ordentlich der Reihe nach benannt.

Ist die Datei als GIMP-Datei gesichert, rufe ich über Filter – Animation – Optimieren (für GIF) die Funktion auf. GIMP berechnet daraufhin alles selbst, was überflüssig ist wird entfernt. Das hält die Datei klein.

Dann kann über Datei – Exportieren als… die Animation endgültig gespeichert werden. Ihr müsst im Dialogfenster einen Dateinamen vergeben und die Dateiendung .gif hinten ran hängen.

Exportieren 1: Dateiname mit Dateiendung ".gif"

Exportieren 1: Dateiname mit Dateiendung „.gif“

Im anschließenden Dialogfenster sollten die Checkboxen markieren, die im Bild unten zu sehen sind. Der GIF-Kommentar kann, muss aber nicht aktiviert werden (siehe Bild unten).

Da die Animation gleichmäßig verlaufen soll, kann/sollte die Zeitverzögerung im Exportfenster geregelt und die Option Obige Pause für alle Einzelbilder verwenden aktiviert werden! (Siehe Bild unten.)

Export-Einstellungen, Zeitverzögerung für alle Frames anwenden

Export-Einstellungen, Zeitverzögerung für alle Frames anwenden

Das war’s. Habt ihr alles gemacht wie beschrieben, liegt an eurem Speicherort jetzt die fertige Animation und kann auf Webseiten verwendet werden.

Endergebnis in 200x200 Pixel

Endergebnis in 200×200 Pixel

Viel Spaß beim Animieren!

Das könnte Dich auch interessieren …

Translate »