Grafik/animierte Grafiken

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit Hilfe von animierten GIF-Grafiken können Sie bewegte Elemente auf Ihre Web-Seiten bringen, ohne in Programmiersprachen wie Java einsteigen zu müssen. Mehrere Einzelgrafiken werden in einer Datei zusammengefasst und nacheinander "abgespult" und angezeigt. Dabei ist es auch möglich, Kontroll-Befehle mit abzuspeichern, z.B. Verzögerungszeiten zwischen den einzelnen Bildern.

Beachten Sie:
  • Animierte GIF-Grafiken erreichen schnell eine kritische Größe, denn mehrere Einzelgrafiken in einer Grafikdatei benötigen zwangsläufig mehr Speicher. Animationen sollten Sie daher nur aus kleinen Grafiken erzeugen.
  • Animierte Elemente lenken unwillkürlich die Aufmerksamkeit des Betrachters auf sich und dadurch aber von vielleicht wichtigeren Inhalten einer Seite, wie Navigation oder Information, ab. Setzen Sie animierte GIFs daher vorsichtig und mit Bedacht ein!

Inhaltsverzeichnis

[Bearbeiten] 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:

animierte Vokabelkarte Metamorphose

[Bearbeiten] 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:

http://commons.wikimedia.org/wiki/File:Steam_vacuum_vs_pressure.gif
Weltkugel


[Bearbeiten] 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 Seite 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.


[Bearbeiten] Alternativen

Der Vorteil der animierten Gifs ist ihre einfache Erstellung und problemlose Einbindung in Webseiten. Trotzdem gibt es einige Nachteile:

  • einmal erstellte Versionen lassen sich nur schwer ändern (jedes Bild muss einzeln in einem Grafikprogramm bearbeitet werden)
  • Die Animation kann nicht angehalten oder wieder animiert werden.
  • Um Bilder einzublenden, braucht man viele Zwischenbilder (hoher Speicherbedarf)

Deswegen werden folgende Alternativen doch wieder interessant:

[Bearbeiten] CSS Animation

loading spinner

Diese Grafik zeigt an, dass etwas (Up- oder Download von Bildern, Daten, etc; Konvertierung) noch geladen wird.

Mithilfe von CSS3 animation können Sie dies auch ohne Einsatz einer Grafik erreichen. Änderungen an Farbe und Größe können so leichter durchgeführt werden.

[Bearbeiten] Software

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML