SELFHTML: Grafik / Animierte GIF-Grafiken
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche Grafikformate für Web-Seiten besonders geeignet sind.
Keywords: SELFHTML, Grafik, Pixelgrafik, Vektorgrafik, JPEG, JPG, GIF, PNG, LuraWave, SVG
Date: 2005-08-22T21:21:39+02:00

| # Animierte GIF-Grafiken
| Allgemeines zu animierten GIF-Grafiken Dia-Show-Effekte durch animierte GIF-Grafiken Daumenkino-Effekte durch animierte GIF-Grafiken Vorgehensweise beim Erstellen animierter GIF-Grafiken

## Allgemeines zu animierten GIF-Grafiken

Das GIF-Format unterstützt in der neueren, 89er Version die Möglichkeit, mehrere Grafiken in ein und derselben Grafikdatei zusammenzufassen. Die Einzelgrafiken der Datei werden nacheinander "abgespult" und angezeigt. Dabei ist es auch möglich, Kontroll-Befehle mit abzuspeichern, z.B. Verzögerungszeiten zwischen den einzelnen Bildern. Dieses Feature bietet Ihnen zwei interessante Einsatzmöglichkeiten:

- Sie können eine automatisch ablaufende "Dia-Show" mehrerer verschiedener Bilder programmieren.
- Sie können eine Sequenz ähnlicher und aufeinander aufbauender Bilder in einer GIF-Datei speichern. Dadurch ergibt sich ein "Daumenkino-Effekt", d.h. eine einfache Video-Animation.

Mit Hilfe von animierten GIF-Grafiken können Sie also bewegte Elemente auf Ihre Web-Seiten bringen, ohne in Programmiersprachen wie Java einsteigen zu müssen.

Beachten Sie aber auch, dass animierte GIF-Grafiken schnell eine kritische Größe erreichen. Denn mehrere Einzelgrafiken in einer Grafikdatei benötigen zwangsläufig mehr Speicher. Animationen sollten Sie daher nur aus kleinen Grafiken erzeugen. Ferner ist im Hinblick aufs Web-Design darauf hinzuweisen, dass animierte Elemente unwillkürlich die Aufmerksamkeit des Betrachters auf sich lenken und dadurch aber von vielleicht wichtigeren Inhalten einer Seite, wie Navigation oder Information, ablenken. Setzen Sie animierte GIFs daher vorsichtig und mit Bedacht ein. Das sprichwörtliche Gezappel auf manchen Web-Seiten für überflüssiges Gimmicks ist mittlerweile verpönt und gilt als stümperhaft.

Das Erstellen animierter GIF-Grafiken wird von vielen professionellen Grafikprogrammen unterstützt. Daneben gibt es Spezialprogramme, mit deren Hilfe Sie bereits vorhandene Grafiken zu animierten Grafiken zusammenstellen können.

## Dia-Show-Effekte durch animierte GIF-Grafiken

Dia-Show-Effekte können Sie z.B. verwenden, um in schneller Abfolge die typischen Produkte Ihrer Firma anzuzeigen, oder um in einem interaktiven Lernprojekt zum Erlernen einer Fremdsprache neue Vokabeln kurz einzublenden ("unterbewusst lernen"). Sie können auch mehrere mit einer Gesamtbedeutung assoziierten Bilder in Reihe schalten und auf diese Weise animierte Symbole oder animierte Cliparts präsentieren. Wichtig ist, dass die Einzelbilder für den Anwender einen nachvollziehbaren Zusammenhang ergeben. Die Anzeigedauer der Einzelbilder können Sie frei einstellen.

### Typische Dia-Show-Effekte:

## Daumenkino-Effekte durch animierte GIF-Grafiken

Daumenkino-Effekte können Sie z.B. verwenden, um Cliparts zu einfachen Trickfilmsequenzen zu erweitern, um wissenschaftliche Ablaufprozesse zu visualisieren, oder um in der technischen Dokumentation Handgriffe und andere zeitliche Abläufe zu verdeutlichen. Die Geschwindigkeit der Bildsequenzen und damit die Ablaufgeschwindigkeit können Sie frei einstellen.

### Typische Daumenkino-Effekte:

## Vorgehensweise beim Erstellen animierter GIF-Grafiken

Bevor Sie eine animierte Grafik erstellen können, müssen Sie folgende Vorbereitungen treffen:

- Sie müssen die Einzelbilder mit Hilfe eines geeigneten Grafikprogramms erstellen bzw. auswählen.
- Sie sollten alle Bilder in neue Grafikdateien mit einheitlicher Bildgröße und einheitlicher Farbpalette kopieren.
- Speichern Sie alle auf diese Weise erzeugten Bilder als GIF-Grafiken ab. Vergeben Sie dabei am besten durchnummerierte Dateinamen wie "bild1.gif", "bild2.gif" usw., und zwar in der Reihenfolge, in der Sie die Bilder später als Einzelbilder in der animierten Grafik ablegen wollen.

Nachdem Sie diese Vorbereitungen getroffen haben, können Sie die Software zum Erstellen der animierten GIF-Grafik aufrufen. Da die Bedienung solcher Programme sehr unterschiedlich ist, wird hier nicht näher auf einzelne Bedienschritte eingegangen. In jedem Fall stehen Ihnen folgende Möglichkeiten zur Verfügung:

- Bild (image): Indem Sie eine GIF-Grafik einfügen, wird diese Grafik als Einzelbild in die animierte Grafik übernommen.
- Schleife (loop): Indem Sie eine Schleife einfügen, können Sie bestimmen, wie oft die gesamte Bildsequenz wiederholt werden soll. Sie können einen Zahlenwert editieren, der die Anzahl der Abspielwiederholungen angibt.
- Kontrollelement (control): Indem Sie ein Kontrollelement einfügen, können Sie den Ablauf zwischen zwei Einzelbildern kontrollieren. Sie können z.B. die Verzögerung bis zur Anzeige des nächsten Einzelbilds einstellen. Ferner können Sie Angaben zum transparenten Hintergrund der Einzelbilder machen.
- Text (plain text): Indem Sie Text einfügen, können Sie den Ablauf der animierten Grafik zusätzlich durch eingeblendete Textteile ergänzen. Dabei können Sie den Text formatieren.
- Kommentare (comments): Indem Sie Kommentare einfügen, können Sie Ihre Arbeiten intern auskommentieren. Solche Kommentare werden nicht mit angezeigt.

Um das fertige Ergebnis zu betrachten, brauchen Sie natürlich ein geeignetes Anzeigeprogramm. Einige Editierprogramme für animierte GIF-Grafiken bieten selbst die Möglichkeit des Betrachtens an. Wenn nicht, können Sie die Grafik auch mit Ihrem Web-Browser lokal öffnen und betrachten.

| Web-Projekte planen
| Techniken und Begriffe der Bildbearbeitung

© 2007 Impressum