StartseiteLink zurück zur Hauptseite,... >> - sie sind jetzt hier:  Workshop - Animationen mit PNG's und GIF's

Wie funktioniert das mit der drehenden Erde

In diesem Workshop möchte ich zeigen wie es möglich ist, eigene animierte Grafiken zu erstellen. Ganz am Anfang bestand natürlich auch für mich die Frage: wie mache ich sowas am besten selbst, ohne mich klauender Weise irgendwo im Internet bedienen zu müssen. Dabei ging es darum, für einen Bereich meiner Webseite ein drehendes "Etwas" herzustellen , welches anschliessend als Blickfang dienen sollte. Was läge näher als es erstmal mit einer rotierenden Erde zu versuchen.Auf dieser Seite wird also nun erläutert wie eine solche sich drehende Erde gemacht wird.

Natürlich ist es erforderlich das man über ein gutes Grafikprogramm verfügt. Das hier beschriebene Beispiel ist mit den Programmen Adobe Photoshop "elements 9" und Paint-Shop-pro 7 incl. des Animationsshop 3 hergestellt worden und stellt somit nur EINE Möglichkeit dar , Animationen selber zu machen. Natürlich gibt es Programme die sowas schon vollautomatisch herstellen....hier aber sollen die einzelnen Arbeitsschritte beschrieben werden wenn man wirklich ALLES selber machen möchte. Fangen wir doch einfach mal an:

Die Erde muss fotografiert werden

Solch eine Animation besteht ja aus nichts anderem als dem schnellem Ablauf einer Bilderfolge , anhand dessen unser Auge das einzelne Bild als solches nicht mehr wahrnehmen kann. Für unsere Animation brauchen wir also Fotografien der Erde aus verschiedenen Blickwinkeln betrachtet. Rotierende Darstellungen unserer Erde bekommen wir beispielsweise von Youtube zur Verfügung gestellt oder Google-Earth ginge auch. Wenn man hier jetzt den "Film" stoppt , lässt sich mit dem Schiebregler jede benötigte Position von Hand einstellen. Mit einem Programm für Screenshots z.B. Screen-Hunter oder ähnliches kann man jetzt Screenshots von jeder gemachten Positionseinstellung machen. Idealerweise wählt man etwa 10 - 14 Einzelbilder aufeinander folgend und bezeichnet diese in durchnummerierter Reihenfolge (also: Bild1, Bild1, Bild3 usw).

Von der einzelnen Erde-Position macht man dann einen eingegrenzten Snapshot , so wie hier links auf dem Beispielbild zu sehen ....und zwar von JEDER der 10 - 14 eingestellten Positionen , da wir für unsere Animation ja mehrere Einzelbilder brauchen.

Hier sind die -in diesem Falle 10 Einzelbilder zum besseren Verständnis einmal verkleinert dargestellt in einem Screen zusammengefasst.

Jetzt braucht man ein Grafikprogramm wie hier z.B. Adobe Photoshop "elements" Wir laden zunächst den ersten Snapshot der Erde in das Programm. Dann benötigt man noch ein transparentes Leerobjekt in das man die bearbeitete "Erde" hineinkopiert zum anschliessenden Abspeichern des neuen Ergebnisses.

Nun müssen wir alle vorhandenen Snapshots der Erde in exakt gleicher Grösse ausschneiden, was hier links als Einzelbeispiel dargestellt werden soll. Bei Adobe Photoshop geht das ganz gut mit der Funktion "Kopierpinsel". Der nämlich lässt kreisrunde Ausschnitte in beliebiger Grösse zu. Hierzu wird die Ausschneidegrösse (und dazu sollte man ein gutes Auge haben) etwa 1 - 2 Pixel kleiner als der "Erdumfang" eingestellt , was in meinem Fall durch Probieren ganz gut funktionierte. Dann wird die Auswahl markiert und mit dem Befehl "Ausschneiden" in die Zwischenablage kopiert (geschied dann automatisch). Jetzt wählt man die Leerdatei in den Vordergrund und fügt die zuvor ausgeschnittene Erde mit der Funktion "einfügen" dort hinein. So bekommen wir unsere 10 - 14 (in diesem Falle ja 12) einzelne gleichgrosse Erdansichten auf einer transparenten Datei, die anschliessend jeweils als transparentes PNG incl. des Alphakanals für den transparenten Bereich abgespeichert werden muß.

Die weiteren Schritte nun mit Paint-Shop-pro 7 Alle abgespeicherten transparente PNG Dateien werden nun in Paint-Shop-pro7 geladen. Nacheinander - also Bild für Bild - müssen jetzt die Alphakanäle extrahiert werden , was mit der Funktion "Auswahl , Alphakanal öffnen" geschied.

Jetzt kann man den eigentlichen Inhalt - also unsere Erde - hieraus mit der Funktion "Ausschneiden" herauskopieren.

Durch einen Rechtsklick öffnen sich ein Kontextmenü in dem man "Einfügen als neues Bild" wählt. Nun bekommt man ein transparentes Bild in exakt der Grösse des vorher mit Adobe Photoshop bestimmten "Erdumfanges"

Hier zu sehen sind die so entstandenen 10 Einzelbilder in exakt gleicher Grösse. Bedingt durch das vorherige Ausschneiden mit Adobe Photoshop sind diese Grafiken randscharf ohne irgendwelche Farbübergänge oder sichtbare Pixelfehler.

>

Jetzt kommt der Animationsshop 3 dran DAS ist natürlich noch NICHT der Animationsshop ! Wer gedacht hat das man nur animierte Gif-Dateien herstellen kann , ist gewaltig auf dem Holzweg. Animiertes PNG nennt sich APNG und lässt sich mit z.B. dem Firefox Plugin "APNG Editor" super einfach herstellen. Die Ergebnisse hieraus sind natürlich verblüffend. Klare Farben , scharfe Ränder und dementsprechend brilliante Wiedergabe. Leider aber unterstützen nicht alle Browser dieses Format (z.B: wieder mal der Internet-Explorer - zumindest bis Version 8 nicht) weswegen das nachfolgend dargestellte Beispiel erstmal nur mit Firefox oder Opera animiert betrachtet werden kann.

Die sich drehende Erde als APNG Animation. Wie gesagt: der Effekt ist nur im Firefox oder Operabrowser anzusehen.

Nun aber zum Animationsshop 3 Nach dem öffnen des Programms benutzen wir am besten den Wizzard. Wie hier dargestellt öffnet sich das Fenster um eine neue Animation zu erstellen. Man folgt den Anweisungen und macht die entsprechenden Angaben zur Grösse der Bilder, Hintergrund usw. bis schliesslich in einem weiteren Fenster die eigentlichen Bilddateien geladen werden müssen.

Das ganze sieht dann inetwa so aus wie hier links zu sehen. Alle vorher erstellten png-Grafiken wurden nun geladen und werden in der korrekten Reihenfolge (sofern man dies vorher bereits so festgelegt hat , was man sollte) angezeigt.

WAS fällt auf?
Richtig , hier wurden immer noch png's geladen. Animationsshop 3 allerdings erstellt Animationen aus gif's. Die PNG's würden zwar beim Abspeichern der Animation in Gif's umgewandelt , aber leider ohne transparenten Hintergrund sondern mit diesem zu sehendem schwarzen Hintergrund.

Dieses lässt sich ändern. Wie links zu sehen kann man mit der Funktion: "Bearbeiten , alle auswählen" ALLE Einzelbilder markieren. Mit der Funktion: "Animation, Farbe ersetzen" lässt sich jetzt ganz leicht die Hintergrundfarbe in jede beliebige andere Farbe oder eben auch zu transparent hin austauschen.

Hier: die Funktion dafür einmal dargestellt.

...was dann so ausschaut. Nach dieser Funktion sind die Bilder bereits in Gif's umgewandelt so, das sich leicht erkennen lässt wie grob jetzt der Übergang zur Transparenz wurde. Mit der Farbumwandlungsfunktion hat man zwar die Möglichkeit die Toleranz an zu entfernender Farbe zu bestimmen , allerdings darf man da nicht zuviel wählen weil sonst der Rand der "Erde" betroffen sein kann , andererseits besteht aber der nachteil das ein gewisser schwarzer Rand um die Erde herum sich nicht vermeiden lässt.

Jetzt lässt sich die Animation testen und auch als animiertes GIF abspeichern.

Das fertige Ergebnis: eine rotierende Erde

Ich hoffe das dieser Workshop interessant war und dem ein oder anderen gefallen hat. Animationen selber zu machen ist garnicht so schwer und bekommen eben durch das Selbermachen natürlich dann auch einen ganz besonderen Wert.

Wenn Ihnen diese Webseite gefällt,
....sagen sie's bitte jemandem. Danke dafür

nach oben ▲