|
|
LinuxNetMag #4
Druckversion
|
|
[ 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 Maus-taste 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
Knöpfen mit Pfeil 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 Banner und bewegen den Pinguin, der sich
auf dem jeweiligen Banner 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 unserer 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!
|
|
Platz für Kommentare & Fragen:
(selbst eintragen)
|
