Sie sind hier: edv-beratung-thomas.de / Internet services ... / Tutorial: in 10 Schritten ... / Extra Nr. 4


Statische oder animierte GIFs auch ohne Grafik-Kenntnisse? Kein Problem!

So erstellen Sie im Handumdrehen Banner (Logos) für Ihre Website:

Grafik-Datei im GIF-Format (statische Einzel-GIF) erstellen:

Bilder im GIF-Format zu erstellen, ist nicht jedermanns Sache. Wie Sie auch ohne Grafik-Kenntnisse zu einem Banner für Ihre Website kommen, will ich Ihnen nicht vorenthalten. Voraussetzung: HTML und CSS.

  1. Erstellen Sie für das Banner eine HTML-Datei (auch fertige Fremd-GIFs können Sie hier einfügen): Tolle Schrift-Effekte wie etwa "glühende" oder "Schatten"-Schrift erreichen Sie mit CSS-Angaben.

    EDV-Beratung Thomas: WebDesign & Programmierung: ebth-web.gif (4741 Bytes)
    Ganz ohne Bildbearbeitung, nur mit HTML- und CSS-Mitteln erstellt: Schriftzug in "glühender" Schrift:

    <span style="width=100%; font-family:Verdana; font-size:17pt; color:#66FFDD; filter:glow(color=navy,strength=7);">WebDesign ...</span>

  2. Lassen Sie sich die HTML-Datei in Ihrem Browser anzeigen.

  3. Fertigen Sie mit einem Bildbetrachter, etwa XnView (siehe Kurzbeschreibung in Freeware top 20) einen "Schnappschuß" des Browserfensters an.

  4. Wählen Sie mit dem Bildbetrachter den Bildausschnitt, z. B. 192 * 72 Pixel (beachten Sie, daß bei animierten GIFs alle Einzelbilder die gleiche Ausmessung haben müssen).

  5. Speichern Sie mit Ihrem Bildbetrachter den gewählten Bildausschnitt als GIF-Datei (Optionen etwa "GIF interlaced" und "32 Farben").

  6. Jetzt braucht Ihr Banner möglicherweise noch einen Rahmen: dies erledigen Sie mit einem Grafik-Programm: in Ulead PhotoImpact z. B. über "Web / Schaltflächendesigner" (zuerst das Bild laden, dann ist das Menü "Web" verfügbar).

aus statischen Einzel-GIFs eine Animation erstellen:

Wenn Sie aus mehreren statischen Einzel-GIFs eine Animation erstellen wollen, erledigen Sie das so, hier dargestellt anhand des Ulead GIF Animator (Beigabe zu PhotoImpact):

  1. Rufen Sie im "Startassistent" den "Animationsassistenten" auf.

  2. Tragen Sie alle gewünschten Einzel-GIFs ein, die Sie zuvor erstellt haben.

  3. Stellen Sie die Verzögerungszeit ein (3 Sekunden dürften passen).

  4. Speichern Sie Ihre animierte GIF mit "Optimierung" (spart etwa 3% Speicherplatz).

Noch ein Tip: für diese Grafik-Aufgaben benötigen Sie nicht die neueste Version Ihres bevorzugten Grafik-Programms für 125 oder 150 Euro: die Vorgänger-Vollversion, die Sie oft kostenlos auf einer PC-Zeitschriften-CD finden, tut's auch (achten Sie aber darauf, daß ein GIF-Animations-Programm dabei ist).


bei GIF-Dateien den Hintergrund transparent machen (1): mit XnView:

Manchmal kann es zweckmäßig sein, den Hintergrund des Banners transparent zu gestalten, damit er sich der Farbe seiner Umgebung anpaßt. Mit dem kostenlosen Bildbetrachter XnView (Kurzbeschreibung in Freeware top 20) erledigen Sie diese Aufgabe im Handumdrehen:

  1. GIF-Bild mit XnView öffnen bzw. in XnView laden

  2. aus dem "Bild"-Menü "Farbpalette bearbeiten ..." aufrufen

  3. im Folgefenster "Farbpalette bearbeiten" in der Farbpalette auf die Farbe klicken, die transparent erscheinen soll, "Transparenz verwenden" einschalten und auf OK klicken

  4. GIF-Bild (unter neuem Namen?) speichern

Natürlich können Sie für diese Aufgabe auch ein kostenpflichtiges Programm einsetzen, etwa Ulead PhotoImpact (die Vorgänger-Version gibt's meistens zu einem erheblich ermäßigten Preis).


bei GIF-Dateien den Hintergrund transparent machen (2): mit PhotoImpact:

Wenn Sie als Bildbearbeitungsprogramm Ulead PhotoImpact verwenden, gehen Sie folgendermaßen vor (dargestellt am Beispiel der Version 5):
  1. GIF-Bild mit PhotoImpact öffnen bzw. in PhotoImpact laden
  2. aus dem "Web"-Menü "Bildoptimierer" aufrufen
  3. im Folgefenster unter dem rechten Bild auf die Schaltfläche "GIF" klicken
  4. Registerkarte "Maskenoptionen" auswählen
  5. den Eintrag "Farbe wählen" aktivieren
  6. Strg-Taste drücken (Mauszeiger verwandelt sich von einer Hand in eine Pipette) und mit der linken Maustaste im linken Bild auf die Farbe klicken, die transparent erscheinen soll
  7. als "Ähnlichkeit" 0 einstellen
  8. über "Speichern unter ..." die geänderte GIF-Datei unter anderem Namen speichern
In neueren Versionen von Ulead PhotoImpact ist der Ablauf geringfügig anders (dargestellt am Beispiel der Version XL):
  1. (wie zuvor:)
    GIF-Bild mit PhotoImpact öffnen bzw. in PhotoImpact laden
  2. (wie zuvor:)
    aus dem "Web"-Menü "Bildoptimierer" aufrufen
  3. (wie zuvor:)
    im Folgefenster unter dem rechten Bild auf die Schaltfläche "GIF" klicken
  4. (neu und ganz anders:)
    Registerkarte "GIF-Optionen" auswählen und dort "Transparenz" aktivieren
  5. (wie zuvor Nr. 4, aber erweitert:)
    Registerkarte "Maskenoptionen" auswählen und dort unter "Maske" "Farbe wählen", anschließend "Pipette" aktivieren (von vier Schaltflächen die zweite von links)
  6. (ähnlich wie zuvor):
    mit der linken Maustaste im linken Bild auf die Farbe klicken, die transparent erscheinen soll
  7. (wie zuvor:)
    als "Ähnlichkeit" 0 einstellen
  8. (wie zuvor:)
    über "Speichern unter ..." die geänderte GIF-Datei unter anderem Namen speichern

Zur Startseite: Webdesign Erlangen - EDV-Beratung Thomas
Stand: 20. 12. 2012 nach oben ©2002-2018 Gösta Thomas