"www.GpsWandern.de" ist eine Sammlung von Wander- und Radrouten. Jedes Jahr kommen neue Routen dazu. Und diese neuen Routen sollen auf der Übersichtsseite mit einem blinkenden "NEU"-Logo versehen werden. Als Aufmerksamkeitszeichen für einen wiederkehrenden Besucher.

An sich wäre das auch ohne Grafik mit HTML-Mitteln möglich aber die "blink"-Eigenschaft ist Netscape-proprietär und die offizielle CSS-Eigenschaft "text-decoration:blink" wird von einigen Browsern nicht interpretiert. Also doch eine Bitmap-Grafik. Und so soll sie dann aussehen: <=ja, das kleine Blinki da!

Grafikerstellung

Ich verwende Adobe ImageReady, da sich mit diesem Programm sehr schön auf Pixelebene arbeiten lässt. Und das ist auch nötig, denn die Grafik hat nur eine Größe von 21x10 Punkten. Als erstes lege ich eine neue Datei an. Die Größe sollte jetzt nur so über den Daumen stimmen, genau zuschneiden kann man immer noch. Als Inhalt gebe ich "transparent" an. Unter "Ansicht" - "Ganzes Bild" kann die Anzeige so vergrößert werden, dass die einzelnen Pixel gut sichtbar werden. Der Karohintergrund steht bei ImageReady für "keine Farbe" also "transparent" und das soll auch so sein, das fertige Image soll keinen eigenen Hintergrund mitbringen sondern den der WEB-Seite annehmen. Und dann wird gezeichnet, vielmehr Pixel gesetzt und wieder weggelöscht, bis etwas ansehbares dabei rauskommt. Ich versuche eine leicht schräge Schrift und verwende als Farbe ein volles Rot.

Zur Kontrolle empfiehlt sich bereits an dieser Stelle die Grafik im GIF-Format zu speichern und das Ergebnis im Browser anzuschauen. Falls es noch nicht optimal ausschaut, ist es leicher jetzt zu korrigieren, bevor der Blinkeffekt eingebaut wird. Um ein GIF-Format speichern zu können, wird die Optimieren-Palette herangezogen um dort die entsprechenden Eigenschaften einzustellen. In etwa so wie in nebenstehendem Bild. Dann wird das GIF über "Datei" - "Optimiert-Version speichern unter ..." abgespeichert.

Animation

Um nun eine eine zweite alternierende Grafik für den Blinkeffekt erstellen zu können, wird erst eine weitere Zeichenebene benötigt. Dazu kann man in der Ebenen-Palette auf "Neue Ebene ..." oder gleich auf "Ebene duplizieren" klicken (im Palettenmenü, das ist der kleine Pfeil nach rechts). Wird nun die neue Ebene 2 markiert, kann sie im Zeichenfenster manipuliert werden ohne, dass sich die ursprüngliche Zeichnung (Ebene 1) verändert. Ich ändere lediglich die Farbe der Schrift in ein sehr blasses Rot. Das geht, indem man die Farbe per Farbregler in der Farbpalette voreinstellt und dann mit dem Füllwerkzeug auf die einzelnen Schriftteile klickt. Das ist nicht so ganz einfach - für Fehlklicks gibts zum Glück die "Rückgängigfunktion". Als Ergebnis haben wir nun eine Grafik mit zwei Ebenen. Die beiden Ebenen stellen die Zustände der späteren Animation dar.

Spätestens jetzt sollte die Größe der Grafik richtig eingestellt werden, also nicht benötigte Pixel am Rand eliminiert werden. Dazu wählt man "Bild" - "Arbeitsfläche" und stellt die gewünschte Pixelzahl für beide Richtungen ein. Das Markierungsfeld "Position" gibt dabei an, von welcher Position aus die Pixel gezählt werden. Hat man also rechts und unten zuviele Pixel, so wählt man als Position links-oben und alles, was rechts und unten über die eingestellte Pixelzahl hinausgeht wird abgeschnitten. Ein grandioses Tool.

Eine Animation besteht aus mehreren Frames. Es müssen in unserem Fall also aus den beiden Ebenen noch zwei Frames werden. Das geschieht über die Frame-Palette. In ihr ist bereits ein Frame - unser Bild - enthalten. Über das Frame-Menü und "Neuer Frame" duplizieren wir diesen Frame, so dass er nun zweimal enthalten ist. Als nächstes wird der zweite Frame markiert und in der Ebenen-Palette die jeweils andere Ebene zur Anzeige ausgewählt. Das geschieht durch Setzen des "Auges" vor die entsprechende Ebene. In der Frame-Palette sollten nun die beiden unterschiedlichen Ebenen in den jeweiligen Frames sichtbar sein.

Damit sind die beiden benötigten Frames angelegt. Jetzt müssen noch die Eigenschaften für die Animation gesetzt werden. Das geschieht wiederum in der Frame-Palette. Die Wiederholungsoption (links unten) wird auf "Unbegrenzt" gesetzt, die Frame-Verzögerung bei beiden Frames auf 1 sek und die "Methode zum Entfernen von Frames" auf "Auf Hintergrund wiederherstellen". Der letzte Punkt bewirkt, dass bei jeder neuen Frameeinblendung der vorherige Frame komplett gelöscht wird.

Zum Schluss muss nun nur noch die animierte GIF-Datei gespeichert werden. Das geschieht genau so, wie oben bereits beschrieben über "Datei" - "Optimiert-Version speichern unter ...". Vorher sollten in der Optimieren-Palette die Einstellungen kontrolliert werden, sie haben starke Auswirkungen auf die Größe der entstehenden GIF-Datei. Vor allem die Anzahl der Farben kann in unserem Beispiel auf 4 heruntergesetzt werden.

Im HTML-Editor kann die fertige Grafik nun per "IMG"-Tag in den HTML-Code eingefügt werden.

Markenzeichen: ImageReady und Adobe sind markenrechtliches Eigentum der Adobe Systems Incorporated, USA