Altes Logo

Das früher statische Logo auf "www.GpsWandern.de" soll überarbeitet werden und folgende Eigenschaften bekommen: Transparenter Hintergrund Eine Satellitenschüssel anstelle der Antenne Kompassnadel und Antenne sollen sich drehen

Neues Logo

Vorüberlegungen

Für die Erstellung einer bewegten 3D-Animation wäre es sinnvoll, ein 3D-Konstruktionsprogramm verwenden zu können. Mir steht so etwas leider nicht zur Verfügung also muss mit klassischen Grafikprogrammen gearbeitet werden. Adobe ImageReady scheidet für diesen Zweck aus, da es ein reines Pixelprogramm ist. Ich verwende statt dessen Xara XS 2.0, mit jedem anderen Vektorgrafikprogramm sollte es aber ähnlich funktionieren.

Ein bewegtes GIF-Image besteht aus Einzelbildern, die nacheinander abgespielt werden. Dabei kann vorgegeben werden, wie lang jedes Bild angezeigt wird. Die Kompassnadel soll eine vollständige 360 Grad Umdrehung machen und die Animation dann nahtlos von vorne beginnen. Ich wähle einen Rotationsversatz von 10 Grad von einem Bild zum nächsten und eine Anzeigedauer von 0,1 Sekunde für jedes Bild. Damit werden 36 Einzelbilder benötigt und ein voller Umlauf wird ca. 3,6 Sekunden dauern.

Also fertige ich zuerst eine Rosette mit 10 Grad Einteilung. Sie soll die Grundlage für die einzelnen Rotationselemente sein, zum Beispiel für die Nadel. Durch Verkürzen der Vertikalen auf 30% soll dann ein räumlicher Eindruck entstehen.

Konstruktion

Hier am Beispiel der Kompassrosette ist das sehr schön zu sehen. Sie wurde in obigen Vollkreis gezeichnet mit den Gradmarkierungen und den Buchstaben für die vier Himmelsrichtungen. Um jetzt eine vorgetäuschte Räumlichkeit zu erzeugen, wird die gesamte Zeichnung in der Vertikalen auf 30% verkürzt, die Horizontalmaße bleiben aber auf 100%. Ein Kreis wird so zur Ellipse, der räumliche Eindruck ist perfekt. Genauso entsteht die Kompassnadel. Sie wird im Vollkreis gezeichnet, in diesem Fall um 30 Grad gegen die Uhr gedreht und erst danach auf 30% gestaucht. In geringem Abstand schwebt sie nun über der Rosette und hat auch schon den Mast für die Antenne bekommen.

Wichtig ist es, an dieser Stelle zu erwähnen, dass alle Elemente, egal ob sie nur zu Konstruktionszwecken benötigt werden oder Bestandteile des fertigen Bildes sind, in jeweils eigene Layer gezeichnet werden. So können sie unabhängig von einander ein- und ausgeblendet werden und vor oder hinter anderen Elementen zu liegen kommen. So muss die Satellitenschüssel zum Beispiel im Laufe ihrer Rotation einmal vor und einmal hinter dem Mast angeordnet sein, damit der räumliche Eindruck korrekt ist. Gesteuert wird das alles über die Layer Gallery.

Nun zum schwierigsten Element: der Satellitenschüssel. Sie ist nicht so einfach in der Ebene zu zeichnen und dann in den Raum zu kippen wie die Kompassnadel. Je nach Drehwinkel besteht sie aus einer oder zwei Ellipsen für die Schüssel und einem kurzen Empfängerstab. Darüber hinaus ist die ganze Schüssel 20 Grad gen Himmel gerichtet.

Es bleibt also nichts weiter übrig, als Konstruktionsebenen einzuziehen, die dann gedreht werden können und danach für jede Sequenz die jeweiligen Ellipsen zu zeichnen. Ich hab es mir leicht gemacht und den obersten Punkt der Schüssel direkt in die Verlängerung des Mastes gelegt. Dieser Punkt bleibt beim Drehen also immer auf der Stelle. Die wichtigste Konstruktionsebene ist die Mitte der Schüssel, hier ist ein Schüsselquerschnitt (grün) eingezeichnet. Weitere Konstruktionsebenen sind der unteste Punkt der Schüssel und ein kleiner Kreis für den hintesten Punkt der Schüssel überhalb des Mastes. Und zuletzt ein Kreis (in rot) für das Ende des Empfängerstabs. Das nebenstehende Bild zeigt eine Ansicht der Schüssel (bei 300 Grad) zusammen mit den darübergelegten Konstruktionsebenen. Die Kunst dabei ist es nun, die Ellipse für den runden Schüsselrand (gelb) so zu drehen und zu stauchen, dass sie über den Konstruktionspunken zu liegen kommt. Übertriebene Genauigkeit ist hier aber nicht gefordert - in der fertigen GIF-Animation reduziert sich die Schüssel auf nur noch ca. 50x50 Pixel. Mit der Ellipse für den hinteren Schüsselbogen (orange) wird - in den wenigen Positionen wo diese sichtbar ist - ebenso verfahren und auch mit dem Empfängerstab.

Bevor nun mit dem Erzeugen der Einzelbilder begonnen werden kann, müssen noch drei fehlende Elemente angelegt werden: die hintere, innere Seitenfläche des Kompasses (gelb) mit Korn, die vordere, äußere Seitenfläche (orange) mit Kimme und der Schriftzug "Wandern mit GPS". Die beiden Seitenflächen werden aus flachen Rechtecken mit den "edit handles" geformt, was nichts anderes als die Bearbeitung von Bezier-Kurven ist. Wichtig ist, dass beide Elemente in verschiedenen Layern zu liegen kommen, damit sie vor bzw. hinter dem Kompass plaziert werden können und dass es sich um geschlossenen Elemente handelt, die eine Füllfarbe bekommen können.

Erzeugung der Einzelbilder

Alle statischen Elemente sind nun gezeichnet und für diejenigen, die sich bewegen sollen, existieren Hilfskonstruktionen. Der nächste Schritt ist nun, die 36 Einzelbilder zu erzeugen und jeweils als GIf-Bild zu exportieren. Ich empfehle auch jedes Einzelbild als Vektorgrafik (XAR) zu speichern, falls später doch noch Änderungen nötig werden.

Die Vorgehensweise ist für alle Bilder gleich: In der Ausgangslage befinden sich alle Konstruktionsebenen in 'Vollkreisansicht. Dann werden alle Konstruktionskreise mit "Angle of selection" auf das Gradmaß gedreht, das dem aktuellen Bild entspricht. Als nächstes werden alle Konstruktionskreise nach hinten geschwenkt, also mit "Scale hight" auf 30% Höhe gestaucht. Nun können die Ellipsen der Sat-Schüssel auf die neuen Konstruktionspunkte angepasst werden.

Für die Kompassnadel ist die Vorgehensweise analog, sie muss aber nicht jedes Mal neu konstruiert werden. Drehen und Kippen genügt. Nebenstehend ein Beispiel für 90 Grad = Osten. Die rote Nadel befindet sich in Ausgangslage, die grüne ist 60 Grad im Uhrzeigersinn gedreht und die blau-schwarze schließlich ist zusätzlich in der Höhe auf 30% gestaucht.

Sobald eine Szene fertig ist, werden die Konstruktionsebenen auf unsichtbar gestellt und die Datei gespeichert - am Besten unter dem Namen des dargestellten Winkels. Zusätzlich wird das Einzelbild als GIF-Datei gespeichert. Das funktioniert folgendermaßen. Im "File"-Menü "Export..." wählen, einen Dateinamen vergeben und als Dateityp "GIF" einstellen. Es erscheint nebenstehendes Einstellungsfenster für den Dateiexport. Die Einstellungen können wie abgebildet übernommen werden, zusätzlich muss im Reiter "Bitmap Size" die "Area To Save" auf "Page" gestellt werden und im Reiter "Options" die Auswahl "Transparent" ausgewählt werden.

Auf diese Art und Weise werden alle 36 Szenen erstellt und als GIF-Bild gespeichert.

Animation

Mit "New Animation" wird eine neue Animation angelegt. Zuerst sollte überlegt werden, welches Bild das erste sein soll. (Der Internet Explorer verwendet dieses beim Drucken) Es wird über "File" - "Import..." eingelesen. Dann wird für jedes weitere Bild mit "New" in der Animation Frame Gallery ein neuer Frame angelegt und das folgerichtige Bild importiert. Mit "Proterties..." werden dann die Animationseigenschaften wie zum Beispiel die Anzeigedauer eines Frames eingestellt. Wichtig ist hier das Häckchen bei "Make background transparent", die Animation soll den Hintergrund der WEB-Seite durchscheinen lassen.

Sind alle Frames importiert und die Einstellungen richtig gesetzt, sollte die Animation zuerst im XAR-Format gespeichert werden für den Fall, dass später noch Änderungen nötig werden. Dann wird mit "File" - "Export animated GIF..." die fertige GIF-Datei exportiert.

Im HTML-Editor kann die so entstandene Animation nun per "IMG"-Tag in den HTML-Code eingefügt werden.

Markenzeichen: ImageReady und Adobe sind markenrechtliches Eigentum der Adobe Systems Incorporated USA, XARA ist eine Marke der Xara Group Ltd. UK.