GIF-Animation: Bilder sparsam einsetzen

von Fries Websolutions

Sind sanfte Animationen eigentlich nur mit vielen Bildern möglich? Natürlich nicht, denn durch Hilfe kleiner Bildbearbeitungstricks, werden Bilder und Speicherplatz gespart!

Doch das Problem, wenn wir eine GIF-Animation verwenden, das ist die nur Bild orientierte Vorgehensweise. Denn gute Animationswerkzeuge werden mit Pfaden und Ebenen arbeiten, und so können wir ein bewegliches Objekt, und ein statischer Hintergrund, dann voneinander getrennt werden.

Aber beim GIF geht das nicht, denn wenn sich zum Beispiel ein Text von unten nach oben, durch das ganze Bild bewegt, dann müssen wir jedes einzelne Bild im GIF umsetzen, denn es werden immer unterschiedliche Teile im Hintergrundbild verdeckt.

Wir müssen den im Bild stattfindenden Bewegungsablauf, mit einzelnen Bilder simulieren. Damit wird dem menschlichen Auge der Eindruck vermittelt, das sich um eine fließende Bewegung handelt. Dabei sind nur, drei bis fünf Bilder vielleicht in der Animation enthalten. Ausserdem greifen GIF-Animationsprogramme, die müssen aber in der Lage sein: redundante Pixel über mehrere Bilder hinweg zu entfernen; bei den Collagen stärker ein und dadurch wird die Dateigröße noch stärker verringert.

Eine der vielen Aufgabe für den Grafiker ist auch das Bewegen von Texten und das über einen statischen Hintergrund. Die Animation kann auch aus vier Bilder bestehen, dabei wäre dann im ersten Bild der Text nicht zu sehen, aber im zweiten würde er von oben in das Bild fliegen. Dann würde er im dritten Bild in der Mitte verweilen und dann könnte er gelesen werden. Den Abschluss würde dann das vierte GIF bilden, denn da würde der Text nach unten, "aus dem Bild heraus", fliegen!

In dem Filter Bewegungsunschärfe würden Richtung und Spannweite der Unschärfe eventuell justiert

Dann müssten wir ein Hintergrundmotiv wählen und wenn wir mit einem Bildbearbeitungsprogramm arbeiten würden, das auch Ebenen oder Objekte unterstützt, dann würden wir den Text sofort auf das Bild schreiben können. Aber wir könnten ihn später auch noch verschieben. Wenn uns diese Funktion nicht zur Verfügung stände, dann müssten wir ein zweites Bild erstellen, das nur den Text beinhalten würde. Von würden wir den Text in die Zwischenablage kopieren und dann an unterschiedlichsten Stellen, dann irgentwann wieder in das Hintergrundmotiv.


Bei einigen Motiven mit starkem Farbstich werden Verluste: mittig 40 Farben, links 20 Farben, in der Farbreduktion erst bei der Vergrößerung wieder sichtbar

Jetzt würden wir zwei statische Bilder erzeugen und das geht so: wir brauchen zuerst das Bild ohne Texte, dann das Bild mit dem zentrierten Text. Wir exportieren dann beide als verlustfreie: TIFs oder Bitmaps. Im nächsten Bild platzieren wir den Text dann im oberen Drittel des Bildschirms. Wir sollten aber nur den Text in den Filter Bewegungsunschärfe anlegen, aber wenn es diesen Filter nicht gibt, dann müssen wir den Text mehrfach in ein leeres Bild kopieren und dann legen wir die Textzeilen knapp untereinande, dabei verwenden wir den "Gaußschen Weichzeichner", zum Verzerren.

Dann exportieren wir das fertige Bild verlustfrei im selben Format und wiederholen dann den ganzen Vorgang auch für das vierte Bild.
Und durch die lange Standzeit des ersten Bild, können weitere Bilder unbemerkt geladen werden.

Hier im GIF-Animationsprogramm werden die Bilder zusammengefügt, aber die beiden unscharfen Bilder werden nur kurze verweilen. Doch das dritte Bild hat eine mittlere, und das erste Bild würde eine lange Standzeit haben. Fertig ist unsere Animation!

 

 
   Anzeigen


Navigation:    Webdesign - Programmierung - Web Grafiken - Software Guides - Tools - Templates - Schriftarten - Seminare - IT News
Partner:   Template OK - PCopen - SITEopen - PCopen Schweiz - HTMLopen Schweiz - VirtualUniversity.ch - WEB-SET.com - YesMMS - Job und Karriere