Banner mit ImageReady
Grafik-Programme: Heft 02/2001 (S. 124) 3 Seiten
Animierte GIFs erstellen
Der aktuellen Photoshop-Version 6 wird auch eine neue Version von ImageReady beigelegt. Die 3er Version bietet allerdings nicht allzuviele Neuerungen. Das Programm ist sehr gut dazu geeignet animierte GIFs zu erstellen, wie unser Workshop zeigt
Sicherlich sind Ihnen auch schon oft die kleinen Banner auf Webseiten begegnet, bei denen sich alles dreht und bewegt. Meist handelt es sich dabei um Animationen im GIF-Dateiformat. Für solche Aufgabenstellungen ist ImageReady prädestiniert - das Programm bietet nämlich einige interessante Funktionen dafür an. Sie finden dieses Programm in der aktuellen Version 3.0 als Beigabe zu Photoshop 6. Es ist ein eigenständiges Programm - Photoshop braucht also nicht gestartet zu werden.
Die richtige Bannergröße
Bevor es mit dem Animieren losgehen kann, müssen natürlich erst einmal Objekte vorhanden sein. Und natürlich ein Dokument in der passenden Größe. Rufen Sie also zunächst die Funktion "Datei/Neu" auf, die Sie wie gewohnt auch mit dem Tastenkürzel [Strg]+[N] erreichen. Stellen Sie eine Größe von 468 Pixeln Breite und einer Höhe von 60 Pixeln ein - das ist ein gängiges Bannermaß für große Banner. Der Hintergrund des Dokuments wird mit Weiß gefüllt. Das neue Dokument ist sehr klein - das ist leider das Wesen von Bannern. Sie sollten daher beim Arbeiten die Darstellungsgröße vergrößern, damit Sie etwas erkennen.
Verschiedene Ansichten
Auffallend sind die vier Reiter über der Arbeitsfläche - die gibt es in Photoshop nämlich nicht. Über diese Reiter können Sie sich ansehen, wie das Ergebnis in der exportierten Endfassung aussehen wird. Beim Vergrößern der Darstellungsgröße mit dem Zoom-Werkzeug sollten Sie in der - auch in ImageReady neuen - Optionen-Leiste die Option Fenstergröße anpassen aktivieren, damit das Dokument vollständig zu sehen ist.
Mit Stilen arbeiten
Der Hintergrund soll mit einer interessanten Struktur versehen werden. Ebenso wie in Photoshop finden Sie auch in ImageReady im Stile-Palettenfenster viele mitgelieferte Vorlagen, die an Ebenen angewendet werden können. Um aus dem Hintergrund eine Ebene zu machen, klicken Sie doppelt auf den Eintrag im Ebenenfenster und wandeln Sie den Hintergrund damit in eine Ebene um. Weisen Sie dieser neuen Ebene anschließend den Stil mit dem Namen "Feuerglas" zu. Der Stil besteht aus zwei Effekten. Da der "Schein nach außen"-Effekt nicht benötigt wird, ziehen Sie ihn zum Löschen auf das Mülleimer-Symbol. Dann bleibt nur die Musterüberlagerung übrig.
Schriftzüge erstellen
Zuerst wird nun ein Schriftzug benötigt. Die Festlegung der Textattribute erfolgt über ein Palettenfenster. Den Text können Sie wie in Photoshop direkt auf der Arbeitsfläche eingeben. Stellen Sie vor der Texteingabe im Farbregler-Palettenfenster Weiß als Vordergrundfarbe ein. In früheren Photoshop-Versionen war es recht mühselig, Objekte mit Konturen zu versehen - jetzt können Sie diese Aufgabenstellung recht leicht mit Ebeneneffekten realisieren. Dabei können Textebenen den Kontur-Ebenenstil erhalten. Achten Sie darauf, dass die gerade neu erstellte Ebene im Ebenen-Palettenfenster noch markiert ist. Rufen Sie dann die Funktion Ebene/Ebenenstil/Kontur auf. Stellen Sie in dem Palettenfenster eine Konturstärke von 3 Pixeln ein. Als Farbe wird Gelb gewählt. Außerdem wurde noch ein Schlagschatten-Ebenenstil mit den abgebildeten Werten verwendet. Abschließend wird für die Textebene noch der Differenz-Überblendungsmodus eingestellt. Verknüpfen Sie zum Ausrichten die Textebene mit dem Hintergrund. Markieren Sie den Hintergrund und verwenden Sie die Ausrichtungs-Symbole der Optionen-Leiste, um den Text horizontal und vertikal zum Hintergrund auszurichten. Die Symbole sind aktiv, wenn das Verschieben-Werkzeug aufgerufen wurde.
Grundelemente
Nun sollen weitere Grundelemente konstruiert werden, damit es etwas zum Animieren gibt. Auch in ImageReady gibt es natürlich die Werkzeuge zum Konstruieren von geometrischen Formen. Es werden einige Rechtecke benötigt. Diese sollen von links nach rechts gleichmäßig größer werden und gleichmäßig verteilt werden. Als Farbton wurde wieder Weiß verwendet. Rufen Sie dazu aus der Werkzeugleiste das Rechteck-Werkzeug auf. Stellen Sie in der Optionen-Leiste eine feste Größe von 10 Pixeln Breite und einer Höhe von 30 Pixeln in der Optionen-Leiste ein - so groß soll nämlich das größte Rechteck werden. Klicken Sie einmal in das Bild - bei einer fest vorgegebenen Größe können Sie das Rechteck natürlich nicht aufziehen. Erstellen Sie dann immer zwei weitere Rechtecke: Eines mit 20 und ein weiteres mit 10 Pixeln Höhe. Das ist durch die Angabe in der Optionen-Leiste recht einfach. Die Positionierung der Ebenen ist dabei erst einmal egal. Übertragen Sie nun die Stile des Textes auf die Rechtecke. Klicken Sie dazu auf das Effekt-Symbol im Ebenen-Palettenfenster und wählen Sie aus dem Kontextmenü die Option Stil kopieren. Verwenden Sie danach bei den Rechteckebenen die Funktion Stil einfügen. Die drei Rechtecke sollen nun dupliziert werden und in umgedrehter Reihenfolge angeordnet werden.
Ausrichten und verteilen
Um die Elemente mit einem gleichmäßigen Abstand zueinander auszurichten, verbinden Sie diese. Klicken Sie dazu bei allen Rechteckebenen auf das zweite Feld vor jedem Eintrag. Ein Kettensymbol zeigt die Verknüpfung an. Rufen Sie dann die Funktion "Ebene/Verbundene verteilen/Horizontale Mitte" auf. Zum Ausrichten in der Höhe wird dann die Funktion ""Ebene/Verbundene ausrichten/Vertikale Mitte" benötigt. Lösen Sie dann die Verknüpfung der drei linken Elemente und verschieben Sie diese rechts neben den Schriftzug. Halten Sie dabei die [Umschalt]-Taste gedrückt, damit die Elemente genau waagerecht verschoben werden. Nun sollten die Rechtecke noch zum Text vertikal zentriert werden. Damit sind die vorbereitenden Arbeiten abgeschlossen, sodass wir nun beginnen können, die Elemente zu bewegen. Das, was Sie nun im Endbild sehen, soll das Endstadium unserer späteren Animation werden. Es ist meist leichter "verkehrt herum" zu arbeiten. Steht das Endstadium erst einmal, ist es leichter, den Aufbau dieses Stadiums herzustellen.
Animationen
Das spannende an ImageReady ist nicht die Möglichkeit, Standbilder zu erstellen - das können Sie in Photoshop auch erledigen. In ImageReady können Sie die Bilder aber auch "zum Leben" erwecken. Folgendes soll passieren: Das Untergrundrechteck soll einblenden - es wird langsam sichtbar. Die Kreise springen nacheinander ein und abschließend wächst der Text aus dem Nichts heraus. Für einige dieser Aufgabenstellungen bietet ImageReady Erleichterungen an - andere müssen Sie leider "per Hand" erledigen.
Beginnen wir damit, die verschiedenen Stadien zu erstellen, die gerade beschrieben wurden: Wechseln Sie zum Animation-Palettenfenster. Klicken Sie auf das Papiersymbol, um ein weiteres Filmbild einzufügen. Damit wird ein Abbild der bestehenden Ebene erstellt. Die farbliche Hervorhebung zeigt an, welches der Filmbilder gerade markiert ist. Blenden Sie im ersten Filmbild alle Ebenen bis auf den Hintergrund aus - so soll unser Anfangsbild aussehen. Klicken Sie dazu einfach jeweils auf das Augensymbol. Beim Hintergrund stellen Sie eine Ebenen-Deckkraft von 0 % ein, damit er durchsichtig wird. Klicken Sie erneut auf das Papiersymbol, damit von diesem neuen Stadium wieder eine Kopie erstellt wird. In diesem zweiten Filmbild erhöhen Sie die Ebenen-Deckkraft für den Hintergrund wieder auf 100%. Auch von diesem Stadium wird wieder eine Kopie benötigt.
Einzelbildanimation
Für die Bewegung der Rechtecke kommen wir gleich zur Animation. Die simpelste Art der Animation ist nämlich einfach das Erscheinen eines Objekts im Bild. Genau das soll erreicht werden: Die Rechtecke sollen nacheinander einfach erscheinen. Das Verfahren der Einzelbildanimation entspricht dem, was Sie gerade erledigt haben: Das bestehende Bild wird dupliziert und geändert. So blenden wir beim folgenden duplizierten Bild die beiden kleinsten Rechtecke ein. Das neue Ergebnis wird erneut dupliziert und dort die beiden mittleren Rechtecke eingeblendet. Zuletzt folgen die beiden größten Rechtecke und zum Schluss der Schriftzug. Auch er wird eingeblendet. Dieses letzte Bild braucht nicht mehr erstellt zu werden, da es ja das ursprüngliche erste Filmbild war. Sie sollten nun sechs Vorschaubilder mit den unterschiedlichen Stadien im Animation-Palettenfenster sehen.
Zwischenphasen
Im nächsten Schritt gehen Sie zum ersten Filmbild zurück. Der Untergrund soll ja eingeblendet werden. Hier können Sie ImageReady die Arbeit erledigen lassen. Achten Sie darauf, dass das erste Filmbild markiert ist. Rufen Sie aus dem Pfeilmenü des Palettenfensters die Funktion "Dazwischen einfügen" auf. Geben Sie in dem Dialogfeld die abgebildeten Einstellungen ein.
ImageReady untersucht dann die Unterschiede des markierten Bilds zum folgenden Bild. Die Veränderungen werden dann in den hinzugefügten Frames langsam vollzogen. Dies betrifft in unserem Beispiel die Deckkraft des Hintergrunds. Im ersten Bild ist die Deckkraft 0 - es ist nicht sichtbar - im folgenden Bild ist es dagegen vollständig zu sehen. Sie sehen nach dem Bestätigen, dass ImageReady drei Bilder eingefügt hat, bei denen der Hintergrund teilweise zu sehen ist. Wenn Sie eines der neu eingefügten Bilder markieren, können Sie im Ebenen-Palettenfenster sehen, dass dort die Deckkraft verändert wurde. Im Bild 3 ist sie beispielsweise 50 %. Das Rechteck ist also genau "zur Hälfte" zu sehen. Diese Funktion wird auch Tweening genannt. Leider lassen sich nur sehr wenige Aufgaben damit erledigen. So können Sie auf diese Art beispielsweise auch einen Effekt langsam einblenden oder die Position verändern. So können Sie Objekte durch das Bild schieben. Um Objekte aber beispielsweise zu skalieren, müssen Sie eine andere Arbeitstechnik anwenden - hier kann diese Funktion nicht weiterhelfen.
Animation "per Hand"
Beim nächsten Schritt der Animation gibt es nun gar keine Unterstützung: Hier müssen Sie selbst Hand anlegen. Nach der Begutachtung des vorigen Schritts ist dies aber nicht schwierig: Sie müssen nur eine bestimmte Anzahl von Bildern erstellen, die sich entsprechend der Aufgabenstellung unterscheiden. Hier ist wieder eine Überlegung nötig: Der Schriftzug soll zuerst sehr niedrig sein und dann anwachsen. Dies können Sie beispielsweise mit der Funktion Bearbeiten/Frei transformieren realisieren. Alternativ dazu können Sie auch die Zeichenhöhe im Zeichen-Palettenfenster verändern.
Dieser Gedanke ist richtig, führt aber leider nicht zum gewünschten Ergebnis, da damit der Schriftzug in allen Frames gleichermaßen geändert wird - und das ist natürlich nicht erwünscht. Der Text soll ja langsam anwachsen und nicht durchgängig eine andere Größe erhalten. Deshalb müssen Sie mit demselben Grundgedanken anders vorgehen: Duplizieren Sie die Textebene im Ebenen-Palettenfenster. Ziehen Sie die Textebene dazu auf das Papiersymbol. Verändern Sie nun bei diesem Duplikat die Zeichenhöhe - zum Beispiel auf 100 %. Erstellen Sie dann von dieser Ebene ein weiteres Duplikat. Dort wird die Zeichenhöhe auf 70 % eingestellt - beim nächsten Duplikat auf 40 % und abschließend auf 20 % eingestellt. So ergibt sich die abgebildete Anordnung der unterschiedlichen Ebenen. Der guten Ordnung halber wurden die Rechtecke in einem eigenen Ordner untergebracht. So haben Sie nun fünf verschiedene Ebenen, die nur noch zum passenden Zeitpunkt ein- oder ausgeblendet werden müssen.
Wechseln Sie zum Filmbild Nummer 8 und blenden Sie in einem Duplikat dieses Filmbilds den flachsten Schriftzug ein - die anderen werden dagegen ausgeblendet. Erstellen Sie von diesem Filmbild ein Duplikat und blenden Sie dort die nächste Größe ein. Wiederholen Sie dies und blenden Sie auf jeweils neuen Filmbildern nacheinander die Ebenen ein. Sie sollten dann abschließend 13 Filmbilder haben, weil das letzte Bild ja bereits vorhanden war. Das war es schon - auf diese Art können Sie alle Animationsarten realisieren - mehr oder weniger aufwändig. Momentan werden alle Filmbilder einfach hintereinander abgespielt, so schnell sie geladen werden können. Wenn Sie wollen, können Sie aber auch eine Standzeit angeben, wie lange ein bestimmtes Bild angezeigt werden soll. Das bietet sich beispielsweise an, um nach einer abgeschlossenen Aktion einen "Moment Pause" zu machen. Klicken Sie dazu - nach dem Markieren des betreffenden Bilds - auf den Pfeil unter dem Bild. Dort finden Sie verschiedene Vorgabewerte. Ist der gewünschte Wert nicht dabei, wählen Sie die Option Andere.
Speichern als animiertes GIF
Nun müssen Sie das Ergebnis nur noch speichern. Dabei sind einige Dinge zu beachten. Speichern Sie mit der Funktion Datei/Speichern unter den Film im Photoshop-Dateiformat PSD. Nur in diesem Dateiformat bleiben alle Optionen zum späteren Editieren erhalten. Im Beispiel müssen Sie das GIF-Dateiformat benutzen, da es als Einziges Animationen unterstützt. Dafür müssen Sie hinnehmen, das es nur 256 Farben enthalten kann. In dem Beispiel ist das aber nicht sehr schlimm, da im Beispiel nur wenige verschiedene Farbtöne enthalten sind. Das betreffende Dateiformat wird über die Optimieren-Palette eingestellt. Je nach ausgewähltem Dateiformat werden hier verschiedene Optionen angezeigt. Um beurteilen zu können, wie das exportierte Ergebnis aussieht, schauen Sie sich das Ergebnis über den Optimiert-Reiter oberhalb des Arbeitsfensters an. Wollen Sie Ausgangs- und Exportbild gleichzeitig ansehen, verwenden Sie die 2fach-Ansicht. Unter dem Bild finden Sie Angaben über die Dateigröße des exportierten Bilds und über die geschätzte Übertragungsdauer. Haben Sie die passenden Einstellungen gefunden, verwenden Sie die Funktion Bearbeiten/Optimiert Version speichern unter. Dort können Sie auch einstellen, ob zusätzlich zum animierten GIF gleich eine entsprechende HTML-Datei erzeugt werden soll. Darin wird dann automatisch das Bild positioniert. Aktivieren Sie in diesem Fall die Option HTML und Bilder (*.html).
