In der Regel wird man seine Homepage mit Bildern aufpeppen wollen. Schon lange unterstützen Browser Bilder in den Formaten JPEG und GIF. Neuere können zusätzlich mit PNG Bildern umgehen. Dieser Artikel will zeigen, wie man GIF-Bilder mit dem Programm InterGIF erstellt.
Natürlich ist es recht einfach, mal schnell aus einen Sprite ein GIF zu machen. Aber jeder, der schon etwas durch das Web gesurft ist, wird sich mehr oder weniger über sich nur zögerlich aufbauende Webseiten geärgert haben und dann evtl. sogar entnervt die Site verlassen haben. Um dem vorzubeugen, sollten die Bilder möglichst eine kleine Dateigröße haben, damit sie schnell durch das Internet transportiert werden. Deshalb benutzt man komprimierte Bildformate wie JPEG, PNG und GIF und nicht TIFF, Sprite, BMP usw. GIF unterstützt nur bis zu 256 Farben gleichzeitig, aber da man eine flexible Farbpalette benutzen kann, können sogar Photografien halbwegs erträglich dargestellt werden. Bei Photografien wird man aber in der Regel mit dem JPEG-Format bessere Ergebnisse und viel kleinere Dateien erhalten. GIF-Bilder eignen sich besser für Symbole, Schriftzüge usw., halt Bilder mit wenigen Farben und am besten mit großen Farbflächen. Zudem kann man Teile eines GIF-Bildes durchsichtig erscheinen lassen und sogar kleine Animationen erstellen. Wenn man die Farbpalette verkleinert wird gleichzeitig die Dateigröße eines GIF-Bildes verkleinert. Wenn man nicht 256 Farben in einen Bild braucht, kann man so die Übertragung eines Bildes beschleunigen. Nebenbei sind im Web eigentlich maximal 216 Farben Standard für GIF-Dateien, aber daran wird sich nicht immer gehalten und viele Browser unterstützen auch 256 Farben. Ich will hier nur die Möglichkeiten mit kostenloser Software aufzeigen. Sicher kann man einiges besser und einfacher mit Programmen wie ArtWorks, Vantage oder Photodesk erledigen. Dies schließt aber nicht die Benutzung von InterGIF aus, da das Programm einige wichtige Features hat, und nicht nur einfach ein GIF erzeugt.
Ich habe als Beispiel auf die Schnelle mit Draw eine Grafik erstellt. Dies ist mit Sicherheit kein Meisterwerk, aber darum geht es hier ja auch nicht. Das Meisterwerk mußt Du schon selbst herstellen. InterGIF kann aus Drawdateien, GIF, Complete Animator und Sprites Bilder im GIF- oder Sprite-Format erzeugen. Da mit dem Drawimport die Bilder unnötig groß werden, benutze ich lieber ArtToSpr um Drawbilder in Sprites zu wandeln. In der Regel sollte dann das Bild zu groß sein. Das ist kein Problem, da man sich mit ChangeFSI die exakte Bildgröße erstellen kann. Bei ChangeFSI muß man noch darauf achten die Farbtiefe auf maximal 256 Farben zu beschränken (Sprite Output/Colors), sonst lehnt InterGIF das Bild ab.
Man braucht einfach nur das Sprite auf InterGIF zu ziehen und dann das GIF speichern. Mit einen Browser oder dem IGViewer, der InterGIF beiliegt, kann man dann das Bild betrachten. Hier ist ChangeFSI nicht so sehr geeignet, da es in der Standardeinstellung jedes Bild verändert, also nicht so darstellt, wie das Bild eigentlich aussieht. Dieses erste GIF-Bild hat natürlich eine viel zu große Dateigröße. Also verkleinern wir die Palettengröße, d. h. die Anzahl der möglichen Farben. Dies stellt bei dem Beispiel kein Problem dar, da man auf einige Farben verzichten kann. Unter Palette.../Find best kann man die Anzahl der Farben angeben. Je kleiner die Anzahl ist, um so kleiner wird die Dateigröße des Bildes. Aber irgendwann kommt der Punkt, an dem sich die Bildqualität unübersehbar verschlechtert. Die optimalen Ergebnisse kann man durch Ausprobieren herausfinden. Die Beispielbilder zeigen ein paar Bilder mit unterschiedlich großer Farbpalette.
Palettenbeispiele
In dem Beispiel sieht man gut die Qualitätsunterschiede z. B. im Farbverlauf von Gelb nach Blau an dem Balken. Wirklich gut ist dieser nur mit 216 Farben. Bei den anderen Teilen des Bildes sind die Unterschiede ab 16 Farben nicht mehr groß. Hier muß man den Kompromiß zwischen Bildqualität und Dateigröße finden. Bei dem Beispiel würde ich das Bild mit der 24-farbigen Palette wählen, denn niemand kennt einerseits das Original und wer schaut sich ein Logo so genau an, wie wir es jetzt machen? Eine Desktoplupe kann nebenbei recht hilfreich bei der Bewertung der Bildqualität sein. Wenn man die Palette des Originalbildes verkleinern will bzw. muß, sollte man dies ChangeFSI oder anderen Programmen überlassen.
Sicher hat jeder schon Bilder im Web gesehen, die sich nicht zeilenweise von oben nach unten aufbauen, sondern bei denen aus einen grobrasterigen Bild nach und nach die Bildpunkte immer feiner wurden. So bekommt man schon bevor das Bild vollständig geladen wurde einen Eindruck von dem Bild. Diesen Effekt nennt man bei GIF Bildern Interlaced. Mit der Checkbox Interlaced kann man dies bei InterGIF einstellen. Leider werden die Dateien dann etwas größer, aber bei großen Bildern die eh lange geladen werden lohnt ein früher Eindruck auf was da kommt.
Weißes Hintergrundbespiel
Wenn das Bild, das gezeigt werden soll, nicht rechteckig ist wird das Bild Teile des Hintergrundes verdecken. Wenn die Farbe, die das Bild umgibt, mit der des Seitenhintergrundes übereinstimmt, ist dies kein Problem. Ist dies nicht der Fall oder benutzt man z. B. ein Hintergrundbild mit Muster, wird man Teile des Bildes durchsichtig gestalten müssen. In InterGIF gibt man einfach bei Transparency/Specify den Farbwert an, der durchsichtig werden soll an. Um herauszufinden welche Farbe die Hintergrundfarbe ist, braucht man das Bild nur in Paint zu laden, und im Bild über dem Hintergrund per Menü Paint/Select colour auszuwählen. In der Farbauswahl kann man die Farbnummer des Hintergrundes erfahren. Dies geht natürlich nur mit Sprites dessen Farbpalette nicht größer als 256 Farben ist, aber mehr als 256 Farben erlaubt InterGIF ja eh nicht.
Wie im den weißen und roten Hintergrundbeispielen zu sehen ist, muß man dann die Hintergrundfarbe möglichst der des Hintergrundes der HTML-Seite bzw. der Tabelle übereinstimmen. Der Grund ist, daß an den Kanten die Farben aus Bild und den Hintergrund sich vermischen und man so glatte Kanten statt Pixel zu sehen bekommt. Ist die Hintergrundfarbe dann eine andere als im Orginal, dann wird man an den Kanten die alte Hintergrundfarbe sehen. Diesen Effekt kann man gut in den weißen und roten Beispiel sehen. Dies kann man einfach in Draw mit einen farbigen Rechteck im Hintergrund machen. Die Farbe des Rechteckes muß dann der Farbe des Hintergrundes sein, auf dem dann das Bild liegen soll. Der Nachteil ist aber, daß ArtToSpr dann leider noch einen dünnen weißen Rand übrig läßt den man mit Paint (Edit/Delete columms bzw. rows) von Hand entfernen muß. Dies muß man meist eh, da je nach Version von ChangeFSI meist bei Verkleinerungen eines Bildes an den Bildrand unten und rechts ein schwarzer Streifen entsteht. In neueren bzw. gepatchten Versionen von ChangeFSI wird dieser Rand nicht mehr erzeugt. In ArtToSpr kann man aber auch eine Hintergrundfarbe einstellen (Output options.../Background colour) und erhält so keinen weißen Rand.
Rotes Hintergrundbespiel
Bei der Verkleinerung mit ChangeFSI wird man in der Regel das Dithern (Processing/Disable dithering) ausschalten müssen. Ansonsten wird man oft einen mehrfarbigen Hintergrund erhalten. Da man jedoch nur eine Farbe zum Hintergrund machen kann, werden die anderen Hintergrundfarben nicht durchsichtig. Entweder man schaltet das Dithern ab oder legt selbst Hand an. Braucht man keine durchsichtigen Stellen, kann man natürlich das Dithern eingeschaltet lassen. Hier zeigt es sich nebenbei, daß es geschickt ist einzelne Arbeitsschritte mit unterschiedlichen Dateinamen zu speichern, um so jederzeit einen oder mehrere Schritte zurück gehen zu können.
Wie schon erwähnt, kann das GIF-Format auch kleine Animationen darstellen. Sicher wird die jeder schon in Form von Werbebannern im Web gesehen haben. Für richtige Filme oder großen Animationen ist aber GIF nicht geeignet, dafür sind andere Formate wie MPEG oder Flash weit besser geeignet. Aber für etwas Bewegung reicht es. Man sollte mit bewegten Bildern auf seiner Homepage recht sparsam umgehen oder sogar ganz darauf verzichten. Eine Animation besteht wie ein richtiger Film aus mehreren Einzelbildern die hintereinander angezeigt werden. Man muß also zuerst einmal die Einzelbilder herstellen. Hier sollte man auch direkt auf ruckelfreie Animationen verzichten, denn die brauchen recht viele Bilder und viele Bilder bedeuten auch lange Ladezeiten.
Animationsbeispiele
Ich habe mal den Switcher von RISC OS 4 genommen und das Bild mit ChangeFSI in mehreren Schritten verkleinert, mit Paint alle Bilder vom schwarzen Rand befreit und auf die gleiche Größe gebracht. Das erste Bild habe ich switcher000, das zweite switcher001 usw. benannt. Wichtig am Namen ist hier nur die fortlaufende Zahl. Nun kann man das Bild switcher000 auf InterGIF ziehen, wobei dann Join input files aktiviert sein muß, um alle Bilder zur einer Animation zu verschmelzen. Wenn man will, kann man mit Looping animation die Animation ständig wiederholen lassen. Nun kann man das GIF-Bild speichern und ansehen. Viele Programme, die GIFs anzeigen können, haben Schwierigkeiten mit Animationen. Aber Browser und auch IGViewer haben mit den bewegten GIF-Bildern kein Problem. Selbstverständlich sollte man wieder die Farbpalette verkleinern, um eine möglichst kleine Dateigröße der vielen Bilder zu erhalten. Mit Set delay und dahinter die Angabe von Zehntelsekunden kann man festlegen lange jedes Einzelbild angezeigt werden soll.
Zum Glück kann man für jedes Bild die Anzeigedauer individuell einstellen und muß so nicht ein Bild mehrfach hintereinander einfügen, um ein Einzelbild etwas länger anzuzeigen. Dafür muß man den Spritenamen jedes Bildes ändern. Mit Spritename ist nicht der Dateiname, sondern der Name in der Spritedatei gemeint. Mit Paint ist dies kein Problem und so lädt man jedes Bild einzeln in Paint und ändert im Menü des Hauptfensters unter Sprite 'xxx'/Rename den Spritenamen in z. B. bdelay90 (das "xxx" ist hier der alte Name des Sprites). Beim neuen Namen ist nur das delay und die Angabe in Zehntelsekunden, hier 90, wichtig. Hat man alle Sprites umbenannt, zieht man, wie gehabt, das erste Sprite (switcher000) mit ausgewählten Join input files und bei Bedarf mit Looping animation auf InterGIF und speichert die Animation.
Eine Spritedatei kann bekanntlich mehrere Bilder enthalten und InterGIF unterstützt dies auch. Also kann man alle Einzelbilder in eine Datei packen. Dies erhöht die Übersichtlichkeit ungemein. Also benennt man switcher000 um und öffnet es mit Paint. Dann ändert man den Spritenamen wie oben beschrieben in 000delay90. Dies ist dann das erste Bild der Animation mit der Anzeigedauer von 90 Zehntelsekunden. Nun kann man das zweite Sprite in das Hauptfenster unserer Spritedatei ziehen und sollte es direkt umbenennen in z. B. 001delay30. Man sollte jedes Bild sofort umbenennen, da ansonsten die Gefahr besteht ein altes Bild mit dem neuen zu überschreiben wenn beide den gleichem Spritenamen haben. Wie man sich denken kann, geben die ersten drei Ziffern die Reihenfolge der Bilder an. Set delay sollte man abschalten. Auch hier sollte man die Palette reduzieren. Leider gibt es keine Möglichkeit für jedes Einzelbild eine eigene Palettengröße festzulegen.
Wie man sieht, ist es nicht all zu schwer, ein GIF-Bild zu erstellen. Die meiste Arbeit steckt in der Herstellung des bzw. der originalen Bilder als Sprite, Draw usw. Nebenbei kann InterGIF aus einen animierten GIF mit Split output die Einzelbilder herausholen. Noch ein Tip am Schluß. Damit der Browser möglichst früh weiß wie groß das noch zu ladende Bild ist sollte man im HTML-Tag img width und height angeben. Also z. B. <img src="arcsite.gif" width="173" height="39" alt="ArcSite">. Einige Browser beachten die Bildgröße beim Aufbau der Seite und brauchen dann nicht mehr die HTML-Seite neu zu organisieren, wenn die Bilder eingetroffen sind, und stellen damit die Seite etwas schneller dar.
InterGif bekommt man auf der Homepage von Peter Hartley. Alle Beispiele aus dem Artikel incl. den orginalen Bildern gibt es zum herunterladen (175,4 kByte).
Die ursprügliche Version dieses Artikel ist in der GAG News 63, September/Oktober 2002 erschienen.
|
|
GIF Bilder mit InterGIF herstellen
