Linux NetMag #4
Titel: Gimp-Kurs Teil 2
URL: http://www.linuxnetmag.de/de/issue4/m4gimp2.html

[ Teil 1 | Teil 2 ]

Nachdem wir nun unsere Arbeit vorerst gesichert haben, kann es mit dem Bearbeiten des Bildes weitergehen. Zuerst kopieren wir alle Layer, so daß wir die gesamte Szenerie zweimal haben. Dazu klicken wir mit der rechten Maustaste auf jeden Layer-Eintrag im Fenster "Layers & Channels" und wählen den Menüpunkt "Duplicate Layer". Nachdem alle Layer kopiert wurden, sortieren wir die Schichten derart um, daß einerseits die Kopien, und andererseits die Originale alle untereinander liegen. Dafür klickt man die einzelnen Layer an, und verschiebt diese mit den Pfeilknöpfen am unteren Rand des Fensters.
Bei unserem Banner soll der Eindruck entstehen, als wenn die Pinguine ihre Köpfe in das Banner hinein bewegen würden. Der Einfachheit halber erzeugen wir die Bilder genau in der gegengesetzten Reihenfolge und bewegen jetzt die Pinguine auf den Kopierten Layers alle ein Stück weiter aus dem Banner heraus.
Um dabei die Übersicht zwischen Original und Kopie nicht zu verlieren, de-selektieren wir alle Original-Layer, indem wir bei den jeweiligen Einträgen auf das schwarze Auge klicken. Somit werden diese Layer nicht mehr angezeigt.
Wir selektieren einzeln alle kopierten Layer und bewegen den Pinguin, der sich auf dem jeweiligen Layer befindet, mittels "Move Tool" ein Stück weiter aus dem Bild heraus.
 
Daraufhin kopieren wir ein weiteres mal die kopierten Layer, so daß wir Layer erhalten die "Tux1 copy copy" heißen. Danach sortieren wir die Layer wieder so um, daß einerseits Originale, Kopien und zweite Kopien untereinander stehen. Daraufhin de-selektieren wir auch noch die kopierten Layer, so daß nur noch die zweite Kopie angezeigt wird.
Auch die Pinguine auf diesen Layern verschieben wir noch ein Stück weiter, so daß von den Pinguinen nur ein kleines Stück vom Kopf oder sogar nichts mehr zu sehen ist:
 
Als nächstes müssen wir die zusammengehörigen Layers zu einem Bild vereinfachen. D.h. wir verbinden die einzelnen Layer einer Szenerie (einmal die Original-Layers, dann die erste Kopie und dann die zweite Kopie, so daß wir insgesamt nur noch drei Layer erhalten.)
Dafür selektieren wir alle Bilder einer Szenerie (d.h. wir lassen uns ersteinmal nur die Layers der zweiten Kopie anzeigen. Bei den anderen Layers ist das schwarze Auge am Anfang des Liste "Layers & Channels" deaktiviert.)
Nun wählen wir mit der Rechten Menütaste im Layers-Menü die Option "Merge visible Layers". Somit fügen wir alle momentan als sichtbar angewählten Layer zu einem einzelnen Layer zusammen.
Vorher fragt uns Gimp aber noch wie die Bilder zusammengefügt werden sollen.
Da die Pinguine über den Bildrand des Banners hinausragen, bietet uns Gimp an das Gesamtbild soweit zu vergößern, daß auch die Pinguine vollständig sichtbar sind ("expanded as necessary"). Aber genau das wollen wir nicht, stattdessen bewirkt die Option "clipped to bottom layer" den von uns gewünschten Effekt.
Das selbe machen wir auch mit allen Layern der ersten Kopie als auch mit den Original-Layers. (Achtung, immer nur diejenigen Layer selektieren, die zusammengefügt werden sollen.)
Somit sollten nur noch drei Layer übrig bleiben, die, wenn alle drei übereinander angezeigt werden, ein folgendes Bild ergeben:
Um die richtige Abspielreihenfolge zu erreichen, müssen die drei Layer umsortiert werden, so daß das Bild auf dem die Köpfe am weitesten ausgestreckt sind, an oberste Stelle steht, und dasjenige Bild, bei dam man am wenigsten von den Pinguinen sieht, an letzter Stelle steht.
Als nächstes benennen wir die drei Layer um. Sie erhalten von oben nach unten die Namen:
  Layer1 (2000ms)
  Layer2 (180ms)
  Layer3 (250ms)

Die Angaben in Klammern sagen Gimp, wieviel Zeit bei animierten Bannern zwischen dem Anzeigen der einzelnen Layern liegen soll.
Die jeweiligen Werte erhält man durch Ausprobieren.
Eine Vorschau, wie das Banner später aussehen wird, erhält man durch den Menüpunkt "Filters->Animation->Animation Playback". Dort kann man sich mittels "Start/Stop" eine Vorschau seines animierten Banners ansehen.
[Tip: Das Bild läßt sich übrigens aus dem Fenster herausschieben, und somit schon zum testen an diejenige Stelle bringen, wo später das Banner hin soll.]

Das Animierte Banner sollte nun ähnlich diesem aussehen:
Wie man sieht ist die Animation noch nicht perfekt. Die Pinguine werden einfach nur über die vorherigen übermalt. Teilweise sieht man unter den Pinguinen noch einen Teil der vorherigen Pinguine.
Außerdem wirkt das Banner auf dem weißen Hintergrund nicht sehr ansprechend.
Stattdessen haben Untersuchungen ergeben, daß blaue Banners eine wesentlich höhere Klickrate besitzen.
Deshalb fügen wir den drei bisherigen Layern noch einen blauen Hintergrund hinzu.
Mittels des Knopfes "New Layer" (Das Leere Papier unten links im Fenster "Channels und Layers") erzeugen wir ein neues Layer. Diese Layer hat automatisch die selben Abmessungen wie das zuerst erzeugte Banner. Wir wählen als "Layer Fill Type: Transparent". Der Layer wird sowieso später noch eingefärbt.
Nun wählen wir den neuen Layer in der Liste aus, so daß wir nur Ihn bearbeiten. Die anderen Layer können aber trotzdem weiterhin angezeigt werden. Die folgenden Arbeiten werden diese Layer nicht beeinflussen.
Mit einem Doppel-Klick auf die obere Farbfläche am unteren Ende der Gimp-Buttonleiste öffnet sich ein Fenster mit dem Namen "Color selection". Dort suchen wir uns einen schönen Blau-Ton für die Vordergrund-Farbe aus. Durch einen weiteren Doppel-Klick auf die zweite Farbfläche können wir auch die Hintergrund-Farbe aussuchen. Hierfür wählen wir einen etwas dunkleren Blau-Ton.
Als nächstes wählen wir die Option "Fill with a color gradient" aus. In dem Fenster mit weiteren Optionen (öffnet sich Doppelklick aufs Icon) wählen wir den Menüpunkt: "Blend: FG to BG (RGB)".
Mit dieser Option erhalten wir einen Farbverlauf von der Hellblauen Vordergrund-Farbe zur etwas dunkleren Hintergrund-Farbe.
Mit der Maus ziehen wir nun einen Pfeil auf dem Banner-Bild, und geben somit an in welchem Bereich und in welcher Richtung der Farbverlauf erfolgen soll.
Man beachte, daß dabei nur die aktiven Layer übermalt wird, die drei Layer mit den Pinguinen aber unbeschadet bleiben.
Den Layer mit der blauen Hintergrund-Farbe kopieren wir nun vier mal ("Duplicate Layer").
Danach fassen wir je ein Layer mit den Pinguinköpfen mit einem blauen Hintergundlayer zusammen ("Merge visible Layers"), so daß noch zwei blaue Layer übrig bleiben (die benötigen wir später noch). Man achte darauf, daß beim Zusammenfassen der Layers das Bild mit den Köpfen im Vordergrund liegt und somit nicht von dem Hintergrund-Bild überdeckt wird.
Dabei verlieren die drei Layers leider ihren Namen, so daß wir sie erneut umbenennen müssen in:
  Layer1 (2000ms)
  Layer2 (180ms)
  Layer3 (250ms)

Als nächstes Bearbeiten wir einen von denjenigen Layern, die bisher nur blau sind. Als Vordergrund-Farbe wählen wir weiß aus, um danach mit dem Knopf "Add text to the image" einen weißen Text auf das Bild zu schreiben.
Ein Klick auf das Banner öffnet ein weiteres Fenster, in dem die Einstellungen für den Text vorgenommen werden.
Wir wählen eine Schrifthöhe von 35 Pixeln und den Font "charter". Als Text geben wir unten ein "Was gibts denn da".
Nach dem Drücken von "OK" und dem Verschieben des Textes in die obere linke Ecke, erzeugen wir wieder einen neuen Layer, um den Text auf diesem zu plazieren.
Danach schreiben wir einen weiteren Schriftzug, diesmal mit einer Höhe von 44 Pixeln, und plazieren diesen Text (auf einem eigenen Layer) in der rechten unteren Ecke.
Das Banner sollte daraufhin folgendermaßen aussehen:

 
Dann werden auch die drei Layer (Blauer Hintergrund und beide Layer mit dem weißen Text) zusammengefaßt.
Nun fehlt nur noch die Bearbeitung des letzten Layers mit blauem Hintergrund. Wir selektieren diesen und fügen auf ihm, wie eben geschehen, einen Text mit der Adresse Deiner Hompage ein.
Als Font sollten sie hier die Schriftart "courier" verwenden. Die Höhe der Schrift ist abhängig von der Länge Ihrer Adresse. Der Text sollte schon ganz auf das Banner passen.
Nachdem nun auch die Layer dieses Textes zu einem zusammengefügt wurden, sollten auch die Layer mit den Schriftzügen umbenannt werden, und eine Zeit in Millisekunden angehängt werden, um anzugeben, wie lange der Text erscheinen soll.
Für die Frage "Was gibts denn da zu sehen?" ist eine Zeit von 2700 Millisekunden angebracht. Für Ihre Internetadresse sollten Sie mindestens 3000 Millisekunden veranschlagen.
Als letztes müssen die Textlayers noch in die richtige Position gebracht werden, d.h. Ihre Internetaddresse als oberstes, darunter die Frage und darunter die drei Layer der Pinguine in der bekannten Reihenfolge.
Das Animierte Banner sollte dann folgendermaßen aussehen:
Nun müssen wir unser Meisterwerk aber auch noch abspeichern. Da das Bild im Gif-Format abgespeichert werden soll, müssen wir es zuerst in das Indexed-Format umwandeln: Menüpunkt Image->Indexed.
Daraufhin erschien ein Fenster in dem gefragt wird, ob das Bild mit 255 Farben (ein Farbton ist für den Transparenten Hintergrund reserviert), extra ans WWW angepaßt oder mit einer eigenen Farbtabelle angebpaßt werden soll.
Hier sollte man die Option mit 255 Farben wählen.
Das speziell ans Internet angepaßte Format verbraucht zwar weniger Speicher, sieht allerdings auch nicht so gut aus.

Wenn wir mit der Animation zufrieden sind (anschauen durch Filters-> Animation->Animation Playback), können wir die Dateigröße des Bildes noch etwas kleiner machen. Momentan speichert Gimp nämlich für die Animation fünf vollständige Bilder ab, die alle hintereinander angezeigt unsere kleine Animation ergeben. Allerdings ändert sich von Bild zu Bild meistens nicht allzuviel. Der Hintergrund bleibt immer der gleiche, und auch die Pinguine am Anfang bewegen sich nur um ein kleines Stück.
Um nun etwas Speicherplatz zu sparen, bietet Gimp die Option, nur denjenigen Teil des Bildes Abzuspeichern, der sich auch verändert hat. Dies spart zusätzlich Speicherplatz, und das Banner kann schneller geladen werden.
Zuständig für diese Funktion ist der Menüpunkt Filters->Animation->Animation Optimize.
Dieser Menüpunkt öffnet für das optimierte Bild ein neues Fenster, so daß man notfalls mit dem alten Bild noch weiterarbeiten kann.
Aber wir wollen ja unser Banner nun endlich abspeichern, dafür wählen wir im Menü des neuen Fensters File->Save As und wählen im dann erscheinenden Fenster unter "Determine File-Type" das Format GIF aus und speichern das Bild unter einem beliebigen Namen ab.
Aber Gimp gibt immer noch keine Ruhe, und will noch mehr wissen. So kann z.B. jedes Gif-Bild ein Kommentar beinhalten, der von einigen Programmen mit angezeigt wird. Hier steht standardmäßig "Made with Gimp". Sie können dies aber beliebig ändern oder ganz deaktivieren.
Bei Gif-Bildern mit mehreren Layern erscheinen weitere Optionen unter "Animated Gif Options". Dort kann z.B. eingestellt werden, ob die Animation als Endlosschleife laufen soll (Option "Loop"), dies sollten wir für unser Banner aktivieren.
Weiterhin gibt es die Option "Default delay between Frames where unspecified". Dort kann eingestellt werden, welche Zeitabstände zwischen dem Anzeigen zweier Layer abgewartet werden soll. Da wir dies aber schon angegeben haben (Im Layer-Namen z.B. durch den Eintrag (2000ms)), wird dieser Wert statt der hier eingegebenen 100ms genommen.
Die letzte Optionen-Liste gibt nur an, ob beim Anzeigen der Bilder die Layer nur über das andere gelegt werden sollen und das darunterliegende noch durchscheinen kann, oder ob bei jedem Bild das darunterliegende gelöscht werden soll.
Da bei unserem optimiertem Banner sowieso die Option "combine" benutzt wird, haben die Einstellungen hier keine Auswirkung.
Nach einem Druck auf "OK" kann das Bild endlich abgespeichert werden.

Ahh, Sie haben es überstanden und Ihr erstes animiertes Banner mit Gimp erstellt, Gratulation!