4 Funktionen für Internet-Gestalter

In diesem Kapitel besprechen wir alle Photoshop- und ImageReady-Techniken, die speziell für Internet-Designer interessant sind. Im gesamten Buch ist mit dem Begriff »Internet« der World-Wide-Web-Bereich des Internets gemeint, auch WWW genannt, der aufwendige grafische Gestaltung erlaubt.

4.1 Einführung

Zu den Themen in diesem Kapitel gehören

4.1.1 Aufteilung der Programme

Einige Aufgaben sind nur in ImageReady lösbar; das gilt besonders für Imagemaps, GIF-Animation und Rollover-Effekte. Weitere Jobs lassen sich zwar auch mit Photoshop bewältigen, doch ImageReady macht es Ihnen leichter, zum Beispiel beim Speichern. Die Bildkataloge für WWW-Seiten erzeugt wiederum nur der Photoshop. Generell lässt sich sagen: Statische Bilder wie Slices oder Imagemaps legt man mit Photoshop an, für Bewegtes wie Rollover-Effekte oder Animation ist ImageReady zuständig.

Die Photoshop-Schaltfläche »Springen zu ImageReady«  (Strg + Umschalt + M, am Mac Befehlstaste+Umschalt+M) bringt das aktuelle Bild aus Photoshop heraus nach ImageReady (Details ab Seite 66).

4.1.2 Der Aufbau von Internet-Seiten

Übliche Internet-Seiten bestehen meist aus zwei Elementen:

Photoshop wie auch ImageReady können HTML-Code und Bilddatei in zwei oder mehr separaten Dateien sichern. Außerdem haben Sie in ImageReady die Möglichkeit, nach Änderungen am Bild den HTML-Code allein zu speichern; dazu dient der Befehl Datei: HTML aktualisieren. In seiner Browser-Vorschau zeigt ImageReady den HTML-Code zusätzlich zum Bildergebnis an; Sie können den HTML-Code hier bei Bedarf mit der Maus markieren und kopieren.

Abbildung 4.1:  Bild und Text von World-Wide-Web-Seiten im Internet werden in getrennten Dateien übertragen. Diese einfache Seite besteht aus den Dateien »Testseite.htm« und »Rockies.jpg«. Datei: Testseite.htm

HTML-Dateien

Die HTML-Datei (für Hypertext Markup Language) enthält den Text, den Sie veröffentlichen möchten. Sie enthält zudem, stets in spitzen Klammern, Formatierungshinweise (so genannte Tags, wörtlich »Anhänger«). Diese Hinweise legen etwa fest, wie groß eine Schrift erscheint oder ob sie mittig oder linksbündig platziert wird.

Auch so genannte Hyperlinks werden auf der Internet-Seite notiert. Klickt man auf eine Grafik oder auf eine Textstelle, die als Hyperlink definiert ist, wird ein anderes Bild oder eine andere HTML-Seite geöffnet.

Die Formatierungshinweise (Tags) und die Hintergrundinformationen für die Hyperlinks sieht man im Internet-Betrachter (Browser) natürlich nicht. Sie sehen diesen vollständigen HTML-Text jedoch im Browser mit einem Befehl wie Ansicht: Seitenquelltext oder Ansicht: Quelltext anzeigen.

Bilder für Internet-Seiten

Die HTML-Seiten enthalten nicht das Bild selbst. Statt dessen finden Sie dort nur einen Verweis auf den Speicherort der Bilddatei, wieder in spitzen Klammern. Erscheint nur der Dateiname, muss sich das Bild im selben Verzeichnis wie die HTML-Datei befinden. Häufig legt man Bilder in Unterverzeichnisse. Dieses Unterverzeichnis muss dann im HTML-Code genannt werden. Bei Bedarf können Sie auch Bilder einplanen, die auf anderen Internet-Servern liegen; dann nennen Sie die komplette, eindeutige Internet-Adresse (die URL) in der HTML-Seite. Photoshop und ImageReady legen die für HTML-Seiten erzeugten Bilddateien in das automatisch erstellte Unterverzeichnis »Images«, sofern Sie die werkseitigen Voreinstellungen nicht geändert haben.

Eine GIF- oder JPG -Datei können Sie auch ohne jeden HTML-Code direkt auf die Internet-Seite stellen (ziehen Sie testhalber eine solche Datei über Ihr Internet-Programm). Das Bild erscheint dann in der Zoomstufe 100 Prozent links oben mit weißem Hintergrund. Soll das Bild dagegen mittig platziert werden, vielleicht eine Bildunterschrift oder eine Einblenderklärung enthalten, dann ist HTML-Code erforderlich. Sie öffnen dann mit dem Internet-Browser nur noch die HTML-Datei, das Bild wird automatisch geladen.

Abbildung 4.2:  Der HTML-Code für die Internet-Seite enthält den Text, Formatierungshinweise (Tags) und die Verweise auf andere Bild dateien und Internet-Seiten. Hier der HTML-Code für die Seite auf der vorhergehenden Abbildung.

HTML-Dateien bearbeiten

Die gesamte HTML-Datei besteht nur aus ASCII-Zeichen, also aus 255 üblichen Schriftzeichen. Sie können die HTML-Datei darum mit üblichen Textprogrammen oder so genannten ASCII-Editoren bearbeiten. Sie müssen natürlich den HTML-Code genau beherrschen, damit die Seite wie gewünscht erscheint.

Einfacher ist es, so genannte HTML-Editoren zu verwenden - Programme zur Gestaltung von Internet-Seiten. Hier hat man mit dem HTML-Code im Hintergrund oft nur wenig zu tun. Einige HTML-Editoren erhält man teilweise umsonst, so etwa Frontpage Express oder Netscape Composer. Auch einige Text- und Grafikprogramme können HTML schreiben.

Stellen Sie gleichzeitig eine WWW-Seite im Browser dar und korrigieren Sie den HTML-Code in einem anderen Programm? Dann speichern Sie den Code und klicken Sie im Browser auf die Schaltfläche Aktualisieren. Damit erscheint die Seite in der soeben geänderten Form.

Java und JavaScript

Java ist eine Programmiersprache. Java-Programme für das Internet heißen »Java-Applets«. Sie eignen sich gut zur Nutzung im worldweiten Web, weil sie klein sind, unabhängig vom Betriebssystem funktionieren und vom Internet-Browser ausgeführt werden. Mit Java lassen sich unter anderem Animationen, geführte Touren oder Kalkulationsanwendungen verwirklichen. Unabhängig davon gibt es die Programmierung per JavaScript; ImageReady erzeugt JavaScript-Code für seine Rollover-Effekte; bei den Animationen wird Java nicht verwendet. So oder so haben Sie damit nichts zu tun: Das Programm fügt die Java-Zeilen in den übrigen HTML-Code ein - fertig. Nur allerälteste Browser unterstützen kein Java, allerdings schalten manche Anwender Java aus Sicherheitsgründen ab.

4.1.3 Kostenloser Speicherplatz

Benötigen Sie noch kostenlosen Speicherplatz (»Webspace«) auf einem Internet-Server für Ihre Exponate? Die folgenden Dienste hielten zum Zeitpunkt der Manuskriptabgabe Gratiskapazität parat: 

http://nbci.com/mywebsite
http://www.tripod.de/
http://www.crosswinds.net/
http://geocities.yahoo.com/home/
http://www.fortunecity.de/

4.2 »Web-Fotogalerie«

Photoshop (nicht mit ImageReady) erzeugt Bildkataloge fürs Internet. Damit präsentieren Sie Ihre Bilder als Galerie im worldweiten Web - aber auch auf CD oder DVD. Klickt man eine der aufgereihten Miniaturen an, erscheint die vergrößerte Version. Auf der Internet-Seite, die dabei entsteht, wird der Katalog als HTML-Tabelle angelegt. Dieser Hauptabschnitt zur »Web-Fotogalerie« hat drei Bereiche:

Im Unterverzeichnis »Praxis/Sammlungen« auf der CD zu diesem Buch finden Sie drei Bildsammlungen mit drei, sieben und 23 Bilddateien für Ihre eigenen »Gallery«-Tests; die Bilder enthalten auch einen Datei-Informationen-Eintrag, den Sie auf der Ergebnisseite darstellen können. Im Verzeichnis »Praxis/Web- Fotogalerie« finden Sie Galerie-Ergebnisse mit verschiedenen Stilen, die Sie direkt auf Ihrem Rechner öffnen können. Klicken Sie dazu doppelt auf den Dateinamen »Index.htm« oder »Frameset.htm«.

Abbildung 4.3:  Zeigern Sie Ihre Bild er in einer »Web-Fotogalerie« im Internet, auf CD-ROM oder DVD.

Beachten Sie, dass Photoshop noch andere Funktionen bietet, die mehrere Bilder auf einer Seite anordnen:

  • Der Befehl Datei: Automatisieren: Kontaktabzug II erzeugt eine Bilddatei mit allen Bildern eines Verzeichnisses en miniature, die Sie drucken und speichern können; dabei wird wahlweise auch der Dateiname genannt (Seite 155).
  • Der Befehl Datei: Automatisieren: Bildpaket packt ein und dasselbe Bild wiederholt in eine Datei, um es auf einer Druckseite mehrfach mit optimaler Papierausnutzung zu drucken (Seite 158).

4.2.1 Vorbereitungen

Um einen Bildkatalog für das Internet - eine »Web-Fotogalerie« - zu produzieren, treffen Sie diese Vorbereitungen:

  • Kopieren Sie zunächst alle Bilder, die in der Internet-Galerie erscheinen sollen, in ein eigenes Verzeichnis und bei Bedarf in Unterverzeichnisse. Alle Bilder, die nicht dazugehören, entfernen Sie aus diesem Verzeichnis: Photoshop verwendet stets sämtliche Fotos aus einem Verzeichnis, Sie können einzelne Motive nicht abwählen. In der Galerie erscheinen die Bilder in alphabetischer Reihenfolge.
  • Legen Sie außerdem ein völlig neues, leeres Verzeichnis an. Es nimmt die unterschiedlichen Dateien und Unterverzeichnisse auf, die Photoshop für Ihre Internet-Galerie erzeugt. Dann wählen Sie Datei: Automatisieren: Web-Fotogalerie.

Das Zielverzeichnis für Ihre Fotogalerie darf sich nicht innerhalb des Quellverzeichnisses mit den Vorlagen befinden.

Abbildung 4.4:  Mit dem Befehl »Datei: Automatisieren: Web-Fotogalerie« erzeugen Sie einen Bild katalog fürs Internet.

Verzeichnisse auswählen

Nach dem Befehl Datei: Automatisieren: Web-Fotogalerie klicken Sie im Dialogfeld auf die Schaltfläche Quelle. In einem Verzeichnisbaum legen Sie fest, aus welchem Verzeichnis die Bilder für Ihren Internet-Katalog stammen sollen. Bei Bedarf nehmen Sie per Option auch noch Bilder aus Unterverzeichnissen auf. Verwenden Sie für erste Tests ein Verzeichnis mit nur wenigen Bildern. Sonst müssen Sie zu lange auf Ergebnisse warten.

Anschließend klicken Sie auf die Schaltfläche Ziel. Damit bestimmen Sie, in welchem Verzeichnis Photoshop die neuen Katalogdateien ablegt. Dabei entstehen weitere Unterverzeichnisse.

Abbildung 4.5:  Photoshop bietet verschiedene »Stile« für die Bild kataloge an. Hier sehen Sie »Einfach« und »Tabelle«. Die Aufteilung der Tabelle hängt von den Angaben für »Reihen« und »Spalten« im Bereich »Galerie-Miniaturen« ab. Durch Anklicken einer Miniatur öffnet sich das vergrößerte Bild .

4.2.2 Stile

Im Klappmenü Stile bietet Photoshop verschiedene Layouts für die Bildkataloge an:

  • Sie können die Bilder in einen HTML-Tabellenrahmen (Tabelle) stellen oder auch nicht (Einfach). Die Vorgabe Tabelle fasst auch das Einzelbild in einen Rahmen.
  • Einzelbilder und Miniaturen lassen sich überdies auch gemeinsam auf dem Bildschirm präsentieren - dabei erscheinen die Miniaturen in einer Leiste am linken oder unteren Bildrand (Horizontaler Frame beziehungsweise Vertikaler Frame).

Abbildung 4.6:  Mit den »Stil«-Vorgaben »Vertikaler Frame« und »Horizontaler Frame« zeigen Sie Miniaturbilder und Einzelbild gleichzeitig. Hier sehen Sie »Vertikaler Frame«.

Unabhängig davon regeln Sie aber noch Textgröße, Textfarbe, Hintergrundfarbe und die Größe der Bilder selbst. Wie Sie weitere, eigene Stile definieren, lesen Sie am Ende dieses Abschnitts (siehe Abbildung 4.6).

4.2.3 Farben

Im Optionen-Klappmenü wählen Sie die Eigenen Farben, um Farbtöne unter anderem für hintergrund, Text, Banner (den Überschriftenbereich) und verschiedene Links festzulegen. Klicken Sie auf ein Farbfeld, um den Farbwähler zu öffnen.

Abbildung 4.7:  Im Bereich »Eigene Farben« legen Sie die Farben für Seitenhintergrund und Text fest. Klicken Sie auf ein Farbfeld, um den Farbwähler zu öffnen. Hier verwenden wir den Farbwähler mit der Option »Nur Web-Farben«; so erscheinen nur die 217 Tonwerte, die sich auch auf älteren Rechnern unverfälscht darstellen lassen (Details zur Farbwahl für Internet-Seiten ab Seite Internet__Farbwahl_für_Web_Designer).

Verwenden Sie eventuell die Option Nur Web-Farben; damit zeigt der Farbwähler nur jene 217 »web-sicheren« Tonwerte, die garantiert auch auf älteren Rechnern unverfälscht erscheinen. Schalten Sie diese Option aus, wenn Sie aus dem vollen Farbspektrum schöpfen möchten.

Nicht web-sichere Farben signalisiert der Farbwähler dann durch sein Warnkästchen . Sie können auch Farben aus anderen geöffneten Bilddateien aufgreifen. Details zum Photoshop-Farbwähler liefern die Seiten 528 ff.

4.2.4 Schriftformatierung bei Miniaturen und Überschriften

In den Eingabefeldern Schriftgrad der Bereiche Galerie-Miniaturen und Banner legen Sie Schriftgrößen fest. Die Vorgabe »7« führt zu großer 36-Punkt-Schrift, »4« erzeugt 14-Punkt-Lettern, 9-Punkt-Noten erhalten Sie mit dem Wert »1«. Zusätzlich geben Sie auch eine Schrift an. Am Ende dieses Hauptabschnitts besprechen wir, wie Sie weitere Schriftformatierungen verwenden.

4.2.5 »Randgröße« für Miniaturen und Einzelbilder

Für die Miniaturen geben Sie eine Randgrösse an. Damit entscheiden Sie, ob die Fotos im Internet-Programm mit einer Konturlinie erscheinen sollen, und Sie nennen die Breite in Pixeln. Diesen Rand rechnet Photoshop nicht in die Bilddateien ein: Es handelt sich um eine HTML-Funktion, Photoshop schreibt den entsprechenden »border«-Befehl in den HTML-Code zu jeder Seite. Die Bilddatei selbst zeigt den Rand also nicht, er entsteht erst im Internet-Browser. Sie können die Rahmengröße auch innerhalb der HTML-Datei mit dem »border«-Eintrag korrigieren; border="3" bedeutet eine Rahmenbreite von 3 Pixeln.

Für diesen Bildrahmen verwendet Photoshop die Textfarben, die Sie im Bereich Eigene Farben vorgegeben haben. Das heißt auch, dass der Rahmen von bereits angeklickten Miniaturen mit der Farbe für den besuchten Link erscheint.

4.2.6 Überschriften

Im Klappmenü Optionen des Dialogfelds Web-Fotogalerie wählen Sie Banner, um die Überschriften festzulegen. Diese Einträge erscheinen sowohl über dem Bildkatalog und als auch über jedem Einzelbild; über dem Einzelbild erscheint zusätzlich der Bildname.

  • Als Name der Site tippen Sie eine Überschrift Ihrer Wahl ein. Sie erscheint sowohl im Bildkatalog als auch bei den Einzelbilderseiten. Diese Überschrift taucht auch als Seitentitel oben im Programmfenster-Rahmen des Browsers auf. Lassen Sie das Feld leer, wenn Sie keine Überschrift brauchen. Sie sparen dadurch Platz auf der Internet-Seite.
  • Bei Bedarf machen Sie einen Eintrag in der Zeile Fotograf. Sie können hier einen beliebigen Text eintragen oder die Zeile leer lassen.
  • Als Datum bietet Photoshop zunächst den aktuellen Tag an. Auch hier gilt: Ändern Sie bei Bedarf das Datum oder tragen Sie einen ganz anderen Text ein. Alternativ lassen Sie die Zeile leer - dann sparen Sie Platz auf der Internet-Seite.

Achtung - bei jedem neuen Versuch setzt Photoshop in das Datumsfeld das aktuelle Datum ein. Wenn Sie dort jedoch etwas anderes lesen möchten, müssen Sie dies immer aufs Neue korrigieren. Auch wenn Sie den Befehl Web- Fotogalerie als Aktion speichern und im Datumsfeld einen Text eintragen, ersetzt Photoshop Ihre Worte hartnäckig wieder durch das Datum. Abhilfe: Entfernen Sie das Feld innerhalb eines eigenen Stils (siehe unten).

4.2.7 Darstellung der Miniaturen

Wählen Sie im Klappmenü Optionen die Galerie-Miniaturen, um die Darstellung der Miniaturen zu regeln.

Größe

Sie können die Miniaturengröße aus Photoshops Angeboten Gross, Mittel und Klein wählen oder Sie tippen eine beliebige andere Größe ein. Im Einzelnen:

  • Gross: Diese Vorgabe führt zu Miniaturen mit einer Seitenlänge von maximal 100 Bildpunkten. Auf einer Internet-Seite mit 800 Pixel Breite passen fünf Miniaturen dieser Größe perfekt nebeneinander.
  • Mittel: Mit dieser Vorgabe entstehen Miniaturen von höchstens 75 Pixeln Breite. Pro Reihe passen bei 800 x 600 Pixeln sechs Miniaturen.
  • Klein: Diese Wahl erzeugt Miniaturen mit höchstens 50 Pixeln Kantenlänge. Sieben Miniaturen pro Reihe passen auf eine Browser-Seite mit 800 Bildschirmpunkten Breite.

In den meisten Fällen sollten Sie die Größen Mittel oder sogar Gross verwenden. Übliche Bildschirme stellen meist 1024 oder sogar 1280 Bildpunkte in der Breite dar. Dort wirken Miniaturen der Kategorie Klein verloren.

Spalten und Reihen

In den Feldern Spalten und Reihen legen Sie fest, wie breit und wie hoch die Tabelle werden soll. Die Tabelle erscheint generell in der von Ihnen angegebenen Größe. Photoshop verteilt lange Galerien in den Stilen Einfach und Tabelle auf mehrere Seiten (und auf mehrere HTML-Dateien). Darum sind nicht unbedingt alle Miniaturen gleichzeitig im Zugriff. Sie müssen sich mit automatisch angelegten Schaltflächen zu den Seiten 2 ff. weiterklicken.

Ein Beispiel: Sie legen eine Web-Fotogalerie mit vier Reihen und vier Spalten an. Damit erzeugt Photoshop eine Miniaturen-Tabelle für genau 16 Ansichten. Dies bedeutet:

  • Wenn Sie mehr als 16 Bilder verarbeiten, setzt Photoshop die Galerie auf einer zweiten Seite fort. Dabei entsteht eine zweite Datei, zum Beispiel »Index_2.htm«. Sie erhalten automatisch Schaltflächen auf jeder Katalogseite, mit denen Sie zu den anderen Seiten wechseln.
  • Verarbeiten Sie weniger als 16 Bilder, bleiben Lücken in der Galerie. Dies fällt vor allem auf, wenn Sie als Stil die Tabelle verwenden; dort ist jede Zelle der Tabelle dick eingerahmt.

Generell sollten Sie die Wirkung der Galerie bei einer Bildschirmauflösung testen, die auch Ihre Betrachter verwenden, also vielleicht 1024 x 768 Monitorbildpunkte. Wenn Sie die Tabelle zu breit anlegen - also mit einem hohen Wert für Spalten - fallen auf kleineren Monitoren oder verkleinerten Programmflächen links oder rechts Miniaturen aus der Ansicht heraus.

Möchten Sie alle Miniaturen auf einer einzigen, langen Seite zeigen, die der Betrachter nach und nach über den Schirm laufen lässt? Dann geben Sie eine hohe Zahl für Reihen ein.

»Bildunterschrift«

Sie können die Miniaturen mit oder ohne Bildunterschrift in die Galerie einreihen. Als Text bietet Photoshop den Dateinamen oder die Datei-Informationen-Objektbeschreibung an. Diese Objektbeschreibung tragen Sie mit dem Befehl Datei: Datei-Informationen ein, in ImageReady heißt es Datei: Bildinformation (Details ab Seite 85). Unabhängig davon erscheint der Dateiname in der Einzelbildansicht auf jeden Fall. Diese Bildunterschrift erscheint auch als gelb unterlegter Einblendtext, wenn der Betrachter den Mauszeiger über das entsprechende Bild hält.

Auch die Copyright-Hinweise in den Datei-Informationen werden in den HTML-Code übernommen. Sie erscheinen jedoch nicht auf der im Browser dargestellten Seite.

4.2.8 Die Einzelbilder

Klickt ein Betrachter in Ihrer Internet-Galerie auf eine Miniatur oder auf die Bildunterschrift, erscheint das zugehörige Einzelbild im Internet-Browser. Dabei zeigt Photoshop erneut auch die Seitenüberschrift, die Sie im Bereich Banner eingetippt haben. Zusätzlich sehen Sie den Dateinamen auf der Seite und in der Titelleiste des Browsers.

Wie die Einzelbilder aussehen, das regeln Sie im Bereich Galerie-Bilder. Photoshop produziert generell auf Basis Ihrer Wünsche neue JPG-Bilddateien, Ihre Vorlagen bleiben unverändert. Sie haben folgende Möglichkeiten:

  • Wählen Sie die Option Bilder skalieren ab. Dann erscheinen alle Ihre Einzelbilder mit der Original-Bildpunktzahl auf der Internet-Seite. Die Bilder können natürlich viel zu groß sein, wenn sie zum Beispiel 1500 x 1200 Bildpunkte haben, oder viel zu winzig, mit zum Beispiel nur 30 x 50 Pixeln. In jedem Fall werden gleichwohl neue Einzelbilder erzeugt, und zwar im Internet-tauglichen JPG-Dateiformat und im RGB-Farbmodus. Dabei verwendet Photoshop generell die JPG-Qualitätsstufe 5. Damit entsteht eine brauchbare Bildqualität; gegenüber dem Arbeitsspeicherbedarf des Bildes schnurrt die Datei etwa auf ein Fünzigstel oder weniger zusammen. Die Programmierer sollten auch hier die Möglichkeit anbieten, die JPG-Qualitätsstufe zu regulieren.
  • Schalten Sie Bilder skalieren ein. Nun geben Sie vor, wie die Original-Bildpunktzahl für den Internet-Auftritt heruntergerechnet werden soll; Photoshop bietet die Größen 250, 350 und 450 Pixel an - oder tragen Sie eine beliebige andere Zahl ein. Der Wert meint immer die längere Kante eines Bildes: Die Vorgabe 450 führt also zu Hochformaten von 450 Pixel Höhe und geringerer Breite sowie zu Querformaten von 450 Pixel Breite und geringerer Höhe. Außerdem nennen Sie die JPG-Qualität. Meist nimmt man Werte zwischen 5 und 7; damit erhalten Sie sehr kleine Dateien bei brauchbarer Qualität. (Die JPG-Qualitätsstufe verändert nie die Bildschirmmaße Ihres Fotos. Details zu JPG finden Sie auf Seite 372.)

Abbildung 4.8:  Klicken Sie in der Internet-Galerie auf eine Miniatur, erhalten Sie eine Einzelbildansicht. In diesem Beispiel haben wir im Bereich Galerie-Bild er des Dialogfelds »Web-Fotogalerie« auch eine »Randgröße« vorgegeben. Oben auf der Seite erscheinen die Texteinträge, die Sie im Bereich »Banner« gemacht haben. Durch Klick auf die waagerechten Pfeile über dem Foto ruft der Betrachter die benachbarten Einzelbilder auf; der senkrechte Pfeil führt zurück zur Übersicht mit den Miniaturen.

Tabelle: Größen der Einzelbilder

Die folgende Tabelle zeigt Ihnen, wie groß die Einzelbilder abhängig von der Pixelzahl und der Qualitätsstufe werden. Für den Test verwenden wir das Bild »Boot_1.jpg«; Sie finden es auf der CD zu diesem Buch im Unterverzeichnis »Praxis/Gallery/23_Vorlagen«.

Wir rechnen das Bild mit bikubischer Interpolation auf die jeweilige Pixelzahl herunter, verwenden keinen weiteren Scharfzeichner und verzichten auf die JPG-Optionen Baseline optimiert sowie Mehrere Durchgänge. Die hier verwendete JPG-Qualitätsstufe 8 liefert zumeist exzellente Bildergebnisse ohne jeden sichtbaren Mangel; die Stufe 5 zeigt nur kleinere Mängel bei deutlicher Platzersparnis (Details zum JPG-Format ab Seite 372).

Pixelmaße Größe im Arbeitsspeicher Dateigröße bei JPG-Qualität 5 Dateigröße bei JPG-Qualität 8
450 x 293 387 KB 29 KB 55 KB
350 x 228 234 KB 18 KB 27 KB
250 x 163 120 KB 10 KB 15 KB

Einheitliche Breite oder Höhe

Wenn Sie die Option Bilder skalieren zum Beispiel mit der Vorgabe 450 verwenden, erhalten Sie bei querformatigen Bildern 450 Pixel Breite mit geringerer Höhe, bei Hochformaten dagegen 450 Pixel Höhe mit geringerer Breite. Vielleicht möchten Sie jedoch alle Bilder auf eine einheitliche Breite zwingen, unabhängig davon, ob es sich um Hoch- oder Querformate handelt. Dies erledigen Sie am besten in ImageReady. Zum Beispiel so:

1. Zeichnen Sie in ImageReady den Befehl Bild: Bildgröße mit der gewünschten Breite auf. Blenden Sie dabei die Aktionsoptionen ein und wählen Sie Bild anpassen anhand: Breite.
2. Den Namen dieser Aktion ziehen Sie als so genanntes Droplet aus der Aktionenpalette auf den Windows-Desktop.
3. Ziehen Sie die Dateien, die Sie umrechnen möchten, auf das Droplet-Symbol  auf dem Windows-Desktop beziehungsweise auf den Mac-Schreibtisch. Die Bilder werden umgerechnet.

Abbildung 4.9:  Die Miniaturen, Einzelbilder und Seitendateien für Ihren Internet-Katalog speichert Photoshop in separaten Verzeichnissen.

Beachten Sie dabei die wichtigen Vorgaben in den Aktionsoptionen; diese erreichen Sie im Menü zur Aktionenpalette von ImageReady. Weitere Details zu Droplets finden Sie auf Seite 131.

Natürlich können Sie noch beliebige Korrekturen an den fertigen Einzelbildern im Verzeichnis »Bilder« anbringen. Sie können einen Schatten darunter legen, einen Rahmen einsetzen, Text einfügen oder andere Anpassungen vornehmen. Wichtig dabei: Dateiname, Dateiformat und Verzeichnis müssen erhalten bleiben.

4.2.9 So speichert Photoshop den Bildkatalog

Sobald Sie auf OK klicken, erzeugt Photoshop die erforderlichen Dateien mit den neuen Verzeichnissen. Dabei entstehen die folgenden Verzeichnisse und Dateien.

Im Zielverzeichnis

Unmittelbar im Zielverzeichnis finden Sie die Dateien wie »Index.htm«, »Index_2.htm« oder »Frameset.htm«. Diese Dateien im WWW-gängigen HTML-Format enthalten die Struktur der Internet-Seite - die Überschriften, das Layout, die Aufteilung der Miniaturen in einer Tabelle. Es beginnt mit »Index.htm«, die weiteren »Index«-Dateien enthalten die anschließenden Seiten. Klicken Sie diese eine HTM-Datei doppelt an oder ziehen Sie die Datei über einen Internet-Browser - dann erscheint der Internet-Bildkatalog. Die Bilddaten selbst befinden sich wohlgemerkt nicht innerhalb der HTM-Dateien.

Außerdem erzeugt Photoshop die kleine Textdatei »UserSelections.txt«. Der Inhalt lautet zum Beispiel »0 0 25 10«; das sind in Kurzform Ihre Einstellungen für die Größe von Miniaturen und Einzelbildern. Sie müssen die Datei nicht auf Ihren Internet-Server hochladen.

Unterverzeichnisse

Diese Unterverzeichnisse produziert die Web-Fotogalerie:

  • Das neue Verzeichnis »Thumbnails« enthält die Miniatur-Bilder für die Internet-Seite mit dem Katalog - in den meisten Fällen sind es JPG-Dateien, sonst GIF-Dateien. Sie können diese Bilder bei Bedarf nachbearbeiten.
  • Das neue Verzeichnis »Pages« beherbergt die HTM-Dateien für die Einzelseiten, die jeweils ein Einzelbild präsentieren. Die HTM-Datei enthält wieder den Text und die Verweise auf die Einzelbilddateien. Das Einzelbild selbst befindet sich nicht innerhalb der HTML-Datei.
  • Das neue Verzeichnis »Images« enthält die nach Ihren Vorgaben neu errechneten Einzelbilder im JPG-Format. Diese Bilder erscheinen im Internet-Betrachter, sobald man im Bildkatalog auf eine Miniatur klickt. Auch diese Bilder lassen sich natürlich noch verändern.

Abbildung 4.10:  Sie können Ihren Internet-Katalog oder auch die Einzelbildseiten mit einem Hintergrundmuster unterlegen.

»Index.htm«

Photoshop nennt den ersten Bildkatalog unvermeidlich »index.htm«. Dies ist jedoch oft die Standardbezeichnung für die Startseite eines ganzen Internet-Bereichs - Web-Browser öffnen »index.htm«, ohne dass dies überhaupt in der Adresszeile erscheinen muss. Zwar könnten Sie die fertige Galerie-Datei »Index.htm« umbenennen; allerdings funktionieren dann nicht mehr die internen Querverweise, die vom Einzelbild zum Gesamtkatalog führen. Dazu müssen Sie erst den Code in allen Einzelbildseiten ändern und als Verweis den neuen Dateinamen angeben.

Einfacher platzieren Sie die komplette Galerie in einem eigenen Unterverzeichnis des Servers, in dem sie nicht mehr mit einer Einstiegsdatei "Index.htm" kollidieren kann.

Möchten Sie nachträglich in mehreren HTML-Dateien Code, Dateinamen oder Text ändern, etwa den Verweis auf »Index.htm«? Das kostenlose Windows- Programm »Suchen und Ersetzen für HTML« erledigt dies für mehrere HTML- Dateien auf einen Schlag - zum Beispiel für die Einzelseiten einer Galerie. Sie finden es unter dieser Internet-Adresse: http://www.lab1.de/prod/suefhtml/ index1.htm

4.2.10 Eigene Stile definieren

Sie können eigene Stile definieren. Zu jedem Stil gehört ein gleichnamiges Unter-Verzeichnis im Photoshop-Verzeichnis »Vorgaben/Web Kontaktabzug«, beispielsweise »Vorgaben/Web Kontaktabzug/Mein Stil«. Dieser Verzeichnisname erscheint als Mein Stil im Stile-Klappmenü.

Dateien im Verzeichnis »Web Kontaktabzug«

  • In den Unterverzeichnissen des Ordners »Web Kontaktabzug« finden Sie für jeden einzelnen Stil wie Horizontaler Frame die folgenden Dateien: »Caption.htm« regelt das Layout der Objektbeschreibung unter der Miniatur.
  • »IndexPage.htm« bestimmt das Aussehen der eigentlichen Katalogseite.
  • »SubPage.htm« legt fest, wie die Seite mit dem Einzelbild aussieht.
  • »Thumbnail.htm« definiert das Miniaturen-Arrangement auf der Katalogseite.
  • »FrameSet.htm« kann noch dazukommen: Die Datei beschreibt das Frame-Arrangement.

Abbildung 4.11:  Links: Die Vorlagen für die »Stile« der Web-Fotogalerie finden Sie unter Windows im Verzeichnis »Vorgaben/Web Kontaktabzug« innerhalb Ihres Photoshop-Ordners.  Rechts: Jedes Unterverzeichnis enthält separate Vorlagen für Überschriften, Miniaturen-Anordnung und Einzelbild-Seiten.

»Tokens« (Platzhalter)

Neben dem üblichen HTML-Code enthalten die Dateien so genannte »Tokens«, die von Prozent-Zeichen eingerahmt werden - Platzhalter, die Photoshop durch Ihre konkreten Angaben für die aktuelle Web-Galerie ersetzt. Ein Beispiel: Die Zeile 

<BODY bgcolor=%BGCOLOR% text=%TEXT% link=%LINK% vlink=%VLINK%>

enthält Platzhalter für die gewählte Hintergrundfarbe, für den Bildtext und für den Link von der Miniatur zur größeren Einzeldatei (siehe Abbildung 4.12).

Abbildung 4.12:  Links: Diese Galerie entstand mit der Vorgabe »Einfach«. Wir haben die »Datei-Informationen-Objektbeschreibung« mit angekreuzt; die Bild texte aus dem Feld »Objektbeschreibung« des Befehls »Datei-Informationen« erscheint darum unter den Miniaturen wie auch unter den Einzelbildern. Photoshop hat überdies automatisch die Datumszeile in der Überschrift ausgefüllt.  Mitte: Hier haben wir einen eigenen »Stil« auf Basis des Stils »Einfach« definiert. Die Datumszeile ist weg; dazu haben wir in der Vorlage »Indexpage.htm« die Zeichen <BR>%DATE% gelöscht. Auch die Objektbeschreibung fehlt in der mittleren Katalogansicht, sie erscheint nur noch auf den Einzelbildseiten; in der Vorlagedatei »Caption.htm« hatten wir die Passage %FILEINFO% gelöscht. Vorlagen im Verzeichnis »Praxis/Sammlungen«; HTML-Ergebnisse im Verzeichnis »Praxis/Web-Fotogalerie«.

Bedingungen

Bei der Arbeit an eigenen Web-Galerie-Vorlagen gilt:

  • Die genannten Dateien sind - bis auf »FrameSet.htm« - zwingend erforderlich und dürfen nicht umbenannt werden.
  • Bei Bedarf lassen Sie »Caption.htm« komplett leer und definieren die Bildunterschrift innerhalb von »Thumbnail.htm«.
  • Sie können einen Platzhalter durch eine konkrete Angabe ersetzen. Die Angaben im Dialogfeld Web-Fotogalerie haben dann keine Wirkung mehr. Beispielsweise tragen Sie eine feste Hintergrundfarbe ein.
  • Sie können zusätzlichen HTML-Code und zusätzliche »Tokens« verwenden. Eine Liste aller Tokens finden Sie in der Photoshop-Hilfe-Datei unter der Überschrift »Verwenden von Tokens in Web-Fotogaleriestilen«. Beachten Sie auch die weiteren Hinweise dort.

Abbildung 4.13:  Links: Diese Einzelbildseite entstand mit dem Stil »Einfach«, die Überschrift nennt Datum und Fotografen. Mitte: Hier besteht die Überschrift nicht mehr aus drei Zeilen, sondern aus einer.  Rechts: Wir haben einen eigenen Stil angelegt und in der Datei »SubPage.htm« die Zeichen <BR>%PHOTOGRAPHER%<BR>%DATE% gelöscht.

Erste Schritte

So könnten Sie die Arbeit an eigenen Stilen beginnen:

1. Legen Sie ein neues Unterverzeichnis innerhalb von »Vorgaben/Web Kontaktabzug« an; der Name dieses Verzeichnisses erscheint im »Stile«-Menü der Web-Fotogalerie.
2. Kopieren Sie die erforderlichen Dateien aus einem bereits vorhandenen mitgelieferten Verzeichnis wie »Horizontaler Frame« in das neue Verzeichnis.
3. Bearbeiten Sie die HTM-Dateien im neuen Verzeichnis mit einem HTML- oder Texteditor, um eigene Galerie-Vorlagen zu entwerfen (siehe Abbildung 4.13).

4.2.11 Änderungen an HTML-Code und Bilddateien

Im Folgenden besprechen wir denkbare Anpassungen am HTML-Code und an den Galerie-Bilddateien, die das Aussehen Ihrer Web-Galerie beeinflussen. Dabei haben Sie zwei Möglichkeiten:

  • Sie ändern eine Stil-Vorlage und korrigieren dort die »Tokens« (siehe oben) oder tragen festen HTML-Code ein.
  • Sie ändern eine fertige Einzel-Galerie.

Änderungen an den Miniaturen

Sie können die Bildminiaturen für die Katalogseiten - zu finden im Verzeichnis »Thumbnails« - nachträglich bearbeiten. Mögliche Korrekturen: Sie ändern die Bildgröße, bringen einen weichen Rand oder einen 3D-Rand an oder Sie legen einen Schatten unter die Miniatur. Wichtig: Dateiname, Verzeichnis und das Dateiformat müssen erhalten bleiben. Selbst animierte Miniaturen und Rollover-Effekte sind denkbar. Wenn Sie eine Miniatur vergrößern, verändert sich eventuell der Spalten- oder Zeilenabstand an dieser Stelle; die Bild-Text-Tabelle wirkt nicht mehr gleichmäßig, zu Überlappungen kommt es dabei nicht.

Gehen Miniaturen weich oder nicht rechteckig in den Seitenhintergrund über, sollten Sie bei der Bildbearbeitung die geplante Seitenfarbe oder das Hintergrundmuster mit in die Miniatur einbauen.

Abbildung 4.14:  So könnten Sie Miniaturen oder Einzelbilder für den Web-Auftritt aufbereiten: In diesem Fall haben wir die »Hintergrund«-Ebene dupliziert und dann die Arbeitsfläche rechts und unten erweitert. Die obere Ebene wurde mit den Effekten »Schlagschatten« und »Kontur« bearbeitet. Der sichtbare Bereich der unteren Ebene sollte die Hintergrundfarbe oder das Muster der geplanten Internet-Seite zeigen. Datei: Bearbeitung

Hintergrundmuster

Photoshop erzeugt für Kataloge und Einzelbilder nur Seiten mit einfarbigem Hintergrund. Mit etwas Handarbeit weben Sie jedoch ein beliebiges Hintergrundmuster ein. Dabei handelt es sich um ein kleines Bild, das sich nahtlos vielfach aneinander setzen lässt; so entsteht der Eindruck eines durchgehenden Bildes. Wie man Hintergrundmuster erzeugt, lesen Sie ausführlich ab Seite 307.

Am einfachsten lässt sich das Hintergrundmuster in Programmen zur Internet-Gestaltung einfügen. Notfalls reicht aber ein Textprogramm. Wenn Sie ein Hintergrundmuster einsetzen, wird der Abschnitt zur Hintergrundfarbe im HTML-Code überflüssig. Es geht um diese Zeile: 

<TABLE border="0" cellpadding="5" cellspacing="2" width="100%" bgcolor="#CCCCFF">

Die Hintergrundfarbe wird im Abschnitt »bgcolor« definiert und Sie ersetzen die Angabe durch einen Verweis auf die Hintergrunddatei, etwa so: background="MUSTERDATEI.jpg". Die gesamte Zeile sieht also wie folgt aus: 

<TABLE border="0" cellpadding="5" cellspacing="2" width="100%" background="MUSTERDATEI.jpg" >

Außerdem kopieren Sie das Hintergrundmotiv (in unserem Beispiel »Musterdatei.jpg«, zu finden im »Praxis«-Verzeichnis) ins selbe Verzeichnis wie die Datei »index.htm«.

Geänderte Bildunterschriften in den Katalogseiten

Bei Bedarf können Sie den Text innerhalb der HTML-Seite ändern; ersetzen Sie den Text im Bereich »Captions with hyperlinks« des HTML-Codes. Dies erledigen Sie zum Beispiel in einem Textprogramm, einfacher natürlich in einem Programm zur Internet-Gestaltung oder in einem modernen Textprogramm. Auch der neue Text enthält einen Hyperlink - per Klick auf den Bildtext wird das Einzelbild angezeigt.

Wenn Sie längeren Text eingeben, wird die Spalte mit der bearbeiteten Bildunterschrift auf der Internet-Seite breiter - alle Miniaturen dieser Spalte nehmen dann mehr Abstand zu den anderen Miniaturen ein, der gleichmäßige Spaltenabstand geht verloren. Um eine neue Zeile zu erzwingen, verwenden Sie das Kürzel »<br>«. Damit steigt auch die Höhe (nicht nur die Breite) dieser Zelle der Tabelle; die gesamte Zeile mit der korrigierten Bildunterschrift hat dann mehr Abstand zu den anderen Zeilen.

Der Verweis auf die eigentliche Bilddatei erscheint hinter dem Code "<IMG src" - dort dürfen Sie nichts ändern. In diesem Bereich finden Sie aber auch den Alternativ-Text - gelb unterlegter Einblend-Text, der bei Mauskontakt über dem Bild auftaucht. Tippen Sie hinter dem Code "alt=" Ihre neuen Worte ein.

Erscheint bei Ihrem gelb unterlegten Einblend-Text nur das erste Wort? Setzen Sie die komplette Einblend-Meldung in Anführungszeichen - nun zeigt der Internet-Browser die gesamte Nachricht.

Überschrift für Titelzeile

Soll eine Überschrift in der Titelzeile des Internet-Browsers erscheinen? Dazu tippen Sie diesen Code oben in Ihre HTML-Datei: 

<head>


<title>Ihre Überschrift</title>

Abbildung 4.15:  Hier wurden die Vorschaubilder aus dem Verzeichnis »Thumbnails« (Miniaturen) nachträglich bearbeitet. Dabei wurden vor allem Ebenen-Stile wie »Abgeflachte Kante & Relief«, »Schlagschatten« und »Kontur« genutzt, rechts oben wurde der Rand abgesoftet. Für zwei Bild er mussten wir die Arbeitsfläche erweitern. Außerdem haben wir eine Bild unterschrift direkt im HTML-Code verändert.

Ändern der Textgrößen in der Seitenüberschrift

Vielleicht möchten Sie die verschiedenen Zeilen der Überschrift, die Sie im Bereich Banner eingetippt haben, in unterschiedlichen Größen darstellen. Sie können den HTML-Code in einem Textprogramm manipulieren. Die kompletten drei Zeilen Überschrift sehen in dem HTML-Code, den Photoshop erzeugt, so aus: 

<TD><FONT size="7" face="Arial" >Eintrag Name<BR>Eintrag Fotograf<BR>Eintrag Datum</FONT>

Mit Font Size="7" liegt die Schriftgröße für alle drei Zeilen fest, <BR> sorgt für den Zeilenumbruch. Sie können nun für einzelne Zeilen der Überschrift die Größe ändern. Setzen Sie beispielsweise die mittlere Zeile »Eintrag Fotograf« auf den Wert »3« und kehren Sie für die letzte Zeile wieder zur Größe 7 zurück. Die entsprechende Zeile sieht so aus: 

<TD><FONT size="7" face="Arial" >Eintrag Name<BR><FONT size="3"> Eintrag Fotograf<BR><FONT 
size="7"><B> Eintrag Datum</FONT>

Fett und kursiv

Durch Arbeit im HTML-Code können Sie Ihre Schrift auch fett oder kursiv formatieren. Dabei stellen Sie Ihre Worte jeweils zwischen diese Zeichen: 

<B> ... </B> für gefettete Schrift;
<I> ... </I> für kursive Schrift.

Im folgenden Beispiel haben wir die erste Zeile kursiviert und die zweite Zeile gefettet: 

<TD><FONT size="7" face="Arial" ><I>Eintrag Name</I><BR><B><FONT size="3"> Eintrag Fotograf</
B><BR><FONT size="7">Eintrag Datum</FONT>

Ähnlich wie für die Seitenüberschrift dargestellt, können Sie auch die Miniaturen-Unterschriften individuell umformatieren. Allerdings müssen Sie die Grund-Größenvorgabe aus dem Dialogfeld Web-Fotogalerie für jede Unterschrift einzeln ändern.

Textfarben korrigieren

Auch die Textfarben können Sie direkt im HTML-Code verändern. Dabei gelten die Angaben aus dem <BODY>-Tag genannten Angaben für das gesamte Dokument. Mit dem Attribut »Color« im »Font«-Tag legen Sie die Farbe für beliebige Textelemente fest. Weitere Codes:

  • »link«: ein noch nicht besuchter Link (ein Link ist eine Verknüpfung zu einer anderen WWW-Seite oder allgemeiner zu einem anderen Dokument - also etwa der Text unter einer Katalog-Miniatur, der zur Seite mit dem Einzelbild verweist).
  • »vlink«: ein bereits besuchter Link (visited link).
  • »alink«: die Verknüpfung wird gerade aktiviert (activated link).

Fehlt Ihnen der Code für die gewünschte Textfarbe? Öffnen Sie zum Beispiel den Farbwähler, aktivieren Sie die Option Nur Web-Farben, stellen Sie den gewünschten Farbton her und kopieren Sie den Code aus dem Datenfeld unten rechts. In den Farbfeldern können Sie über das Menü eine Web-Palette öffnen; nach Rechtsklick auf einen Farbton (am Mac Ctrl-Klick) wählen Sie Farbton umbenennen und kopieren den Tonwert.

Geänderte Einblenderklärungen

Hält man den Mauszeiger über ein Bild, erscheint der Dateiname (ohne Dateiendung) als gelb unterlegter Einblendtext. Dieser Text erscheint auch statt des Bildes, wenn die Bilddatei selbst nicht geladen werden kann. Sie können den Text für die Einblenderklärung frei ändern. Laden Sie dazu die Seite »Index.htm« in ein Textprogramm. Im Bereich »Thumbnails with hyperlinks« werden die einzelnen Dateien aufgelistet. Der Einblendtext steht jeweils in Anführungszeichen hinter dem Hinweis »alt=«. Dort tippen Sie den neuen Text ein und speichern wieder.

Abbildung 4.16:  Hält man den Mauszeiger im Internet-Programm über eine Miniatur, erscheint eine Einblenderklärung mit dem Dateinamen (linke Miniatur). Sie können den Text jedoch nach Belieben ändern, wie bei der mittleren Miniatur zu sehen.

Tabelle formatieren

Mit der Vorgabe Tabelle legt Photoshop eine HTML-Tabelle an, die Sie bearbeiten können. Der HTML-Code zeigt im Bereich <TR> (table row) Angaben zur gesamten Tabelle, der Bereich <TD> (table data) definiert eine einzelne Tabellenzelle. Detailangaben haben Vorrang vor allgemeineren Festlegungen. Unter anderem haben Sie diese Möglichkeiten:

  • width=100 ohne Prozentangabe erzwingt eine Spaltenbreite von 100 Pixeln, mit Prozentwert definieren Sie eine Größe relativ zu den Maßen des Programmfensters.
  • border sorgt für einen Tabellenrand, ohne diesen Hinweis erscheint keine Tabelle; border=3 erzeugt einen 3 Pixel starken Rand.
  • cellspacing kontrolliert die Breite der Ränder um die Zellen beziehungsweise den Abstand zwischen den Zellen.
  • cellpadding definiert den Abstand der Zelleninhalte zum Rand der Zelle.

4.3 Animationen (Trickfilme)

Animationen sind kleine Trickfilme fürs Internet - Laufschriften, wackelnde Logos, blinkende Lampen und dergleichen Nervereien. Animationen werden als GIF-Datei gespeichert. Diese GIF-Datei enthält mehrere Bilder - eben die Einzelbilder des Trickfilms - mit Informationen über die Standzeit und mögliche Wiederholungen. ImageReady bietet starke und einfache Funktionen zur Produktion von Animationen, Photoshop spielt hier nicht mit. Flash-Animationen - also Trickfilme auf Vektorbasis mit Klangeinbindung - lassen sich mit dem Photoshop-Paket gar nicht produzieren; hier sind Sie auf Programme wie Macromedia Flash, Adobe LiveMotion oder CorelDraw ab Version 10 angewiesen.

Wann immer Sie an Animationen arbeiten - aktivieren Sie in ImageReady stets die »Original«-Ansicht und nicht eine »optimierte« Variante; dort haben Sie kaum Korrekturmöglichkeiten. Da der Bildaufbau für die »optimierten« Varianten in der »2fach«- oder »4fach«-Ansicht ohnehin zusätzlich Zeit kostet, sollte man überwiegend nur die »Original«-Ansicht allein zeigen. Erst wenn die Bildfolge perfekt ist und Sie ans Speichern im GIF-Format denken, lohnt sich die Einblendung einer »optimierten« Version (siehe Abbildung 4.17).

Abbildung 4.17:  Vier Einzelbilder, vier Montage-Ebenen: In dieser Animation basiert jedes Einzelbild auf einer eigenen Ebene. Für jedes Einzelbild wird eine andere Ebene mit dem Augensymbol sichtbar geschaltet, alle anderen Ebenen werden verborgen. Bei Anzeige des dritten Einzelbildes ist nur die Ebene »Site« sichtbar, alle anderen Ebenen sind mit dem Augensymbol ausgeblendet. Datei: Sunny_1

4.3.1 Übersicht

ImageReady bietet folgende Möglichkeiten für Animationen:

  • Sie verwandeln die Einzelebenen einer Photoshop-Montage in Einzelbilder (»Frames«) einer Animation.
  • Bestimmte Veränderungen einer Ebene lassen sich in Einzelbilder verwandeln, ohne dass deshalb neue Ebenen erforderlich sind: Position, Deckkraft, Text-»Verkrümmung« und Ebeneneffekte.
  • Sie können jederzeit jedes Einzelbild korrigieren (durch Korrektur der jeweiligen Ebene).
  • ImageReady erzeugt Übergänge zwischen zwei vorhandenen Einzelbildern und verändert dabei schrittweise Deckkraft, Position oder Ebeneneffekt eines montierten Objekts; dabei entstehen zunächst keine neuen Ebenen.
  • Wie auch bei nicht-animierten GIF-Bildern, können Sie die Animation mit der »Transparenz«-Funktion vor durchscheinenden Hintergrund stellen.
  • Sie können Animationen mit allen Eigenschaften nicht nur im GIF-Format für die Internet-Seite speichern, sondern auch im Photoshop-Dateiformat. So bewahren Sie volle Farbtiefe und separat korrigierbare Montage-Ebenen. (GIF unterstützt nur 256-Farben-Bilder und verschmilzt alle Montage-Ebenen zu einem flachen Hintergrund; Details zum GIF-Format finden Sie ab Seite 376). Überdies können Sie auch QuickTime-Dateien mit der Endung ».mov« schreiben.
  • Sie können Animationen in Rollover-Sequenzen einsetzen.
  • Sie können den Trickfilm jederzeit direkt in ImageReady oder in einem Internet-Browser ablaufen lassen.

Einige Animationen im PSD-Format finden Sie innerhalb Ihres Photoshop- Verzeichnisses im Ordner »Beispiele/ImageReady-Animationen«. Sie können diese Animationen in ImageReady ablaufen lassen und von dort aus auch in einem Internet-Browser darstellen.

Im Folgenden klären wir diesen Unterschied:

  • Wie Sie Animationen aus mehreren Montage-Ebenen erstellen; beziehungsweise
  • wie Sie Animationen aus einer einzigen Einzelebene erstellen, aber die Ebeneneigenschaften variieren.

Abbildung 4.18:  Vier Einzelbilder, doch nur eine Montage-Ebene: Die Ebene wird lediglich bewegt, verändert sich aber sonst nicht. Solche Veränderungen der Ebeneneigenschaft erfordern keine neue Ebene. Sie lassen sich mit dem Befehl »Dazwischen einfügen« aus dem Menü zur Animation-Palette leicht erstellen (Seite 282). Die Miniatur in der Ebenenpalette zeigt die Position des Objekts im momentan aktivierten Einzelbild. Datei: Sunny_2

4.3.2 Animationen aus mehreren Einzelebenen ableiten

Sie können mehrere Ebenen einer Montage in Einzelbilder der Animation verwandeln. Die Reihenfolge der Ebenen spielt keine große Rolle dabei. Auch wenn die Animation schon steht, lassen sich immer noch die Einzelbilder korrigieren - durch Bearbeitung der Ebenen. Überdies lassen sich Ebenen - und damit Einzelbilder - beliebig hinzufügen, löschen oder verbergen.

Arbeitsschritte in der Übersicht

So erstellen Sie generell eine Animation aus mehreren Ebenen:

1. Erzeugen Sie in Photoshop oder ImageReady eine Montage aus mindestens zwei unterschiedlichen Ebenen. Jede Ebene wird später als ein Einzelbild verwendet.
2. Sofern Sie in Photoshop gearbeitet haben, springen Sie mit der Schaltfläche  zu ImageReady.
3. In ImageReady rufen Sie mit dem Befehl Fenster: Animation die Animation-Palette auf. Zunächst sehen Sie in der Animation-Palette nur ein einziges Einzelbild.
4. Öffnen Sie das Menü der Animation-Palette durch einen Klick auf das schwarz gefüllte Dreieck  rechts oben in der Palette.
5. Klicken Sie auf den Befehl Frames aus Ebenen erstellen. Nun erscheinen in der Animation-Palette so viele Einzelbilder, wie Ihre Montage Ebenen hat.
6. Mit der Schaltfläche Spielt Animation ab  unten in der Ebenenpalette lassen Sie die Animation ablaufen.

Abbildung 4.19:  Das Montage-Objekt wurde für die Animation mehrfach dupliziert. Einige Duplikate haben wir mit dem Filter »Wölben« individuell verzerrt. Die Animation-Palette zeigt jedoch nur ein Einzelbild. Datei: Test_4

Abbildung 4.20:  Wir verwenden den Befehl »Frames aus Ebenen erstellen« für die zuvor gezeigte Datei »Test_4«. Jede Montage-Ebene erscheint nun in einem eigenen Einzelbild.

Abbildung 4.21:  So wirkt der Befehl »Frames aus Ebenen erstellen« über vier Einzelbilder hinweg. Bei jedem Einzelbild der Animation ist eine andere Montage-Ebene sichtbar, die anderen Montage-Ebenen werden mit dem Augensymbol verborgen. Sie können die Ebenensichtbarkeit pro Einzelbild mit dem Augensymbol verändern. Dieses Ergebnis können Sie als GIF-Datei für die Internet-Seite speichern. Sie können es jedoch auch im Photoshop-Format speichern, um separate Ebenen und volle Farbtiefe zu erhalten. In der Photoshop-Datei werden auch die Informationen zur Animation gesichert. Ergebnis: Test_5

Mehrere Dateien als Einzelbilder einer Animation

Sie müssen die Einzelbilder einer Animation nicht in Ebenen anlegen - Sie können auch die Dateien eines Ordners in Einzelbilder verwandeln. Sie können eine Reihe von Bilddateien als Einzelbilder einer Animation öffnen. Dazu kopieren Sie alle Dokumente in einen gemeinsamen Ordner. Dann wählen Sie Datei: Importieren: Ordner als Frames.

In der neuen Animation werden die Bilder alphanumerisch angeordnet. Das heißt, das von Ihnen gewünschte erste Bild sollte einen Namen tragen, der bei einer Sortierung nach Dateinamen ganz oben erscheint. Zusätzlich entsteht eine neue Photoshop-Datei mit einer Ebene pro Einzelbild; in der Ebenenpalette erscheint dieses Bild ganz unten. Natürlich können Sie die Reihenfolge der Einzelbilder durch Ziehen mit der Maus in der Animation-Palette noch verändern.

Die Einzelbilder sollten - müssen aber nicht - identische Bildpunktabmessungen haben. Verwenden Sie unterschiedliche Pixelmaße, erscheint das größte Motiv passgenau; die kleineren Einzelbilder zeigen transparente Bereiche.

Abbildung 4.22:  Diese Sequenz entstand mit dem Befehl »Datei: Importieren: Ordner als Frames«. Wir haben die Dateien des Ordners »Praxis/Sammlungen/03_Vorlagen« von der CD zu diesem Buch als Einzelbilder in eine Animation geladen. ImageReady legt eine neue Ebenendatei an; pro Einzelbild ist jeweils nur eine Ebene sichtbar. Weil die verwendeten Bild er nicht perfekt gleich groß sind, zeigen die kleineren Vorlagen transparente Bereiche am unteren Bild rand. Datei: Revue_1

»Ebene in allen Frames anpassen«

Oft passiert es, dass durch irrtümliche Eingriffe eine Ebene in verschiedenen Einzelbildern ungewollt unterschiedliche Merkmale zeigt: Zum Beispiel unterscheiden sich Deckkraft, Position oder Effekte oder die Ebene ist zeitweise verborgen, zeitweise eingeblendet. Sie können eine Ebene in allen Einzelbildern auf einheitlichen Stand bringen. So gehen Sie vor:

1. Aktivieren Sie in der Animation-Palette ein Einzelbild, welches die betreffende Montage-Ebene im gewünschten Zustand zeigt. Oder stellen Sie diesen Zustand in einem beliebigen Einzelbild her.
2. Öffnen Sie das Menü zur Animation-Palette mit der Schaltfläche  und wählen Sie in der Animation-Palette den Befehl Ebene in allen Frames anpassen.

Nun erscheint das Objekt dieser Ebene in allen Frames auf derselben Position; auch Ebeneneffekte, Deckkraft und Ebeneneinblendung werden vereinheitlicht. Achten Sie jedoch darauf, auf welcher Position die angepasste Ebene in der Ebenenpalette rangiert. Nur wenn die Ebene ganz oben steht - über allen anderen Ebenen - ist sichergestellt, dass die angepasste Ebene tatsächlich in sämtlichen Einzelbildern voll zum Vorschein kommt.

Der Befehl Ebene in allen Frames anpassen eignet sich zum Beispiel, um eine Ebene über alle Einzelbilder einer Animation hinweg sichtbar oder unsichtbar zu machen. Anschließend können Sie immer noch ein Einzelbild in der Animation- Palette anklicken und für dieses eine Bild die Ebenensichtbarkeit mit dem Augensymbol in der Ebenenpalette ändern.

Abbildung 4.23:  Wir ziehen die Ebene aus der Datei »Filmstueck.psd« mit dem Verschieben-Werkzeug in die Animation »Revue« und positionieren sie passend. Datei: Revue_2

Abbildung 4.24:  Das Filmstück zeigt sich nur in einem einzigen ersten Einzelbild. Denn es rangiert auf der Ebenenpalette weit unten; ImageReady platziert es über der Ebene, die zuletzt aktiviert war, und das war die unterste Ebene. Deshalb erscheint das eingefügte Filmstück in den anderen Einzelbildern unter statt über den Fotos - auch wenn es mit dem Augensymbol permanent auf sichtbar geschaltet ist. (Prinzipiell ist eine neu eingesetzte Ebene zunächst in allen Einzelbildern sichtbar.)

Abbildung 4.25:  Wir ziehen die Filmstück-Ebene in der Palette ganz nach oben - nun erscheint sie in sämtlichen Einzelbildern. Datei: Revue 3

Abbildung 4.26:  Links: Wir beschneiden die Animation mit dem Freistellwerkzeug. In der Optionenleiste stellen wir »Ausblenden«, nicht »Löschen«, ein. Dadurch werden die Ränder der anderen Bild ebenen zwar außerhalb des Bild rands verborgen, aber nicht dauerhaft gelöscht (Details zu diesen Optionen ab Seite 193).  Rechts: Wir klicken mit dem Verschieben-Werkzeug in die Bild mitte, aktivieren mit dem Kontextmenü die gewünschte Ebene und ziehen den gewünschten Bild teil in den sichtbaren Bereich. (Natürlich können Sie die Ebene auch anders bearbeiten, zum Beispiel verkleinern.) Achtung: Eventuell müssen Sie anschließend die Ebenensichtbarkeit pro Einzelbild neu regeln. Datei: Revue_4

Ebenenbearbeitung und Einzelbilder

Wenn Sie eine Ebene bearbeiten, verändert sich entweder nur das Einzelbild - oder die Ebene erscheint in allen Einzelbildern verändert. Dabei gilt:

  • Korrigieren Sie Deckkraft, Ebeneneffekte, Ebenensichtbarkeit, die Objektposition oder die Werte für eine vorhandene Text-»Verkrümmung«, verändert sich nur ein einziges Einzelbild.
  • Wenn Sie die Ebene dagegen skalieren, drehen, verzerren, mit Filter, Kontrastkorrektur oder Pinselwerkzeug bearbeiten, so erscheint die Ebene in sämtlichen Einzelbildern verändert.

Ebenenmasken und Einzelbilder

Sie können auch Ebenenmasken in der Animation verwenden. Ebenenmasken machen beliebige Teile einer Ebene unsichtbar, ohne sie zu löschen (Details ab Seite 803). Für Ebenenmasken gilt:

  • Wenn Sie die Ebenenmaske bewegen, verändert sich nur das jeweilige Einzelbild. (Um die Ebenenmaske unabhängig vom Einzelbild bewegen zu können, klicken Sie in der Ebenenpalette das Verknüpfungssymbol  zwischen Maske und Ebene weg.)
  • Retuschen, Filter oder Kontrastkorrekturen wirken sich auf alle Einzelbilder mit Ebenenmaske aus.

Weitere Einzelbilder hinzufügen

Möchten Sie der Animation weitere Einzelbilder von Hand hinzufügen? So geht's:

1. Aktivieren Sie in der Animation-Palette das Einzelbild, hinter dem Sie das neue Einzelbild einfügen möchten.
2. Klicken Sie in der Animation-Palette auf das Symbol Dupliziert aktuellen Frame  . Dadurch entsteht ein Duplikat des zuvor markierten Einzelbildes.
3. Wenn Sie die Ebenen des zuvor markierten Einzelbildes nicht im neuen Einzelbild sehen möchten, verbergen Sie diese mit dem Symbol Blendet Ebene ein/aus  in der Ebenenpalette.

Beim Hinzufügen eines neuen Einzelbildes können Sie automatisch eine neue, leere Ebene anlegen lassen. Dazu wählen Sie im Palettenmenü den Befehl Neuen Frames eine Ebene hinzufügen. Neben der Option muss also ein Häkchen zu sehen sein, damit sie wirksam ist.

Weitere Ebenen hinzufügen

Sie können jederzeit neue Ebenen in die Animation einsetzen - zum Beispiel per Kopieren und Einfügen oder durch schlichtes Herüberziehen mit dem Verschieben-Werkzeug  aus einer anderen Datei. Fügen Sie weitere Ebenen hinzu, sind in der Grundeinstellung von ImageReady diese neuen Ebenen zunächst in allen Einzelbildern sichtbar. So blenden Sie die neue Ebene in einigen Einzelbildern wieder aus:

1. Aktivieren Sie das gewünschte Einzelbild in der Animation-Palette.
2. Klicken Sie in der Ebenenpalette auf das Symbol Blendet Ebene ein/aus  , um die Ebene in diesem Einzelbild zu verbergen. (Aktivieren Sie bei Bedarf mehrere Einzelbilder bei gedrückter Strg-Taste, um sie anschließend gemeinsam zu verbergen.)

Soll ImageReady die neue Ebene jedoch nur im aktuellen Einzelbild zeigen, wählen Sie im Menü der Animation-Palette die Vorgabe Neue Ebenen sichtbar in allen Frames ab.

Einzelbilder in Ebenen verwandeln

ImageReady verwandelt auf Wunsch jedes Einzelbild in eine separate Montage-Ebene. Verwenden Sie den Befehl Frames auf Ebene reduzieren aus dem Menü der Animation-Palette. Die verschiedenen Ebenenobjekte eines Einzelbildes werden dabei in der neuen Ebene verschmolzen. Die separaten Originalebenen bleiben erhalten, ImageReady setzt die neuen Ebenen pro Einzelbild obendrauf. Spielen Sie die Animation jedoch ab, wird sie nur noch aus den neu erstellten Ebenen aufgebaut. Sofern Sie nichts mehr umarrangieren wollen, können Sie also die ursprünglichen Ebenen löschen; dazu ziehen Sie diese Ebenen auf den Mülleimer .

Der Befehl Frames auf Ebene reduzieren hilft in verschiedenen Situationen:

  • Sie wollen ein komplettes Einzelbild mit Pinsel, Filter oder Kontrastkorrektur verändern - dies ist mühselig oder unmöglich, wenn sich der Inhalt des Einzelbildes über mehrere Montage-Ebenen erstreckt.
  • Sie wollen die Animation in einem anderen Animationsprogramm weiterbearbeiten, das Photoshop-Ebenen umsetzen kann (siehe Abbildung 4.27).

Abbildung 4.27:  Hier haben wir den Befehl »Frames auf Ebene reduzieren« auf die Animation »Revue_4« angewendet. Für jedes Einzelbild erzeugt ImageReady eine neue Ebene, welche den gesamten Inhalt des Einzelbildes enthält - auch wenn er ursprünglich aus mehreren Ebenen stammt. Zur Darstellung der Animation verwendet ImageReady nur noch die neu erstellten Ebenen; Sie können die ursprünglichen Ebenen bei Bedarf löschen.

4.3.3 Animation aus einer einzigen Ebene ableiten

Wir haben oben besprochen, wie Sie einzelne Ebenen in Einzelbilder einer Animation umsetzen. Doch nicht immer müssen Sie überhaupt mehrere Ebenen anlegen. Verändern Sie bestimmte Eigenschaften einer Ebene über mehrere Einzelbilder hinweg - doch es bleibt bei einer einzigen Ebene (siehe Abbildung 4.28).

Abbildung 4.28:  Die Ebenenpalette zeigt, dass dieses Bild aus einer einzigen Ebene besteht. Darum erscheint in der Animation-Palette zunächst nur ein einziges Einzelbild. Datei: Reihe_1

Veränderbare Eigenschaften bei Animation aus Einzelebene

Wollen Sie Frames innerhalb einer einzigen Ebene verändern, können sich diese in folgenden Aspekten unterscheiden:

  • Position des Objekts
  • Deckkraft
  • von ImageReady unterstützte Ebeneneffekte
  • verschiedene Werte für Text-»Verkrümmung«

Verändern Sie also diese Eigenschaften, so korrigieren Sie nur ein einziges Einzelbild - es handelt sich um eine frame-spezifische Änderung. Alle anderen Einzelbilder, die auf derselben Ebene beruhen, mutieren nicht mit. Die gesamte Veränderung speichert ImageReady innerhalb einer Datei im Photoshop-Format mit, sie lässt sich also am nächsten Arbeitstag wieder aufnehmen.

Abbildung 4.29:  Mit der Schaltfläche »Dupliziert aktuellen Frame« entstehen hier zwei weitere Einzelbilder. Sie basieren jedoch, wie die Ebenenpalette zeigt, weiterhin auf einer einzigen Ebene. Man kann die Einzelbilder im »Original«-Fenster mit dem Verschieben-Werkzeug an unterschiedliche Positionen ziehen - es bleibt bei einer einzigen Montage-Ebene, da wir nur die Objektposition verändern; es handelt sich um eine frame-spezifische Änderung.  Datei: Reihe_2

Frame-spezifische Änderungen und allgemeine Änderungen

Das folgende Beispiel verdeutlicht die Unterschiede zwischen frame-spezifischen Änderungen und allgemeinen Änderungen:

1. Sie duplizieren ein Objekt mehrfach mit der Schaltfläche Dupliziert aktuellen Frame  in der Animation-Palette, so dass Sie jetzt drei identische Einzelbilder sehen.
2. Durch einen Mausklick aktivieren Sie Einzelbild Nummer 2.
3. Sie verschieben das 3D-Objekt mit dem Verschieben-Werkzeug  . Dadurch verändern Sie nur dieses Einzelbild, in den anderen Einzelbildern rührt sich nichts. (Möchten Sie die anderen Einzelbilder anpassen, aktivieren Sie Bild 2 und verwenden den Befehl Ebene in allen Frames anpassen.)
4. Sie verändern den 3D-Effekt - auch dies wirkt sich nur in Einzelbild 2 aus.
5. Nun drücken Sie Strg+T und drehen das Objekt - dieser Eingriff verändert alle Einzelbilder.
6. Sie verwenden Filter, Kontrastkorrekturen und Pinsel auf Einzelbild 2 - die anderen Einzelbilder wandeln sich mit. (Möchten Sie nur ein Einzelbild verändern, duplizieren Sie die Ebene und blenden die andere Ebene an dieser Stelle aus.)

Soll sich eine Änderung nur auf ein einziges Einzelbild auswirken, legen Sie eine neue Ebene an - und blenden bei diesem Einzelbild alle bisherigen Ebenen mit dem Augensymbol aus.

Abbildung 4.30:  Wird die Ebene gedreht, dreht sich nicht nur die Darstellung im aktivierten Einzelbild mit. Das Objekt erscheint auch in allen anderen Einzelbildern gedreht, weil alle Frames nur auf einer einzigen Ebene beruhen. Eine Drehung ist keine frame-spezifische, sondern eine allgemeine Änderung.

Abbildung 4.31:  Hier wurden die Einzelbilder in Einzelebenen verwandelt; dazu dient der Befehl »Frames auf Ebenen reduzieren« aus der Animation-Palette. Nun kann man jedes Einzelbild beliebig verändern - zum Beispiel unabhängig von den anderen Einzelbildern drehen oder mit dem Pinsel retuschieren. Pro Einzelbild ist nur die jeweilige Ebene mit dem Augensymbol eingeblendet, alle anderen Ebenen werden ausgeblendet. Datei: Reihe_4

Wollen Sie mehrere Ebenen gemeinsam bewegen, müssen Sie diese verbinden. Dazu aktivieren Sie eine Ebene in der Ebenenpalette, dann klicken Sie in die Verbinden-Leiste unmittelbar neben den gewünschten anderen Miniaturen, so dass dort das Verbinden-Symbol  zu sehen ist.

Bildfolgen mit frame-spezifischen Änderungen erzeugen

Wollen Sie frame-spezifische Änderungen über mehrere Einzelbilder hinweg erzeugen, gibt es generell zwei Wege:

  • Machen Sie's von Hand: Duplizieren Sie ein vorhandenes Einzelbild mehrfach mit der Schaltfläche Dupliziert aktuellen Frame  und korrigieren Sie bei jedem Einzelbild zum Beispiel Deckkraft, Position, Ebeneneffekt mit den entsprechenden Funktionen.
  • Erzeugen Sie automatisch einen gleichmäßigen Übergang: Erstellen Sie zwei unterschiedliche Schlüsselbilder und lassen Sie ImageReady einen gleichmäßigen Übergang zwischen diesen Einzelbildern einfügen; dies erledigt der Befehl Dazwischen einfügen aus dem Menü zur Animation-Palette (siehe nächster Abschnitt).

4.3.4 Automatische Übergänge mit »Dazwischen einfügen«

Sie erreichen den Befehl Dazwischen einfügen im Menü zur Animation-Palette oder mit der Schaltfläche Dazwischen einfügen  unten in der Palette. Die Funktion erzeugt automatische Übergänge zwischen zwei Einzelbildern, die sich in einem oder mehreren Merkmalen unterscheiden. Dabei entstehen neue Einzelbilder, die sie später bearbeiten können wie andere Einzelbilder auch.

Voraussetzungen für »Dazwischen einfügen«

Bevor Sie mit dem Befehl Dazwischen einfügen neue Übergänge erzeugen, benötigen Sie zwei Einzelbilder, die folgende Voraussetzungen bieten:

  • Die Einzelbilder müssen auf einer einzigen Ebene basieren.
  • Die Einzelbilder müssen sich in einer oder mehreren Eigenschaften unterscheiden, die der Befehl Dazwischen einfügen abwandeln kann, zum Beispiel Deckkraft, Ebeneneffekt oder Position.

Eventuell soll ein Ebeneneffekt oder eine Verzerrung per Text-»Verkrümmung« zu Anfang gar nicht sichtbar sein, sondern erst allmählich heranwachsen. Dennoch: Der Effekt muss auch im Start- Einzelbild schon angelegt sein. Bearbeiten Sie auch dieses Einzelbild mit dem Effekt; stellen Sie dort alle Werte auf 0, so dass keine Wirkung erkennbar ist. Im späteren Bild setzen Sie die Werte entsprechend hoch. Nur so erzeugt der Befehl Dazwischen einfügen einen allmählichen Übergang - und keinen abrupten Sprung. Dies gilt sinngemäß natürlich ebenso, wenn der Effekt statt am Anfang am Ende des Übergangs nicht mehr erkennbar sein soll.

Abbildung 4.32:  Das Dialogfeld »Dazwischen einfügen« rufen Sie im Menü zur Animation-Palette auf. Hier legen Sie fest, wie sich die neu erzeugten Einzelbilder vom Ausgangsbild unterscheiden und wie viele neue Bild er entstehen sollen.

Einzelbilder für den automatischen Übergang

So könnten Sie die Arbeit beginnen:

1. Erzeugen Sie eine Einzelebene, eventuell mit einem Ebeneneffekt.
2. Öffnen Sie die Animation-Palette und duplizieren Sie das vorhandene Einzelbild mit der Schaltfläche Dupliziert aktuellen Frame  .
3. Verändern Sie das erste oder das zweite Einzelbild in einer oder mehreren Eigenschaften: Deckkraft, Ebeneneffekte, Position.
4. Markieren Sie eins der zwei Einzelbilder durch einen Mausklick in der Animation-Palette.
5. Wenn Sie nur eine Einzelebene verändern wollen, markieren Sie diese durch einen Klick in der Ebenenpalette.

Diese Voraussetzungen gelten allgemein, sofern Sie mehr als ein Einzelbild aktivieren:

  • Wenn Sie zwei benachbarte Einzelbilder aktivieren, fügt ImageReady die neu errechneten Einzelbilder dazwischen ein.
  • Sind mehr als zwei Einzelbilder aktiviert, werden die Frames zwischen Start- und End-Einzelbild durch den Befehl verändert.
  • Aktivieren Sie das erste und das letzte Einzelbild, so behandelt ImageReady diese wie benachbarte Bilder; die neu errechneten Übergangsbilder werden ans Ende angehängt. Dies macht Sinn, wenn sich die Animation mehrfach wiederholen soll. Ansonsten können Sie keine nicht-benachbarten Einzelbilder für die Funktion Dazwischen einfügen markieren.

Abbildung 4.33:  Für diese Animation wurde zunächst ein Schriftzug mit dem Textwerkzeug in der linken oberen Bild ecke angelegt. Wir haben Text-»Verkrümmung« angewendet (»Ebene: Text: Text verkrümmen«), aber die Verzerrung zunächst auf 0 gesetzt. Der Schriftzug wurde außerdem unproportional skaliert. Mit der Schaltfläche »Dupliziert aktuellen Frame« wurde der Schriftzug in ein zweites Einzelbild übertragen. Dort haben wir den Schriftzug bewegt und die Verzerrung für Text-»Verkrümmung« heraufgesetzt; wohlgemerkt: es handelt sich immer noch um dieselbe Ebene. Datei: Sunny_3

Funktionen im Dialogfeld »Dazwischen einfügen«

Im Dialogfeld Dazwischen einfügen geben Sie zunächst an, ob Sie Alle Ebenen oder nur die Ausgewählte Ebene vervielfachen wollen. Je nachdem, welche und wie viele Einzelbilder Sie zuvor aktiviert haben, bietet ImageReady im Klappmenü Dazwischen enfügen zum Beispiel Voriger Frame, Letzter Frame oder Auswahl an. Schließlich nennen Sie im Feld Hinzuzufügende Frames die Zahl der Einzelbilder, die neu entstehen sollen. Machen Sie diese Angaben im Bereich Parameter:

  • Wählen Sie Position, sofern sich die Ebene bewegen soll.
  • Mit Deckkraft blenden Sie eine Ebene stufenweise ein oder aus.
  • Die Vorgabe Effekte erzeugt eine schrittweise Veränderung der vorhandenen Ebeneneffekte, etwa 3D-Effekt, Schatten oder Verlauf. Mit der Effekte-Vorgabe lässt sich auch Text-»Verkrümmung« animieren (Details und ein weiteres Beispiel zu animierter Text-»Verkrümmung« finden Sie ab Seite 858).

Dabei gilt:

  • Die gewählte Eigenschaft muss sich bei den beiden verwendeten Einzelbildern unterscheiden - zum Beispiel sollten sich die Ebenenobjekte an unterschiedlichen Positionen befinden, sofern Sie die Vorgabe Position nutzen.
  • Wünschen Sie einen Effekt-Übergang, müssen beide Einzelbilder den Effekt bereits besitzen - wenn auch eventuell in einem Bild mit so niedrigen Werten, dass der Effekt nicht mehr zu erkennen ist.
  • Sie können mehr als eine Eigenschaft gleichzeitig verändern. Beispielsweise können Sie ein Objekt gleichzeitig bewegen und ausblenden.

Soll sich ein Objekt erst aus dem Nichts heraus ins Bild schieben oder aus dem Bild herauswandern? Sie können dazu Ebenen jederzeit halb oder komplett aus dem sichtbaren Bereich herausbewegen. Dies erledigen Sie zum Beispiel mit dem Verschieben-Werkzeug  .Oder entfernen Sie Rand mit dem Freistellwerkzeug  und der Option Ausblenden; dabei bleiben auch Objekte im abgetrennten Randbereich voll erhalten. Sie können diese Objekte bei Bedarf mit der Funktion Dazwischen einfügen ins Bild bewegen.

Abbildung 4.34:  Hier wurde die Funktion »Dazwischen einfügen« verwendet. Um gleichzeitig eine Verschiebung und die Verformung zu erreichen, haben wir im Dialogfeld »Dazwischen einfügen« die Vorgaben »Position« und »Effekt« aktiviert; für »Hinzuzufügende Frames« haben wir den Wert »5« eingegeben, so dass die Animation nun aus sieben Einzelbildern besteht. Datei: Sunny_4

Möglichkeiten mit dem Befehl »Dazwischen einfügen«

Der Befehl Dazwischen einfügen bietet mächtige Gestaltungsmöglichkeiten für lebendige Animationen:

  • Per Deckkraft-Variation blenden Sie ein Objekt ein oder aus.
  • Verwenden Sie die Füllmethode Sprenkeln und schrauben Sie die Deckkraft zurück - das Objekt wird pulverisiert.
  • Der Effekt Abgeflachte Kante und Relief lässt das Objekt plastisch heranwachsen. Fügen Sie eventuell einen Schlagschatten hinzu, der sich ebenfalls verändert. (Details zu Ebeneneffekten finden Sie ab Seite 778.)
  • Die Effekte Farbüberlagerung oder Verlaufsüberlagerung sorgen für fließende Farbübergänge (sofern Sie unterschiedliche Angaben für diese Effekte in den beiden Ausgangsbildern verwenden).
  • Der Effekt Glanz produziert ein flackerndes Schattenspiel; er eignet sich auch zur Kombination mit Farbüberlagerung oder Abgeflachte Kante und Relief.
  • Der Kontur-Effekt lässt einen Rahmen um ein Objekt herum wachsen.

Verfahren kombinieren

Natürlich können Sie die verschiedenen Verfahren zur Produktion von Animationen kombinieren:

1. Erstellen Sie erst mit dem Befehl Dazwischen Einfügen eine Bildreihe auf Basis einer Einzelebene.
2. Duplizieren Sie die Ebene in der Ebenenpalette.
3. Verändern Sie das Duplikat nun beliebig, etwa mit Filtern, Kontrastkorrekturen oder Pinseln.
4. Kontrollieren Sie die Sichtbarkeit der Ebenen pro Einzelbild, indem Sie den Film Schritt für Schritt mit der Schaltfläche Wählt den nächsten Frame aus  durchgehen.
5. Blenden Sie bei Bedarf für das jeweilige Einzelbild die gewünschten Ebenen mit dem Augensymbol  in der Ebenenpalette ein oder aus.

4.3.5 Einzelbilder auswählen, verschieben und löschen

Mit der Animation-Palette lässt sich der Trickfilm bequem umarrangieren. Wir besprechen hier das Auswählen, Löschen und Verschieben von Einzelbildern. Viele Befehle finden Sie einerseits als Schaltfläche, andererseits auch im Menü der Animation-Palette; dieses Menü erhalten Sie durch Klick auf das Dreieck  rechts oben in der Palette. Beachten Sie, dass Sie wie üblich mit den Paletten-Optionen aus dem Palettenmenü die Größe der Miniaturen in der Palette ändern können.

Einzelbilder auswählen

Durch Klicken markieren Sie ein Einzelbild, das dann auch im Bildfenster erscheint. Mit den Schaltflächen Wählt den nächsten Frame aus  oder Wählt den vorigen Frame aus  springen Sie ein Einzelbild weiter.

Per Strg-Klick markieren Sie mehrere Einzelbilder (der entsprechende Klick bei gedrückter Befehlstaste funktioniert jedoch nicht am Mac). Um eine Sequenz zu markieren, klicken Sie zunächst das erste Einzelbild an; dann attackieren Sie bei gedrückter Umschalt-Taste das letzte Einzelbild. Klicken Sie ein markiertes Einzelbild erneut mit gedrückter Strg-Taste an, um es aus der Auswahl zu entfernen. Die Animation-Palette bietet in ihrem Menü den Befehl Alle Frames auswählen.

Die markierten Einzelbilder sind durch einen Rahmen sehr deutlich hervorgehoben. Innerhalb der markierten Einzelbilder gibt es noch den so genannten »aktuellen Frame«, der im Bildfenster erscheint; es ist derjenige Frame, den Sie innerhalb der Gruppe zuerst gewählt haben. Dieser einzelne Frame hat innen ein zusätzliches feines Rähmchen, die Frame-Nummer ist hervorgehoben. Nur dieses eine Bild können Sie bearbeiten.

Wenn Sie eine Animation mit dem Zuschneiden-Befehl kappen, nutzen Sie zuvor in der Animation-Palette von ImageReady den Befehl Alle Frames auswählen. So berücksichtigt das Programm sämtliche Einzelbilder. Achten Sie jedoch darauf, das richtige Einzelbild zum »aktuellen Frame« zu machen. Nur an diesem Frame orientiert sich der Zuschneiden-Befehl bei der Suche nach transparenten oder einfarbigen Rändern. Markieren Sie dieses Einzelbild zunächst durch einen Klick, dann verwenden Sie Alle Frames auswählen.

Abbildung 4.35:  Links: Hier sehen Sie markierte und nicht markierte Einzelbilder. Der »aktuelle Frame«, hier mit der Nummer 15, ist durch ein zusätzliches Rähmchen gekennzeichnet.  Rechts: Nur dieser »aktuelle Frame« erscheint im Bild fenster und kann bearbeitet werden. Datei: Sequenz

Einzelbilder verschieben

So bringen Sie ein Einzelbild oder mehrere Einzelbilder an eine andere Position im Ablauf des Trickfilms: Markieren Sie die Bilder wie oben beschrieben und ziehen Sie die Frames an die gewünschte Stelle. Verschieben Sie mehrere nicht nebeneinander liegende Frames, erscheinen sie an der neuen Position nebeneinander.

Sie können auch die Reihenfolge einer ausgewählten Einzelbildreihe vertauschen. Dazu dient der Befehl Frames umkehren aus dem Menü zur Animation-Palette.

Einzelbilder löschen

Um ein Einzelbild oder mehrere zu löschen, ziehen Sie diese Bilder auf das Mülleimer-Symbol  in der Animation-Palette. Alternativ markieren Sie die Bilder und klicken das Mülleimer-Symbol an. Die Animation-Palette enthält den Menübefehl Animation löschen; dieser Befehl lässt nur das erste Einzelbild in der Animation-Palette zurück - als ob Sie nie mit einer Animation begonnen hätten. Nicht benötigte Ebenen bleiben jedoch erhalten.

4.3.6 Einzelbilder kopieren und einfügen

Sie können Einzelbilder kopieren und an anderer Stelle wieder einfügen - in derselben Animation oder in einer anderen. Das Vorgehen im Überblick:

1. Markieren Sie die Einzelbilder, die Sie kopieren wollen, wie oben beschrieben.
2. Öffnen Sie das Palettenmenü mit der Schaltfläche  und wählen Sie den Befehl Frame kopieren (oder Frames kopieren).
3. Klicken Sie ein anderes Einzelbild oder eine Bildreihe an - auch in einer anderen Animation -, wo Sie die kopierten Einzelbilder einsetzen möchten.
4. Wenn die Zielanimation aktiv ist, verwenden Sie den Paletten-Befehl Frame einfügen.

Bestanden die kopierten Einzelbilder aus mehreren Ebenen, so entstehen auch in der Zielanimation mehrere Ebenen. (Um alle Ebenen des Einzelbildes zu jeweils geschlossenen Ebenen pro Einzelbild zusammenzufassen, verwenden Sie den Paletten-Befehl Frames auf Ebene reduzieren.)

Abbildung 4.36:  Diese Animation entstand auf einfache Art durch Bewegen einer Einzelebene. Sie enthält nur eine einzige Ebene. Wir markieren die vier Einzelbilder und verwenden den Palettenbefehl »Frames kopieren«. Datei: Film

Abbildung 4.37:  In dieser Animation markieren wir die vorhandenen drei Einzelbilder und klicken im Palettenmenü auf »Frames einfügen«. Im Dialogfeld »Paste Frames« verwenden wir die Option »Über Auswahl einfügen«. Datei: Revue_4

Abbildung 4.38:  Die Option »Über Auswahl einfügen« bewirkt, dass das Einzelobjekt aus der Quell-Animation über die vorhandenen Bild er in der Zielanimation gelegt wird. So mischen sich zwei Abläufe. Im Quell-Bild haben wir vier Einzelbilder kopiert, im Zielbild konnten wir jedoch nur drei Einzelbilder markieren; darum entsteht hier ein zusätzliches Einzelbild. Datei: Revue_5

Optionen beim »Einfügen« von Einzelbildern

Nachdem Sie Frame einfügen gewählt haben, erscheint ein Dialogfeld. Sie können die zunächst vorhandenen Bilder ersetzen, ergänzen oder überlagern.

  • Frames ersetzen entfernt diejenigen Bilder im Zielbild, die markiert waren. Haben Sie drei Bilder kopiert, aber zum Einfügen nur ein Bild markiert, verschwindet das eine markierte Bild, überdies entstehen zwei neue Einzelbilder. Haben Sie dagegen zum Einfügen sieben Bilder markiert, werden die ersten drei überschrieben, die anderen vier Bilder verschwinden ersatzlos.
  • Über Auswahl einfügen überlagert das Zielbild mit den eingefügten Einzelbildern. Sofern es dort viel Transparenz gab, bietet diese Option die reizvolle Möglichkeit, eine Bewegung über ein Standbild zu legen oder sogar im Zielbild mehrere Bewegungen gleichzeitig ablaufen zu lassen. Haben Sie drei Bilder kopiert, aber zum Einfügen nur ein Bild markiert, so erscheint der Inhalt des ersten kopierten Einzelbildes im ersten markierten Einzelbild der Zielanimation. Danach entstehen zwei neue Einzelbilder, die ausschließlich den Inhalt der kopierten Ebene zeigen; dann läuft die Zielanimation im ursprünglichen Zustand weiter. Am übersichtlichsten ist es, beim Kopieren und Einfügen gleich viele Einzelbilder zu markieren.
  • Vor Auswahl einfügen und Nach Auswahl einfügen erzeugen auf jeden Fall neue Einzelbilder in der Zielanimation. Die Bilder werden vor oder hinter der markierten Stelle eingesetzt.

ImageReady überträgt die Bildpunkte zwischen den Animationen immer in der Originalpixelgröße. Achten Sie also auf passende Größenverhältnisse. Eventuell müssen Sie eine Animation mit dem Befehl Bild: Bildgröße hoch- oder herunterrechnen oder Sie skalieren ein Ebenenobjekt mit dem Befehl Bearbeiten: Frei transformieren.

»Hinzugefügte Ebenen verbinden«

Das Dialogfeld Frames einfügen hält eine weitere Option parat: Hinzugefügte Ebenen verbinden verbindet die eingefügten Ebenen; Sie erkennen dies an dem Verbinden-Symbol , sobald Sie eine der eingefügten Ebenen in der Ebenenpalette aktivieren. Die neuen Ebenen lassen sich also im Ziel leicht gemeinsam verschieben, skalieren oder drehen. Sie können die Verbindung jederzeit auch von Hand durch Anklicken des Symbols beziehungsweise der leeren Fläche an dieser Stelle herstellen oder aufheben (Details zum Verbinden ab Seite 747). Achtung: Jede Änderung betrifft dabei stets die gesamte Animation, nicht nur das sichtbare Einzelbild.

4.3.7 Überlappung von Einzelbildern

Wenn Sie neue Frames einfügen, können auf Wunsch bisherige Einzelbilder durchscheinen. Dies gilt unter folgenden Voraussetzungen:

  • Die Frames haben transparente Bereiche und
  • Sie speichern GIF mit Transparenz-Option.

Abbildung 4.39:  In dieser Animation haben wir nach einem Rechtsklick auf die Miniaturen jeweils den Befehl »Nicht entfernen« verwendet. Sie erkennen diesen Zustand auch an dem Symbol unter den einzelnen Miniaturen. In der Optimieren-Palette haben wir »Transparenz« und eine Hintergrundfarbe gewählt. Dies hat zur Folge, dass beim Abspielen der Animation im Browser jedes Einzelbild alle vorhergehenden Einzelbilder zeigt. Dateien: Film.psd, Film.gif

Die Animation erscheint also nicht innerhalb einer Rechteckbox, sondern frei ausgeschnitten; direkt um das Objekt herum sehen Sie die Hintergrundfarbe oder das Hintergrundmuster der Internet-Seite. Die Transparenz-Vorgabe machen Sie in der Optimieren-Palette (Details zur Transparenz bei Dateien für das Internet ab Seite 352). Sie haben nun die Wahl:

  • Der Inhalt des vorhergehenden Einzelbildes kann in den transparenten Bereichen des neuen Einzelbildes durchscheinen; oder
  • der Inhalt des Vorgängerbildes ist im neu eingefügten Einzelbild nicht zu sehen (siehe Abbildung 4.39).

Optionen

Die jeweiligen Vorgaben machen Sie nach einem Rechtsklick (am Mac Ctrl-Klick) auf die entsprechende Miniatur in der Animation-Palette. Im Kontextmenü über dem Einzelbild bietet ImageReady folgende Befehle:

  • Auf Hintergrund wiederherstellen: Der vorhergehende Frame ist im aktuellen Einzelbild nicht sichtbar. ImageReady kennzeichnet diesen Zustand durch das Symbol  links unter dem betreffenden Einzelbild.
  • Wenn Sie Nicht entfernen, kann man Frame 1 in den transparenten Bereichen des anschließenden Einzelbildes 2 weiterhin sehen. Dafür steht das Symbol .
  • Automatisch: ImageReady blendet bisherige Frames komplett aus, wenn der neu hinzugefügte Frame transparente Bereiche hat, es wird also der Befehl Auf Hintergrund wiederherstellen verwendet. Dagegen verwendet das Programm den Befehl Nicht entfernen, sofern der nachfolgende Frame Hintergrundfarbe aufweist. ImageReady bietet diesen Zustand stets zunächst an und Sie sollten ihn in der Regel beibehalten. Auch wenn Sie mit dem Befehl Animation optimieren (siehe unten) die Option Entfernen redundanter Pixel gewählt haben, sollten Sie die Methode Automatisch verwenden. So bleiben Frames mit Optimierungstransparenz erhalten.

Die Auswirkungen der Vorgabe Auf Hintergrund wiederherstellen lassen sich eventuell in ImageReady nicht korrekt betrachten; prüfen Sie die Animation in einem Internet-Programm mit dem Untermenü Datei: Vorschau in.

Abbildung 4.40:  Die Einzelbilder dieser Animation wurden mit dem Befehl »Nicht entfernen« bearbeitet. So erscheinen vorhergehende Frames in späteren Einzelbildern.

4.3.8 Standzeit und Zahl der Durchläufe

Die Standzeit eines Einzelbildes wie auch die Zahl der Durchläufe der gesamten Animation können Sie frei einstellen.

Zahl der Durchläufe

Mit der Schaltfläche links unten in der Animation-Palette geben Sie an, ob die Animation nonstop Unbegrenzt oder nur Einmal durchlaufen soll. Oder wählen Sie Andere und legen Sie eine bestimmte Zahl von Durchgängen fest.

Soll der Film rückwärts ablaufen? Dann nutzen Sie den Befehl Frames umkehren aus dem Palettenmenü.

Standzeit der Einzelbilder

So ändern Sie die Standzeit für ein oder mehrere Einzelbilder.

1. Klicken Sie die gewünschten Frames in der Animation-Palette bei gedrückter Umschalt-Taste an.
2. Unter einem der Frames klicken Sie auf die Angabe der Standzeit; dort lesen Sie zunächst »0,00 sec«. Im Klappmenü stellen Sie einen anderen Wert ein. Er gilt nun für alle ausgewählten Frames.

ImageReady zeigt die Standzeit eventuell nicht korrekt an. Prüfen Sie die Animation unbedingt in allen wichtigen Browsern (siehe nächster Abschnitt).

Abbildung 4.41:  Linkes Menü: Nach einem Klick links unten in der Animation-Palette legen Sie fest, wie oft der Trickfilm abläuft.  Rechtes Menü: Durch einen Klick auf die Zeitangabe unter dem Einzelbild oder unter mehreren, gemeinsam markierten Einzelbildern bestimmen Sie die Standzeit für diese Bild er.

4.3.9 Prüfen der Animation in ImageReady und im Internet-Browser

Sie können die Animation in ImageReady oder in einem Internet-Programm prüfen.

Animation in ImageReady betrachten

So testen Sie die Wirkung der Animation innerhalb von ImageReady:

  • Klicken Sie in der Animation-Palette auf die Schaltfläche Spielt Animation ab  . Damit läuft die komplette Animation im ImageReady-Bildfenster ab. Der Reigen läuft so oft ab wie voreingestellt - zunächst ist das Unbegrenzt (siehe oben). Mit der Esc-Taste oder mit der Schaltfläche Beendet Animation  stoppen Sie die Vorführung.
  • Mit der Schaltfläche Wählt den nächsten Frame aus  tasten Sie sich Einzelbild für Einzelbild durch den Film. Diese Schaltfläche finden Sie auch unten links in der Ebenenpalette von ImageReady.

Die Schaltfläche Wählt den ersten Frame aus  bringt Sie wieder zum ersten Einzelbild.

Animation in einem Internet-Programm betrachten

Nur durch Abspielen in einem Internet-Programm lässt sich der Ablauf einer Animation verlässlich kontrollieren. Die Darstellung der Standzeiten innerhalb von ImageReady ist nicht zuverlässig.

Um festzustellen, wie die Animation wirklich in einem Internet-Browser wirkt, wählen Sie die Schaltfläche für den Standard-Browser in der Werkzeugleiste oder Sie verwenden den Befehl Datei: Vorschau in. Diesen Befehl erhalten Sie auch im Kontextmenü, wenn Sie mit der rechten Maustaste in die Bilddatei klicken. ImageReady errechnet eine optimierte Version der Datei nach den aktuellen Vorgaben in der Optimieren-Palette, öffnet das gewählte Programm und zeigt dort die Animation samt technischen Daten.

Dabei legt ImageReady vorübergehend eine entsprechende GIF-Datei im aktuellen Temporärverzeichnis Ihres Betriebssystems an; das Verzeichnis erkennen Sie auch in der Adresszeile des Browsers. Wenn Sie das Programm ordnungsgemäß schließen, werden diese Vorschaudateien gelöscht.

Sie können die Animation im Browser unterbrechen und dauerhaft ein Einzelbild anzeigen; dazu klicken Sie im Browser auf die Schaltflächen Stop oder Abbrechen oder drücken die Escape-Taste. Mit den Schaltflächen Aktualisieren oder Neu laden bringen Sie den Streifen im Browser wieder auf Touren.

Abbildung 4.42:  Der Befehl »Datei: Vorschau in« stellt Ihre Animation im gewünschten Internet-Browser dar. Darunter erscheinen Angaben zu Dateigröße, Farbpalette und HTML-Code.

Animation mit Hintergrundmuster prüfen

Der Befehl Datei: Vorschau in zeigt nicht die von Ihnen geplante Farbe oder das von Ihnen geplante Muster für den Seitenhintergrund. Sie sollten darum die Animation frühzeitig testweise als GIF speichern (siehe unten) und in die fertige Seite im Gestaltungsprogramm einsetzen. Alternative: Legen Sie das Muster bereits auf eine eigene Ebene unter Ihre Animation und blenden Sie es vor dem endgültigen Speichern im GIF-Format mit dem Augensymbol  in der Ebenenpalette aus.

Wollen Sie die Wirkung der Animation mit Seitenhintergrund testen, können Sie aber alternativ auch so vorgehen:

1. Sie aktivieren das ImageReady-Bildfenster mit der Animation.
2. Sie wählen den Befehl Datei: HTML-Hintergrund.
3. Sie nehmen im Dialogfeld die Vorgabe Ansicht unter: Bild.
4. Nach einem Klick auf Wählen geben Sie die gewünschte Hintergrunddatei an (oder nach einem Klick auf Farbe die gewünschte Farbe).

Details zu Hintergrundmustern für Internet-Seiten finden Sie weiter unten in diesem Kapitel im Abschnitt »Seitenhintergrund«.

4.3.10 Speichern der Animation

Gegenüber üblichen Bilddateien hat Ihre Animation ein oder zwei Besonderheiten:

  • Es handelt sich um eine Animation - also um eine ganze Folge von Bildern, die nacheinander abgespielt werden.
  • Einzelne Objekte sollen eventuell frei ausgeschnitten über die Internet-Seite wandern - also nicht innerhalb des üblichen Rechtecks einer Fotodatei; der Seitenhintergrund soll unmittelbar um die Buchstaben herum sichtbar sein.
  • Bei diesen Anforderungen kommt nur ein einziges Dateiformat in Frage - GIF. Allerdings geht bei GIF zwangsläufig einiges von der Originalinformation verloren.
  • Weil GIF nur höchstens 256 Farben anzeigen kann (8-Bit-Farbtiefe), wird eventuell die Farbdarstellung verfälscht.
  • Sie können in einer GIF-Datei weder Texteigenschaften wie die Schriftart korrigieren, noch können Sie die 3D-Effekte irgendwie ändern.
  • Sie sollten das Bild also zweimal sichern: als Photoshop-Datei, um das Werk jederzeit mit allen Möglichkeiten von Photoshop und ImageReady zu korrigieren und im GIF-Format, um es auf die Internet-Seite zu stellen.

Speichern der Animation als Photoshop-Datei

Für das Photoshop-Dateiformat wählen Sie den Befehl Datei: Speichern oder Speichern unter mit dem Dateityp Photoshop (*.psd). Dabei bleiben alle Einzelbilder und alle Informationen über Standzeiten und Wiederholungen erhalten, Sie können das Ganze in ImageReady wieder als Animation öffnen. Nur das zuletzt aktivierte Einzelbild erscheint beim Öffnen in Photoshop.

Abbildung 4.43:  Links: In der Vierfach-Vorschau sehen Sie, wie die Animation mit unterschiedlichen Vorgaben wirkt.  Rechts: Die Eigenschaften für die aktuelle Vorschauvariante regeln Sie mit der Optimieren-Palette.

Speichern der Animation als GIF-Datei

Details zur Dateivorschau wie auch zum GIF-Speichern finden Sie weiter unten in den entsprechenden Abschnitten in diesem Kapitel. Hier nur eine Kurzdarstellung: Für die Internet-Seite speichern Sie das Bild im GIF-Format. Rufen Sie die Optimieren-Palette mit dem Fenster-Menü auf; wählen Sie im Palettenmenü den Befehl Optionen einblenden, um alle Optionen zu sehen.

Sie betrachten nun eine Optimiert-Version des Bildes in der Vierfach-Vorschau und stellen die gewünschten GIF-Eigenschaften in der Optimieren-Palette ein. Schalten Sie in dieser Palette die Transparenz ein, wenn der Seitenhintergrund durchscheinen soll. Nun wählen Sie den Befehl Datei: Optimiert-Version speichern.

Besonderheiten einer animierten GIF-Datei

Gegenüber üblichen GIF-Dateien bietet ImageReady bei Animationen einige Besonderheiten:

  • Bei Verwendung der »selektiven«, der »adaptiven« oder der »perzeptiven« Palette erzeugt ImageReady eine gleichmäßige Farbpalette für alle Einzelbilder.
  • Das Dithering (Farbstreuung, siehe GIF-Abschnitt weiter unten) wird in allen Bildern so ausgeglichen, dass kein Flackern auftritt.
  • Einzelbilder werden so verkleinert, dass die Datei nur den Teil enthält, der sich ändert. Das spart Speicherplatz.

Diese Vorgaben zum Speichern machen Sie mit dem Befehl Animation optimieren aus dem Menü zur Animation-Palette:

  • Wählen Sie Begrenzungsrahmen, um jedes neue Einzelbild auf den Bereich zu beschränken, der sich gegenüber dem Vor-Bild verändert hat. Diese Option sollten Sie verwenden; allerdings kommen einige andere Programme zur Korrektur von GIF-Bildern damit nicht zurecht.
  • Die Option Entfernen redundanter Pixel schaltet alle Bildpunkte, die gegenüber dem vorherigen Einzelbild unverändert blieben, auf transparent. Bei Verwendung dieser Option sollten Sie nach einem Rechtsklick auf die Miniaturen den Entfernen-Befehl Automatisch einstellen (siehe oben). Die Option steht nur zur Verfügung, wenn Sie in der Optimieren-Palette die Transparenz eingeschaltet haben.

Abbildung 4.44:  Mit dem Palettenbefehl »Animation optimieren« senken Sie die Dateigröße Ihrer GIF-Animationen.

4.3.11 Animationen in anderen Dateiformaten öffnen und speichern

Mit ImageReady können Sie verschiedene andere Dateiformate öffnen und speichern, um Filme zu betrachten, zu korrigieren und zu speichern.

GIF-Animationen aus anderen Programmen

Laden Sie GIF-Animationen aus anderen Programmen in ImageReady, erscheint dort jedes Einzelbild als eigene Ebene. Sie können probieren, ob sich beim Speichern in ImageReady durch die Optimierungsvorgaben oder durch andere Farbpaletten (siehe vorhergehender Abschnitt) die Dateigröße verringert. Die Bearbeitung ist eventuell umständlich, da jedes Einzelbild als separate Ebene vorliegt.

Ebenen einer Photoshop-Datei als Einzelbilder einer Animation

Sie können in Photoshop eine Datei mit mehreren Ebenen erstellen, die Sie anschließend in ImageReady als Einzelbilder einer Animation definieren: Sie öffnen die Photoshop-Datei in ImageReady, öffnen die Animation-Palette und verwenden den Befehl Frames aus Ebenen erstellen. Die unterste Ebene wird dabei zum ersten Einzelbild.

Einzeldateien als Einzelbilder einer Animation

Sie können einen Reihe von Bilddateien als Einzelbilder einer Animation öffnen. Dazu kopieren Sie alle Dokumente in einen gemeinsamen Ordner. Dann wählen Sie in ImageReady Datei: Importieren: Ordner als Frames.

Weitere Animationstypen

ImageReady öffnet und bearbeitet Filme im Quicktime-Format (mit der Endung ».mov«), im Flic-Format, unter Windows auch AVI-Videos. Beim Öffnen der Videodateien können Sie einen Filmbereich auswählen oder nur jedes xte Bild verwenden, der Ton bleibt allerdings auf der Strecke. Vorsicht: ImageReady legt für jedes Einzelbild eine neue Ebene an.

Quicktime-Filme können Sie mit ImageReady auch schreiben. Dazu dient der Befehl Datei: Original exportieren; wählen Sie das Quicktime-Dateiformat im Klappmenü Dateityp.

Abbildung 4.45:  Beim Öffnen eines QuickTime- oder AVI-Videos können Sie alle Einzelbilder oder nur einen Ausschnitt verwenden.

Animation und Rollover-Effekte kombinieren

Sie können sehr leicht eine Animation oder einen Teil einer Animation in eine Rollover-Reihe (siehe nächster Hauptabschnitt) einsetzen. Details zu diesem Verfahren finden Sie ab Seite 303. Ein Beispiel für Animationen in Verbindung mit Slices und Rollover-Effekten stellen wir ab Seite 340 vor.

4.3.12 Online-Informationen zu GIF-Animationen

Viele GIF-Trickfilme, weitere Informationen auf Deutsch und Verknüpfungen zu verschiedenen, auch kostenlosen Animationsprogrammen und Animationen finden Sie unter diesen Internet-Adressen: 

http://www.zampano.com/gifanim/index0.html
http://www.sichtlinien.de/laborenz/webdesign/animation1.html

4.4 Rollover-Effekte

Wenn Sie ein Bild mit Rollover-Effekten ausstatten, ändert es sich, sobald der Mauszeiger auf der Internet-Seite über das Bild gelangt. Das Bild kann einen dritten Zustand (einen so genannten Status) annehmen, wenn es angeklickt wird. Und noch weitere Varianten sind möglich. Eine typische Anwendung dieser Technik:

1. Der Mauszeiger nähert sich einer Schaltfläche auf der Internet-Seite.
2. Die Schaltfläche wackelt, sobald der Mauszeiger in ihr Revier gerät.
3. Wird die Schaltfläche angeklickt, sieht die Schaltfläche eingedrückt aus.

Dabei erzeugt ImageReady eine HTML-Datei inklusive JavaScript-Code sowie für jeden Zustand eine separate Bilddatei.

Abbildung 4.46:  So könnte Ihre Rollover-Grafik in einem Internet-Browser erscheinen: Normal, wenn die Maus nicht in der Nähe ist; verändert, mit gelbem Einblendtext und einer Meldung in der Statuszeile, sobald die Maus über die Schaltfläche gerät; abermals verändert und mit einem Hyperlink zu einer Internet-Seite (siehe Statuszeile), wenn das Bild angeklickt wird.

4.4.1 Rollover-Effekte: Möglichkeiten im Überblick

Mit ImageReady, nicht aber mit Photoshop können Sie Rollover-Effekte anlegen. Wir reden deshalb im Folgenden ausschließlich über ImageReady. Diese Möglichkeiten haben Sie:

  • Sie können verschiedene Bildzustände je nach Mausaktivität des Betrachters einrichten.
  • Sie können für einen einzelnen Bildzustand auch einen Trickfilm (einen Animation) einsetzen.
  • Sie können innerhalb von Slices - also segmentierten Bildern - einzelne Teilbilder mit Rollover-Effekten ausstatten. Innerhalb des Gesamtwerks können sich abhängig vom Rollover-Status auch Bildteile außerhalb der eigentlichen Schaltfläche ändern.
  • Für jeden Rollover-Status lassen sich Einblenderklärungen und Statuszeilenmeldungen planen.
  • Sie können das Gesamtbild - nicht einzelne Rollover-Zustände - mit einem Hyperlink ausstatten; dann wird beim Anklicken ein anderes Dokument aufgerufen.

Slices und Animationen besprechen wir ausführlich in anderen Abschnitten dieses Kapitels.

4.4.2 Rollover-Effekte: Produktion im Überblick

Bevor wir in der Praxis einen Rollover-Effekt Schritt für Schritt anlegen, betrachten wir das Verfahren in der Übersicht:

  • Sie speichern Rollover-Effekte für die spätere Korrektur innerhalb einer Photoshop-Datei und für die Internet-Seite als Sammlung von GIF- oder JPG-Dateien mit HTML-Code.
  • Häufig benötigen Sie pro Rollover-Zustand eine eigene Ebene; haben Sie also drei Bildzustände, benötigen Sie drei Ebenen in der Photoshop-Datei. Pro Bildzustand ist jeweils nur eine Ebene sichtbar, die anderen Ebenen sind ausgeblendet.
  • Für einige Veränderungen brauchen Sie dagegen keine neue Ebene. Sie können mehrere Rollover-Zustände innerhalb ein- und derselben Ebene anlegen, wenn Sie nur folgende Veränderungen an den Ebeneneigenschaften vornehmen: Deckkraft, Überblendmodus, Ebenenebeneneffekte, Objektposition.

Generell gilt damit für den Rollover-Effekt Ähnliches wie für die Animation (siehe vorhergehender Abschnitt).

4.4.3 Rollover-Zustände im Überblick

Diese Rollover-Zustände können Sie definieren:

  • Normal bedeutet, es ist keine Maus in der Nähe und der Betrachter hat sich der Rollover-Schaltfläche noch nicht gewidmet.
  • Der Zustand Über erscheint auf der Internet-Seite, wenn die Maus über die Grafik geführt wird (er heißt in Fachdiskussionen oft »mouseover«).
  • Der Bildzustand Unten zeigt sich, wenn man das Bild anklickt (häufig »mousedown« genannt).
  • Mausklick definiert den Rollover-Status, nachdem Internet-Surfer das Bild angeklickt haben. Der Button bleibt in diesem sichtbar angeklickten Zustand, bis ein neuer Status aktiviert wird.
  • Im Zustand Aussen verharrt das Bild, wenn die Maus ohne Klicken aus der Grafik herausbewegt wird (statt dessen nimmt man meist den Normal-Zustand).
  • Nach oben ist eine Veränderung, sobald der Betrachter nach dem Doppelklick die Maustaste wieder loslässt.
  • Ohne erhält den aktuellen Status des Bildes für die spätere Verwendung als Rollover-Status; er wird auf Internet-Seiten nicht angezeigt.
  • Mit Eigene definieren Sie einen neuen Rollover-Status auf Basis Ihrer eigenen JavaScript-Kenntnisse.

Die Bildzustände erscheinen in verschiedenen Browsern und Browser-Versionen unterschiedlich. So kann es sein, dass der Zustand »Unten« auch nach dem Anklicken und Verlassen der Schaltfläche beibehalten wird. Prüfen Sie den Rollover-Effekt in allen wichtigen Browsern (Details siehe unten).

4.4.4 Praxis: Rollover-Effekt anlegen

In der folgenden Übung lernen Sie Schritt für Schritt die verschiedenen Verfahren kennen, um einen Rollover-Effekt anzulegen.

Für diese Übung haben wir bereits zwei Schaltflächen in getrennten Dateien erzeugt - »Schalter_a.psd« und »Schalter_b.psd«, zu finden wie immer im »Praxis«-Verzeichnis auf der CD zu diesem Buch.

Wir öffnen zunächst »Schalter_a«. Mit dem Fenster-Menü blenden wir die Rollover-Palette ein. Dort sehen Sie zunächst eine Rollover-Miniatur für den Zustand »Normal«. In diesem Zustand erscheint die Rollover-Grafik erstmals auf der Webseite; sie behält das Aussehen bei, bis der Betrachter durch Mausaktivitäten einen anderen Zustand aufruft. Beachten Sie auch die Ebenenpalette: Das Bild besteht aus einer einzigen Ebene; die plastische Wirkung beruht auf dem Ebeneneffekt Abgeflachte Kante und Relief.

Abbildung 4.47:  Diese Schaltfläche wurde größer als für Internet-Seiten üblich angelegt; so kommt sie im Druck und auf dem Monitor deutlicher heraus. Erzeugt wurde zunächst ein einfacher Kreis. Die plastische Wirkung beruht auf einem Ebeneneffekt, wie in der Ebenenpalette von ImageReady zu erkennen ist. Datei: Schalter_a.

Geänderte Ebeneneigenschaft als neuer Zustand

Bei dem »Normal«-Zustand soll es nicht bleiben. Sobald die Maus sich über die Schaltfläche bewegt, soll diese sich dem Zeiger Aufmerksamkeit heischend entgegenrecken - sie soll im »Mouseover«-Zustand einen stärkeren 3D-Effekt zeigen. Für diesen Zustand müssen wir wohlgemerkt keine neue Ebene anzulegen. Denn es sind nur geänderte Werte in den Ebeneneffekten erforderlich; es lassen sich also mehrere Rollover-Zustände innerhalb einer einzigen Ebene speichern.

Abbildung 4.48:  In der Rollover-Palette klicken Sie auf die Schaltfläche »Erstellt einen neuen Rollover-Status«. Damit erscheint eine zweite Miniatur in der Rollover-Palette; sie zeigt den Zustand »Über« an - so sieht das Bild aus, wenn der Mauszeiger auf der Internet-Seite darüber ruht. Weil sich in diesem Zustand die Schaltfläche stärker wölben soll, klicken wir in der Ebenenpalette doppelt auf den Schriftzug »Abgeflachte Kante und Relief« und stellen in der gleichnamigen Palette höhere Werte ein.

Um den neuen Zustand anzulegen, klicken Sie unten in der Rollover-Palette auf die Schaltfläche Erstellt einen neuen Rollover-Status  . Damit erscheint eine zweite Miniatur in der Rollover-Palette; sie gleicht der ersten und trägt die Überschrift Über. Diese zweite Miniatur zeigt also, wie das Bild aussieht, wenn man auf der Internet-Seite den Mauszeiger darüber hält.

Nur für diesen Über-Zustand - er ist in der Rollover-Palette hervorgehoben - erzeugen Sie nun die stärkere 3D-Wölbung: Sie klicken doppelt auf den Schriftzug Abgeflachte Kante und Relief in der Ebenenpalette. Im gleichnamigen Dialogfeld erhöhen Sie die Werte für Weichzeichnen und Farbtiefe jeweils auf 20. Damit wirkt die Schaltfläche bereits deutlich kräftiger.

Je nachdem, welche Miniatur Sie nun in der Rollover-Palette anklicken, erscheint im Bildfenster die flachere erste Schaltfläche oder die stärker gebaute zweite Version. Beachten Sie auch die Ebenenpalette: In der Ebenenpalette sehen Sie weiterhin nur eine einzige Ebene - diese enthält jedoch zwei verschiedene Zustände.

Abbildung 4.49:  Die Rollover-Palette zeigt die unterschiedlichen Zustände »Normal« und »Über« an. In der Ebenenpalette erkennen Sie, dass das Bild weiterhin nur aus einer einzigen Ebene besteht. Zwischenergebnis: Schalter_2.psd

»Ebene in jedem Status anpassen«

Sie haben nun ein und dieselbe Ebene, die in verschiedenen Rollover-Zuständen unterschiedlich aussieht. Bei manchen Aufgaben will man das Aussehen aus einem bestimmten Zustand auf alle anderen Zustände übertragen. Dazu wählen Sie in der Rollover-Palette den Menübefehl Ebene in jedem Status anpassen. (Das Palettenmenü erreichen Sie wie immer mit dem Dreieck  rechts oben in der Palette.)

Eine neue Ebene als neuer Zustand

Wenn die Schaltfläche dann tatsächlich angeklickt wird, soll sie eingedrückt erscheinen. Diesen dritten Zustand der Schaltfläche realisieren wir nicht durch eine weitere Änderung der Ebeneneffekte; statt dessen setzen wir eine neue Ebene. So geht's:

Klicken Sie in der Rollover-Palette wieder auf die Schaltfläche Erstellt einen neuen Rollover-Status  . Damit erscheint die dritte Miniatur in der Palette, diesmal mit der Überschrift Unten - hier definieren Sie also das Aussehen bei gedrückter Maustaste.

Die Miniatur Unten gleicht zunächst der vorhergehenden Miniatur Über. Wir wollen hier jedoch mit einer völlig neuen Ebene arbeiten. Darum klicken wir in der Augen-Leiste der Ebenenpalette auf das Symbol Blendet eine Ebene ein oder aus  ; damit wird die Ebene in diesem Rollover-Zustand unsichtbar, die Miniatur in der Rollover-Palette erscheint leer.

Wohlgemerkt: Löschen dürften Sie die Ebene nicht. Dadurch verlieren Sie jeden Bildinhalt für die ersten beiden Zustände.

Abbildung 4.50:  Hier wurde bereits ein dritter Zustand angelegt. Damit nicht die zweite Bild ansicht auch im dritten Zustand erscheint, wird die »Ebene 1« mit dem Augensymbol in der Ebenenpalette ausgeblendet.

Um einen völlig neuen Zustand zu erzeugen, benötigen Sie also eine neue Ebene. Sie könnten die vorhandene Ebene duplizieren und beliebig verändern. Sie könnten auch eine neue, leere Ebene erzeugen und dort Material auftragen, zum Beispiel mit einem Formwerkzeug. Wir haben jedoch schon eine weitere Schaltfläche in einer separaten Datei vorbereitet und wählen darum noch einen anderen Weg:

1. Öffnen Sie die Datei »Schalter_b« aus dem »Praxis«-Verzeichnis der CD zu diesem Buch. Diese Datei enthält eine Schaltfläche vor transparentem Hintergrund.
2. Rufen Sie die Ebenenpalette mit der Taste F7 auf, sofern sie noch nicht auf dem Schirm zu sehen ist.
3. Klicken Sie bei gedrückter Strg-Taste in die Miniaturansicht der Schaltfläche »Schalter_b« in der Ebenenpalette. Dadurch wählen Sie die Schaltfläche aus; die Schaltfläche wird also im Bildfenster von einer schwarzweißen Fließmarkierung umgeben.
4. Drücken Sie Strg+C, um die Schaltfläche in die Zwischenablage zu kopieren.

Abbildung 4.51:  Öffnen Sie die Datei »Schalter_b«. Klicken Sie bei gedrückter Strg-Taste auf die Miniatur in der Ebenenpalette, um die Schaltfläche ohne transparente Umgebung auszuwählen. Die schwarzweiße Fließmarkierung im Bild fenster zeigt an, dass die Schaltfläche ausgewählt ist. Kopieren Sie diese mit Strg+C in die Zwischenablage.

5. Aktivieren Sie die bisherige Arbeit mit dem leeren dritten Zustand. Stellen Sie sicher, dass sich keine Auswahl im Bild befindet. In der Rollover-Palette soll die dritte Miniatur mit dem Zustand Unten aktiviert sein.
6. Drücken Sie Strg+V. Damit erscheint die Schaltfläche genau in der Mitte der Datei, deckungsgleich mit der anderen Ebene. Damit ist der Zustand Unten der Schaltfläche - wenn sie auf der Internet-Seite angeklickt wird - definiert.

Abbildung 4.52:  Die kopierte neue Schaltfläche aus der Datei »Schalter_b« wird in die bisherige Montage eingefügt, während in der Rollover-Palette der Zustand »Unten« aktiviert ist. Die neue Schaltfläche erscheint in der Ebenenpalette als »Ebene 2«, sie ist sichtbar. Die bisherige Ebene bleibt weiterhin erhalten, ist jedoch unsichtbar. Ergebnis: Schalter_3.psd. HTML-Ergebnis im Unterverzeichnis Schalter_3

Zustände löschen, kopieren und austauschen

Haben Sie zu viele Zustände in der Rollover-Palette angelegt? Ziehen Sie diese einfach in den Mülleimer  unten in der Palette. Umgekehrt können Sie mit Hilfe des Palettenmenüs auch einen Rollover-Status kopieren und an einer anderen Stelle oder in einer anderen Rollover-Kette wieder einfügen. (Dabei wird die übliche Zwischenablage nicht überschrieben.)

Mit dem Klappmenü über jedem Rollover-Status in der Rollover-Palette teilen Sie neue Zustände zu. Dabei bietet ImageReady jedoch nur solche Zustände an, die noch nicht vergeben wurden. Nur »Ohne« und »Eigene« stehen dauerhaft zur Verfügung.

Ein Beispiel für Rollover-Effekte in Verbindung mit Slices und Animationen finden Sie ab Seite 338 im Abschnitt »Slices«. Dazu gehören die Dateien SliceRoll und SliceAnim aus dem »Praxis«-Verzeichnis.

Abbildung 4.53:  Das Klappmenü über den Rollover-Zuständen in der Rollover-Palette erlaubt es Ihnen, einzelne Zustände auszutauschen.

4.4.5 Vorschau auf den Rollover-Effekt

Sie können das Ergebnis nun auf zwei Arten prüfen - in ImageReady und im Internet-Browser:

Rollover-Vorschau in ImageReady

Auf mehrere Arten starten Sie die Rollover-Vorschau in ImageReady:

  • Klicken Sie in der Werkzeugleiste auf die Schaltfläche Rollover-Vorschau  .
  • Klicken Sie in der Rollover-Palette auf die Schaltfläche Zeigt an, wie sich die Rollover verhalten  .
  • Drücken Sie die Taste Y auf Ihrer Tastatur.

Nun bewegen Sie die Maus ins Bildfenster, klicken dort und prüfen, ob die Darstellung wie gewünscht mitspielt. Laut Photoshop-Hersteller Adobe stimmt diese Vorschau mit dem Internet-Explorer 5.0 für Windows überein. Je nach Rollover-Zustand aktiviert ImageReady die unterschiedlichen Miniaturen in der Rollover-Palette. Sobald Sie ein anderes Werkzeug einschalten, erklärt ImageReady diesen Vorschau-Modus für beendet, Sie können also die Rollover-Vorschau nicht dauerhaft nutzen.

Rollover-Vorschau im Internet-Browser

Sie können das Ergebnis auch in einem Internet-Programm testen. Dazu dient das Untermenü Datei: Vorschau in oder die Schaltfläche für Ihren Standard-Browser unten in der Werkzeugleiste. Bewegen Sie die Maus über die Schaltfläche, um zu prüfen, ob alles funktioniert - einschließlich der Einblenderklärungen und Meldungen für die Statuszeile.

Für die Browser-Vorschau verwendet ImageReady die aktuelle Qualitätsvorgabe aus der Optimieren-Palette. Das heißt: Haben Sie in der Optimieren-Palette JPG vorgewählt, sehen Sie generell keine Transparenz in der Browser-Vorschau; ist GIF mit niedriger Farbzahl und ohne Dithering vorgewählt, wirken Halbtonmotive grob entstellt.

4.4.6 Einblendmeldungen und Hyperlinks einbauen

Sie können der Rollover-Grafik Einblendmeldungen und Hyperlinks zuordnen. Dazu öffnen Sie mit dem Fenster-Menü die Slice-Palette. Wählen Sie im Palettenmenü den Befehl Optionen einblenden, um alle Optionen zu sehen (oder klicken Sie, falls sichtbar, auf das Doppeldreieck  neben dem Palettennamen). Machen Sie folgende Angaben:

  • Neben URL geben Sie eine Internet-Adresse oder einen Speicherort auf einem PC an. Sobald ein Betrachter das Bild anklickt, wird die entsprechende Information aufgerufen. Sie können also auch lokale Dateien hier aufrufen, die nicht erst aus dem Internet geholt werden müssen, am besten Browser-taugliche Formate wie HTML, GIF oder JPEG.
  • Neben Meldung tippen Sie eine Botschaft ein, die in der Statuszeile des Internet-Betrachters erscheint, sobald sich der Mauszeiger über dem Bild befindet.
  • Neben Alt tippen Sie einen Einblendtext ein; dieser so genannte Alternativtext erscheint auf gelbem Grund über der Internet-Seite, sobald der Mauszeiger den Einzugsbereich der Grafik erreicht.

Meldung und Alt-Text erscheinen auch dann beim Betrachter, wenn die Bilddatei selbst nicht angezeigt werden kann; das passiert häufig: Zum Beispiel hat der Betrachter die Grafikfunktion ausgeschaltet, beim Speichern oder Übertragen der Grafiken ist etwas schiefgelaufen, einige Browser oder Vorlese-Browser öffnen ohnehin keine Grafiken. Botschaften, die Sie mit der Bilddatei ausdrücken wollen, sollten Sie also mit dem Alternativtext wiederholen, zum Beispiel mit Worten wie »Weiter« oder »Mehr Informationen«.

Abbildung 4.54:  Links: Mit der Slices-Palette speichern Sie Einblendmeldungen und Hyperlinks in der Rollover-Grafik.  Rechts: Hier wurde die Bild datei aus dem korrekten Verzeichnis entfernt, so dass die Schaltfläche nicht angezeigt werden kann; der Alternativtext erscheint nun auch innerhalb des leeren Bild rahmens. Datei: Schalter_3

4.4.7 Rollover-Effekte und Slices

Wenn Sie Rollover-Effekte innerhalb von Slices anlegen, sollten Sie ebenenbasierte Slices verwenden. So können Sie problemlos die Größe des Rollover-Bereichs ändern (Details zu Slices finden Sie ab Seite 321).

Über das Menüdreieck  erreichen Sie wie immer das Menü zur Rollover-Palette. Mit dem Befehl Optionen geben Sie an, ob in der Rollover-Miniatur nur der jeweilige Slice oder aber das Gesamtbild erscheinen soll; außerdem regeln Sie dort wie üblich die Miniaturengröße in der Palette. Mit der Dreieck-Schaltfläche  unten links in der Rollover-Palette wählen Sie verschiedene Slices aus.

Abbildung 4.55:  Links: Mit dem Menü unten links in der Rollover-Palette wählen Sie aus, welche Slices angezeigt werden.  Rechts: In den Optionen zur Rollover-Palette geben Sie an, ob die Miniaturen jeweils das Gesamtbild oder einzelne Slices zeigen sollen. Datei: SliceAnim

Rollover-Effekt in mehreren Slices

Ein Rollover-Effekt kann nicht nur den Bildteil verändern, den Sie gerade anklicken. Ebenso gut lassen sich gleichzeitig oder ausschließlich auch andere Bildregionen umschalten. Dabei werden Sie die Grafik meist in Slices aufteilen. Klicken Sie lediglich den gewünschten Rollover-Zustand an und sorgen Sie dafür, dass die gewünschten Ebenen im Bild ein- oder ausgeblendet werden beziehungsweise dass sich Ebeneneffekt, Position oder Deckkraft verändern.

Abbildung 4.56:  Links: Für diese in Slices aufgeteilte Grafik haben wir Rollover-Effekte nicht nur in der Schaltleiste eingerichtet.  Rechts: Sobald der Mauszeiger über die Schaltfläche gelangt, verändert sich die Schaltfläche, weil wir hier den Ebeneneffekt »Schein nach außen« einblenden; zusätzlich verändert sich auch das danebenliegende Bild , das mit dem Augensymbol in der Ebenenpalette erst für diesen Rollover-Zustand eingeblendet wird.

Abbildung 4.57:  Links: Wechselt man mit dem Mauszeiger über eine andere Schaltfläche, erscheint abermals ein neues Bild . Rechts: Sobald der Mauszeiger gedrückt wird, verändert sich abermals nicht nur die Schaltfläche, sondern auch das benachbarte Bild - diesmal nur durch veränderte Ebeneneffekte.

Abbildung 4.58:  Wir haben die Rollover-Effekte auf mehrere Slices verteilt. Pro Slice lassen sich Rollover-Effekte individuell einrichten. Hier ist die »Rollover-Vorschau« eingeschaltet. Datei: Rollover.psd; HTML-Ergebnis: im Unterverzeichnis »Praxis/Rollover«.

4.4.8 Animationen hinzufügen

Sehr einfach können Sie einen Rollover-Zustand durch eine Animation ersetzen oder in der aktuellen Produktion eine Animation einbauen.

Eine vorhandene Animation in eine Rollover-Sequenz einsetzen

So setzen Sie in eine vorhandene Rollover-Reihe eine vorhandene Animation oder einen Teil daraus ein:

1. Vorbereitungen: Legen Sie bereits vorab eine komplette Animation und eine fertige Rollover-Reihe an; auch der Zustand, den Sie mit der Animation füllen, sollte durch einen beliebigen Platzhalter bereits erstellt sein.
2. Markieren Sie die gewünschten Einzelbilder in der Animation-Palette durch Strg-Klick.
3. Öffnen Sie das Menü zur Animation-Palette mit der Schaltfläche  und wählen Sie den Befehl Frames kopieren.
4. Aktivieren Sie die Datei mit dem Rollover-Effekt.
5. Aktivieren Sie in der Rollover-Palette denjenigen Zustand, in dem Sie die Animation einsetzen wollen.
6. Wählen Sie im Menü zur Rollover-Palette den Befehl Rollover-Status einfügen.

ImageReady ersetzt nun den bisherigen Bildinhalt durch die Animation. Dabei präsentiert die Rollover-Palette nur das erste Einzelbild der Animation. Alternativ können Sie natürlich auch eine Rollover-Reihe ohne Animation in den üblichen Formaten GIF oder JPEG speichern; anschließend ersetzen Sie eine einzelne Bilddatei durch eine fertige Animation. Die Dateinamen müssen exakt übereinstimmen; korrigieren Sie eventuell den HTML-Code.

Abbildung 4.59:  Links: In diese Rollover-Reihe setzen wir eine Animation ein. Sie soll im Zustand »Über« erscheinen, wenn also die Maus ohne Klick über dem Rollover-Element ruht.  Rechts: Die Animation-Palette zeigt die Einzelbilder im Zustand »Über« - zunächst ist es nur ein einziges Bild , es gibt also keine Animation. Wir duplizieren das Einzelbild mit der Schaltfläche »Dupliziert aktuellen Frame«.  Datei: Schalter_3

Abbildung 4.60:  Für dieses duplizierte Einzelbild klicken wir in der Ebenenpalette auf die Schaltfläche »Ebeneneffekt hinzufügen«. Wir fügen einen »Glanz«-Effekt hinzu. Anschließend ergänzen Sie auch Bild 1 mit einem Satin-Effekt - jedoch mit anderen Werten in der Palette »Glanz«-Palette.

Abbildung 4.61:  Oben: Im Menü zur Animation-Palette verwenden wir nun den Befehl »Dazwischen einfügen«. Wir verwenden drei »hinzuzufügende Frames« und geben vor allem an, dass die Ebeneneffekte variiert werden sollen (Details zu dieser Funktion ab Seite 789). Nach einem Klick auf OK entstehen in der Animation drei neue Einzelbilder mit einem Übergang zwischen den beiden »Glanz«-Zuständen; es entsteht ein changierendes Schattenspiel.  Unten: Die Rollover-Palette zeigt durch die Hervorhebung, dass wir immer noch am Zustand »Über« arbeiten; von der Animation erscheint hier nur das aktivierte Einzelbild. Datei: Schalter_4

Eine Animation während der Rollover-Produktion erzeugen

So könnten Sie eine Animation innerhalb der Produktion einer Rollover-Reihe erzeugen:

1. Beginnen Sie mit der Arbeit an verschiedenen Rollover-Zuständen.
2. Zum Beispiel beim Zustand »Über« rufen Sie die Animation-Palette mit dem Fenster-Menü auf. Hier erscheint nur ein Einzelbild.
3. Duplizieren Sie dieses Einzelbild einmal oder mehrfach mit der Schaltfläche Dupliziert aktuellen Frame  unten in der Animation-Palette.
4. Verändern Sie die Ebeneneigenschaften des Einzelbildes wie Position, Deckkraft oder Ebeneneffekte oder erzeugen Sie eine Bildreihe mit dem Befehl Dazwischen einfügen aus dem Menü zur Animation-Palette. (Wohlgemerkt - alle Veränderungen ereignen sich innerhalb eines einzigen Rollover-Zustands.)
5. Testen Sie die Animation mit der Schaltfläche Spielt Animation ab  in der Animation-Palette.
6. Wechseln Sie wieder zur Rollover-Palette und erstellen Sie weitere Zustände.

Wenn Sie nach dem Einfügen einer Animation mit der Schaltfläche Erstellt neuen Rollover-Status  einen neuen Rollover- Zustand herstellen, übernehmen Sie die komplette Animation in diesen weiteren Zustand. Blenden Sie die Animation eventuell in der Ebenenpalette aus oder ziehen Sie sämtliche Einzelbilder der Animation-Palette bis auf das erste in den Mülleimer  ; so erhalten Sie wieder ein übliches Standbild.

4.4.9 Bilder mit Rollover-Effekt speichern

Wie auch bei Animationen gilt: Sie sollten das Rollover-Ergebnis zweimal speichern:

  • Im Photoshop-Dateiformat für flexible Korrekturen bei voller Farbtiefe und separat zugänglichen Ebenen und
  • in einem Internet-tauglichen Dateiformat, also meist GIF oder JPEG, plus HTML-Code.

Rollover-Effekte als Photoshop-Datei speichern

Für das Photoshop-Dateiformat wählen Sie die Befehle Datei: Speichern oder Speichern unter mit dem Dateityp Photoshop (*.psd). Dabei bleiben alle Zustände erhalten, ebenso Hyperlinks, eingebaute Animationen und Einblendtexte. Sie können das Rollover-Bild in Photoshop bearbeiten und in ImageReady wohlbehalten wieder öffnen.

Rollover-Effekte als GIF- oder JPG-Datei speichern

Details zum Speichern für das Internet finden Sie weiter unten in den Abschnitten »Transparenz« (Seite 352) und »Speichern für das Internet« (Seite 359). Hier nur eine Kurzdarstellung:

1. Rufen Sie die Optimieren-Palette mit dem Fenster-Menü auf. Wählen Sie im Palettenmenü den Befehl Optionen einblenden, um alle Optionen zu sehen (oder klicken Sie, falls sichtbar, auf das Doppeldreieck  neben dem Palettennamen).
2. Wenn Ihr Motiv nicht innerhalb eines üblichen Bildrechtecks, sondern frei ausgeschnitten auf der Internet-Seite erscheinen soll, verwenden Sie das GIF-Format, ansonsten GIF oder JPG.
3. Sie betrachten eine »Optimiert«-Version des Bildes in der Vierfach-Vorschau und stellen die gewünschten GIF- oder JPG-Eigenschaften in der Optimieren-Palette ein.
4. Schalten Sie in der Optimieren-Palette bei GIF die Transparenz ein, wenn der Seitenhintergrund durchscheinen soll. Schalten Sie außerdem die Option Vereinheitlichte Farbtabelle verwenden ein; so verwenden alle Rollover-Zustände dieselbe Farbtabelle.
5. Nun wählen Sie den Befehl Datei: Optimiert-Version speichern. Im Dialogfeld Optimiert-Version speichern achten Sie im Klappmenü Dateityp auf die Vorgabe HTML und Bilder (*.html). Die Option GoLive-Code einschliessen optimiert die Grafik für Adobes Webdesign-Programm GoLive ab Version 5.0, so dass sich HTML- und JavaScript-Code voll in GoLive bearbeiten lässt (Sie können aber auch das Photoshop-Dateiformat in GoLive öffnen). Korrigieren Sie die automatische Benennung von Dateien bei Bedarf nach einem Klick auf die Schaltfläche Ausgabe-Einstellungen, dort klicken Sie im Klappmenü oben auf Dateien speichern. Dann klicken Sie auf Speichern.
6. Kopieren Sie den erzeugten HTML-Code in Ihre geplante Internet-Seite.

Abbildung 4.62:  Beim Speichern eines Bild es mit Rollover-Effekt erzeugt ImageReady einen HTML-Code und mehrere Bild dateien, die in einem separaten Verzeichnis abgelegt werden.

Dateien für eine Rollover-Grafik

Sofern Sie noch mit den werkseitigen Vorgaben arbeiten, entstehen beim Speichern einer Rollover-Grafik mit der Bezeichnung »Schalter.psd« folgende Dateien:

  • Im Verzeichnis, das Sie im Dialogfeld Optimiert-Version speichern angewählt haben, erzeugt ImageReady die Datei »Schalter.htm«. Öffnen Sie diese Datei in einem Internet-Browser, um die Grafik zu prüfen. Dazu reicht meist ein Doppelklick.
  • Die eigentlichen Bilddateien legt ImageReady in das Unterverzeichnis »Bilder«; dieses Unterverzeichnis wird automatisch neu erstellt. In unserem Beispiel entstehen die Dateien »Schalter-01.gif«, »Schalter-01-over.gif« und »Schalter-01-down.gif« für die verschiedenen Zustände des Bildes. (Wollen Sie statt des üblichen Dateinamens vorneweg eine andere Bezeichnung verwenden, so tragen Sie diese Bezeichnung in der Slices-Palette im Feld Name ein. Sie verhindern so beispielsweise, dass ImageReady Ziffern in den Dateinamen einhängt.)

Abbildung 4.63:  Die HTML-Datei für die Grafik mit Rollover-Effekt speichert ImageReady in das Verzeichnis, das Sie im Dialogfeld »Optimiert-Version speichern« angeben. Die für die verschiedenen Rollover-Zustände erforderlichen Bild dateien werden in das Verzeichnis »Bild er« geschrieben, das ImageReady automatisch erzeugt.

Ebenenstile mit Rollover-Sequenz speichern

Sie können die Sammlung sämtlicher Ebeneneffekte auf einer Ebene - etwa Abgeflachte Kante und Relief plus Schlagschatten plus Kontur - als Ebenenstil speichern (Details zu diesem Vorgang ab Seite 778). Haben Sie eine Rollover-Sequenz durch mehrfache Änderung der Ebeneneffekte aufgebaut, können Sie diese Abfolge von zwei oder mehr Änderungen innerhalb des Ebenenstils speichern. So geht's in ImageReady (nicht in Photoshop):

1. Erstellen Sie ein ebenenbasiertes Slice (vergleiche Seite 323) oder wählen Sie eins aus. Andere Slice-Typen sind nicht möglich.
2. Blenden Sie die Stile-Palette mit dem Fenster-Menü ein.
3. Klicken Sie in der Stile-Palette auf die Schaltfläche Neuer Stil  . (Sie erhalten den Befehl auch im Kontextmenü zur Effekte-Leiste in der Ebenenpalette.
4. Im Dialogfeld Stil-Optionen verwenden Sie die Option Rollover-Status einfügen.

In der Stile-Palette erscheint neben Stilen mit Rollover-Sequenz ein Dreieck. Durch Klick zeigen Sie alle Rollover-States an.

Abbildung 4.64:  Sie können Ebenenstile samt Veränderung über mehrere Rollover-Zustände hinweg in der Stile-Palette speichern. Stile mit Rollover-Effekt erscheinen in der Stile-Palette mit einem Dreieck links über der Miniatur.

Ebenenstile mit Rollover-Sequenz anwenden

Einfach wenden Sie Rollover-Stile aus der Stile-Palette auf vorhandene Ebenen an:

1. Erstellen Sie eine Ebene oder aktivieren Sie eine Ebene auf der Ebenenpalette.
2. Klicken Sie in der Stile-Palette auf einen der Stile mit Dreieck in der linken oberen Ecke.

Damit ist der Rollover-Effekt bereits fertig. ImageReady erzeugt für die bearbeitete Ebene automatisch ein ebenenbasiertes Slice (vergleiche Seite 323). Sie können den Effekt mit der Schaltfläche Rollover-Vorschau  testen.

Photoshop liefert bereits in der Grundeinstellung der Stile-Palette einige Stile für Rollover-Sequenzen mit. Weitere Bibliotheken mit Rollover-Stilen können Sie über das Palettenmenü laden, zum Beispiel Glas-Schaltflächen-Rollover. Einige dieser Rollover-Stile unterstützen nur zwei Rollover-Zustände. Sie können natürlich wie beschrieben weitere Zustände ergänzen.

4.5 Seitenhintergrund

Die meisten WWW-Seiten im Internet stehen nicht einfach auf weißem Hintergrund. Statt dessen planen die Gestalter eine Hintergrundfarbe oder ein Hintergrundmuster ein. In diesem Abschnitt geht es darum,

  • wie Sie Hintergrundmuster erzeugen,
  • wie Sie Hintergrundfarben und Hintergrundmuster in HTML-Dokumente einbauen, die Sie mit ImageReady produzieren,
  • wie Sie die Hintergrundmuster für beliebige andere Dateien mit in die Browser-Vorschau übernehmen.

Abbildung 4.65:  Eine nahtlos kombinierbare Hintergrund-»Kachel« füllt die gesamte Fläche des Browsers in beliebigen Dimensionen aus. Die Ränder der Einzelbilder wurden zuvor in die Kachel überblendet. Datei: Kachel_Wasser

4.5.1 Einführung: Nahtlose Hintergrundkacheln

Häufig sehen Sie als Hintergrund einer World-Wide-Webseite eine Struktur - ein diffuses Muster oder auch das wiederkehrende Logo des Anbieters. Dabei handelt es sich meist um eine einzelne, kleine Bilddatei. Sie wird nur einmal übertragen und auf der Internet-Seite automatisch so oft wiederholt, bis das Programmfenster ausgefüllt ist. Man nennt dieses Hintergrundbild oft »Kachel« oder englisch »Tile«.

Dabei kommt es auf die Kanten der Hintergrundkachel an: Die Ränder müssen so beschaffen sein, dass sich das Bild tatsächlich an allen Seiten nahtlos aneinander setzen lässt - die Kachelstruktur soll nicht unschön hervortreten, die Fugen sollen unauffällig bleiben. Photoshop und ImageReady bieten verschiedene Wege, um solche Hintergrundmotive zu erstellen.

Achten Sie generell darauf, unauffällige Hintergründe zu erzeugen, die bei der Lektüre Ihrer Internet-Inhalte nicht zu sehr nerven. Dazu können Sie die vorhandenen Vorlagen oft drastisch aufhellen, abdunkeln oder weichzeichnen. Beispiele zum Thema Absoften finden Sie im Kapitel »Kontrast und Farbton« ab Seite 496. Jeweils ab Version 4.0 akzeptieren die Internet-Browser Netscape Navigator und Internet Explorer auch animierte Hintergrundbilder. Fertige Nahtlos-Kacheln finden Sie auf den folgenden Seiten: 

http://www.textures.de/textures/

Abbildung 4.66:  Links: Ein Bild bereich wird hier mit dem Auswahlrechteck markiert. Wir verwenden dann den Befehl »Bearbeiten: Muster definieren«.  Rechts: Dieses Muster nutzen wir mit dem Befehl »Bearbeiten: Füllen« ohne weitere Bearbeitung als Hintergrundmuster einer neuen, größeren Datei. Beim vielfachen Aneinandersetzen des Bild teils treten die Kanten deutlich hervor. Datei: Familie

4.5.2 »Kacheln erstellen«

ImageReady - nicht Photoshop - enthält den Befehl Kacheln erstellen; auf Kommando entsteht fast automatisch ein Bildelement mit nahtlos kombinierbaren Rändern. Der Ablauf im Überblick:

1. Wählen Sie mit dem Auswahlrechteck  einen Bildbereich, der als Hintergrundkachel dienen soll. Prinzipiell können Sie auch andere Auswahlwerkzeuge verwenden, die Ergebnisse lassen sich jedoch kaum nahtlos aneinander setzen.
2. Verwenden Sie den ImageReady-Befehl Filter: Sonstige Filter: Kacheln erstellen. Es gibt keinerlei Vorschau.
3. Wenn Sie alle Vorgaben gemacht haben, klicken Sie auf OK. Nun sehen Sie innerhalb der Auswahl das Ergebnis, eine einzelne Hintergrundkachel mit verwischtem Rand.

Abbildung 4.67:  Wir bearbeiten die Auswahl mit dem ImageReady-Befehl »Filter: Sonstige Filter: Kacheln erstellen«. Wir verwischen die Kanten mit einer Breite von zehn Prozent und verwenden die Option »Kacheln in Vollbildgröße«. Nun treten bei Aneinanderreihung die Nähte nicht mehr hervor, allerdings wirkt das Gesamtergebnis etwas unschärfer. Ergebnis Einzelkachel: Kachel-Filter

Abbildung 4.68:  Links: Hier haben wir den Befehl »Kacheln erstellen« mit einem »Verwischen«-Wert von 20 verwendet; dabei verschwimmt das Ergebnis noch stärker.  Rechts: Die Option »Kaleidoskop-Kachel« erzeugt ein abstraktes Muster.

Optionen des Befehls »Kacheln erstellen«

Folgende Optionen bietet der Befehl Kacheln erstellen:

  • Unter Kanten verwischen geben Sie an, wie stark die Bildränder verwischt werden sollen. Meist beschränkt man sich auf zehn bis 15 Prozent. Dabei verwischt allerdings auch das Gesamtergebnis - je höher der Wert, desto stärker.
  • Mit der Option Kachel in Vollbildgrösse füllt die verwischte Kachel den ausgewählten Bereich voll aus. Dabei vergrößert ImageReady das Innere Ihrer Auswahl etwas und durch dieses Hoch-Interpolieren kommt es gerade bei kleinen Vorlagen zu unschöner Unschärfe - auch in Zonen, die eigentlich nicht verwischt werden müssten. Wenn Sie die Option jedoch ausschalten, ist das Ergebnis um denjenigen Betrag kleiner, den Sie unter »Breite« eingeben (Details siehe unten).
  • Der Rand der Auswahl wird transparent gefüllt. Vermeiden Sie die Option, wenn Unschärfe Ihrem Motiv schadet, zum Beispiel bei klaren Strukturen.
  • Per Kaleidoskop-Kachel wird die Auswahl horizontal und vertikal gespiegelt und dupliziert. So entsteht ein abstrakteres Muster.

Ergebnis nach Verwendung der Option »Vollbildgröße« speichern

Haben Sie die Auswahl zur Kachel umgerechnet, müssen Sie dieses Ergebnis noch in einer Einzeldatei ablegen. Sofern Sie die Option Kachel in Vollbildgrösse verwendet haben und sich die Auswahl noch im Bild befindet, eignen sich diese Verfahren:

  • Wählen Sie Bild: Freistellen mit der Option Löschen; dabei kappt ImageReady den Bildrand.
  • Oder kopieren Sie die Auswahl mit Strg+C in die Zwischenablage und wählen Sie Datei: Neu. Dabei schlägt ImageReady Bildmaße vor, die genau zu dem kopierten Bereich passen. Bestätigen Sie also die vorgeschlagenen Werte mit OK und fügen Sie den kopierten Bereich mit Strg+C ein.

Prüfen Sie jeweils in der 2fach- oder 4fach-Vorschau verschiedene Vorgaben für JPG- und GIF-Dateiformat, markieren Sie die gewünschte Variante und nutzen Sie den Befehl Datei: Optimiert-Version speichern unter.

Abbildung 4.69:  Links: Wir markieren einen Bereich, der als »Muster« definiert werden soll, mit dem Auswahlrechteck. Mitte: Hier haben wir den Befehl »Kacheln erstellen« mit der Option »Vollbildgröße« angewendet; die Auswahl wird voll ausgefüllt, doch es kommt zu Unschärfe durch Skalieren.  Rechts: Auf die Option »Vollbildgröße« haben wir verzichtet; die Bild qualität bleibt im Innern voll erhalten, allerdings wird Rand entfernt.

Vorgehen ohne die Option »Vollbildgröße«

Die besseren Ergebnisse entstehen oft, wenn Sie die Vollbildgrösse abwählen. Erstellen Sie Ihre Kachel in einer Auswahl auf einer üblichen »Hintergrund«-Ebene, produziert ImageReady einen transparenten Rand um die Kachel herum, der beim Speichern als Einzelkacheldatei zunächst lästig ist. So kappen Sie den kompletten Bildrand um die Kachel herum:

1. Aktivieren Sie das Freistellwerkzeug  .
2. Rahmen Sie die Kachel mit etwas transparenter Fläche drumherum ein.
3. Klicken Sie doppelt in den Rahmen, um den Außenbereich wegzukappen.
4. Wählen Sie nun den Befehl Bild: Zuschneiden mit folgenden Optionen: Sie verwenden Transparente Pixel und beschneiden das Bild an allen vier Seiten. Klicken Sie auf OK.

Dieses Verfahren hinterlässt eine sauber ausgeschnittene Kachel. Alternativ gehen Sie so vor:

1. Markieren Sie wie üblich mit dem Auswahlrechteck  den Bildbereich, der als Kachel dienen soll.
2. Heben Sie diesen Bereich mit Strg+J auf eine eigene Ebene.
3. Weil dadurch die Auswahlinformation verloren geht, müssen Sie die Auswahl neu laden: Dazu klicken Sie bei gedrückter Strg-Taste auf die Miniatur der neuen Ebene in der Ebenenpalette.
4. Wenn die Auswahl im Bild ist, wenden Sie den Befehl Kacheln erstellen an. Bei Verzicht auf die Vollbildgrösse entsteht nun kein weißer, sondern ein transparenter Rand.
5. Ziehen Sie nun die untere, bildfüllende Ebene in den Mülleimer der Ebenenpalette oder blenden Sie diese mit dem Augensymbol  aus.
6. Wählen Sie in ImageReady den Befehl Bild: Zuschneiden mit der Option Transparente Pixel (Seite 199). Dadurch fällt der gesamte transparente Bereich weg.

Abbildung 4.70:  Diese Vorlage wird mit dem Befehl »Filter: Sonstige Filter: Verschiebungseffekt« in ImageReady bearbeitet. Datei: Wasser

4.5.3 »Verschiebungseffekt« mit Kantenglättung von Hand

Eine weitere Möglichkeit bietet der Befehl Filter: Sonstige Filter: Verschiebungseffekt. Im Endeffekt erhalten Sie dabei nahtlos kombinierbare Bildränder, allerdings - je nach Vorlage - Nähte im Innern der Kachel. Zunächst entsteht keinerlei Unschärfe oder »Verwischen«, wie es zu dem Filter Kacheln erstellen gehört. Die Nähte im Innern müssen Sie jedoch noch irgendwie glätten oder retuschieren, zum Beispiel mit dem Kopierstempel  (Details ab Seite 572) oder Wischfinger  (Seite 569) bei weicher Werkzeugspitzenkante.

Wir betrachten hier die spezielle ImageReady-Variante des Filters Verschiebungseffekt. Das Prinzip, sofern Sie die werkseitigen Vorgaben nicht ändern:

  • Das rechte untere Bildviertel tauscht den Platz mit dem Viertel von links oben,
  • ebenso wechseln die Viertel von rechts oben und links unten ihre Position.

Denselben Befehl Verschiebungseffekt finden Sie auch bei Photoshop; das Dialogfeld dort bietet allerdings keine Prozent-, sondern nur Pixeleinheiten. Verwenden Sie bei Photoshops Verschiebungseffekt die Option Durch verschobenen Bereich ersetzen, um die hier geschilderte Wirkung zu erzielen.

Abbildung 4.71:  Links: Nach Anwendung des »Verschiebungseffekts« erhält man nahtlos kombinierbare Auswahlränder, aber Nahtstellen im Innern der Kachel.  Rechts: Die harten Kanten werden hier mit dem Stempel bei weicher Werkzeugspitzenkante retuschiert.

4.5.4 Nahtlose Kacheln mit dem Befehl »Wolken«

Der Befehl Filter: Rendering-Filter: Wolken errechnet ein luftiges Gewebe aus der jeweils aktuellen Hintergrund- und Vordergrundfarbe; es eignet sich gut für Seitenhintergründe. In der Regel erzeugt man erst eine Datei mit Wolkenmuster; dann wendet man den Filter Kacheln erstellen oder ein anderes Verfahren an, um nahtlos kombinierbare Ränder zu erhalten. Verwendet man allerdings Bilddateien mit 128x128 Pixeln Größe oder einem Vielfachen davon, entstehen mit dem Wolken-Filter sofort nahtlose Kacheln.

Sie können das Wolken-Ergebnis problemlos nach Bedarf umfärben. Dazu verwenden Sie den Farbton-Regler des Befehls Bild: Einstellen: Farbton/ Sättigung (Strg+U, Details ab Seite 488). Zeigt Ihr Wolkenmuster keine Farben, sondern nur Grautöne, klicken Sie in diesem Dialogfeld zusätzlich die Option Färben an.

Abbildung 4.72:  Links: Diese Datei misst 230x230 Bild punkte. Sie wird mit dem »Wolken«-Filter gefüllt.  Rechts: Verwendet man diese Struktur jedoch als Hintergrundmuster, treten deutliche Nahtstellen hervor. Datei: Wolken_230

Abbildung 4.73:  Links: Diese Datei wurde ebenfalls mit dem »Wolken«-Filter gefüllt, sie misst jedoch 256x256 Bild punkte.  Rechts: Das Ergebnis lässt sich vielfach nahtlos aneinander setzen. Datei: Wolken_256

Abbildung 4.74:  Links: Hier wurde die Datei »Wolken_256« noch mit dem Befehl »Filter: Strukturierungsfilter: Mit Struktur versehen« bearbeitet. Häufig lässt sich das Ergebnis sofort als nahtlose Hintergrundkachel weiterverwenden. Datei: Wolken_256str

4.5.5 Aktives Bild als Seitenhintergrund speichern

Sie können Ihre fertige Hintergrundkachel in ImageReady mit einem HTML-Code speichern, der diese Datei als Hintergrund definiert. So geht's:

1. Zeigen Sie die Kacheldatei in einer »Optimiert«-Vorschau an (also nicht als »Original«) und richten Sie die gewünschten Dateivorgaben in der Optimieren-Palette ein. Für fein abgestufte Hintergründe voller Halbtöne empfiehlt sich das JPG-Format.
2. Wählen Sie Datei: Ausgabe-Einstellungen: Hintergrund.
3. Im Klappmenü Einstellungen gehen Sie auf Hintergrundbild und im Bereich Ansicht unter schalten Sie ebenfalls den Hintergrund ein.
4. Nun sichern Sie das Bild mit dem Befehl Optimiert-Version speichern unter. Verwenden Sie dabei im Klappmenü Dateityp die Vorgabe HTML und Bilder (*.html); damit erhalten Sie HTML-Code, der Ihr Bild als Hintergrundkachel ausweist.

Die Hintergrundkachel lässt sich mühelos auch von Hand in eine HTML-Seite einpflegen, Sie müssen nicht erst ImageReady bemühen. Dabei verwenden Sie die Vorgabe »Background« im »Body«-Tag. Eine entsprechende Zeile, die in diesem Beispiel auch Hintergrundfarben, Textfarben und Farben für Hyperlinks ausweist, sieht so aus: 

<BODY bgcolor="#FFFFFF" background="IHREKACHELDATEI.JPG" text="#000000" link="#FF0000" 
vlink="#8C2430" alink="#D98DA1" >

Abbildung 4.75:  Wählen Sie den Befehl »Datei: Ausgabe-Einstellungen: Hintergrundbild« mit der Option »Hintergrund«. Durch diese Vorgabe können Sie das Bild mit HTML-Code speichern, der es als Hintergrundkachel definiert, und Sie stellen es aus ImageReady heraus als Hintergrundbild in einem Internet-Browser dar. Zusätzlich geben Sie eine Farbe an, die während des Ladens der Hintergrunddatei sowie in transparenten Bereichen erscheint.

Hintergrundfarbe

Sie können im Dialogfeld eine Farbfläche angeben, die während des Ladens des Hintergrundbilds erscheint oder durch transparente Bereiche des Hintergrundbilds sichtbar wird, klicken Sie auf das Feld Farbe. Damit erscheint der Farbwähler. Alternativ klicken Sie auf das Dreieck neben dem Feld Farbe; hier gibt es weitere Angebote in Menüstruktur, so etwa Vordergrundfarbe und Hintergrundfarbe. Klicken Sie auf OK.

Als Vielfach-Hintergrund im Browser anzeigen

Nach Verwendung des Befehls HTML-Hintergrund mit der Option Hintergrund lässt sich das Bild vielfach gekachelt in einem Internet-Browser testen. Diese Browser-Ansicht erzeugen Sie mit dem Untermenü Datei: Vorschau in oder mit der Schaltfläche für den Standardbrowser in der Werkzeugleiste (Strg+Alt+P).

Vielfach-Hintergrund in ImageReady oder Photoshop testen

Sie können die Wirkung der Hintergrundkachel auch innerhalb von ImageReady oder Photoshop prüfen. So geht's:

1. Markieren Sie den gewünschten Bildbereich, am besten mit einer Rechteckauswahl ohne weiche Kanten.
2. Wählen Sie in ImageReady Bearbeiten: Muster definieren. (In Photoshop heißt es Bearbeiten: Muster festlegen, Photoshop nimmt das Muster hier auch als Vorgabe auf.)
3. Öffnen oder erstellen Sie eine Datei, die deutlich mehr Bildpunkte breit mal hoch hat als Ihr Muster.
4. Wählen Sie den Befehl Bearbeiten: Fläche füllen (Umschalt+Rückschritt-Taste). Im Klappmenü Füllen mit schalten Sie auf Muster. In Photoshop wählen Sie zusätzlich das gewünschte Muster aus den »Vorgaben«.
5. Sobald Sie auf OK klicken, erscheint das Muster vielfach wiederholt in der Datei.

Sie können das Muster auch als Ebeneneffekt für eine vorhandene Ebene anwenden (Seite 795) oder als Musterfüllung in eine Füllebene einsetzen (Seite 817).

Besonders bei fein strukturierten Mustern sollten Sie die Wirkung unbedingt in der Zoomstufe 100 Prozent prüfen. Alle verkleinernden Zoomstufen verzerren Ihr Bild deutlich (Details ab Seite 69). Die 100-Prozent-Ansicht richten Sie mit Strg+Alt+0 oder mit einem Doppelklick auf die Lupe  in der Werkzeugleiste ein.

Abbildung 4.76:  Sobald Sie den Befehl »HTML-Hintergrund« mit der Option »Hintergrund« gewählt haben, können Sie mit dem Befehl »Datei: Vorschau in« testen, wie das Bild vielfach wiederholt als Hintergrund in einem Internet-Browser wirkt. Zusätzlich blendet ImageReady die Eigenschaften der Hintergrunddatei und den HTML-Code ein.

4.5.6 Hauptmotiv mit Hintergrundkachel kombinieren

Sie können die Hintergrundkachel in Verbindung mit einem Vordergrundmotiv testen oder in den HTML-Code aufnehmen. So geht's:

1. Sie aktivieren das geplante Hauptbild in ImageReady durch einen Klick auf die Titelleiste.
2. Sie wählen den Befehl Datei: Ausgabe-Einstellungen: Hintergrund.
3. Sie nehmen im Dialogfeld die Vorgabe Ansicht unter: Bild und geben
4. nach einem Klick auf Wählen die gewünschte Hintergrunddatei an - in den Formaten GIF, JPG oder PNG. Zusätzlich wählen Sie nach einem Klick auf Farbe die gewünschte Hintergrundfarbe. Diese Farbe erscheint während des Ladens der Hintergrunddatei sowie in transparenten Bereichen.
5. Klicken Sie auf OK.

Hauptmotiv plus Hintergrund prüfen Sie nun via Datei: Vorschau in oder mit der Schaltfläche Standard-Browser (Stg+Alt+P) im Internet-Betrachter. Sichern Sie das Hauptmotiv neu mit dem Befehl Optimiert-Version speichern, schreibt ImageReady die Information über die Hintergrundkachel mit in den HTML-Code.

Von Haus aus erzeugt ImageReady dabei auch eine Kopie der Hintergrundkachel im selben Verzeichnis wie die Hauptdatei. Sie können dies jedoch abwählen - dann wird die Originaldatei am von Ihnen festgelegten Ort verwendet; diese Lösung ist allerdings weniger übersichtlich. Rufen Sie bei Bedarf in ImageReady den Befehl Datei: Ausgabe-Einstellungen: Dateien speichern und schalten Sie die Option Hintergrundbild beim Speichern kopieren ab.

Abbildung 4.77:  Der animierte Schriftzug »Sunny_4« wurde hier mit dem Hintergrundmotiv »Wolken_256str.jpg« kombiniert. Dazu haben wir die Schriftdatei aktiviert, dann wurde der Befehl »Datei: Ausgabe-Einstellungen: Hintergrund« mit der Option »Bild « gewählt; dort haben wir die gewünschte Hintergrunddatei angegeben. Dateien: Sunny_5; HTML-Ergebnis im Verzeichnis Sunny_5

Photoshop-Datei mit Hintergrundinformation

Nachdem Sie die Hintergrundkachel mit dem Befehl Hintergrund als Hintergrundmotiv gespeichert haben, können Sie das Hauptmotiv erneut als Photoshop-Datei sichern. Auch in dieser Datei bleibt die Information über das Hintergrundmotiv erhalten. Prüfen Sie die Datei mit dem Befehl Vorschau in in einem Browser, erscheint auch die Hintergrundkachel - in ImageReady jedoch sieht man sie nicht. Das funktioniert freilich nur so lange, wie Sie die Hintergrundkachel nicht vom Platz entfernen oder umbenennen. Waren beide Teilnehmer im selben Verzeichnis, können Sie diese auch gemeinsam verschieben, ohne dass die Verbindung verloren geht.

4.6 Imagemaps

Mit ImageMaps und mit Slices teilen Sie ein Bild in einzelne Abschnitte auf. Jeder Abschnitt gilt als »aktive Zone«. Eine jede Zone kann individuelle Hyperlinks aufweisen, also Sprungmarken zu anderen Internet-Seiten oder allgemeiner zu anderen Dateien. Der wesentliche Unterschied:

  • ImageMaps bestehen trotz ihrer verschiedenen Zonen nur aus einer Bilddatei plus HTML-Code.
  • Slices bestehen aus mehreren Bilddateien plus HTML-Code.

In diesem Hauptabschnitt vergleichen wir Slices und Imagemaps, anschließend besprechen wir Imagemaps. Der folgende Hauptabschnitt gilt den Slices.

4.6.1 Übersicht: Die Möglichkeiten mit Imagemaps und Slices

Ein typisches Beispiel für »aktive Zonen« per Imagemap ist die Weltkarte auf der Internet-Seite eines Reiseunternehmers: Klicken Sie ein Land an, erscheinen Informationen zu diesem Land. Sie hantieren mit einer einzelnen Bilddatei plus HTML-Code.

Wenn Sie dieses Seitenelement nicht als Imagemap, sondern aus Slices aufbauen, können sich die aktiven Zonen per Rollover-Effekt verändern, sobald der Mauszeiger naht, oder Sie können Animationen einfügen. Überdies können Sie für einzelne Segmente komplett auf ein Bildsegment verzichten und dort Text einsetzen oder schlicht den Hintergrund durchscheinen lassen. Allerdings sind bei Slices nur noch rechteckige Zonen möglich; Sie hantieren mit mehreren Bilddateien plus HTML-Code. Die folgende Tabelle listet die Unterschiede auf.

Imagemaps Slices
Rechteckige aktive Zonen J J
Frei geformte aktive Zonen J -
Maße der aktiven Zone von Ebenenmaßen abhängig machen J J
Aufteilung des Bildes in Einzeldateien - J
Einbau von Rollover-Effekten - J
Einbau von Animationen - J
Individuell optimierte Speicherung von Einzelbereichen - J
Verzicht auf Pixeldaten für Einzelbereiche - J

4.6.2 Imagemaps anlegen und anzeigen

Generell legen Sie die »aktiven Zonen« einer Imagemap in ImageReady nach zwei Methoden an:

  • Sie zeichnen die Umrisse mit einem Imagemap-Werkzeug - die so genannte werkzeugbasierte Imagemap.
  • Sie leiten die Umrisse der aktiven Zone von einer Ebene ab - eine ebenenbasierte Imagemap.

Wenn Sie eine Imagemap in ImageReady von Hand anlegen möchten, wählen Sie zunächst das Werkzeug: Alle Imagemap-Werkzeuge lassen sich mit Kurztaste P einschalten, den Wechsel zwischen verschiedenen Imagemap-Werkzeugen bewerkstelligen Sie mit Umschalt+P.

Abbildung 4.78:  Mit den Imagemap-Werkzeugen in ImageReady erzeugen Sie »aktive Zonen«. Klicken Sie nach dem Öffnen des Werkzeug-Menüs ganz unten auf das Dreieck, um eine separate, dauerhaft sichtbare Werkzeugleiste nur für die Imagemap-Funktionen zu erhalten. Diese Möglichkeit gibt es auch für die Slice-Werkzeuge. Sie können ein Imagemap-Werkzeug auch mit der Taste P aktivieren, Umschalt+P wechselt zwischen den Imagemap-Funktionen.

»Kreisförmige Imagemap«, »Rechteckige Imagemap«

 

So arbeiten Sie mit den Werkzeugen »Kreisförmige Imagemap«  oder »Rechteckige Imagemap« : Ziehen Sie einen Auswahlrahmen um den gewünschten Bildteil. Dabei haben Sie folgende Optionen:

  • Wie auch bei anderen Werkzeugen gilt: Die gedrückte Umschalt-Taste erzeugt ein seitengenaues Quadrat.
  • Bei gedrückter Alt-Taste ziehen Sie die Auswahl von der Mitte her auf.
  • Aktivieren Sie bei Bedarf die Feste Grösse in den Werkzeugoptionen. Nun können Sie einen Radius beziehungsweise Breite mal Höhe in Pixeln fest vorgeben.

Abbildung 4.79:  Diese »aktiven Zonen« haben wir mit verschiedenen Imagemap-Werkzeugen festgelegt, da sich im Bild keine Ebenen befanden. Für jede Imagemap vergeben Sie eine URL (eine eindeutige Dateiadresse) und bei Bedarf einen Einblendtext im Feld »Alt«. Vorlage: Alaska_2

»Polygonförmige Imagemap«

Mit dem Werkzeug »Polygonförmige Imagemap«   klicken Sie beliebig viele Eckpunkte ins Bild, die ImageReady durch Geraden verbindet. Ein Doppelklick schließt den Rahmen. Per Umschalt-Taste sorgen Sie für 45-Grad-Winkel.

Abbildung 4.80:  Links: Auf diese Textebene haben wir den Befehl »Ebene: Neuer ebenenbasierter Imagemap-Bereich« angewendet. ImageReady erzeugt rechteckige aktive Zonen exakt um die Buchstaben herum, zwischen den Buchstaben kommt es zu Lücken.  Mitte: In der Imagemap-Palette haben wir die Vorgabe »Polygon« verwendet. Es entstehen zunächst Zonen mit wenigen Eckpunkten, die den Ebenenumrissen nicht sehr genau folgen.  Rechts: Der Wert für »Qualität« bei der Vorgabe »Polygon« wurde auf den Höchstwert 100 gesetzt; ImageReady erzeugt mehr Eckpunkte und genauere aktive Zonen.

Imagemaps aus Ebenen ableiten

Sie können Imagemaps auch aus Ebenen ableiten. Verändern Sie die Ebenengröße, ändert sich auch die Imagemap. So geht's:

1. Aktivieren Sie die gewünschte Ebene in der Ebenenpalette.
2. Wählen Sie den Befehl Ebene: Neuer ebenenbasierter Imagemap-Bereich.

Der Befehl erzeugt ohne jedes Dialogfeld eine rechteckige Imagemap um die Außengrenzen des Objekts herum - der aktive Bereich ragt damit über die Zonen einer unregelmäßig geformten Ebene hinaus.

Vorsicht: Der Befehl Neuer ebenenbasierter Imagemap-Bereich legt die Grenzen der Imagemap akkurat um den mit Pixeln gefüllten Bereich einer Ebene. Das heißt zum Beispiel für Textebenen: Zwischen den Buchstaben entstehen eventuell Lücken in der aktiven Zone. Sie können die Zone beispielsweise so ausdehnen: Legen Sie den Ebeneneffekt Kontur in beliebiger Farbe an; verwenden Sie die Option Aussen und null Prozent Deckkraft, experimentieren Sie dann mit verschiedenen Werten für Grösse. Durch den Ebeneneffekt Kontur wird Ihr Objekt breiter, entsprechend vergrößert sich auch der Imagemap-Bereich. Weil Sie die Deckkraft auf 0 setzen, ist gleichwohl von der Kontur nichts zu sehen. Je nach Form eignen sich auch die Effekte Schein nach aussen oder Schlagschatten.

Ebenenbasierte Imagemaps umformen

Wenn Sie ebenenbasierte Imagemaps erzeugen, produziert ImageReady zunächst rechteckige Bereiche. Sie können jedoch die Form verändern und besser an die Ebene anpassen: Wählen Sie in der Imagemap-Palette im Bereich Form den Kreis oder das Polygon. Das Polygon legt sich mehr oder weniger präzise um die Ebenenumrisse. Sie haben hier noch die Option Qualität: Je höher der Wert, desto mehr Eckpunkte erzeugt ImageReady, desto genauer folgen die Konturen der Imagemap dem Ebeneninhalt.

Die Imagemap-Palette erreichen Sie über das Fenster-Menü oder über die Schaltfläche Imagemap-Palette in den Optionen zum Imagemap-Auswahlwerkzeug  (siehe Abbildung 4.81).

Abbildung 4.81:  Die Imagemap-Zonen in dieser Montage entstanden mit dem Befehl »Ebene: Neuer ebenenbasierter Imagemap-Bereich« - jedes Textobjekt definiert den aktiven Imagemap-Bereich. Der URL-Eintrag aus der Imagemap-Palette erscheint auch beim jeweiligen Ebenenobjekt in der Ebenenpalette.

Ebenenbasierte Imagemaps umwandeln

Möchten Sie die Grenzen der Imagemap doch unabhängig von den Ebenenmaßen regeln? Sie können Imagemap und Ebene entkoppeln: Öffnen Sie mit dem Dreieck  das Menü zur Imagemap-Palette und wählen Sie den Befehl Ebenenbasierten Imagemap-Bereich umwandeln. Nun legen Sie die Dimensionen für Ebene und Imagemap gänzlich unabhängig voneinander fest - als ob Sie die Imagemap von Anfang an mit den Imagemap-Werkzeugen ins Bild gesetzt hätten (siehe Abbildung 4.82).

Abbildung 4.82:  Dieses Ergebnis wurde mit dem Befehl »Datei: Optimiert-Version speichern« gesichert. Achten Sie im Klappmenü »Dateityp« auf die Vorgabe »HTML und Bild er (*.html)«. Bei diesem Verfahren entsteht eine HMTL- und eine Bild datei. Die Bild datei hat das Dateiformat, das Sie in der Optimieren-Palette angeben. Wenn Sie die entstehende HTML-Datei in einen Internet-Betrachter ziehen, erkennen Sie die Wirkung der »aktiven Zone«: Jeweils innerhalb der gesamten Zone erscheint die Einblenderklärung aus dem Feld »Alt« in der Imagemap-Palette; die verknüpfte Internet-Adresse sehen Sie in der Statuszeile. ImageReady-Ergebnis: Alaska_3.psd; HTML-Ergebnis: im Unterverzeichnis Alaska

Imagemaps anzeigen

In der Werkzeugleiste bietet ImageReady die Schaltfläche Imagemaps einblenden/ausblenden . Der Modus wird automatisch aktiviert, sobald Sie zu einem Imagemap-Werkzeug greifen. Wollen Sie jedoch die Imagemap-Verteilung unabhängig von diesen Werkzeugen sichten, klicken Sie diese Schaltfläche an. Alternativ drücken Sie das A auf der Tastatur, wählen Sie Ansicht: Einblenden: Imagemaps oder Ansicht: Extras einblenden (Details zu »Extras« ab Seite 79).

Mit dem Befehl Bearbeiten: Voreinstellungen: Imagemaps legen Sie fest, in welcher Farbe ImageReady die Imagemap-Konturen darstellt und ob die aktiven Zonen farblich abgedimmt erscheinen; dies gilt wohlgemerkt nur für die Betrachtung in ImageReady, die dämpfende Wirkung erscheint nicht auf der Internet-Seite. Kreisförmige Imagemaps können Sie per Werkzeugoptionen von einem rechteckigen Begrenzungsrahmen einfassen lassen.

Abbildung 4.83:  Mit dem Befehl »Bearbeiten: Voreinstellungen: Imagemaps« legen Sie fest, wie ImageReady die aktiven Zonen der Imagemaps darstellt.

Imagemaps umformen

Klicken und ziehen Sie an einem der Anfasspunkte einer Imagemap mit dem Imagemap-Auswahlwerkzeug , um die Proportionen einer Imagemap zu ändern, die Sie mit einem Imagemap-Werkzeug produziert haben. Auch mit der Imagemap-Palette können Sie die aktiven Zonen umformen: Bei Rechtecken tippen Sie neue Werte für Breite (B) oder Höhe (H) ein, bei Kreisen definieren Sie den Radius (R).

Imagemaps, die mit dem Befehl Ebene: Neuer ebenenbasierter Imagemap-Bereich entstanden, können Sie nur begrenzt unabhängig vom gegebenen Objekt verändern (siehe oben).

4.6.3 Imagemaps auswählen und organisieren

Mit dem Imagemap-Auswahlwerkzeug  klicken Sie in die Imagemap, die Sie bearbeiten wollen. Per Umschalt-Taste nehmen Sie weitere Zonen hinzu.

Imagemaps bewegen

Wollen Sie Imagemaps bewegen oder umformen? Vielseitige Möglichkeiten bieten nur jene Imagemaps, die Sie mit den Imagemap-Werkzeugen von Hand ins Bild gesetzt haben. Ebenenbasierte Imagemaps verändern sich dagegen nur, sobald Sie die entsprechende Ebene bearbeiten. Imagemaps, die Sie per Imagemap-Werkzeug erstellt haben, lassen sich mit dem Imagemap-Auswahlwerkzeug  verschieben.

Rechteckige und kreisförmige Imagemaps lassen sich auch über Koordinateneingabe in der Imagemap-Palette platzieren und formen. Dabei gilt:

  • X benennt für rechteckige Imagemaps den Pixelabstand zum Nullpunkt des horizontalen Lineals. Bei kreisförmigen Imagemaps nennt der X-Wert den Abstand des Kreismittelpunkts zum Nullpunkt des horizontalen Lineals.
  • Y gibt entsprechend den Abstand zum Nullpunkt des vertikalen Lineals an.

In den meisten Fällen liegt der Lineal-Nullpunkt in der linken oberen Ecke des Bildes. Sie können ihn jedoch verschieben. Die Imagemaps orientieren sich am aktuellen Nullpunkt; verschieben Sie den Nullpunkt nach Einfügen einer Imagemap, erscheinen in der Imagemap-Palette neue X- und Y-Werte. Details zu den Linealen lesen Sie ab Seite 78.

Die Begrenzungslinien der Imagemaps sind in komplexen Montagen eventuell schwer erkennbar. Blenden Sie einfach sämtliche Ebenen mit dem Augensymbol in der Ebenenpalette aus, um die Imagemaps erkennen zu können. Natürlich müssen Sie die Sichtbarkeit von Imagemaps generell eingeschaltet haben, zum Beispiel mit der Schaltfläche Imagemaps einblenden/ausblenden und mit dem Befehl Ansicht: Extras einblenden (siehe oben).

Imagemaps duplizieren und löschen

Um Imagemaps zu duplizieren, markieren Sie diese zunächst mit dem Imagemap-Auswahl-werkzeug  . Anschließend ziehen Sie bei gedrückter Alt-Taste; alternativ verwenden Sie den Befehl Imagemap-Bereich duplizieren aus dem Menü zur Imagemap-Palette.

Drücken Sie die Entfernen- oder Rückschritt-Taste, um eine ausgewählte Imagemap zu löschen.

Priorität der Imagemaps

Überlappen sich zwei Imagemaps, hat im Schnittbereich der beiden aktiven Zonen nur die obere Imagemap Geltung. Als »obere« Imagemap gilt jeweils die zuletzt erzeugte. Sie können die Rangfolge jedoch ändern. Zunächst aktivieren Sie eine Imagemap mit dem Imagemap-Auswahlwerkzeug. Dann wählen Sie aus der Imagemap-Palette einen der Befehle wie Nach vorne bringen oder Schrittweise vorwärts; alternativ nutzen Sie die Schaltflächen rechts in der Optionenleiste zum Imagemap-Auswahlwerkzeug.

Abbildung 4.84:  Mit den Schaltflächen in den Optionen zum Imagemap-Auswahlwerkzeug können Sie ausgewählte Imagemap-Bereiche gleichmäßig verteilen.

Imagemaps gleichmäßig anordnen

ImageReady ordnet werkzeugbasierte, aber nicht ebenenbasierte Imagemap-Zonen auf Wunsch automatisch gleichmäßig an; dabei orientiert sich das Programm nach Bedarf an den Bildrändern (Ausrichten) oder es verteilt die Zonen gleichmäßig entlang einer Achse (Verteilen). Die entsprechenden Imagemap-Regionen markieren Sie zunächst bei gedrückter Umschalt-Taste mit dem Imagemap-Auswahlwerkzeug  , dann verwenden Sie die Schaltflächen aus den Optionen zum Imagemap-Auswahlwerkzeug; alternativ nutzen Sie die Befehle aus dem Menü zur Imagemap-Palette. Wir besprechen diese Funktionen ausführlich im Zusammenhang mit der gleichmäßigen Verteilung von Ebenen ab Seite 742.

Alternativ-Text, Ziel und URL

In der Imagemap-Palette tippen Sie eine URL (die Adresse einer anderen Internet-Seite oder allgemeiner einer anderen Datei), Alternativ-Text und ein Ziel für Seiten mit Frames ein. Wir besprechen diese Funktionen ausführlich im Abschnitt »HTML-Optionen für Slices und Imagemaps« ab Seite Bild Bild 333.

»Client-Side« oder »Server-Side«

Generell unterscheidet man zwei Typen von Imagemaps, beide lassen sich mit ImageReady erzeugen:

  • »Server-seitige« Imagemaps gab es zuerst. Der Internet-Server ist hier für die Verarbeitung der Koordinaten des Mausklicks zuständig. Dadurch entstehen Wartezeiten und hohe Netzbelastung. Imagemaps in Bildern mit mehreren Slices sind nicht möglich. ImageReady kann sich hier an verschiedenen Spezifikationen wie NCSA oder CERN orientieren.
  • Imagemaps vom Typ »Client-seitig« werden nicht vom fernen Server, sondern direkt vom Internet-Programm des Betrachters interpretiert. Nur so lässt sich auch vor dem Mausklick die verknüpfte Adresse in der Statusleiste anzeigen. Die meisten Browser unterstützen »Client-Side«-Imagemaps.

Wählen Sie in ImageReady den Befehl Datei: Ausgabe-Einstellungen: HTML. Unten im Bereich Imagemaps legen Sie die gewünschte Art von Imagemaps fest. Die Programmierer haben Client-seitig voreingestellt, meist lässt man es dabei.

Platzierung der Imagemap-Information

Ebenfalls mit dem Befehl Datei: Ausgabe-Einstellungen: HTML bestimmen Sie im Klappmenü Plazierung, wo ImageReady innerhalb der HTML-Datei die Imagemap-Information unterbringt:

  • Die Vorgabe Oben setzt die Imagemap-Angabe, also den MAP-Tag, oben in den HTML-Body-Bereich.
  • Body platziert die Imagemap-Details über dem Tag <IMG SRC> für das dazugehörige Slice.
  • Mit der Angabe Unten landet die Imagemap-Information unten im HTML-Body-Abschnitt.

4.7 Slices

Mit der Slice-Technik splitten Sie ein größeres Bild in mehrere rechteckige Einzelbilder, so genannte Slices (sprich »Slaißes«, ein abgeschnittenes Stück). Auf der Internet-Seite wird dann, Slice für Slice, ein nahtloses Gesamtbild aufgebaut. Dazu erzeugt ImageReady eine HTML-Tabelle. Jedes Rechteck innerhalb des Gesamtbildes füllt eine Zelle innerhalb der Tabelle.

Abbildung 4.85:  Mit der Slices-Technik zerlegt ImageReady eine größere Bild datei in mehrere Einzelbilder. Getrennt für jedes Segment (Slice) geben Sie in der Slice-Palette einen Hyperlink vor. In der Optimieren-Palette legen Sie Dateiformat und Feineinstellungen individuell für jeden Slice fest. Die Slices-Einteilung speichern Sie zum einen innerhalb des Photoshop-Dateiformats. Für die Internet-Seite werden eine HTML- oder CCS-Datei und mehrere Bild dateien in den Formaten GIF, JPG oder PNG erzeugt. Datei: SliceAnim.psd

Anders als bei Imagemaps (siehe vorhergehender Abschnitt) teilen Sie also bei Slices Ihre Vorlage nicht nur in unterschiedliche aktive Zonen auf, sondern auch in mehrere separate Bilddateien. Diese Stückelung bietet interessante Möglichkeiten:

  • Das Gesamtbild baut sich beim Betrachter vielleicht schneller auf.
  • Sie können jedes Segment mit individuellen Vorgaben in der Optimieren-Palette speichern, zum Beispiel verwenden Sie das GIF-Format für grafische Partien und das JPG-Format für Teile mit feinen Halbtonabstufungen.
  • Sie können jedes Element mit einem eigenen Hyperlink versehen, so dass jedes Bildteil zu einer anderen Internet-Seite oder zu einer sonstigen Datei weiterleitet.
  • Sie können für jedes Element eigene Einblendtexte und Statusmeldungen einplanen (Hyperlinks und Einblendtexte sind auch mit Imagemaps möglich, siehe vorhergehender Abschnitt).
  • Sie lassen einzelne Abschnitte der Tabelle einfach leer. Wird in diesem Bereich keine Bildinformation gespeichert, sondern vielleicht nur HTML-Text, so baut sich das Gesamtbild schneller beim Betrachter auf.
  • Sie können innerhalb einer Slices-Komposition in einzelnen Segmenten auch Animationen ablaufen lassen (Details zu Animationen ab Seite 273).
  • Sie können jedes Element mit einem Rollover-Effekt belegen. Das Element verändert sich also, sobald die Maus darüber gelangt oder sobald es angeklickt wird (Details zu Rollover-Effekten ab Seite 295) (siehe Abbildung 4.86).

Abbildung 4.86:  Auf der Internet-Seite werden die Einzelstücke einer Slices-Komposition in einer unsichtbaren Tabelle wieder zu einem Gesamtbild zusammengesetzt. Für jedes Segment gibt es eigene Hyperlinks, die in der Statuszeile des Internet-Browsers erscheinen.

Abbildung 4.87:  Hier wird die Tabellenstruktur der HTML-Seite mit den Slices deutlich. Für diese Ansicht haben wir in der HTML-Datei die Werte für »Tableborder«, »Cellpadding« und »Cellspacing« heraufgesetzt. Dateien: SliceRoll.htm im Unterverzeichnis SliceRoll, SliceTabelle im Verzeichnis SliceTabelle

4.7.1 Slices neu anlegen

Es gibt verschiedene Möglichkeiten, Slices neu ins Bild zu bringen:

  • von Hand mit dem Slice-Werkzeug
  • automatisch auf Basis von Ebenen
  • automatisch an Hilfslinien entlang (nur ImageReady)
  • automatisch auf Basis einer Auswahl (nur ImageReady)
  • automatisch mit gleichmäßiger Verteilung (nur ImageReady)

Neue Slices auf Basis einer Ebene

So entsteht ein neues Slice auf Basis einer Ebene:

1. Wählen Sie eine Ebene in der Ebenenpalette aus.
2. Klicken Sie auf Ebene: Neues ebenenbasiertes Slice.

Ebenenbasierte Slices empfehlen sich besonders, wenn Sie den Slice-Bereich noch verschieben, vergrößern oder verkleinern möchten. Praktisch wirken ebenenbasierte Slices zudem in Verbindung mit Rollover-Effekten: Nutzen Sie in bestimmten Rollover-Zuständen beispielsweise die Ebeneneffekte Schlagschatten, Kontur oder Schein nach aussen, so wird die Ebene meist breiter - und der Slice wächst mit.

Abbildung 4.88:  In diesem Bild haben wir die Textebene »Touren« in der Ebenenpalette ausgewählt. Anschließend verwendeten wir den Befehl »Ebene: Neues ebenenbasiertes Slice«. ImageReady erzeugt einen Slice-Rahmen exakt um diese Ebene herum; weitere so genannte Auto-Slices entstehen, damit das komplette Bild in Rechtecke zerlegt werden kann. Diese Auto-Slices können Sie bearbeiten, nachdem sie mit dem Befehl »Slices: In Benutzer-Slice umwandeln« bearbeitet wurden. Datei: Slice-Vorlage

Neue Slices mit dem Slice-Werkzeug  

Schalten Sie in ImageReady oder Photoshop das Slice-Werkzeug   ein (Kurztaste K). Nun zeigt ImageReady bereits einen ersten Slice-Rahmen, der das gesamte Bild umgibt: Das Programm betrachtet das Bild nun als einen einzigen Slice.

Ziehen Sie mit dem Slice-Werkzeug einen Rahmen um den gewünschten Bereich. Ziehen Sie bei gedrückter Umschalt-Taste, um ein Quadrat zu erhalten; mit gedrückter Alt-Taste können Sie den Rahmen von einem Mittelpunkt aus in alle Richtungen aufziehen.

ImageReady erzeugt nun die Slice-Zelle für den gewählten Bereich. Das Programm produziert aber gleich noch weitere Zellen. Diese sind erforderlich, damit das komplette Bild in Rechtecke aufgeteilt wird.

Verschiedene Arten von Slices

Der Slice, den Sie von Hand eingerahmt haben, gilt als so genannter »Benutzer-Slice«. Die anderen Slices, die ImageReady automatisch dazugerechnet hat, heißen »Auto Slice«; außerdem gibt es »ebenenbasierte Slices« und »Unter-Slices«. Die Unterschiede:

  • Einen »Benutzer-Slice« haben Sie von Hand mit dem Slice-Werkzeug gezeichnet. Sie geben individuell in der Optimieren-Palette Dateiformat und Feineinstellungen vor. Sie erkennen »Benutzer-Slices« auch an der stärker hervorgehobenen Slice-Nummer oben links im Bildsegment; die Nummern-Felder erscheinen in der Standard-Einstellung blau (ebenso wie bei »Benutzer-Slices«).
  • »Auto Slices« entstehen automatisch, nachdem Sie einen »Benutzer-Slice« ins Bild gesetzt haben. Mit »Auto Slices« wird auch der Rest des Bildes in Rechtecke zerlegt. Für alle »Auto Slices« werden die Dateivorgaben in der Optimieren-Palette gemeinsam gemacht, hier gibt es keine individuelle Einstellmöglichkeit. »Auto Slices« gelten außerdem als verbunden - Sie erkennen dies auch an dem Symbol »8« links oben in jedem Slice-Rahmen. »Auto Slice«-Rahmen lassen sich nicht verschieben; die Nummern-Felder erscheinen in der Standardeinstellung grau, die Linien zeigen Punkte.
  • »Unter-Slices« entstehen durch Überlappung von Slice-Grenzen. Sie erkennen hier, wie ImageReady das Bild beim Speichern der optimierten Version zerlegt. Ändern Sie die Rangfolge der Slices (siehe unten), wandeln sich auch die »Unter-Slices«.
  • »Ebenenbasierte Slices« entstanden auf Basis einer Ebene. Verändern Sie die Proportion der Ebene, mutiert die Slice-Größe mit.

Abbildung 4.89:  Mit dem Slice-Werkzeug wurde hier ein erster Rahmen ins Bild gezeichnet, um den Ball herum. Dieser Bereich gilt als »Benutzer-Slice«. ImageReady erzeugt automatisch weitere Slices, so dass das gesamte Bild in Rechtecke aufgeteilt ist. Diese weiteren Slices heißen »Auto Slices« und bieten weniger Bearbeitungsmöglichkeiten. Die nicht aktivierten Slices stellt das Programm blasser dar. Datei: Slice-Vorlage

Auto Slices und ebenenbasierte Slices in Benutzer-Slices umwandeln

Sie können »Auto Slices« in »Benutzer-Slices« verwandeln. Der Befehl heißt in ImageReady Slices: In Benutzer-Slice umwandeln. Als Benutzer-Slice ist der Slice nicht mehr »verbunden« - Sie können also individuelle Dateiformatvorgaben in der Optimieren-Palette machen oder den Slice-Rahmen bewegen.

Auch die »ebenenbasierten Slices« lassen sich zu »Benutzer-Slices« umwandeln. Wieder verwenden Sie in ImageReady den Befehl In Benutzer-Slice umwandeln. Beide Programme bieten diesen Befehl auch im Kontextmenü zum Slice-Auswahlwerkzeug  ; Photoshop unterhält überdies eine gleichnamige Schaltfläche in der Optionenleiste zum Slice-Auswahlwerkzeug. Nach Anwendung des Befehls lässt sich der Slice-Rahmen unabhängig vom Ebeneninhalt verschieben oder skalieren.

Slices von Hilfslinien ableiten

Bei sehr gleichmäßig geteilten Vorlagen - zum Beispiel bei Schaltleisten - ist es einfacher, erst Hilfslinien über das Bild zu legen und an diesen Linien entlang Slices zu erzeugen.

Um Hilfslinien erzeugen zu können, blenden Sie zunächst mit Strg+R die Lineale ein; dann ziehen Sie die Hilfslinien aus den Linealen ins Bild (Details zu Hilfslinien ab Seite 80). Wollen Sie die Hilfslinien noch verschieben, so geht dies nur mit dem Verschieben-Werkzeug  (Kurztaste V). Wenn die Hilfslinien gut sitzen, verwenden Sie den Befehl Slices: Slices entlang der Hilfslinien erstellen. Alle bereits vorhandenen Slices werden bei diesem Vorgang gelöscht.

Slices von Auswahlen ableiten

Sie können einen Slice auch aus einer Auswahl erstellen. Wählen Sie den Bildbereich beispielsweise mit Lasso  , Zauberstab  oder Auswahlrechteck  aus. Dann klicken Sie auf Slices: Aus Auswahl erstellen. So erzeugen Sie Slices, die sich sehr genau um Objektkonturen herumlegen. Die weiteren Slices erzeugt ImageReady automatisch, um das Bild komplett in Rechtecke aufteilen zu können.

Haben Sie zwei getrennte, sich nicht überschneidende Auswahlen im Bild, macht ImageReady daraus nicht etwa zwei maßgeschneiderte Slices. Statt dessen entsteht ein großes Segment, in dem beide Auswahlbereiche Platz finden.

Gleichmäßig verteilte Slices

Das Gesamtbild gilt ja bereits als ein einziger großer Slice, sobald Sie das Slice-Werkzeug einschalten. Sie können dieses Groß-Slice - oder vorhandene kleinere Slices - automatisch weiter gliedern. Dazu wählen Sie den Befehl Slices: Slice unterteilen. Es gibt zwei Methoden:

  • Entweder nennen Sie die Zahl der gewünschten neuen Slices horizontal und vertikal; ImageReady erzeugt dann automatisch Slices in den passenden Pixelgrößen. Dazu klicken Sie in den zwei Bereichen Horizontal unterteilen und Vertikal unterteilen jeweils die obere Option an (vertikale/horizontale, gleichmässig angeordnete Slices).
  • Oder Sie nennen die Zahl der gewünschten Pixel pro Slice. ImageReady erzeugt dann automatisch die Slices mit der genannten Pixelgröße. Klicken Sie in den Bereichen Horizontal unterteilen und Vertikal unterteilen jeweils auf die untere Option Pixel pro Slice.

Ein Beispiel: Sie klicken im Bereich Horizontal unterteilen die obere Option an und geben an, dass Sie genau 3 vertikale, gleichmässig angeordnete Slices erhalten möchten. ImageReady nennt sofort im Eingabefeld darunter die resultierende Zahl der Pixel pro Slice und die neuen Slices erscheinen auch schon im Bild. Alternatives Vorgehen: Sie klicken im Bereich Horizontal unterteilen die untere Option an und verlangen von dem Programm genau 50 Pixel große Slices. ImageReady wird sie in der erforderlichen Zahl erzeugen.

Der Befehl Slice unterteilen funktioniert nicht bei ebenenbasierten Slices. Verwenden Sie also bei Bedarf den Befehl Slices: In Benutzer-Slice umwandeln.

Abbildung 4.90:  Mit dem Befehl »Slices: Slices unterteilen« zerlegen Sie das Gesamtbild oder ein einzelnes Slice in mehrere gleich große Segmente.

4.7.2 Slices auswählen

Bevor Sie einen einzelnen Slice bearbeiten, müssen Sie ihn auswählen.

Slice-Auswahlwerkzeug  

Um einen Slice zu aktivieren, schalten Sie das Slice-Auswahlwerkzeug ein  (Kurztaste K); dann klicken Sie den gewünschten Slice an. Nur der ausgewählte Slice erscheint in voller Farbqualität. Alle anderen Slices erscheinen aufgehellt (Details zur Darstellung im nächsten Abschnitt). Sie können Slices wohlgemerkt nicht mit anderen Werkzeugen aktivieren, etwa mit dem Verschieben-Werkzeug  . Auf verschiedene Arten markieren Sie mehrere Slices:

  • Klicken Sie die Kandidaten bei gedrückter Umschalt-Taste an.
  • In ImageReady reicht es auch, wenn Sie über mehrere Slices hinweg ziehen; setzen Sie dabei jedoch in einem Auto Slice oder außerhalb der Bildfläche an; wenn Sie in einem Benutzer-Slice beginnen, werden Sie diesen verschieben.
  • Im Photoshop-Dialogfeld Für Web Speichern ziehen Sie einfach über die gewünschten Slices.

Alle Slices gemeinsam aktivieren Sie mit dem Befehl Auswahl: Alle Slices (Strg+A). Dabei muss das Slice-Auswahlwerkzeug  aktiv sein. Sie heben jede Slice-Auswahl auf mit dem Befehl Auswahl: Slices abwählen (Strg+D).

Sie erhalten das Slice-Auswahlwerkzeug auch vorübergehend, wenn Sie bei aktiviertem Slice-Werkzeug die Strg-Taste drücken.

Slice-Auswahlen speichern

Möchten Sie eine bestimmte Gruppe von Slices immer wieder auswählen, verwenden Sie in ImageReady den Befehl Slices: Slice-Auswahl speichern. Das Pendant heißt Slice-Auswahl laden und markiert exakt die gewünschten Slices. Nicht benötigte Auswahlinformationen tilgen Sie mit dem Befehl Slice-Auswahl löschen. Die Slices selbst bleiben dabei erhalten.

4.7.3 Die Darstellung der Slices

Wie ImageReady die Slices darstellt, das regeln Sie mit dem Befehl Bearbeiten: Voreinstellungen: Slices. Zur Darstellung des Bildes haben Sie hier unter anderem diese Möglichkeiten:

  • Nur Linien anzeigen: Wenn Sie diese Option anklicken, verbirgt ImageReady die Slice-Nummern und die anderen Symbole in der linken oberen Slice-Ecke.
  • Mit dem Klappmenü Linienfarbe ändern Sie die Farbe der Slice-Rahmen, sofern diese sich schlecht von Ihrem Motiv abheben.
  • Im Bereich Farbkorrekturen geben Sie an, wie stark nicht aktivierte Slices in der ImageReady-Darstellung abgedämpft werden sollen. Je höher die Werte, desto blasser erscheinen solche nicht aktivierten Slices innerhalb von ImageReady - die Darstellung auf der Internet-Seite ändert sich nicht.
  • Bei Ziffern und Symbole stellen Sie ein, ob und in welcher Größe ImageReady die Slice-Nummern und andere Symbole anzeigen soll. Sie können diese Symbole mit dem Deckkraft-Regler auch halb durchsichtig machen.

Abbildung 4.91:  Mit dem Befehl »Bearbeiten: Voreinstellungen: Slices« regeln Sie, wie ImageReady die Segmentierung des Bild es darstellen soll.

Photoshop bietet einige Regelmöglichkeiten zur Darstellung von Slice-Ziffern und zur Linienfarbe in der Optionenleiste zum Slice-Werkzeug  .

Slices ausblenden

Der Befehl Ansicht: Extras einblenden verbirgt die Linien, ohne sie zu löschen (Details zu »Extras« ab Seite 79); alternativ verstecken Sie die Linien mit dem Untermenü Ansicht: Einblenden. In der Werkzeugleiste von ImageReady sowie im Photoshop-Dialogfeld Speichern für Web finden Sie überdies die Schaltfläche Slices einblenden/ausblenden  , Kurztaste Q.

4.7.4 Slices umformen, verschieben und organisieren

ImageReady bietet vielfältige Möglichkeiten, Platzierung und Maße von Benutzer-Slices zu verändern. Möchten Sie »Auto-Slices« oder »ebenenbasierte Slices« von Hand umformen, so bearbeiten Sie diese zunächst mit dem Befehl Slices: In Benutzer-Slice umwandeln.

Slices umformen

Die Rahmen von Benutzer-Slices zeigen die aus anderen Aufgaben bekannten quadratischen Griffpunkte. Halten Sie das Slice-Auswahlwerkzeug   über einen solchen Griffpunkt. Dann erscheint das Werkzeug als Doppelpfeil und Sie können den Rahmen durch Ziehen verkleinern oder vergrößern. Ziehen Sie an einem Eckpunkt mit gedrückter Umschalt-Taste, um das Höhe-Breite-Verhältnis zu wahren. Anschließend berechnet ImageReady die Gesamtaufteilung der Slices neu.

Für präzise Änderungen mit Zahlenangabe rufen Sie mit dem Fenster-Menü die Slice-Palette auf. Klicken Sie auf das Doppeldreieck  neben der Palettenbezeichnung Slice, damit Sie alle Optionen sehen, oder verwenden Sie dafür aus dem Palettenmenü den Befehl Optionen einblenden. Unten links in der Palette befindet sich der Bereich Abmessungen. In den Feldern »B« und »H« legen Sie Breite und Höhe des Slice in Pixelwerten fest. Soll das Verhältnis von Höhe zu Breite unverändert bleiben, klicken Sie die Option Proportionen erhalten an.

Abbildung 4.92:  Im Bereich »Abmessungen« der Slice-Palette bestimmen Sie Position und Maße des aktuellen Slice präzise per Koordinateneingabe. Wählen Sie im Palettenmenü den Befehl »Optionen einblenden«, damit ImageReady diesen unteren Teil der Palette anzeigt.

»Slices fixieren«

Sie können in Photoshop sämtliche Slices gegen versehentliches Skalieren oder Verschieben schützen. Dies erledigt der Befehl Ansicht: Slices fixieren. Danach lassen sich die Slice-Werkzeuge im betreffenden Bild nicht mehr gebrauchen; wählen Sie den Befehl erneut, wenn Sie doch Veränderungen wünschen.

Slice-Umrisse duplizieren

Benötigen Sie die Konturen eines Slice für einen weiteren Slice? Dann ziehen Sie bei gedrückter Alt-Taste am Slice. Sie erhalten einen identisch geformten weiteren Slice; dabei werden auch die Optimierungseinstellungen übernommen und Sie erhalten generell einen Benutzer-Slice, der sich anschließend frei verändern lässt. Sie können auch mehrere Slice-Umrisse gleichzeitig duplizieren. Dazu markieren Sie mehrere Slices bei gedrückter Umschalt-Taste mit dem Slice-Auswahlwerkzeug  .

Den Befehl Slice duplizieren finden Sie auch im Slices-Menü und im Kontextmenü. Hierbei entsteht ein weiterer Slice, der gegenüber dem ursprünglichen Umriss um zehn Bildpunkte nach rechts und unten verschoben ist. Sie können diesen Slice nun weiter bewegen.

Einen vorhandenen Slice splitten Sie mit dem Befehl Slices: Slices unterteilen in kleinere, gleichmäßig große Segmente auf (siehe oben).

Slices kopieren und einfügen

In ImageReady können Sie Slices auch kopieren und im selben oder in einem anderen Bild wieder einfügen. Die Befehle finden Sie im Menü zur Slice-Palette.

Slices verschmelzen

Wollen Sie zwei Benutzer- oder Auto-Slices zusammenfassen? Die Segmente müssen nicht nebeneinander liegen. Markieren Sie die Elemente in ImageReady und wählen Sie Slices: Slices zusammenfügen.

Dabei entsteht generell ein Benutzer-Slice - unabhängig von der Kategorie der Slices vor der Vereinigung. ImageReady aktualisiert die Tabelle so, dass der neue, zusammengesetzte Slice hineinpasst. Für den neuen Slice gelten die Optimierungseinstellungen (also Dateiformatvorgaben) und die Slice-Einstellungen aus der Slice-Palette den Einzel-Slice, den Sie zuvor als Erstes angeklickt haben.

Slices löschen

Wollen Sie einen benutzer- oder ebenenbasierten Slice entfernen, markieren Sie ihn und machen Sie Gebrauch von der Entfernen- oder Rückschritt-Taste. Alternativ wählen Sie Slices: Slice löschen. Dabei entstehen neue Auto-Slices, so dass das ganze Bild mit Slices abgedeckt bleibt. Sie können in ImageReady auch mehrere markierte Slices auf einen Schlag löschen. Auto-Slices lassen sich nicht einzeln löschen. Ganze Arbeit erledigt Slices: Alle Slices löschen in ImageReady. (Wollen Sie die Slices nur verbergen, aber nicht löschen, nehmen Sie Slices: Slices ausblenden, die Taste Q oder die Schaltfläche Slices einblenden/ausblenden ).

Slice-Aufteilung verbessern

Mitunter überlappen sich Slices. Sie können das Slice-Arrangement - beziehungsweise die HMTL-Tabelle - automatisch neu anordnen. Dazu dient das Untermenü Slices: Anordnen in ImageReady; alternativ verwenden Sie die Schaltflächen auf der Optionenleiste zum Slice-Auswahlwerkzeug in Photoshop oder ImageReady.

Dabei gilt: Alle Slices bilden einen Stapel. Der zuletzt erzeugte Slice liegt ganz oben im Stapel. Wählen Sie jetzt zum Beispiel den Befehl Nach hinten stellen; damit geht der zuletzt erzeugte (quasi oben liegende) Slice in früher erstellten Slices (die quasi weiter unten liegen) auf; die Umrisse der älteren Slices setzen sich bei der optimierten Version durch.

Slices verschieben

Slices lassen sich einfach mit dem Slice-Auswahlwerkzeug  verschieben. Sobald Sie den verschobenen Slice loslassen, erzeugt das Programm selbständig die erforderlichen neuen Slices, um das Gesamtbild auf Rechtecke verteilen zu können. Sie können auch mehrere Slices gemeinsam verschieben. Markieren Sie die Segmente zuvor bei gedrückter Umschalt-Taste mit dem Slice-Auswahlwerkzeug.

Dabei können andere Bildelemente »magnetisch« wirken - zum Beispiel Hilfslinien, Bildränder oder auch andere Slices; welche Bildelemente anziehende Wirkung ausüben sollen, bestimmen Sie im Untermenü Ansicht: Ausrichten an.

Alternativ bewegen Sie die Slices präzise per Zahleneingabe in der Slice-Palette. Mit dem Eingabefeld »X« benennen Sie den Pixelabstand zum Nullpunkt des horizontalen Lineals - dies ist meist der linke Bildrand. Beispiel: Tippen Sie bei X eine 10 ein, wenn der Slice 10 Bildpunkte Abstand vom linken Bildrand haben soll. Tippen Sie ein 0 ein und drücken Sie die Eingabe-Taste, damit der Slice genau auf dem linken Bildrand beginnt (beziehungsweise auf dem Nullpunkt des Lineals, sofern Sie den Nullpunkt verschoben haben). Im Datenfeld »Y« benennen Sie dagegen den Abstand zum oberen Bildrand oder genauer zum Nullpunkt des vertikalen Lineals. Eine 20 bedeutet hier: Der Slice hat 20 Pixel Abstand zur Oberkante (Details zu Linealen ab Seite 78).

Slices gleichmäßig anordnen

ImageReady ordnet Benutzer-Slices automatisch gleichmäßig an; dabei orientiert sich das Programm nach Bedarf an den Bildrändern (Ausrichten) oder es verteilt die Zonen gleichmäßig entlang einer Achse (Verteilen). Die entsprechenden Slices wählen Sie zunächst aus, dann verwenden Sie die Schaltflächen aus den Optionen zum Slice-Auswahlwerkzeug; alternativ nutzen Sie die Befehle aus dem Slice-Menü. Wir besprechen und illustrieren diese Funktionen ausführlich im Zusammenhang mit Ebenen ab Seite 742.

Die Ausrichten - und Verteilen-Funktionen können überflüssige Auto-Slices tilgen und so zu kleineren HTML-Dateien verhelfen.

Sie können mehrere, markierte Slices automatisch gleichmäßig anordnen. Die Befehle sind vergleichbar mit den Funktionen, um Ebenen gleichmäßig auszurichten. Diese Funktionen werden im »Ebenen«-Kapitel ausführlich diskutiert und auch illustriert (Seite 742). Um Slices umzuverteilen, verwenden Sie das Untermenü Slices: Ausrichten oder die Schaltflächen in der Leiste zum Slice-Auswahlwerkzeug  . Dabei dient jeweils einer der Slices als Orientierungspunkt. Zum Beispiel:

  • Der Befehl Oben platziert die Oberkante aller markierten Slices an der obersten Kante eines ausgewählten Slice.
  • Der Befehl Links bringt die Linksaußen-Seite der Slices auf eine Flucht mit der linken Kante desjenigen Segments, das am weitesten links liegt.
  • Der Befehl Vertikale Mitte holt die Slices vom oberen und unteren Bildrand auf eine Höhe, der Abstand zum linken und rechten Bildrand ändert sich nicht.
  • Der Befehl Horizontale Mitte holt die Slices vom linken und rechten Bildrand auf eine Linie, der Abstand zum oberen und unteren Bildrand ändert sich nicht.

4.7.5 Slices verbinden

Sie können in ImageReady mehrere Slices zu so genannten »Sets« verbinden. Dann gelten alle in der Optimieren-Palette festgelegten Dateiformat-Einstellungen für alle verbundenen Slices gemeinsam. Verbundene Slices im GIF- und PNG-8-Format haben zudem eine gemeinsame Farbpalette und ein gemeinsames Dithering-Streuraster - harte Kanten zwischen benachbarten Slices werden so vermieden. Sobald Sie die Dateiformatvorgaben für ein Slice in der Optimieren-Palette ändern, werden alle verbundenen Slices aktualisiert. Auto Slices sind von Haus aus verbunden.

Abbildung 4.93:  Die rot gekennzeichneten Slices wurden gemeinsam markiert und mit dem Befehl »Slices: Slices verbinden« zu einem Set zusammengefasst. Anschließend wurden die grün gekennzeichneten Slices markiert und ebenfalls verbunden. Alle Dateiformatvorgaben aus der Optimieren-Palette gelten für die Slices eines Sets gemeinsam. Das Dithering-Streuraster bei den Formaten GIF und PNG-8 wird so angelegt, dass keine Nahtlinien entstehen.

Sets anlegen

So erzeugen Sie eine Slice-Gruppe:

1. Markieren Sie mehrere Slices durch Umschalt-Klick mit dem Slice-Auswahlwerkzeug.
2. Wählen Sie den Befehl Slices: Slices verbinden.

Dabei gilt: Wählen Sie beim manuellen Verbinden von Slices erst ein Benutzer-Slice und anschließend ein Auto Slice aus, wird das Auto Slice in ein Benutzer-Slice umgewandelt, ImageReady hebt seine Verbindung zur »Auto Slice«-Gruppe auf. Wenn Sie erst ein Auto Slice und dann ein Benutzer-Slice auswählen, fügt ImageReady das Benutzer-Slice zur Auto Slice-Gruppe hinzu, das Auto Slice bleibt ein Auto Slice.

Die jeweils verbundenen Slices erhalten eine eigene Kennfarbe in den Symbolen oben links innerhalb der Slice-Kontur. Legen Sie durch Markieren und Verbinden weiterer Slices ein zweites Set an, erhält es eine andere Farbe.

Verbindung aufheben

So heben Sie die Verbindung von mehreren Slices zu einem Set wieder auf:

  • Markieren Sie ein oder mehrere »Benutzer-Slices« mit dem Slice-Auswahlwerkzeug. Dann wählen Sie Slices: Verbindung des Slice aufheben. So entfernen Sie einzelne Segmente aus einem Set.
  • Wollen Sie das ganze Set aufheben, wählen Sie ein oder mehrere verbundene Benutzer-Slices aus und dann den Befehl Slices: Verbindung des Sets aufheben.
  • Um alle Sets von »Benutzer-Slices« in einem Dokument aufzuheben, verwenden Sie die Funktion Slices: Alle Verbindungen aufheben.

4.7.6 HTML-Optionen für Slices

Legen Sie HTML-Text, Hyperlinks und Alternativ-Text für den Internet-Auftritt fest. Sie verwenden diese Eingabefelder:

  • In ImageReady nutzen Sie die Slice-Palette - zu erreichen über das Fenster-Menü oder über eine Schaltfläche in den Optionen zum Slice-Auswahlwerkzeug  . Klicken Sie neben dem Namen »Slice« auf das Doppeldreieck  , bis die Palette alle Optionen anzeigt; oder verwenden Sie den Befehl Optionen einblenden aus dem Palettenmenü. Links in der Palettenvorschau sehen Sie den Slice, den Sie gerade bearbeiten. (Sind mehrere Slices gewählt, lässt sich die Funktion nicht nutzen.)
  • Im Photoshop-Arbeitsfenster nehmen Sie das Dialogfeld Slice-Optionen. Dazu klicken Sie mit dem Slice-Auswahlwerkzeug doppelt auf einen Slice oder verwenden die Schaltfläche in den Optionen.
  • Im Photoshop-Dialogfeld Für Web speichern aktivieren Sie zunächst das Slice-Auswahlwerkzeug und klicken dann doppelt auf einen Slice.

»Bild« oder »Kein Bild«

Mit dem Klappmenü Typ legen Sie fest, ob der Slice überhaupt ein Bild enthalten soll. Geben Sie hier Kein Bild an, speichert ImageReady für diesen Bereich keinerlei Bildinformation. In diesem Bereich erscheint also der Seitenhintergrund und Sie können HTML-Text einsetzen. Das beschleunigt die Übertragung des Gesamtwerks.

Einfügen von HTML-Text

Bei Anwahl der Option Kein Bild erhalten Sie ein Texteingabefeld. Sie können nun in diese Zelle der HTML-Tabelle Text eintippen. Unten in der Slice-Palette bestimmen Sie die Ausrichtung: Im Bereich Horizontal geben Sie an, ob der Text links- oder rechtsbündig oder mittig ausgerichtet werden soll. Auch vertikal können Sie die Ausrichtung ändern. Die Standard-Angabe führt zu einem linksbündigen Text in mittlerer Höhe. Photoshop und ImageReady zeigen den HTML-Text jedoch in der Bilddatei nicht an, Sie müssen schon die Browser-Vorschau bemühen (Strg+Alt+P).

Der Text erscheint zunächst in einer Standardgröße. Sie können ihn umformatieren. Wenn Sie kein Programm für Web-Design verwenden, können Sie die erforderlichen HTML-Tags auch direkt in das Text-Fenster der Slice-Palette eintippen. Wollen Sie das Wort »Finanzen« zum Beispiel in der Maximalgröße »Überschrift 1« anzeigen, tippen Sie ins Textfenster: 

<H1>Finanzen</H1>

Wenn Ihnen dies zu groß ist, probieren Sie H2 bis herunter zu H6.

Alternativ können Sie die Schriftgröße gegenüber einer Standardschrift um bis zu plus vier oder minus zwei Stufen verändern. Soll die Schrift drei Stufen größer werden, lautet der Eintrag im Text-Fenster: 

<font size=+3>Finanzen</font>

Die HTML-Zeile für die gesamte Tabellenzelle sieht dann beispielsweise so aus: 

<td WIDTH="126" HEIGHT="103"><font size=+3>Finanzen</font></td>

ImageReady speichert für diesen Tabellentext keinen Hyperlink. Sie können eine solche Verknüpfung zu einer Internet-Adresse oder auch zu einer sonstigen Datei von Hand eintragen. Wollen Sie das Wort »Finanzen« in die Tabellenzelle stellen und mit einem Hyperlink zur fiktiven Internet-Adresse »http://www.tour-tips.com/finanzen« unterlegen, dann tippen Sie Folgendes ins Text-Fenster der Slice-Palette: 

<a href="http://www.tour-tips.com/finanzen">Finanzen</a>

Dabei stört es nicht, wenn dieser Eintrag aus Platzgründen automatisch in zwei Zeilen umbrochen wird (siehe Abbildung 4.96).

Abbildung 4.94:  Diese Leiste wurde als Rand für Webseiten entworfen. Durch die übliche rechteckige Bild geometrie entstehen große leere Flächen, die wir auf der Internet-Seite nicht als Bild benötigen. Wir markieren alle leeren Slices mit dem Slice-Auswahlwerkzeug bei gedrückter Umschalt-Taste und geben in der Slice-Palette den Typ »Kein Bild « an. Image Ready erzeugt für die entsprechenden Zellen der Tabelle keine Bild dateien; hier wird der Seitenhintergrund sichtbar. Sie können für diesen Bereich HTML-Text in die Slice-Palette eintippen. Datei: Kein_Bild

Hintergrund (»HG«)

Bei Bedarf geben Sie pro Slice eine Hintergrund-Farbe an. Sie erscheint auf der Webseite, wenn ein Slice transparente Bereiche hat oder wenn Sie den Typ Kein Bild verwenden. Falls Sie auf die Option verzichten, sehen Sie in transparenten Bereichen den sonstigen Seitenhintergrund.

Wenn Sie das HG-Klappmenü (für »Hintergrund«) mit der Schaltfläche  in der Slice-Palette öffnen, bieten die Programme unter anderem Vordergrund- und Hintergrund-farbe sowie eine Palette mit Web-sicheren Farben. Klicken Sie auf Andere, um den Photoshop Farbwähler mit Zugriff auf sämtliche Farben zu erhalten. Diese Palette erscheint auch, wenn Sie unmittelbar auf das Klappmenü-Feld klicken und nicht auf das Dreieck daneben. Details zur Farbwahl speziell für Web-Designer finden Sie ab Seite 395.

Diese Hintergrund-Farbe erscheint nicht in Photoshop oder ImageReady, Sie müssen die Browser-Vorschau verwenden (Strg+Alt+P). Photoshop bietet die Hintergrund-Option nur im Dialogfeld Für Web speichern, wenn Sie die Slice Optionen nach einem Doppelklick auf einen Slice einschalten.

4.7.7 HTML-Optionen für Slices und Imagemaps

Die folgenden Optionen finden Sie gleichermaßen in den Paletten für Slices und für Imagemaps.

»Name«

Bei Bedarf geben Sie einem Einzel-Slice einen Namen abweichend von der Standardbenennung. Diese Möglichkeit besteht nur bei Bild-Slices, nicht bei reinen Textsegmenten.

»Ziel« für Frames

Viele Internet-Seiten sind in mehrere so genannte »Frames«, also Rahmen unterteilt (nicht zu verwechseln mit »Frames« bei Animationen). Während Sie beispielsweise in einem schmalen Frame links permanent das Inhaltsverzeichnis sehen, erscheint im größeren Fenster rechts derjenige Inhalt, den Sie im Verzeichnis angeklickt haben. Mit dem Eingabefeld Ziel legen Sie den Frame fest, in dem der ausgewählte Slice erscheinen soll. Entweder Sie nennen im Textfeld einen Namen, den Sie zuvor im HTML-Dokument für die Seite definiert haben, oder Sie wählen eine der Optionen aus dem Einblendmenü:

  • »_blank« zeigt die verbundene Datei in einem neuen Browser-Fenster an, das ursprüngliche Browser-Fenster bleibt geöffnet.
  • »_self« zeigt die verbundene Datei im Frame der ursprünglichen Datei an.
  • »_parent« zeigt die verbundene Datei in ihrem eigenen, ursprünglichen, übergeordneten Frame-Set an. Verwenden Sie diese Option, wenn das HTML-Dokument Frames enthält und der aktuelle Frame ein untergeordneter Frame ist. Die verbundene Datei erscheint im aktuellen übergeordneten Frame.
  • »_top« ersetzt das gesamte Browser-Fenster durch die verbundene Datei und entfernt alle aktuellen Frames.

»URL«, »Meldung« und »Alt«-Text

So geben Sie Hyperlinks und Bildschirmmeldungen ein:

  • Neben URL tippen Sie eine Internet-Adresse oder auch einen sonstigen Dateipfad ein. Ein Klick auf den Slice ruft diese Adresse auf. Das Eingabefeld bietet gleichzeitig ein Klappmenü, welches Ihre zuletzt verwendeten URLs auflistet. So können Sie bei jedem Frame auf die Grundinformation zurückgreifen und diese nur in den erforderlichen Details anpassen. Verwenden Sie volle URLs wie http://www.mut.de oder »relative URLs«; diese geben nicht den vollen Speicherort an, sondern nennen nur die relative Entfernung von der aktuellen Datei (zum Beispiel mit Verweis auf ein Unterverzeichnis).
  • Tippen Sie eine Meldung ein. Sie erscheint unten in der Statuszeile des Internet-Browsers, sobald der Mauszeiger über diesen Slice gelangt. Wenn Sie nichts eintippen, zeigt die Statuszeile statt dessen die Adresse aus der URL-Zeile.
  • Der Alt-Text zeigt sich auf der Seite, wenn Ihr Bild aus irgendeinem Grund nicht geöffnet werden kann. Sichtbar ist er zudem manchmal auch, bevor das Bild selbst übertragen wird. Der Alt-Text sollte also die Bildinformation in Worte fassen. Meist erscheint der Alternativ-Text außerdem als gelb unterlegter Einblendtext, sobald die Maus über den Slice gelangt.

Abbildung 4.95:  Oben: In der Slice-Palette geben Sie einen »Alt«-Text und eine »Meldung« vor.  Unten: Der »Alt«-Text erscheint als Einblendtipp auf der Internet-Seite, sobald der Mauszeiger über den Slice gelangt. Den Text aus dem Fenster »Meldung« zeigt das Internet-Programm in der Statuszeile. Wird keine »Meldung« angegeben, sehen Sie an dieser Stelle die Internet-Adresse oder lokale Speicheradresse (URL), mit der der Slice verknüpft ist.

4.7.8 Slices benennen und speichern

Das Slices-Ergebnis wird für die Internet-Seite in zwei Abteilungen gespeichert:

  • Sichern Sie die gesamte HTML-Tabelle als HTML-Code im HTML-Dateiformat.
  • Dazu erzeugen die Programme eine Reihe von Bilddateien - für jeden Slice eine separate Datei in einem der Internet-tauglichen Bildformate GIF, JPG oder PNG. Diese Slices speichern Photoshop und ImageReady normalerweise in einem Unterverzeichnis »Bilder«, das automatisch erzeugt wird, sofern Sie die Voreinstellungen nicht geändert haben.

Optimierungseinstellungen für Slices

Sie geben für jeden Benutzer-Slice separat Dateiformat und Dateiformat-Optionen in der Optimieren-Palette an. Sie können mehrere Slices gemeinsam bei gedrückter Umschalt-Taste mit dem Slice-Auswahlwerkzeug markieren, um dann für diese Slices gemeinsam die Dateiformatvorgaben einzurichten. Verbundene Slices (siehe oben) verwenden generell gemeinsame Optimierungseinstellungen.

Prüfen Sie, ob zwischen benachbarten Slices mit unterschiedlichen Optimierungsvorgaben harte Übergänge auftreten - zum Beispiel, wenn Sie GIF und JPG nebeneinander stellen. Dazu verwenden Sie die Vorschau im Browser (Strg+Alt+P) oder eine »Optimiert«-Darstellung in ImageReady. Verbergen Sie in ImageReady eventuell die Slice-Rahmen mit der Schaltfläche Slices einblenden/ausblenden  ; so können Sie die Kanten besser prüfen.

Markieren Sie zwei Slices mit unterschiedlichen Vorgaben gemeinsam, erscheint die Optimieren-Palette leer. Sie können in diesem Zustand neue Vorgaben machen, die dann für beide ausgewählten Slices gelten. Gibt es immerhin einige gemeinsame Eigenschaften - etwa zweimal JPEG-Format, aber mit unterschiedlicher Qualität -, so erscheinen die gemeinsamen Eigenschaften in der Optimieren-Palette.

Vorsicht, wenn Sie das GIF-Format mit Diffusion-Dithering verwenden: An den Grenzen einzelner Slices können sich unschöne Ränder bilden, weil das Streuraster der einzelnen Slices nicht harmoniert. Abhilfe: Markieren Sie die fraglichen Slices und verbinden Sie diese mit dem Befehl Slices: Slices verbinden (siehe oben); dann streut ImageReady das Dithering-Muster über alle verkoppelten Slices, die Ränder verschwinden.

Abbildung 4.96:  Hier haben wir zwei Slices gemeinsam markiert, die in der Optimieren-Palette unterschiedliche Dateiformatvorgaben hatten. Deshalb erscheint die Optimieren-Palette leer. Man kann nun neue Vorgaben eintragen, die für beide Slices gelten.

Optimierungseinstellungen übertragen

In ImageReady können Sie gelungene Optimierungseinstellungen leicht von einem Slice auf den anderen übertragen:

1. Aktivieren Sie den Slice mit den gewünschten Optimierungsvorgaben mit dem Slice-Auswahlwerkzeug  .
2. Ziehen Sie das Droplet-Symbol aus der Optimieren-Palette  auf den Slice, der die Einstellungen übernehmen soll.

Slices speichern

Nachdem Sie eine Vorschau der Slices in mehreren Browsern gründlich geprüft haben, sollten Sie das Werk - wie auch bei Animationen und Imagemaps - auf zwei Arten speichern:

  • Im Photoshop-Dateiformat, um später mit voller Farbqualität und unabhängigen Ebenen alles korrigieren zu können.
  • Als HTML-Tabelle mit einer Reihe von GIF-, JPG- oder PNG-Bilddateien für die Veröffentlichung auf WWW-Seiten.

Wählen Sie in ImageReady Datei: Optimiert-Version speichern oder in Photoshop Datei: Für Web speichern. Beachten Sie dabei:

  • Im Klappmenü Dateityp sollten Sie die Vorgabe HTML und Bilder (*.html) verwenden.
  • Ein weiteres Klappmenü bietet die Auswahl zwischen Alle slices und Ausgewählte Slices. Wenn Sie nur Ausgewählte Slices sichern, umfasst die resultierende HTML-Tabelle auch nur den Bereich der zuvor markierten gewählten Slices.
  • Die Option GoLive-Code einschliessen optimiert Ihr Werk für das Web-Layout-Programm GoLive ab Version 5; es stammt vom Photoshop-Hersteller Adobe. HTML- und JavaScript-Code werden so verändert, dass Sie sich in GoLive bearbeiten lassen. (Sie können in GoLive 5.0 auch Dateien im Photoshop-Format bearbeiten.)

Slices »auf Dateigröße optimieren«

Sie können die Slices auf eine festgelegte Dateigröße optimieren. Im Menü der Optimieren-Palette wählen Sie Auf Dateigröße optimieren und nennen die geplante Größe. Für Slices gilt:

  • Sie können das einzelne Aktuelle Slice auf die angepeilte Dateigröße zwingen.
  • Jedes Slice bringt jeden Slice Ihrer Komposition einzeln auf die genannte Dateigröße,
  • Alle Slices setzt die Summe aller Slices auf den genannten Wert.

Weitere Angaben zu dieser Funktion finden Sie ab Seite 364.

Slices-Vorgaben für HTML-Tabellen

In ImageReady machen Sie mit dem Befehl Datei: Ausgabe-Einstellungen: HTML weitere Vorgaben zum Speichern von Slices. Wir besprechen hier den Abschnitt Slice-Ausgabe. Sofern Sie die voreingestellte Option Tabelle erstellen verwenden, entsteht die übliche HTML-Tabelle. Dabei haben Sie diese weiteren Optionen:

  • Im Klappmenü TD W&H geben Sie an, wie das Programm Höhen- und Breitenangaben für die Tabellenzellen erzeugen soll. In der Regel belässt man es bei der voreingestellten Option Auto.
  • Im Klappmenü Leere Zellen legen Sie den Umgang mit Kein-Bild-Slices fest, die also gemäß Ihrer Vorgabe in der Slice-Palette kein Bildmaterial enthalten (siehe oben): GIF, IMG W&H erzeugt ein 1-Pixel-GIF-Bild, das mit dem IMG-Tag im HTML-Code auf die Breite und Höhe der Tabellenzelle formatiert wird; GIF, TD W&H erzeugt ein 1-Pixel-GIF-Bild, das mit dem TD-Tag im HTML-Code auf die Breite und Höhe der Tabellenzelle formatiert wird. NoWrap, TD W&H erzeugt ein nicht standardmäßiges NoWrap-Attribut und platziert die auf den TD-Tags festgelegten Angaben für Breiten und Höhen in der Tabelle.
  • Per Klappmenü Abstandhalter-Zellen bestimmen Sie, ob automatisch Platzhalter-Zellen erzeugt werden sollen. Sie sind gelegentlich erforderlich, wenn die äußeren Slice-Umrisse kein sauberes Rechteck ergeben. Bleiben Sie bei der Option Auto.

Abbildung 4.97:  Nach dem Befehl »Datei: Ausgabe-Einstellungen: HTML« legen Sie im Bereich »Slice-Ausgabe« fest, wie Slices gespeichert werden.

Slices-Vorgaben für Cascading Style Sheets

Statt als übliche HTML-Tabelle können Sie das Slice-Arrangement auch als Cascading Style Sheet (CSS) speichern. Dazu verwenden Sie die Option CSS erstellen im Bereich Slices der Ausgabe-Einstellungen. Einige Vorteile von CSS allgemein:

  • CSS legen Seitenformate fest, die über mehrere Seiten hinweg beibehalten werden können.
  • CSS formatieren vorhandene HTML-Tags exakt nach Ihren Vorstellungen.
  • CSS erlauben die pixelgenaue Platzierung von Bildern.
  • Sie können das Aussehen einer Tabelle zentral im HTML-Kopf speichern und so den HTML-Code kleiner halten.

Schalten Sie zur Produktion von Cascading Style Sheets zunächst die Option CSS erstellen ein. Im Klappmenü Bezugnahme machen Sie nun diese Vorgaben:

  • Nach ID platziert jedes Slice mit Stilen, die durch eine eindeutige ID gekennzeichnet sind.
  • Eingebunden nimmt Stilelemente in den DIV-Tag für das Blockelement auf.
  • Nach Klasse platziert jedes Slice mit Hilfe von Klassen, auf die durch eine eindeutige ID verwiesen wird.

Slices automatisch benennen

ImageReady bietet verschiedene Automatismen, um Slices zu benennen. Voreingestellt ist ein nachvollziehbares Verfahren: Zerlegen Sie beispielsweise die Datei »Test.psd« in verschiedene Slices, dann erzeugt ImageReady zunächst die Datei »Test.HTM«. Im »Bilder«-Verzeichnis finden Sie die erforderlichen Einzelbilder wie »Test_01.jpg«, »Test_02.jpg« und so weiter. Sie können aber auch andere Schemata vorgeben. Dies regeln Sie in ImageReady mit der Schaltfläche Ausgabe-Einstellungen, im gleichnamigen Dialogfeld steuern Sie oben im Klappmenü den Bereich Slices an; alternativ nutzen Sie Datei: Ausgabe-Einstellungen: Slices (und nicht Bearbeiten: Voreinstellungen: Slices).

Bei der automatischen Benennung von Slices entscheiden Sie über die Verwendung von insgesamt sechs möglichen Abschnitten im Dateinamen - dort kann etwa der Name des Ausgangsdokuments, das Datum, ein anderer Name oder etwa ein Bindestrich erscheinen. Außerdem können Sie einen völlig eigenen Namensbestandteil in ein beliebiges Feld der »Voreinstellungen« tippen. Das Dialogfeld zeigt ein Beispiel, das zu den aktuellen Vorgaben passt, links unten und geht dabei von der Beispieldatei »MeineDatei« aus. Benötigen Sie einen der Namensabschnitte nicht, öffnen Sie das entsprechende Klappmenü und klicken ganz unten in der Liste auf »ohne«.

Abbildung 4.98:  Mit dem Befehl »Datei: Ausgabe-Einstellungen: Slices« regeln Sie, wie Slices automatisch benannt werden. Sie können Vorgaben für sechs verschiedene Abschnitte eines Namens machen.

Slices individuell benennen

Sie können einem Slice auch einen individuellen Namen zuteilen - völlig losgelöst von der automatischen Durchnummerierung. Diesen Eigennamen tippen Sie in der Slice-Palette ins Feld Name. Vermeiden Sie Umlaute, »ß«, Leerzeichen und andere exotische Zeichen. Sollten Sie Slice-Dateien in einem Dateiverzeichnis von Hand umbenennen, müssen Sie auch die zugehörige HTML-Datei korrigieren. Beachten Sie in diesem Fall auch, dass Unix-Internetserver zwischen Klein- und Großschreibung unterscheiden.

4.7.9 Slices mit Rollover-Effekten und Animationen

Sie können Rollover-Effekte und Animationen (siehe vorhergehende Hauptabschnitte) in einzelne Slices bringen. Die Möglichkeiten sind vielfältig; wir zeigen einige Beispiele in ImageReady auf Basis der zum Buch mitgelieferten Datei »Slices_1.psd«.

Rollover-Effekt

Der Slice 05 soll einen Rollover-Effekt erhalten. Hier liegen einige Münzen im Sand. Wir wünschen folgendes Verhalten:

  • Sobald der Mauszeiger über die Münzen gerät, soll mehr Kleingeld im Sand liegen. Außerdem brauchen wir eine gelb unterlegte Einblenderklärung und eine Meldung für die Statuszeile, dass es hier ums Geld geht.
  • Beim Anklicken sollen sich die gesamten Münzen tiefer in den Sand eindrücken.

Schalten Sie das Slice-Auswahlwerkzeug  ein und aktivieren Sie den Slice 05. Dann blenden Sie mit Hilfe des Fenster-Menüs die Rollover-Palette ein. Dort erscheint zunächst nur der Rollover-Zustand Normal und Sie erkennen an der Miniatur, dass nur der aktuelle Slice bearbeitet wird.

Klicken Sie in der Rollover-Palette auf die Schaltfläche Erstellt einen neuen Rollover-Status  . Dabei erscheint eine zweite Miniatur mit dem Titel Über. Hier erkennen Sie das Aussehen des Slice, wenn ein Mauszeiger darüber gerät. Im Slice links oben wie auch in der Slice-Palette blendet ImageReady das Rollover-Symbol ein, einen Mauszeiger.

Abbildung 4.99:  Der ursprüngliche Zustand des Slice wird zunächst in der Rollover-Palette dupliziert. Im Status »Über« wird dann die neue Ebene »Münzen 2« mit dem Augensymbol eingeblendet; sie zeigt mehr Münzen als die bisher sichtbare Ebene »Muenzen 1«. Diese Ebene blenden wir aus.

In unserem Beispiel kommen beim ersten Mauskontakt weitere Münzen ins Bild. Wir haben bereits eine entsprechende Ebene »Muenzen 2« in der Montage; diese Ebene war allerdings bis jetzt ausgeblendet. Holen Sie mit der Taste F7 die Ebenenpalette auf den Schirm und blenden Sie die Ebene »Muenzen 2« mit dem Augensymbol  ein. Durch einen Ebeneneffekt erscheinen auch diese Münzen leicht eingedrückt. Gleichzeitig blenden Sie die bisher angezeigte Ebene »Muenzen 1« aus.

Wenn die Rollover-Palette den Zustand Über zeigt, tippen Sie in der Slice-Palette die Meldung für die Statuszeile des Browsers und den Alt-Text für die gelb unterlegte Einblenderklärung. Diese Informationen erscheinen also, sobald der Mauszeiger über dieses Bildsegment gerät.

Abbildung 4.100:  Prüfen Sie auch die Slice-Palette. Wir geben hier im Feld »Alt« einen Einblendtext vor und im Feld »Meldung« einen Text, der in der Statuszeile des Browsers erscheint. Diese Angaben gelten für alle Rollover-Zustände gemeinsam - unabhängig davon, welcher Zustand momentan aktiviert ist.

Klicken Sie ein weiteres Mal auf die Schaltfläche Erstellt einen neuen Rollover-Status in der Rollover-Palette. Damit erhalten Sie den Rollover-Status Unten. Er speichert das Aussehen des Slice in dem Moment, wenn das Segment auf der Internet-Seite angeklickt wird. Dabei sollen sich die sichtbaren Münzen der Ebene »Muenzen 2« tiefer in den Sand drücken; dafür benötigen Sie keine neue Ebene, dies erledigt ein Ebeneneffekt.

Abbildung 4.101:  Wir haben den zweiten Rollover-Status erneut dupliziert und bearbeiten nun den Status »Unten«; hier legen Sie fest, wie das Slice in dem Moment aussieht, wenn es angeklickt wird. In der Ebenenpalette klicken Sie unter der Ebene »Muenzen 2« doppelt auf die Ebeneneffekt-Ebene »Abgeflachte Kante und Relief«. Damit erscheint die gleichnamige Palette; hier behalten Sie die Vorgabe »Relief an allen Kanten« bei. Sie erhöhen aber die Werte für »Weichzeichnen« und »Farbtiefe«.

Klicken Sie also doppelt auf die Schaltfläche Abgeflachte Kante und Relief unterhalb der Ebene »Muenzen 2«. Damit erscheint die Palette Abgeflachte Kante und Relief. Sie erkennen, dass bereits bisher der Effekt Relief an allen Kanten verwendet wurde. Sie erhöhen nun die Werte in den Feldern Weichzeichnen und Farbtiefe auf 4 oder 5. Spätestens nach einem Hieb auf die Eingabetaste wirkt es, als ob die Münzen deutlich tiefer in den Sand gesackt wären. Tragen Sie den gewünschten Hyperlink (URL) und eventuell ein Ziel in die URL-Zeile der Slice-Palette ein. Überprüfen Sie den Effekt mit der Browser-Vorschau (Strg+Alt+P).

Abbildung 4.102:  Wir überprüfen den Rollover-Effekt im Internet-Browser.  Links: Hier ruht der Mauszeiger noch über einem benachbarten Slice, deshalb sind links nur wenige Münzen zu sehen.  Mitte: Der Zeiger gelangt über den Slice mit Rollover-Effekt, dies ist der Zustand »Über«; zusätzliche Münzen werden eingeblendet, gelb unterlegt erscheint der »Alt«-Text, die Statuszeile zeigt die in der Slice-Palette angegebene »Meldung«.  Rechts: Der Slice wird angeklickt, der Zustand »Unten« tritt ein, die Münzen versinken im Sand. Datei (mit weiteren Effekten): SliceRoll.psd; HTML-Datei und Bild daten für Browser-Darstellung im Unterverzeichnis »SliceRoll«

Slices mit Animation

Innerhalb einer Slice-Tabelle lassen sich auch Animationen abspielen. Generell gibt es zwei Varianten:

  • Der Trickfilm im Slice läuft permanent ab.
  • Der Trickfilm im Slice ist an einen Rollover-Zustand gebunden. Er rotiert beispielsweise nur, wenn sich ein Mauszeiger über den Slice verirrt.

Unter den verschiedenen Strategien, in ImageReady eine Animation aus einem Slice abzuleiten, wirkt die folgende relativ einfach:

1. Klicken Sie den Slice mit dem Slice-Auswahlwerkzeug an.
2. Geben Sie in der Optimieren-Palette ein GIF-Dateiformat für diesen Slice vor, zum Beispiel Web-Palette mit Dithering.
3. Vergeben Sie in der Slice-Palette im Feld Name nur diesem einen Slice den Namen »Animation«.
4. Speichern Sie jetzt das Gesamtwerk mit dem Befehl Datei: Optimiert-Version speichern unter. Dabei entsteht eine HTML-Datei und ein »Bilder«-Verzeichnis mit den verschiedenen Bilddateien.
5. Speichern Sie das Gesamtwerk neu als Photoshop-Datei mit dem Befehl Datei: Speichern unter, verwenden Sie einen Namen wie »Zwischenergebnis«.
6. Nun kehren Sie wieder zurück zu dem Slice »Animation«. Der Slice muss ausgewählt sein. Sie beschneiden jetzt das Gesamtbild auf die Größe dieses einen Slice.
7. Sie nehmen den Befehl Auswahl: Auswahl aus Slice erstellen.
8. Anschließend verwenden Sie Bild: Freistellen mit der Option Löschen. Damit hat das Bild nur noch die Größe dieses einen Slices.
9. Sie dürfen mit Strg+S zwischensichern.
10. Es ist immer noch ein Slice-Rahmen im Bild, den Sie nicht brauchen. Wählen Sie also Slices: Alle löschen.

Damit haben Sie das Slice als Einzelbild.

Abbildung 4.103:  Um ein Slice als Einzelbild zu bearbeiten, markieren wir es mit dem Befehl »Auswahl: Auswahl aus Slice erstellen« und entfernen die Bild umgebung mit dem Befehl »Bild : Freistellen« und der Option »Löschen«. Der Ball befindet sich auf einer eigenen Ebene; Sie können also beispielsweise den Ball bewegen- entweder mit dem Verschieben-Werkzeug oder mit dem Paletten-Befehl »Dazwischen einfügen«. Schließlich speichert man diese Animation als GIF-Datei mit dem Befehl »Datei: Optimiert-Version speichern unter«. Dabei verwendet man denselben Namen im selben Verzeichnis wie für das bisherige Einzelbild aus der Slices-Tabelle.

So legen Sie die Animation an:

1. Blenden Sie mit dem Fenster-Menü die Animation-Palette ein.
2. Erstellen Sie eine Animation (Details in einem Hauptabschnitt weiter vorn). Einfacher Vorschlag: Duplizieren Sie das erste Einzelbild in der Animation-Palette mehrfach mit der Schaltfläche Dupliziert aktuellen Frame  und schieben Sie ein sichtbares Ebenenobjekt pro Einzelbild mit dem Verschieben-Werkzeug  ein Stück weiter. Dazu muss dieses Objekt in der Ebenenpalette aktiviert sein.
3. Ist GIF in der Optimieren-Palette vorgegeben? Dann wählen Sie Datei: Optimiert-Version speichern unter. Beschränken Sie sich im Klappmenü Dateityp auf die Option Nur Bilder. Speichern Sie Ihre Animation exakt in jenem Verzeichnis »Bilder«, in dem sich bereits die verschiedenen Einzelbilder für Ihre gesamte Slice-Komposition befinden. Und verwenden Sie den passenden, bereits vorhandenen Namen, also in unserem Beispiel »Animation.gif«.
4. Wenn Sie jetzt die HTML-Datei für die gesamte Slice-Tabelle in einem Internet-Browser öffnen, läuft die Animation ab.

Sie können dieses Gesamtergebnis nicht in einer einzelnen Photoshop-Datei festhalten und nicht per Browser-Vorschau aus ImageReady heraus besichtigen. Sie können jedoch die Animationsdatei als separate Photoshop-Datei aufheben. Gefällt Ihnen die Animation nicht mehr, reicht es aber auch, die GIF-Datei mit der Animation in ImageReady zu öffnen. Löschen Sie in der Animation-Palette alle Bilder bis auf eines, so dass ein Standbild zurückbleibt.

Animation als Rollover-Zustand

Sie können eine Animation auch als einzelnen Rollover-Zustand sichern. Der Film läuft beispielsweise erst los, wenn der Mauszeiger naht - und friert nach Abzug des Cursors wieder ein.

Abbildung 4.104:  Auch der Slice mit dem Schriftzug wird als Einzeldatei herausgetrennt, die Schrift wird als Animation schrittweise ausgeblendet. Dieser Effekt soll nur erscheinen, wenn der Mauszeiger über der Schrift liegt. Wir erzeugen also vorab innerhalb des Slice einen Rollover-Effekt für die Schrift. Die Einzelanimation speichern wir schließlich unter dem Namen und in dem Verzeichnis, in dem sich das Bild für den Zustand »Über« befindet.

Hier legen Sie im gewählten Slice zunächst die gewünschten Rollover-Zustände mit beliebigem Inhalt an - verwenden Sie aber in der Optimieren-Palette das GIF-Format. Danach geht es weiter wie oben beschrieben: Sie stellen den Slice frei, erzeugen eine Animation und wählen Optimiert-Version speichern unter. Nun speichern Sie das Bild als GIF-Datei; dabei nehmen Sie exakt den Namen derjenigen Bilddatei aus dem »Bilder«-Verzeichnis, welche den gewünschten Rollover-Zustand enthält - sie speichern zum Beispiel als »Animation_ over.gif«, um im Mauszustand Über eine Animation zu sehen. Die ursprüngliche Datei wird also überschrieben.

Abbildung 4.105:  Auf den letzten Seiten haben Sie eine Internet-Seite mit Slices, Rollover-Effekten und Animation erzeugt. Datei: SliceAnim.psd; HTML-Datei, Animationen im PSD-Format und Bild daten für Browser-Darstellung im Unterverzeichnis »SliceAnim«

4.8 Bilddarstellung beim Internet-Design

Vermutlich bearbeiten Sie hochwertige Bilddateien auf einem hochwertigen Rechner. Doch sind Ihre Motive erst online, hat es mit der erlesenen Qualität ein Ende:

  • Um die Datenmenge zu reduzieren, werden die Bilder mit Verlust gespeichert - die Bildqualität sinkt.
  • Sie wissen nicht, auf welchem Rechner Ihre Bilder überhaupt betrachtet werden. Möglicherweise verwendet Ihr Publikum nur 8-Bit-Grafikkarten, die maximal 256 unterschiedliche Farben darstellen können - Echtfarbdateien mit 24-Bit-Farbtiefe (maximal 16,7 Millionen unterschiedliche Farben) erscheinen hier verfälscht.

Abbildung 4.106:  Mit den Befehlen im Untermenü »Ansicht: Vorschau« simuliert ImageReady die Bild darstellung auf anderen Rechnern.

Sie sollten darum schon bei der Bildbearbeitung in ImageReady oder Photoshop die Bilder so realistisch wie möglich darstellen:

  • Sie können die beschränkte Wiedergabequalität auf einem fremden Rechner simulieren.
  • Und Sie können den Qualitätsverlust beim Speichern in einem Internet-typischen Dateiformat anzeigen und prüfen, noch bevor Sie dieses Format endgültig verwenden.

4.8.1 Darstellungsqualität simulieren

Windows- und Mac-Rechner setzen die im Bild gespeicherten Kontraste in unterschiedliche Monitorergebnisse um - sie arbeiten mit unterschiedlichem Monitorgamma.

Abbildung 4.107:  In dieser Zweifach-Ansicht zeigt ImageReady rechts bereits, wie die Bild qualität sinkt, wenn man die Originaldatei im JPG-Format mit der Qualitätsstufe 30 speichert. Sie erkennen jedoch nicht, wie dieses Echtfarbbild mit 24-Bit-Farbtiefe auf einem Monitor wirkt, der nur mit 8-Bit-Farbtiefe für maximal 256 unterschiedliche Tonwerte betrieben wird. Dazu ist noch der Befehl »Ansicht: Vorschau: Browser-Dithering« erforderlich. Datei: Kugel

Systemkompensierung

Ein Bild erscheint oft auf einem Windows-System dunkler als auf dem Mac. Sie haben im ImageReady-Untermenü Ansicht: Vorschau folgende Möglichkeiten:

  • Macintosh Standardfarbe simuliert die Farbanzeige an Mac-Rechnern.
  • Windows Standardfarbe ahmt die Farbwiedergabe von Windows-Systemen nach.
  • Eingebettetes Farbprofil verwenden berücksichtig ein Farbprofil, das Sie möglicherweise eingebettet haben. Damit erhalten Sie die Farbdarstellung aus Photoshop. Für Dateien ohne eingebettetes Farbprofil besteht die Option nicht. (ImageReady berücksichtigt die Information der ICC-Profile normalerweise nicht, sondern verwendet Monitor-RGB; das Programm erhält jedoch die in Bild vorhandenen ICC-Profile.)
  • Nicht kompensierte Farbe zeigt das Bild ohne Farbanpassung.

Photoshop bietet diese Befehle im Untermenü Ansicht: Proof einrichten, anschließend wählen Sie Ansicht: Farbproof. Sie erhalten die Funktionen abermals beim Befehl Datei: Für Web speichern; dort wählen Sie das Dreieck Menü Vorschau  über dem rechten Vorschau-Fenster. In keinem Fall ändern Sie dadurch das Bild selbst; nur die Darstellung verändert sich.

Abbildung 4.108:  Hier wurde der Befehl »Ansicht: Vorschau: Browser-Dithering« verwendet. ImageReady stellt jetzt die Vorschau so dar, als ob das Bild auf einem Rechner mit nur 8-Bit-Farbtiefe (maximal 256 unterschiedliche Farben) erscheinen würde. Sie erkennen das Dithering-Streuraster. Die »Original«-Ansicht (links) bleibt unverändert.

Datei an Betriebssystem anpassen (»Gamma«-Befehl)

Sie können eine Datei, die auf Ihrem Windows-Rechner mit optimalen Kontrasten erscheint, für eine gleichartige Darstellung am Mac korrigieren. Dazu dient der ImageReady-Befehl Bild: Einstellen: Gamma. Hier finden Sie die Schaltfläche Windows zu Macintosh, die Ihr Bild etwas dunkler macht. Umgekehrt wirkt Macintosh zu Windows. Der Gammawert lässt sich überdies stufenlos mit einem Schieberegler verändern. Diese Gamma-Korrektur funktioniert sogar auf den speziellen Textebenen, die sonst keine Filter oder Tonwertkorrekturen zulassen.

Bei dieser Funktion verändern Sie tatsächlich die Bildpunkte und nicht nur ihre momentane Darstellung. Laut Photoshop-Hersteller Adobe verwendeten Bilder aus Photoshop 4.0 oder früher den Macintosh-Gammawert und sollten für die Anzeige unter Windows angepasst werden. Bilder ab Photoshop 5.0 verwenden den Windows-Gammawert und erscheinen ohne Anpassung korrekt unter Windows.

Gamma-Anpassung und viele andere Kontrastveränderungen erlaubt der Befehl Bild: Einstellungen: Tonwertkorrektur; für die Gamma-Bearbeitung verwenden Sie das mittlere, graue Dreieck direkt unter dem Histogramm (Details ab Seite 469).

Abbildung 4.109:  Mit dem ImageReady-Befehl »Bild : Einstellen: Gamma« passen Sie Ihre Dateien für die Kontrastwiedergabe auf einem anderen Betriebssystem an.

Browser-Dithering simulieren

Alte Rechner können häufig nur 256 unterschiedliche Farben gleichzeitig darstellen, die Grafik arbeitet also nur mit 8-Bit-Farbtiefe. Da JPEG- und PNG-24-Dateien für das Internet jedoch bis zu 16,7 Millionen Farben enthalten, kommt es bei der Browser-Wiedergabe auf dem 8-Bit-Monitor zu Verlusten: Die verfügbaren Farbtönen werden durcheinander gestreuselt, um nicht verfügbare Farben zu simulieren. Speziell feine Farbübergänge wirken schnell verfälscht.

Auch wenn Sie an einem hochwertigen System mit Echtfarbdarstellung arbeiten, können Sie in ImageReady prüfen, wie Ihre Bilder auf einem Rechner mit schlichterer Grafikwiedergabe herauskommen:

1. Aktivieren Sie im Dateifenster nicht das Original, sondern eine für das Internet »optimierte« Variante. Ohne diese Vorbereitung steht der Befehl nicht zur Verfügung.
2. Dann verwenden Sie in ImageReady den Befehl Ansicht: Vorschau: Browser-Dithering (Strg+Umschalt+Y). Damit erscheint die Vorlage im Streuraster, wie es Internet-Browser erzeugen. (Sie erhalten den Befehl auch im Untermenü Vorschau anzeigen des Kontextmenüs über dem Dateifenster.)

Bei dieser Darstellung wird die Bildqualität in keiner Weise geschädigt. Sie wenden durch den Befehl Browser-Dithering in keiner Weise Dithering auf die Bilddatei an (dies tun Sie höchstens mit der Optimieren-Palette, sofern Sie die Dateiformate GIF oder PNG-8 verwenden). Erkennen Sie beim Browser-Dithering grobe Verfälschungen, sollten Sie die Datei anders optimieren, zum Beispiel mit einem höheren Anteil an web-sicheren Farben.

In Photoshop wählen Sie den Befehl Datei: Für Web speichern; anschließend klicken Sie auf das Vorschau-Dreieck  rechts oben. Dort bietet Photoshop in einem Einblendmenü das Browser-Dithering an.

Vergessen Sie nicht, die Betrachtungsweise Browser-Dithering durch erneute Anwahl des Befehls wieder auszuschalten - ImageReady zeigt bei geschlossenem Untermenü keinerlei Hinweis, dass Sie mit dem verfälschenden Browser- Dithering arbeiten.

Rechner auf 256 Farben umstellen

Wollen Sie ganz sichergehen, können Sie auch Ihren gesamten Rechner auf 256 Farben umstellen. Dies geschieht so:

  • Unter Windows klicken Sie mit rechts auf den Windows-Desktop, im Kontextmenü wählen Sie die Eigenschaften und im Dialogfeld Eigenschaften von Anzeige die Registerkarte Einstellungen. Im Klappmenü Farben (unter Windows NT Farbtiefe) wechseln Sie dann zu 256 Farben. Überprüfen Sie Ihre Dateien nun am besten direkt im Internet-Browser.
  • Am Mac stellen Sie die Farbtiefe im Kontrollfeld Monitore ein.

Auch wenn Sie Ihre Bilder mit 256-Farben-Systemgrafik bearbeiten, verlieren Sie dadurch keinerlei Bildqualität. Sie haben aber erheblich weniger Feinkontrolle.

Zoomstufe 100 Prozent

Internet-Browser zeigen Ihre Bilddateien zumeist in der Zoomstufe 100 Prozent (sofern Sie die Bilder nicht mit HTML-Code skalieren). Sie sollten Ihre Dateien deshalb auch in ImageReady und Photoshop in der 100-Prozent-Darstellung prüfen. Dies gilt insbesondere für feine Strukturen und filigrane Schriftarten - sie wirken in vielen anderen Vergrößerungsstufen verzerrt (Details und Bildbeispiele ab Seite 69).

Die Zoomstufe 100 Prozent richten Sie beispielsweise mit dem Befehl Ansicht: Tatsächliche Pixel ein, der sich auch in den Werkzeugoptionen zur Lupe  findet. Schneller geht es mit Strg+0 oder mit dem Doppelklick auf die Lupe.

4.8.2 Unterschiedliche Dateieigenschaften darstellen

Vielleicht bearbeiten Sie eine TIFF- oder PSD-Datei mit 24, 32, 48 oder 64 Bit Farbtiefe. Doch fürs Internet werden Sie meist die Formate JPG oder GIF verwenden und dabei leidet die Bildqualität. Sie sollten schon vor dem endgültigen Speichern sehen, wie Ihr Werk letztlich im geplanten Dateiformat mit der geplanten Qualitätsstufe wirkt.

Abbildung 4.110:  Vier Varianten eines Bild es mit unterschiedlichen Dateiformatvorgaben zeigt ImageReady hier nebeneinander. Die aktive Variante wird durch ein schwarzes Rähmchen hervorgehoben. Die Optimieren-Palette zeigt die Vorgaben für die aktive Variante. Wurde als Dateiformat in der Optimieren-Palette GIF oder PNG-8 vorgewählt, zeigt die Palette »Farbtabelle« die maximal 256 Farben für die aktuelle Variante. Unten links erscheinen noch einmal Daten zur aktiven Variante. Die Art der Angaben dort lässt sich einstellen. Datei: F_Zitro

Öffnen Sie eine Bilddatei in ImageReady und klicken Sie oben im Dateifenster auf den Reiter 4fach. Nun zeigt das Programm vier Varianten Ihres Bildes. Ganz links oder links oben erscheint meist das Original. Dazu sehen Sie drei bereits für das Internet heruntergerechnete Varianten - so genannte »optimierte« Dateien. Photoshop bietet eine weitgehend vergleichbare Darstellung mittels Datei: Für Web speichern; sie ist jedoch umständlicher, da man stets erst das Dialogfeld aufrufen und wieder schließen muss. Wir besprechen hier zunächst die Möglichkeiten mit ImageReady und gehen im Anschluss auf Besonderheiten bei Photoshop ein.

Gleich unter den einzelnen Ansichten lesen Sie die aktuellen Dateiformat-Einstellungen wie etwa »GIF, 11,3 KB, 0% Dithering, Web-Palette«. Auch die Datenübertragungszeit bei einer festgelegten Modemgeschwindigkeit wird mitgeteilt. Diese Angaben direkt unter den Einzelbildern verbergen Sie per Ansicht: Optimierungsinformationen ausblenden.

Ein schwarzes Rähmchen hebt jeweils die aktivierte Variante hervor. Alle Dateiformatvorgaben für diese aktivierte Variante erscheinen in der Optimieren-Palette, die Sie mit dem Fenster-Menü aufrufen. Verändern Sie nun in der Optimieren-Palette alle Einstellungen - etwa das geplante Dateiformat oder die Qualitätsstufe; ImageReady überträgt die neuen Vorgaben sofort auf die aktuelle Variante im Dateifenster. Sie können nach Belieben in jedem einzelnen Fenster auch das »Original« anzeigen. Bei einem Format, das 256 Farben darstellen kann - also GIF oder PNG-8 -, zeigt die Farbtabelle die Farben für die jeweils aktivierte Variante. Die Farbtabelle rufen Sie ebenfalls im Fenster-Menü auf. Zum Arbeiten sollten Sie das Original-Fenster aktivieren (siehe auch unten, »Bildbearbeitung in der Mehrfach-Ansicht«).

Darstellung aktualisieren

Passt ImageReady die Bilddarstellung in allen Qualitätsvarianten nicht automatisch Ihren geänderten Wünschen an, probieren Sie es durch Drücken der Eingabetaste (sofern der Eingabe-Cursor noch in diesem Dialogfeld blinkt). Oder öffnen Sie das Menü zur Optimieren-Palette mit dem Dreieck rechts oben in diesem Bildschirmelement und wählen Sie Darstellungen erneuern.

Sie können die automatische Anpassung aber auch ganz abschalten - etwa, weil die Neuberechnung zu lange dauert. Dazu wählen Sie im Menü der Optimieren-Palette die Funktion Auto Regenerieren ab. Vorschaufenster, die nicht mehr die aktuelle Bildbearbeitung wiedergeben, zeigen dann jeweils rechts unten ein Warndreieck  . Wollen Sie ein einzelnes Fenster aktualisieren, klicken Sie auf das Warndreieck oder wählen Regenerieren im Menü der Optimieren-Palette. Dadurch wechseln Sie wohlgemerkt nicht dauerhaft zur automatischen Regenerierung.

Häufig stört die Mehrfach-Vorschau nur und sie schluckt Platz. Deswegen beschränkt man sich oft auf die reine Originalansicht im Bildfenster und wechselt erst vor dem endgültigen Speichern zu einer Mehrfach-Darstellung.

Abbildung 4.111:  Hier wurde das Bild verändert. Doch die Korrekturen sieht man nur im »Original«, nicht in den »optimierten« Varianten. ImageReady hat die anderen Darstellungen nicht angepasst, weil im Menü der Optimieren-Palette das »Auto Regenerieren« ausgeschaltet wurde. Darum erscheint ein Warndreieck in den Bild varianten, die nicht mehr den neuesten Stand der Korrektur wiedergeben. Um diese Varianten zu aktualisieren, klicken Sie auf das Warndreieck oder Sie wählen »Regenerieren« im Menü der Optimieren-Palette.

Zentrale Bildinformation

Unten links im Rahmen des Bilddateifensters zeigt ImageReady weitere Bilddaten. Dort gibt es drei Bereiche; jeden Bereich richten Sie über ein Menü nach Ihren Vorstellungen ein. Das entsprechende Menü erhalten Sie durch Klick auf das schwarze Dreieck im jeweiligen Bereich:

  • Ganz links wird die Zoomstufe angezeigt, das Menü bietet weitere Zoomstufen an.
  • Das mittlere und das rechte Menü enthalten identische Informationsangebote: unter anderem einen Vergleich zwischen Original und optimierter Version, der sich beispielsweise so liest: »455 KB / 36,95 KB GIF«. Sie können hier aber auch Pixelmaße, Wasserzeichenstärke (vergleiche Seite 907) oder die Zahl der widerrufbaren Bildkorrekturen einblenden.

Abbildung 4.112:  Unten links im Bild fenster zeigt ImageReady Informationen über die aktivierte Variante. Welche Angaben dort erscheinen, lässt sich über Menüs einstellen.

Bildbearbeitung in der Mehrfach-Ansicht

Um das Bild mit Pinseln zu bearbeiten, müssen Sie die Original-Variante aktivieren. Die anderen Funktionen lassen sich auch nutzen, wenn eine so genannte »optimierte« Version aktiviert ist. Sie können in allen vier Vorschau-Fenstern den sichtbaren Ausschnitt mit Lupe  (Strg+Leertaste) oder Verschiebe-Hand  (nur Leertaste) bewegen.

Wechsel der Darstellung

Mit den Reitern oben im Bilddatei-Rahmen kehren Sie jederzeit zu einer anderen Darstellung zurück - so zeigen Sie beispielsweise nur das Original, nur eine optimierte Variante oder verwenden eine 2fach-Ansicht. Entsprechende Befehle bietet je nach Situation auch das Ansicht-Menü.

Ziehen Sie zum Beispiel den 4fach-Reiter aus dem Dateifenster auf die ImageReady-Arbeitsfläche - Sie erhalten damit eine neue Vierfach-Ansicht derselben Datei. Dies entspricht dem Photoshop-Befehl Fenster: Neue Ansicht. Doch auch wenn Sie mehrere 4fach-Darstellungen nebeneinander stellen, lassen sich nicht mehr als maximal fünf unterschiedliche Qualitäten anzeigen; und eine davon muss das Original sein.

Vorgaben für die Mehrfach-Vorschau

Verwenden Sie die Vierfach-Ansicht, zeigt ImageReady in der Regel als erstes Bild das Original, dann eine Version mit den aktuellen Vorgaben aus der Optimieren-Palette und dazu zwei weitere, kleinere Fassungen. Sie können jedoch festlegen, welche Optimiert-Varianten ImageReady zuerst präsentiert. Dazu dient der Befehl Bearbeiten: Voreinstellungen: Optimierung. Sie machen hier separate Vorgaben für die alleinige Darstellung einer optimierten Version, für die Zweifach- und für die Vierfach-Darstellung.

Diese Möglichkeiten haben Sie:

  • Sie können die Zuvor benutzte Einstellung verwenden, wenn Sie den aktuellen Eintrag in der Optimieren-Palette beibehalten wollen. Diese Option heißt in einigen Klappmenüs Aktuell.
  • Sie können GIF / JPEG automatisch wählen. Bei grafischen Motiven sowie bei Motiven mit Transparenz und Animation schlägt ImageReady dann zunächst das besser geeignete GIF-Format vor, bei Halbtonbildern dagegen JPG.
  • Auto erzeugt eine kleinere, optimierte Bildversion. Diese Option gibt es nur, wenn Sie in den 2fach-Einstellungen und in den 4fach-Einstellungen bereits eine Aktuelle Version vorgesehen haben.

Abbildung 4.113:  Mit dem Befehl »Bearbeiten: Voreinstellungen: Optimierung« bestimmen Sie, welche Optimierungseinstellungen ImageReady in der Mehrfach-Vorschau zuerst anbietet.

  • Oder Sie greifen auf eine Benannte Einstellung zurück. Gemeint sind Vorgaben wie »JPEG hoch« - also Dateiformat-Einstellungen, die Sie in der Optimieren-Palette speichern können. Einige Klappmenüs listen die vorhandenen gespeicherten Einstellungen direkt auf.

4.8.3 Der Photoshop-Befehl »Für Web speichern«

Photoshop bietet mit dem Befehl Datei: Für Web speichern (Strg+Alt+Umschalt+S) die Möglichkeit, nach Art von ImageReady ein Bild in vier Varianten anzuzeigen. In vielen Punkten gleicht das Dialogfeld der Mehrfach-Vorschau von ImageReady. Allerdings: Der Photoshop-Befehl Für Web speichern lässt keine Korrektur mehr zu. Sie können hier zoomen und den Bildinhalt in einem zu kleinen Fensterausschnitt verschieben; aber Retuschen am Bildinhalt sind innerhalb dieses Fensters nicht möglich.

Innerhalb des Dialogfelds Für Web speichern zeigt Photoshop Eingriffsmöglichkeiten, die ImageReady auf verschiedene Paletten verteilt: Dazu gehören die Bereiche Farbpalette, Einstellungen (für Dateiformatvorgaben mit den Voreinstellungen aus ImageReady) oder die Slices-Kontrolle.

Ändern der »Bildgröße«

Auch eine Bildgrösse-Korrektur finden Sie im Dialogfeld Für Web speichern. Sie ändern hier also die Maße der optimierten Version, das Original bleibt mit den Originalwerten unversehrt zurück.

Sie können hier nur Pixel- und Prozentwerte ändern, keine Druckmaße. Zwar stehen verschiedene Interpolationsverfahren zur Wahl, aber das oft nach einer Größenänderung empfehlenswerte Scharfzeichnen lässt sich nicht anschließen - dazu müssten Sie die Datei neu öffnen, korrigieren und abermals speichern. Haben Sie neue Größenwerte angegeben, klicken Sie auf die Schaltfläche Anwenden - damit rechnet das Programm die verschiedenen Darstellungen auf die neuen Maße um. Oft ist es sinnvoller, das Bild vorab mit dem Befehl Bild: Bildgröße herunterzurechnen (Details ab Seite 177).

Einblendmenüs

Photoshops Dialogfeld Für Web speichern zeigt vier mit dem Dreieck  gekennzeichnete Schaltflächen, die zu Menüs führen. Diese Funktionen wurden bereits im vorhergehenden Abschnitt bei ImageReady geklärt:

  • Rechts oben, oberhalb vom zweiten Bildfenster, regeln Sie die Bilddarstellung, zum Beispiel Browser-Dithering oder Macintosh Standardfarbe (Näheres ab Seite 343).
  • Ganz rechts außen finden Sie die Verwaltung der Dateiformatvorgaben. Sie können Einstellungen speichern, Einstellungen löschen oder Auf Dateigröße optimieren. Wenn Photoshop die Anzeige nach einer Änderung nicht aktualisiert, lassen sich hier die Darstellungen erneuern.
  • Rechts unten, rechts unter dem rechten Bild, gibt es Schaltflächen, um die aktivierte - also durch einen Rahmen hervorgehobene - Bildvariante in einem Internet-Programm anzuzeigen.
  • Das Klappmenü links unten stellt verschiedene Zoomstufen zur Auswahl. Sie können die Bilddarstellung aber auch direkt mit Lupe  und Verschiebehand  regeln.
  • Mit dem Slice-Auswahlwerkzeug  aktivieren Sie einzelne Slices, um für diese die Optimierungseinstellungen zu ändern (Details zu Slices ab Seite 321) (siehe Abbildung 4.116).

Abbildung 4.114:  Der Photoshop-Befehl »Datei: Für Web speichern« stellt mehrere Varianten der Bild datei dar. Enthalten sind Eingabemöglichkeiten für Farbtabelle, Dateiformatvorgaben, Slices und Bild größe. Über die Schaltflächen mit Dreieck blenden Sie Menüs ein. Vielseitiger und bequemer bietet diese Funktionen jedoch ImageReady an.

Zurücksetzen und merken

Drücken Sie bei geöffnetem Dialogfeld Für Web speichern die Alt-Taste, ändern sich die zwei Schaltflächen oben rechts:

  • Aus Abbrechen wird - wie immer - Zurück. Per Anklicken setzen Sie die aktuelle Variante auf die Dateiformatvorgabe zurück, die bei Öffnen des Dialogfeldes galt.
  • Aus OK wird Merken. Klicken Sie darauf, wenn in diesem Variationsfenster auch weiterhin die momentan sichtbaren Dateiformatvorgaben gemacht werden sollen. Beim nächsten Öffnen erscheint in diesem Fenster wieder eine Bildfassung mit den »gemerkten« Einstellungen. Die anderen Bildfassungen werden automatisch davon abgeleitet - es sind Varianten mit geringerer Dateigröße. Dies geschieht unabhängig von den Vorgaben, die Sie eventuell bei ImageReady mit dem Befehl Bearbeiten: Voreinstellungen: Optimieren gemacht haben.

Weitere Photoshop-Befehle für die Bilddarstellung

Photoshop bietet weitere Funktionen, die für Bilddarstellung beim Internet-Design von Bedeutung sind:

  • Speichern Sie ein Bild im JPG-Format mit den Funktionen Speichern unter oder Kopie speichern unter, meldet das Photoshop-Dialogfeld resultierende Dateigröße und Übertragungszeit; das aktuell sichtbare Bild passt sich bereits den Qualitätsvorgaben an. Sie müssen also in Photoshop nicht unbedingt den Befehl Für Web speichern anklicken.
  • Reduzieren Sie die Farbtiefe mit dem Befehl Bild: Modus: Indizierte Farben auf acht Bit (256 Farben), so sehen Sie noch bei geöffnetem Dialogfeld den Qualitätsverlust, sofern die Vorschau eingeschaltet ist.

4.8.4 Bilddarstellung im Internet-Browser

Sie können aus Photoshop und aus ImageReady heraus das Bild unmittelbar in einem Internet-Browser anzeigen. Praktisch: Zusätzlich zum Bild selbst sehen Sie Dateigröße, Pixelmaße, Dateiformatvorgaben und HTML-Code direkt im Browser-Fenster. Diese Angaben beziehen sich auf die optimierte Version, die zuletzt in der Mehrfach-Vorschau oder im Photoshop-Dialogfeld Für Web speichern aktiviert war.

In ImageReady verwenden Sie zur Browser-Vorschau das Untermenü Datei: Vorschau in, die Schaltfläche Vorschau in Standard-Browser aus der Werkzeugleiste oder statt dessen Strg+Alt+P. In Photoshop nehmen Sie den Befehl Datei: Für Web speichern und dann die Schaltfläche rechts unten. Es ist egal, ob der Browser geöffnet oder geschlossen ist.

Neue Browser für das Untermenü »Vorschau in«

Im Untermenü Vorschau in bieten ImageReady und Photoshop jene Internet-Browser sofort an, die bereits vor Installieren von Photoshop und ImageReady auf der Platte waren. Weitere und neue Browser können Sie bequem hinzufügen:

So fügen Sie dem ImageReady-Untermenü Springen zu neue Programme hinzu:

1. Wechseln Sie in das Verzeichnis des gewünschten Programms.
2. Erzeugen Sie eine Verknüpfung der Programmdatei. In Windows klicken Sie dazu die Datei mit rechts an und verwenden den Kontextmenü-Befehl Verknüpfung erstellen. Am Mac legen Sie ein Alias an.
3. Verschieben oder kopieren Sie die Verknüpfung in den Photoshop-Ordner »Helpers/Preview in«.
4. Nach dem nächsten Programmstart steht der Browser zur Verfügung.

Beachten Sie, dass Sie mit einem vergleichbaren Verfahren per Datei: Springen zu schnell auch zu anderen Grafikprogrammen oder HTML-Editoren wechseln können (Details ab Seite 67).

Abbildung 4.115:  Der ImageReady-Befehl »Datei: Vorschau in« zeigt, wie das aktuelle Bild im Internet-Browser wirkt. ImageReady blendet hier auch die Optimierungseinstellungen und den kompletten HTML-Code ein. In der Adresszeile des Browsers erkennen Sie das temporäre Verzeichnis, in dem ImageReady die Dateien für diese Vorschau ablegt.

Vorteile der Browser-Darstellung

Die Darstellung im Internet-Browser hat viele Vorteile:

  • Animationen laufen nur im Browser, nicht aber in ImageReady mit der korrekten Geschwindigkeit ab.
  • Slices sollte man unbedingt in einem Browser prüfen - besser in verschiedenen Browsern, da es durchaus zu Abweichungen kommen kann.
  • ImageReady zeigt Hintergrundkacheln nicht mehrfach aneinander gesetzt. Wollen Sie die Vielfach-Bildwirkung prüfen, müssen Sie die Kacheldatei als Hintergrundmuster definieren und im Browser begutachten (oder Sie verwenden die Bearbeiten-Befehle Muster definieren und Fläche füllen mit der Option Muster).
  • Auch ein mit Transparenz freigestelltes Bild lässt sich in ImageReady oder Photoshop nicht ganz korrekt überprüfen. Man müsste schon das Hintergrundmuster oder die Hintergrundfarbe vorübergehend ins Original hineinmontieren. Bei der Vorschau im Web-Browser werden jedoch Hintergrundmuster oder Hintergrundfarben, die Sie mit dem ImageReady-Befehl Datei: HTML-Hintergrund eingerichtet haben, berücksichtigt.
  • Bei der Browser-Darstellung blendet ImageReady zusätzlich den HTML-Code ein; Sie können ihn hier überprüfen oder auch markieren und kopieren.

HTML-Code prüfen

Der HTML-Code erscheint zwar direkt in der Browser-Vorschau. Sie können ihn aber aus dem Browser heraus auch in einem zusätzlichen Fenster öffnen; dazu dient ein Browser-Befehl wie Ansicht: Quelltext anzeigen.

Nur Windows: Der Internet Explorer für Windows öffnet den Quelltext im Programm Editor, bei sehr großen HTML-Dateien im Programm WordPad; dort lässt sich der HTML-Code bei Bedarf bearbeiten und neu speichern. Nach einem Klick auf die Schaltfläche Aktualisieren sehen Sie das Ergebnis Ihres Eingriffs.

Temporäres Verzeichnis

Für die Vorschau im Browser erzeugt ImageReady die erforderlichen HTML- und Bilddateien in einem Temporär-Verzeichnis:

  • Windows: Die Dateien für die Browser-Vorschau finden Sie im aktuellen Temp-Verzeichnis Ihres Systems, den genauen Pfad - man kann auch URL dazu sagen - entnehmen Sie der Adresszeile des Browsers. Dabei entstehen typischerweise Unterverzeichnisse wie »Temp/ImageReady/TargetPreview210/Testdatei.html«. Achten Sie darauf, dass im Temp-Verzeichnis genügend Platz vorhanden ist. Sie können die Dateien dort bei Bedarf direkt weiterverwenden, löschen oder austauschen. Klicken Sie dann im Browser auf Aktualisieren oder Neu laden, um die geänderte Internet-Grafik zu sehen. Läuft alles korrekt, werden die Dateien im »Temp«-Verzeichnis bei Schließen der Programme gelöscht.
  • Mac: Die Vorschaudateien befinden sich im unsichtbaren Verzeichnis »Cleanup at startup«.

Abbildung 4.116:  Windows: Im »Temp«-Verzeichnis Ihres Systems legt ImageReady die Dateien ab, die für die »Vorschau«-Darstellung im Internet-Browser erforderlich sind.

4.9 Transparenz

Übliche Bilddateien stehen stets in einer Rechteck-Box. Man kann aber auch Freiform-Ausschnitte anlegen, so dass der Hintergrund der Internet-Seite durchscheint - entweder die Hintergrundfarbe oder das Hintergrundmuster. Sie stellen beispielsweise Schriftzüge, nicht-rechteckige Schaltflächen oder beliebige, frei ausgeschnittene Objekte so auf die Seite, dass die Motive unmittelbar vom Seitenhintergrund umgeben werden.

Transparenz-Möglichkeit bieten die Formate GIF, PNG-8 und PNG-24. JPG scheidet komplett aus. Weil das PNG-Format noch nicht sehr verbreitet ist, erzeugt man Freisteller meist mit GIF-Bildern. Diese sind freilich auf 255 Farbtöne beschränkt.

Abbildung 4.117:  Soll ein Motiv freigestellt über dem Hintergrund erscheinen, schalten Sie in der Optimieren-Palette für GIF oder PNG die »Transparenz« ein. Sonst wird das freigestellte Motiv von einer Rechteck-Fläche umgeben.

4.9.1 Transparenz mit harten Kanten

Wir behandeln zunächst Freisteller mit harten Kanten - also den typischen Fall. Dabei sind keinerlei weiche Übergänge möglich, nicht einmal das »Glätten« mit seinen halbtransparenten Randpixeln. Jeder Bildpunkt erscheint auf der Webseite entweder voll deckend oder gar nicht.

Zunächst benötigen Sie transparente Bereiche im Bild: Zonen also, in denen der typische karierte Hintergrund durchscheint. Eventuell bearbeiten Sie einen Schriftzug oder ein Objekt, das mit den Formwerkzeugen entstand, oder Sie verwenden Ebenenmasken oder Ebenenfreistellpfade; dann gibt es vielleicht schon Transparenz im Bild. Ansonsten müssen Sie Ihr Objekt erst freischneiden - wie im folgenden Beispiel aus ImageReady:

Abbildung 4.118:  Schalten Sie den Zauberstab mit der Kurztaste W ein, richten Sie in den Optionen etwa eine Toleranz von 33 ein und schalten Sie die Option »Benachbart« ein. Nun klicken Sie in den Bild hintergrund. Erste Bereiche werden von einer schwarzweißen Fließmarkierung umgeben. Klicken Sie bei gedrückter Umschalt-Taste oder bei gedrückter Schaltfläche »Auswahl erweitern« noch mehrfach ins Bild , bis die Umgebung des Hauptmotivs komplett ausgewählt ist. Löschen Sie den Hintergrund dann mit der Entfernen-Taste. Datei: Hand.jpg

Abbildung 4.119:  Links im Fenster für das »Original« erkennen Sie am Karomuster, dass das Objekt jetzt tatsächlich über transparenter Fläche liegt.  Rechts in der Vorschau »optimierten« Variante ist von der Transparenz aber nichts zu erkennen. Warum? Weil die Optimieren-Palette für dieses Vorschaufenster ein JPG-Dateiformat vorgibt - und JPG unterstützt generell keine Transparenz. Statt dessen erscheint hinter dem Objekt generell diejenige »Hintergrund«-Farbe, die Sie in der Optimieren-Palette eingestellt haben, hier also Weiß.

Abbildung 4.120:  Hier wurde in der Optimieren-Palette das GIF-Format eingerichtet. Außerdem haben wir in derselben Palette die »Transparenz« eingeschaltet. Nur mit dieser Vorgabe erscheint die Hand freigestellt. (Dies gilt auch für das PNG-8-Format.) Die Hand erscheint auch dann im Browser freigestellt, wenn bei »Hintergrund« irgendeine beliebige Farbe aktiviert ist (allerdings eventuell mit veränderten Kanten, siehe unten »Harte Kanten an Hintergrund anpassen«). Sie können das Ergebnis jetzt mit dem Befehl »Datei: Optimiert-Version speichern« als GIF-Datei konservieren, um es freigestellt auf der Seite zu präsentieren. Sie benötigen keinen HTML-Code für dieses freigestellte Objekt. Ergebnisdatei: Hand.gif

Abbildung 4.121:  Wir stellen eine neue »Hintergrund«-Farbe in der Optimieren-Palette ein. Die Hintergrundfarbe erscheint gleichwohl nicht in der ImageReady-Vorschau.

Abbildung 4.122:  Mit dem Befehl »Datei: Vorschau in« testen wir das Bild in einem Internet-Browser. Die zuvor gewählte »Hintergrund«-Farbe erscheint wohlgemerkt nur dann auf der fertigen Internet-Seite, wenn für die geplante Gesamtseite keine Hintergrundfarbe oder kein Hintergrundmuster definiert wurden. Die Farbe dient also nur der Prüfung. Bauen Sie das Ergebnisbild in eine Seite ein, für die Hintergrundfarbe oder Hintergrundmuster definiert wurden, ist von der hier verwendeten Hintergrundfarbe nichts zu sehen. Ergebnisdatei: Hand.gif

Abbildung 4.123:  Wir testen die freigestellte GIF-Datei aus ImageReady heraus mit dem geplanten Seitenhintergrund. Dazu verwenden wir in ImageReady den Befehl »Datei: Ausgabe-Einstellungen: Hintergrund« mit der Vorgabe »Ansicht unter: Bild « und tragen im Bereich »Hintergrund« das geplante Hintergrundmuster ein, in diesem Beispiel »Kachel.jpg«. (Dabei muss im Programmfenster die Datei »Hand« aktiviert sein.) Das »Kachel«-Muster erscheint nicht im ImageReady-Dateifenster, es wird aber bei der Browser-Vorschau verwendet. Es spielt keine Rolle, welchen »Hintergrund« Sie in der Optimieren-Palette eintragen.

Abbildung 4.124:  Hier wurde in der Optimieren-Palette noch einmal das JPG-Format angewählt. Weil es keine Transparenz unterstützt, erscheint hier die gewählte »Hintergrund«-Farbe in der Vorschau. Falls Sie diese Variante speichern, wird der Hintergrund mitgesichert.

Auswählen in Photoshop

Im vorhergehenden Beispiel haben wir das Hauptmotiv direkt in ImageReady ausgeschnitten. Photoshop bietet freilich mehr Auswahlfunktionen als ImageReady, so etwa den Extrahieren-Befehl, den Maskierungsmodus oder die Pfadtechnik.

Schneiden Sie das Motiv also bei Bedarf in Photoshop frei. Dann wählen Sie in diesem Programm den Befehl Datei: Für Web speichern - Sie können dort ebenso eine transparente GIF-Datei sichern wie in unserem Beispiel aus dem Programm ImageReady. Alternativ wechseln Sie mit der Schaltfläche Springen zu ImageReady  (Strg+Umschalt+M) zu Image Ready und setzen die Arbeit dort fort.

4.9.2 Harte Kanten an Hintergrund anpassen

Noch immer behandeln wir Freisteller mit harten Kanten. Als wir in der vorhergehenden Übung die Hand mit dem Zauberstab  ausgewählt haben, kam es aus zwei Gründen zu hellen Säumen rund um das Objekt herum:

  • Etwas von dem hellen Studiohintergrund des Fotomotivs gelangte mit in die Auswahl. Ursache hierfür sind unter anderem Kontrastsäume, die durch das Scharfzeichnen entstehen.
  • Zudem entstanden halbtransparente Bildpunkte am Objektrand, weil wir beim Auswählen die Option Glätten verwendet haben. (Dies gilt auch für die Glätten-Optionen des Textwerkzeugs.) Diese halbtransparenten Bildpunkte werden beim Speichern im GIF-Format zu gänzlich undurchsichtigen Bildpunkten.

Abbildung 4.125:  Diese Browser-Vorschau zeigt unschöne weiße Kanten. Die Gründe: Reste der hellen Studioumgebung sind mit in die Auswahl des Hauptmotivs geraten. Außerdem haben wir die Auswahl mit der »Glätten«-Vorgabe des Zauberstabs erzeugt. Dabei entstehen halbtransparente Randpixel. Weil das GIF-Format Halbtransparenz nicht unterstützt, werden diese Bild punkte, sofern sie zu mindestens 50 Prozent decken, in voll deckende Bild punkte übersetzt. Und dabei mischt ImageReady in die Halbtransparenz die aktuelle »Hintergrund«-Farbe aus der Optimieren-Palette ein; diese »Hintergrund«-Farbe war auf Weiß gestellt, so dass der Objektrand hier aufgehellt wurde. Gleichzeitig haben wir als Seitenhintergrund mit dem Befehl »Datei: Ausgabe-Einstellungen: Hintergrund« im Bereich »Hintergrund« schwarze Farbe als Seitenhintergrund gewählt. Die hellen Objektkonturen treten so besonders deutlich hervor.

Abbildung 4.126:  Hier testen wir das freigestellte Objekt vor einem helleren Hintergrund, die Farbe haben wir wieder in den Ausgabe-Einstellungen eingerichtet. Die Kanten fallen weniger auf. Die Information über die »Hintergrund«-Farbe aus der Optimieren-Palette wie auch über den Seitenhintergrund aus dem Befehl »Ausgabe-Einstellungen: Hintergrund« wird im Photoshop-Dateiformat mitgespeichert. Datei: Hand_3.psd

Übersicht: Säume um das Objekt herum vermeiden

Entstehen helle Bildkanten und steht das Objekt vor einem dunklen Seitenhintergrund, dann tritt ein heller Saum hervor. Dagegen können Sie Folgendes unternehmen:

  • Schneiden Sie das Motiv so frei, dass garantiert keine Bildumgebung mit in der Auswahl ist. Zum Beispiel wählen Sie zunächst den Hintergrund aus und vergrößern die Auswahlfläche noch mit dem ImageReady-Befehl Auswahl: Auswahl transformieren: Ausweiten (in Photoshop heißt es korrekter Auswahl: Auswahl verändern: Ausweiten). Außerdem müssen Sie in den Optionen zum Auswahlwerkzeug auf Glätten verzichten. Dabei kappt man freilich leicht an einigen Stellen zuviel vom Hauptmotiv weg.
  • Alternative: Sofern Ihnen die Hintergrundfarbe der geplanten Internet-Seite bekannt ist, rechnen Sie diese Farbe schon in die Objektkanten hinein. Dies geschieht mit dem Hintergrund-Klappmenü in der Optimieren-Palette. Dabei entsteht eine Mischung zwischen Objektfarbe und Hintergrundfarbe, die für einen harmonischen Übergang sorgt.

Abbildung 4.127:  Hier ist Schwarz als »Hintergrund«-Farbe in der Optimieren-Palette festgelegt. In alle halbtransparenten Randpixel des freigeschnittenen Objekts mischt ImageReady also beim Speichern als »optimierte« GIF-Datei Schwarz ein. Diese Vorgabe eignet sich nur, wenn Sie einen dunklen Seitenhintergrund planen.  Datei: Hand_2.psd

Das »Hintergrund«-Klappmenü der Optimieren-Palette

Mit dem Hintergrund-Klappmenü aus der Optimieren-Palette bestimmen Sie, welche Farben ImageReady in halbtransparente Bildpunkte ihres Objekts hineinrechnet. Solche halbtransparenten Bildpunkte gibt es zum Beispiel nach einer Auswahl mit der Glätten-Option oder auch bei Textebenen, die mit einer Glätten-Vorgabe entstanden. Wählen Sie eine Farbe aus, die der Farbe auf Ihrer Internet-Seite entspricht - so entsteht ein harmonischer, scheinbar geglätteter Übergang zum Seitenhintergrund. Folgende Möglichkeiten haben Sie:

  • Klicken Sie auf das Hintergrund-Farbfeld. Damit erscheint der Farbwähler, und Sie können eine Farbe frei aussuchen (verwenden Sie eventuell Nur Web-Farben).
  • Klicken Sie auf das Dreieck neben dem Hintergrund-Farbfeld. Hier bietet ImageReady unter anderem Vordergrundfarbe, Hintergrundfarbe und eine komplette Palette von Internet-tauglichen Farbtönen an.
  • Klicken Sie auf das Dreieck neben dem Hintergrund-Farbfeld und wählen Sie Ohne. Dann rechnet das Programm keine fremde Farbe in halbtransparente Pixel. Statt dessen macht ImageReady alle Bildpunkte mit mehr als 50 Prozent Deckkraft voll deckend, alle Bildpunkte mit weniger Deckkraft verschwinden gänzlich. Dies verhindert unschöne Farbsäume, betont aber ausgezackte Objektkonturen.

Diese Eingriffe beeinflussen nicht die für die HTML-Datei gespeicherte Farbe des Seitenhintergrunds. Sie erzeugen auch keine rechteckige Hintergrundfläche, die unter dem kompletten Hauptmotiv liegt - solange Sie die Transparenz in der Optimieren-Palette eingeschaltet lassen.

Abbildung 4.128:  Hier wird der »Hintergrund« in der Optimieren-Palette auf Weiß umgestellt. Jetzt füllt ImageReady alle halbtransparenten Pixel des Objekts mit Weiß auf. Damit fügt sich das Motiv wesentlich besser vor einen hellen Seitenhintergrund. Die »Hintergrund«-Vorgabe in der Optimieren-Palette verändert in keinem Fall den in der HTML-Datei beschriebenen Seitenhintergrund. Sofern Sie die »Transparenz«-Option in der Optimieren-Palette eingeschaltet lassen, entsteht hierbei auch keine rechteckige Hintergrundfläche, die unter dem kompletten Hauptmotiv liegt. Datei: Hand_3

Farbe für Seitenhintergrund aus HTML-Code kopieren

Möchten Sie die Farbe für den Seitenhintergrund unmittelbar aus einer HTML-Datei übernehmen? Die Hintergrundfarbe wird in der HTML-Datei so angegeben: 

<BODY BGCOLOR=#FFFFFF>

Dieses Beispiel beschreibt reines Weiß. So übernehmen Sie den Farbwert nach ImageReady:

1. Öffnen Sie die HTML-Datei, deren Hintergrundfarbe Sie verwenden wollen, zum Beispiel in einem Textprogramm.
2. Markieren Sie den Wert für BODY BGCOLOR - hier also »FFFFFF« - mit der Maus.
3. Kopieren Sie den Code mit Strg+C in die Zwischenablage.
4. Wechseln Sie zu ImageReady und klicken Sie in der Optimieren-Palette auf das Hintergrund-Farbfeld. Damit öffnet sich der Farbwähler.
5. Ganz unten rechts erscheint im Farbwähler das mit »#« bezeichnete Feld für den Farbcode auf der Internet-Seite. Markieren Sie diesen Eintrag komplett mit der Maus, zum Beispiel durch einen Doppelklick.
6. Fügen Sie den zuvor aus der HTML-Datei kopierten Farbcode per Strg+V so ein, dass der bisherige Wert komplett überschrieben wird.

Farbe für Seitenhintergrund mit Pipette aufnehmen

Dazu gibt es noch eine Alternative, wenn Sie die Farbe unmittelbar anzeigen können - zum Beispiel, indem Sie die Internet-Seite online aufrufen: Schalten Sie die ImageReady-Pipette  ein (Kurztaste I), klicken Sie in einen Bildpunkt innerhalb von ImageReady und ziehen Sie die Pipette dann bei gedrückter Maustaste über den Internet-Browser (oder an eine beliebige andere Stelle). Der zuletzt berührte Bildpunkt liefert die nächste Vordergrundfarbe für ImageReady.

Farbe oder Muster für Seitenhintergrund im Bildprogramm testen

Sie können bereits in ImageReady oder Photoshop die Farbe oder das Muster für den Seitenhintergrund testen. So erkennen Sie bereits im Bildprogramm, ob es zu harten Übergängen kommt:

1. Erzeugen Sie mit der Schaltfläche Neue Ebene  der Ebenenpalette eine neue Ebene.
2. Ziehen Sie diese Ebene in der Palette unter das freigestellte Objekt.
3. Stellen Sie die Farbe der Internet-Seite wie im vorhergehenden Abschnitt beschrieben als Vordergrundfarbe ein.
4. Falls es noch eine Auswahl in Ihrem Bild gibt, sollten Sie diese jetzt mit Strg+D aufheben.
5. Während die neue, leere Ebene noch aktiviert ist, nehmen Sie den Befehl Bearbeiten: Fläche füllen mit der Option Vordergrundfarbe (Alt+Entf) oder Muster.

Nach dem OK-Klick erscheint die Farbe in Ihrer Montage. Prüfen Sie die Übergänge. Achtung: Bevor Sie das Ganze in ImageReady mit dem Befehl Optimiert-Version speichern als GIF ablegen, lassen Sie diese Hintergrundfarbe wieder verschwinden:

  • Ziehen Sie die Ebene in der Ebenenpalette in den Papierkorb  oder blenden Sie die Ebene mit dem Augensymbol aus.

Abbildung 4.129:  Die Wirkung einer Hintergrundfarbe wird hier bereits in ImageReady getestet. Wir haben eine neue Ebene angelegt, unter das Objekt gezogen und mit der Farbe für den Seitenhintergrund gefüllt. Löschen oder verbergen Sie diese Ebene vor dem endgültigen Speichern als GIF-Datei.

Transparenz per Farbtabelle in Photoshop zuweisen

Sofern Sie bereits ein Bild im Modus Indizierte Farben vor sich haben, können Sie in Photoshop unmittelbar aus der Farbpalette heraus einen Tonwert als transparent festlegen:

1. Sie klicken auf Bild: Modus: Farbtabelle.
2. Schalten Sie im Dialogfeld die Pipette  ein.
3. Klicken Sie die gewünschte Farbe in der Farbtabelle oder im Bild an.

Der entsprechende Bereich erscheint sofort als transparent.

4.9.3 Übergänge bei Muster-Hintergrund

Im vorhergehenden Abschnitt haben Sie gesehen, wie man Objektkanten so einfärbt, dass Sie scheinbar in die Hintergrundfarbe der Internet-Seite übergehen. Dies wird jedoch problematisch, wenn Sie keine einfache Hintergrundfarbe verwenden, sondern ein Muster.

Abbildung 4.130:  Links: Dieses freigestellte Objekt hat links unten einen halbtransparenten Übergang und zudem einen halbtransparenten Schatten. Doch im GIF-Dateiformat lassen sich die feinen Deckkraftabstufungen nicht umsetzen. Rechts: Hier sehen Sie die Browser-Vorschau. Wir hatten in der Optimieren-Palette das GIF-Dateiformat gewählt, »Transparenz« aktiviert und als »Hintergrund«-Farbe Weiß angegeben. ImageReady rechnet jetzt für die GIF-Version Weiß in alle halbdeckenden Bild teile ein. Mit dem Befehl »Datei: Ausgabe-Einstellungen: Hintergrund« haben wir die Datei »Kachel« als »Hintergrund«-Muster festgelegt. Vorlage: Globus.psd

Muster bestehen aus mehreren Farben. Die Probleme beginnen schon, wenn das Objekt nur eine hauchdünne halbtransparente Kante hat, Folge des Glättens bei Auswahlwerkzeugen oder Textfunktion. Problematischer noch sind weiche Übergänge oder Schatten. Folgende Auswege sind denkbar:

  • Speichern Sie die Datei mit weichem Übergang im Dateiformat PNG-24 mit aktivierter Transparenz-Option. Dieses Format unterstützt solche weichen Übergänge - etwa nach Art einer Ebenenmaske in Photoshop. Allerdings ist PNG kein gängiges Format für Internet-Browser (siehe unten) und weiche Übergänge bereiten noch mehr Umstände als harte Kanten: Dazu muss der Betrachter seinen Browser mit einem Plug-in für »Alpha-Transparenz« ausstatten.
  • Legen Sie das Muster schon in ImageReady unter das Objekt und rechnen Sie das Muster in die Objektkanten hinein. Dann speichern Sie im GIF-Format mit Transparenz. Dieses Verfahren ist jedoch sehr umständlich und garantiert kein hochwertiges Ergebnis.
  • Legen Sie das Muster schon in ImageReady oder Photoshop unter das Objekt. Dann speichern Sie das komplette Bild als normales Rechteck im GIF- oder JPEG-Format ohne Transparenz.

Die beiden unteren Möglichkeiten funktionieren dann, wenn Sie ein fein ziseliertes Hintergrundmuster ohne grobe Kontraste und Unterschiede verwenden.

Abbildung 4.131:  Links: Wir haben das Hellblau des geplanten Hintergrundmusters als »Hintergrund«-Farbe in die Optimieren-Palette für das GIF-Format übernommen. Dazu schalteten wir in ImageReady die Pipette ein. Mit diesem Werkzeug klickten wir in ein geöffnetes Bild , um dann die Pipette in eine Browser-Vorschau mit dem geplanten Muster weiterzuziehen, bis ein gewünschter Hellblauton als Vordergrundfarbe in der Werkzeugleiste erkennbar war. Im »Hintergrund«-Klappmenü der Optimieren-Palette gaben wir dann die »Vordergrundfarbe« an. Damit rechnet ImageReady einfarbiges Hellblau in halbtransparente Bereiche. Der Kontrast zum umgebenden Muster ist nicht ganz so stark wie bei der weißen »Hintergrund«-Farbe.  Rechts: Im »Hintergrund«-Klappmenü der Optimieren-Palette wurde »Ohne« gewählt. Jetzt entfernt ImageReady für die GIF-Version sämtliche Bild punkte, die nicht vollständige Deckkraft haben.

Muster unter das gesamte Objekt legen

Unabhängig davon, ob Sie die Musterdatei nur in die weichen Objektkanten hineinrechnen oder als komplettes Rechteck unter das Objekt legen wollen - zunächst muss das Muster unter Ihrem Objekt in der ImageReady-Montage erscheinen. So geht's:

1. Öffnen Sie die Musterdatei, wählen Sie diese mit Strg+A aus, bestimmen Sie diese Auswahl als Muster mit dem Bearbeiten-Befehl Muster definieren.
2. Wechseln Sie zu Ihrem Hauptmotiv und erzeugen Sie eine neue Ebene, die Sie unter das Objekt ziehen.
3. Wenn die Ebene aktiviert ist, wählen Sie Bearbeiten: Fläche füllen (Umschalt+Rückschritt) mit der Option Muster.

Nun sehen Sie das Muster unter Ihrem Objekt. Wenn Sie das Ergebnis als normales Rechteck-Bild auf die Webseite stellen, sind Sie nicht mehr an das GIF-Format gebunden, sondern können auch JPG verwenden - für nuancierte Halbtonfotos die bessere Lösung. Aktivieren Sie eine »optimierte« Version in der Mehrfach-Vorschau - also nicht das Original -, und machen Sie die Dateiformatvorgaben in der Optimieren-Palette. Dann sichern Sie das Ergebnis mit dem Befehl Datei: Optimiert-Version speichern.

Abbildung 4.132:  Links: Wir versuchen es mit dem Format PNG-24, das stufenlose Transparenz unterstützen soll. Doch während die Transparenzdarstellung in Photoshop und ImageReady funktioniert, erscheint das Objekt im Browser mit grauem Hintergrund: Der Browser ist nicht mit dem erforderlichen Browser-Plug-in für Alpha-Transparenz ausgestattet.  Rechts: Hier haben wir das Muster unter das Objekt montiert und das Ergebnis als normale Rechteck-Datei im JPG-Format gesichert. Weil es sich um ein sehr unauffällig strukturiertes Muster handelt, entsteht keine harte Kante zwischen dem Muster innerhalb der Bild datei und dem Muster, das separat als Seitenhintergrund festgelegt wurde. Dateien: Globus.png, Globus_2.psd

4.10 Speichern für das Internet

Wollen Sie Ihre Bilddateien für die Veröffentlichung im Internet speichern, bietet ImageReady optimale Funktionen - mehr als Photoshop und mehr als die meisten anderen Bildprogramme. Wir konzentrieren uns deshalb hier auf ImageReady und besprechen die Besonderheiten von Photoshop in einem speziellen Abschnitt.

4.10.1 Übersicht

Um die Dateigröße möglichst niedrig zu halten, nimmt man Qualitätseinbußen in Kauf. Oft speichert man das Ergebnis parallel in zwei Dateiformaten:

  • im Photoshop-Format, das die volle Bildqualität erhält, aber auch alle Informationen über Slices, Animation, Hintergrundkachel oder Rollover-Effekte aufbewahrt. Dazu dient in ImageReady der Befehl Datei: Speichern unter.
  • im zulässigen Dateiformat für die Internet-Seite, also meist GIF oder JPG. Dies erledigt der Befehl Datei: Optimiert-Version speichern unter. Dabei entsteht je nach Situation auch HTML- und JavaScript-Code.

Ablauf

Der generelle Ablauf beim Speichern für das Internet in ImageReady:

1. Sie öffnen ein Bild in einem beliebigen Dateiformat.
2. Mit den Reitern oben im ImageReady-Bildfenster erzeugen Sie eine 2fach- oder 4fach-Darstellung. Sie sehen also nebeneinander das Original und fürs Internet heruntergerechnete Varianten, so genannte optimierte Versionen.
3. Sie aktivieren per Mausklick eine der »optimierten« Versionen und passen in der Optimieren-Palette die Vorgaben an - das Dateiformat und die Feineinstellungen für dieses Format. Dabei achten Sie auf die entstehende Bildqualität und auf die Angaben zur Dateigröße unten im Bildfenster.
4. Sie aktivieren die Bildvariante, die Sie endgültig sichern möchten, in der Mehrfachansicht. Dann rufen Sie den Befehl Datei: Optimiert-Version speichern unter auf.
5. Im Dialogfeld geben Sie beim Klappmenü Dateityp an, ob Sie nur Bilder oder auch den HTML-Code wollen - also jenen HTML-Code, der erforderlich ist, um eine gestaltete Seite und nicht nur das reine Foto zu veröffentlichen. Dann klicken Sie auf OK.

4.10.2 Das Dialogfeld »Ausgabe-Einstellungen: Dateien speichern«

Mit dem Befehl Datei: Ausgabe-Einstellungen: Dateien speichern machen Sie Vorgaben, wie Dateien für das Internet gespeichert werden, wenn Sie den Befehl Datei: Optimiert-Version speichern in ImageReady verwenden. Dieses Dialogfeld erhalten Sie in ImageReady auch mit der Schaltfläche Ausgabe-Einstellungen nach Anwahl des Befehls Datei: Optimiert-Version speichern unter, in Photoshop über die gleichnamige Schaltfläche im Dialogfeld Für Web Speichern.

Abbildung 4.133:  Mit dem ImageReady-Befehl »Datei: Ausgabe-Einstellungen: Dateien speichern« geben Sie vor, wie das Programm neu entstehende Bild dateien benennt.

Dateien benennen

Zunächst bearbeitet man nur eine einzelne Vorlage. Wird das Ergebnis jedoch für das Internet gespeichert, produziert ImageReady mitunter gleich mehrere Bilddateien - so zum Beispiel bei Rollover-Effekten oder Slices. In diesem Fall können Sie regeln, wie die neu entstehenden Dateien benannt werden. Sie können beispielsweise wählen, ob ursprünglicher Dateiname oder Datum Bestandteil der neuen Namen sein sollen. Details zum Benennen besprechen wir in den relevanten Abschnitten etwa zu »Slices« ab Seite 337.

Titel und Copyright-Informationen

Sie können die HTML-Datei mit Titel- und Copyright-Informationen garnieren, wenn Sie die Option Copyright einfügen verwenden. Der Titel erscheint in der Titelleiste des Internet-Browsers; die Copyright-Hinweise sehen Sie nur im HTML-Quelltext, nicht auf der Browser-Oberfläche. So geben Sie die Informationen ein:

  • ImageReady greift auf Angaben zurück, die Sie mit dem Befehl Datei: Bildinformation in den zwei Feldern Seitentitel und Copyright machen.
  • In Photoshop machen Sie die entsprechenden Angaben mit dem Befehl Datei: Datei-Information in den Feldern Objektbeschreibung und Copyright (siehe auch Seite 85).

Weitere Optionen

Das Dialogfeld Ausgabe-Einstellungen bietet im Bereich Dateien speichern weitere Optionen:

  • Sofern Sie mit Hintergrund-Vorgaben in den Ausgabe-Einstellungen eine Hintergrundkachel definiert haben (siehe Seite 313), kann ImageReady diese Kachel mit zu den weiteren Bilddateien für Ihr Gesamtbild hinzukopieren. Aktivieren Sie dafür die Option Hintergrundbild beim Speichern kopieren. Das ist meist übersichtlicher, als wenn Sie die Kachel am ursprünglichen Speicherort verwenden.
  • Legen Sie fest, ob Bilder in einem Unterverzeichnis unterhalb der HTML-Datei angelegt werden sollen; dies gilt für Slices- und Rollover-Ergebnisse.
  • Richten Sie Kompatibilität mit anderen Betriebssystemen ein. Windows-Dateien werden beispielsweise für den Mac auf weniger als 32 Buchstaben einschließlich Endungen gekürzt, Leerzeichen durch Bindestriche ersetzt.

Vermeiden Sie Sonderzeichen und Umlaute ganz.

Ausgabe-Einstellungen speichern

Sie können alle Ausgabe-Einstellungen speichern und bei späteren Projekten wieder aufrufen. Gelungene Einstellungen verewigen Sie mit der Schaltfläche Speichern in einer Datei mit der Endung ».iros«. ImageReady bietet hier zum Speichern zunächst das Unterverzeichnis »Vorgaben/Optimierte Ausgabe-Einstellungen« innerhalb Ihres Photoshop-Verzeichnisses an; Sie sehen, dass dort bereits einige Ausgabe-Einstellungen gelagert wurden, unter anderem »Standardeinstellungen« und »Hintergrundbild«.

Speichern Sie Ihre eigenen Vorgaben am besten im selben Verzeichnis - Sie lassen sich dann über das Einstellung-Klappmenü unkompliziert aufrufen. Wollen Sie Einstellungen aus einem anderen Verzeichnis laden, nutzen Sie die Schaltfläche Laden. Sobald Sie an den vorgegebenen Settings etwas ändern und diese Einstellung nicht speichern, erscheint im Einstellung-Klappmenü die Bezeichnung Eigene.

4.10.3 HTML-Code erzeugen und weiterverwenden

Sie können eine Internet-Seite aus einer einzigen Bilddatei zusammenstellen und diese Bilddatei als Adresse angeben. Dann erscheint im Web-Browser die Datei vor weißem Hintergrund.

Manche ImageReady-Ergebnisse erfordern jedoch zwingend HTML-Code - darin wird unter anderem Bildplatzierung und Bildsequenz geregelt:

  • Zwingend erforderlich ist HTML-Code für Slices und Rollover-Effekte.
  • Komplett ohne HTML-Code funktionieren dagegen Animationen, Transparenzeffekte und der Bildaufbau in mehreren Durchgängen beziehungsweise nach Interlaced-Schema; Dateien mit diesen Eigenschaften können Sie direkt als Einzelbild verwenden und in Internet-Seiten einbauen.

Um HTML-Code zu erhalten, verwenden Sie im Dialogfeld zum Befehl Optimiert-Version speichern unter das Klappmenü Dateityp mit den Vorgaben HTML und Bilder (*.html) oder Nur HTML (*.html). Die entstehende HTML-Datei enthält nur die Seitenbeschreibung, nicht jedoch die Bilder selber.

Welchen HTML-Code ImageReady exakt schreibt, regeln Sie mit dem Befehl Datei: Ausgabe-Einstellungen (siehe vorhergehender Abschnitt). ImageReady bietet die Ausgabe-Einstellungen auch per Schaltfläche an, wenn Sie den Befehl Optimiert-Version speichern unter wählen. Generell sollten Sie in den Dateinamen Umlaute und andere exotische Schriftzeichen vermeiden (Leerzeichen können Sie automatisch ersetzen lassen, siehe oben, Umlaute nicht). Die besonderen HTML-Optionen etwa für Imagemaps oder Slices besprechen wir in den jeweiligen Hauptabschnitten.

Abbildung 4.134:  Der Befehl »Datei: Voreinstellungen: HTML« zeigt die Optionen für den HTML-Code an, den ImageReady erzeugt.

HTML-Code weiterverwenden

Sie müssen den HTML-Code aus ImageReady nicht als abgeschlossene Einzelseite verwenden, sondern können ihn auch in komplexere HTML-Dokumente einbauen.

Sie haben mehrere Möglichkeiten, den HTML-Code aus ImageReady weiterzuverwenden: Nehmen Sie zum Beispiel den Befehl Datei: Optimiert-Version speichern unter mit der Option Nur HTML (*.html). Öffnen Sie die resultierende HTML-Datei etwa in einem Textprogramm, markieren Sie den Code, kopieren Sie ihn mit Strg+C und fügen Sie ihn mit Strg+V in eine vorhandene andere Seite ein.

»HTML-Code kopieren«

Sie können den HTML-Code unmittelbar in die Zwischenablage kopieren; dazu dient das ImageReady-Untermenü Bearbeiten: HTML-Code kopieren. Nun können Sie Alle Slices kopieren oder nur Ausgewählte Slices kopieren. Sofern Sie Ihr Bild nicht in Slices aufgeteilt haben, unterscheiden sich diese Optionen nicht in ihrer Auswirkung. Die Funktion Geladene kopieren bringt nur JavaScript-Code in die Zwischenablage, der für Rollover-Effekte erforderlich ist. In der Zieldatei fügen Sie den Code mit Strg+V wieder ein.

Alternativ laden Sie Ihr Ergebnis mit Strg+Alt+P in den Internet-Browser. Dabei zeigt ImageReady den kompletten HTML-Code auf der Seite an. Sie können den Code mit der Maus markieren, mit Strg+C kopieren und mit Strg+V in einem anderen Programm wieder einfügen.

»HTML aktualisieren«

Haben Sie HTML-Code für ein Bild in eine andere HTML-Datei eingefügt und das Bild anschließend in ImageReady bearbeitet? Sie können nun den HTML-Code für dieses Bild in der HTML-Datei automatisch aktualisieren. Dies kann etwa interessant sein, wenn Sie Slices umarrangiert haben. Sie korrigieren also mit ImageReady eine HTML-Datei, die in einem anderen Programm zustande kam.

Zunächst speichern Sie die optimierte Datei mit der HTML-Datei für das Bild. Dann wählen Sie Datei: HTML aktualisieren. Nun geben Sie die HTML-Datei an, in der sich der Code für das Bild befindet. Klicken Sie auf Bilder speichern, wenn Sie auch die Bilddatei sichern wollen. Dann klicken Sie auf Öffnen.

Einblendtext für Bilder

Soll Ihr Bild besonders schnell Information transportieren, dann bedenken Sie, dass Sie Bilder auch mit Einblendmeldungen ausstatten können sowie mit Meldungen, die in der Statuszeile erscheinen. So gelangt eine Textvariante der Bildinformation schneller zu Ihrem Publikum als die Pixel selbst. Die Einblendmeldung erscheint außerdem wie ein Dateiname im bereits sichtbaren Bildrahmen, wenn der Bildinhalt selbst noch nicht übertragen wurde. So reichern Sie eine Einzeldatei mit Text an:

1. Rufen Sie mit dem Fenster-Menü die Slice-Palette auf. Wählen Sie im Palettenmenü den Befehl Optionen einblenden oder klicken Sie auf das Doppeldreieck  neben dem Palettennamen, um alle Optionen zu sehen.
2. Tragen Sie eine Meldung und einen Alt-Text ein, bei Bedarf auch einen Hyperlink. Details zu diesen Funktionen finden Sie ab Seite 333.
3. Nun bauen Sie das Bild samt HTML-Code in Ihre Internet-Seite ein. Verwenden Sie zum Beispiel die Befehle Optimiert-Version speichern unter oder Bearbeiten: HTML-Code kopieren. Die Informationen werden auch im Photoshop-Dateiformat mitgesichert.

4.10.4 Überblick: die Optimieren-Palette

In der Optimieren-Palette, abrufbar über das Fenster-Menü, machen Sie alle Vorgaben für diejenige »optimierte« Bildversion, die im Dateifenster aktiviert ist. Diese aktivierte Version hebt ImageReady durch ein Rähmchen hervor. Klicken Sie mehrfach auf das Dreieck  neben dem Palettennamen oder wählen Sie den Paletten-Befehl Optionen einblenden, bis Sie alle Regelmöglichkeiten sehen. Photoshop bietet weitgehend dieselben Möglichkeiten mit dem Befehl Datei: Für Web speichern.

»Einstellungen« speichern

Sie können beliebige Vorgaben in der Optimieren-Palette als so genannte »Einstellung« speichern und per Einblendmenü wieder abrufen. Also speichern Sie zum Beispiel die komplette Information »JPEG-Format mit Qualitätsstufe 60, ohne Optimieren, in mehreren Durchgängen, ohne Weichzeichnen« und holen sie nach Bedarf wieder her.

Das heißt: Möchten Sie ein Dateiformat mit allen konkreten Vorgaben öfter verwenden, öffnen Sie das Menü der Optimieren-Palette durch Klick auf das Dreieck rechts oben und wählen Einstellungen speichern. Jede Einstellung wird als separate Datei im Verzeichnis »Vorgaben/Optimierte Einstellungen« innerhalb Ihres Photoshop-Ordners abgelegt. Haben Sie bereits eine vorhandene Einstellung geöffnet, können Sie per Palettenmenü diese Einstellungen löschen.

Haben Sie eine gespeicherte »Einstellung« durch Veränderung einzelner Optionen verändert, erscheint im Menü Einstellungen der Hinweis [Unbenannt]. Ein gänzlich leeres Einstellungen-Menü sehen Sie, sofern Sie mehrere Slices mit unterschiedlichen Vorgaben markieren.

Abbildung 4.135:  Die Optimieren-Palette speichert Dateiformatvorgaben als »Einstellung«.

»Auf Dateigröße optimieren«

Sie können ein Bild auf eine festgelegte Dateigröße optimieren. ImageReady ändert dann die Vorgaben so, dass die von Ihnen gewünschte Dateigröße erreicht wird - zumindest einigermaßen. Zunächst sollten Sie in der Mehrfach-Vorschau eine »optimierte« Bildversion und nicht das Original aktivieren. Außerdem wählen Sie in der Optimieren-Palette das Dateiformat, das Sie ohnehin verwenden wollen. Dann öffnen Sie mit einem Klick auf das Dreieck  oben rechts in der Optimieren-Palette das Palettenmenü und wählen Auf Dateigröße optimieren. Das Dialogfeld bietet folgende Optionen:

  • Aktuelle Einstellungen geht von denjenigen Vorgaben aus, die Sie bereits in der Optimieren-Palette gemacht haben - JPG bleibt also auf jeden Fall JPG. Diese Option haben Sie jedoch nicht, wenn in der Optimieren-Palette das Dateiformat PNG gewählt war. Dann bietet ImageReady nur die Option:
  • GIF/JPEG automatisch wählen: Hier stellt ImageReady das Dateiformat passend zu den Eigenschaften des Bildes ein; Grafisches ohne Kantenglättung wird also anders behandelt als fein abgestufte Halbtöne.
  • Sofern Sie Slices bearbeiten (Details ab Seite 321), können Sie den Aktuellen Slice auf die angepeilte Dateigröße zwingen; Jedes Slice bringt jeden einzelnen Slice auf die gewünschte Dateigröße, Alle Slices setzt die Summe aller Slices auf den genannten Wert.

Tippen Sie die Gewünschte Dateigrösse ein und klicken Sie auf OK. Damit verändert sich die aktivierte »optimierte« Bildversion - ImageReady rechnet die Variante auf die Zielgröße um. Sie können die erreichte Größe direkt unter der Bildversion ablesen; dort wie auch in der Optimieren-Palette erkennen Sie überdies, welche Einstellungen geändert wurden.

Abbildung 4.136:  Der Befehl »Auf Dateigröße optimieren« aus dem Menü zur Optimieren-Palette rechnet die aktivierte »optimierte« Bild version in der Vorschau auf die von Ihnen gewünschte Dateigröße um.

Automatisierte Bearbeitung: Droplets anlegen

ImageReady verwandelt eine ganze Reihe von Bildern automatisch in ein gewünschtes Dateiformat auf Basis Ihrer gespeicherten Einstellungen. Dazu verewigen Sie die Einstellung als so genanntes Droplet. Details zu dieser Technik finden Sie ab Seite 131. Wir geben hier eine Kurzdarstellung:

1. Klicken Sie auf den Pfeil  rechts oben in der Optimieren-Palette.
2. Ziehen Sie diesen Pfeil auf den Windows-Desktop beziehungsweise auf den Mac-Schreibtisch. Windows: Hier sehen Sie neben dem Mauszeiger ein Plus-Zeichen. Mac: Sie sehen die Kontur des Objekts.
3. Sobald Sie die Maustaste loslegen, sehen Sie ein neues, pfeilförmiges Symbol auf dem Desktop. Es trägt eine Bezeichnung wie »GIF erstellen (Auto Farben, World Wide Web, 100 Prozent Dither).exe«.

Wenn Sie den Droplet-Pfeil einfach nur anklicken, erhalten Sie ein Speichern-Dialogfeld. In diesem Fall lassen sich Name und Speicherplatz für das Droplet frei wählen.

Droplets anwenden

So nutzen Sie das Droplet:

  • Um einzelne Dateien mit den per Droplet gespeicherten Vorgaben zu verändern, markieren Sie diese Dateien in einem Ordner und ziehen sie auf das Droplet-Symbol, das sich auf dem Windows-Desktop oder in einem Ordner befindet. ImageReady speichert die Dateien im Herkunftsordner unter einem neuen Namen. Aus »Test.tif« wird zum Beispiel »Test-01.jpg«.
  • Ziehen Sie den gesamten Ordner auf das Symbol, um alle Bilder aus diesem Ordner zu verändern.

ImageReady speichert die Dateien im Herkunftsordner. Zusätzlich zu »Test.tif« erhalten Sie dann zum Beispiel »Test.gif«, sofern Sie eine Verwandlung ins GIF-Format angewendet haben. Dabei verändert sich die Ursprungsdatei nicht.

Wird jedoch bei einem Droplet das Dateiformat nicht verändert, muss ImageReady den Dateinamen vor der dreistelligen Dateiendung korrigieren. Aus »Test.jpg« wird zum Beispiel »Test-01.jpg«, wenn das Droplet nicht das Dateiformat verändert. Auch hier landet die neue Datei im Ordner der ursprünglichen Datei, die ihrerseits nicht verändert wird.

Weitere Funktionen der Optimieren-Palette haben Sie bereits im vorhergehenden Abschnitt »Bilddarstellung beim Internet-Design« kennen gelernt.

4.10.5 Allmählicher Bildaufbau

Bilder für WWW-Seiten im Internet werden meist in den Formaten GIF, JPG oder PNG gespeichert. Bei allen drei Dateitypen lässt sich die Form des allmählichen Bildaufbaus steuern. Normalerweise müht sich das Bild Zeile für Zeile, von oben nach unten, auf die Seite. Sie können jedoch auch eine andere Darstellungsart wählen: Dann steht sofort ein komplettes Rechteck auf der Seite, es zeigt Ihre Vorlage sehr verschwommen. In mehreren Durchgängen wird das Bild schärfer.

Dieser Bildaufbau in mehreren Wellen heißt beim JPEG-Format Mehrere Durchgänge, bei GIF und PNG Interlaced. Die Wirkung unterscheidet sich bei den einzelnen Formaten. Die JPG-Variante bereitet Schwierigkeiten in älteren Bildprogrammen und Browsern.

Eine Vorschaufunktion für diesen allmählichen Bildaufbau gönnen die Photoshop-Programmierer ihren Kunden nicht. Der JPG-Bildaufbau in »mehreren Durchgängen« lässt sich am eigenen Rechner gar nicht beobachten, sondern nur bei langsamer Datenübertragung per Modem. Der GIF-Aufbau nach Interlaced-Schema lässt sich in Photoshop oder ImageReady generell nicht verfolgen. Sie sehen den Aufbau einer Datei von der heimischen Festplatte aber eventuell in einem Internet-Browser - zumindest dann, wenn Sie eine sehr große Datei laden. Je schneller der Rechner, desto größer muss die Datei sein.

Im »Praxis«-Verzeichnis der CD zu diesem Buch finden Sie die Datei »GIF- Interlaced.gif«. Sie ist mit 3885x2565 Pixeln so groß, dass sich der allmähliche »Interlaced«-Bildaufbau meist auch beobachten lässt, wenn Sie die Datei nicht aus dem Internet, sondern vom eigenen Rechner abrufen. Ziehen Sie die Datei in einen Internet-Browser - in ImageReady oder Photoshop sehen Sie den Effekt ohnehin nicht. Das gleiche Motiv liefern wir überdies als »JPEG_mehrere_ Durchgaenge.jpg« mit. Der Bildaufbau nach dem Schema »mehrere Durchgänge« lässt sich jedoch meist nicht beobachten, wenn die Datei vom eigenen Rechner aufgerufen wird.

Abbildung 4.137:  Zuwachs: Mit »Interlaced«-Vorgabe erscheint sofort ein volles Bild -Rechteck auf dem Schirm. Das Motiv wird zunehmend deutlicher. Datei: Gesicht.gif

4.10.6 Die Wahl des Dateiformats

Nur drei Dateiformate zeigen Internet-Browser problemlos an, ohne dass man die Programme erst mit Plug-ins aufrüsten müsste: GIF, JPG und PNG. ImageReady unterscheidet bei PNG noch zwischen PNG-8 (maximal 256 Farben) und PNG-24 (16,7 Millionen Farbtöne möglich). Alle Formate sollen die Dateigröße stark verringern, um die Übertragungszeit zu verkürzen. Die Formate bieten sehr unterschiedliche Eigenschaften und Kompressionsverfahren, so dass man je nach Bildtyp bewusst ein bestimmtes Format verwendet.

Unterschiede im Überblick

Vereinfacht gesagt, unterscheiden sich die Internet-gängigen Dateiformate GIF, JPEG und PNG wie folgt:

  • Für Verläufe, fein abgestufte Hintergrundmotive, Portraits und alle üblichen Halbtonfotos nimmt man JPG.
  • Motive, die frei ausgeschnitten vor dem Hintergrund stehen sollen - darunter auch Schriftzüge - speichert man als GIF trotz der nur 256 unterschiedlichen Farben. GIF ist auch die bessere Wahl für harte Grafiken und Schriften, die ohne Kantenglättung entstanden. Auch Animationen laufen nur als GIF.
  • PNG verwendet man kaum, weil es neueste Internet-Browser erfordert und weil die Dateigröße weder zu JPEG noch zu GIF eine attraktive Alternative bildet.

Die Tabelle nennt die wichtigsten Unterschiede:

GIF JPG PNG-8 PNG-24
weit verbreitet J J - -
gut für Grafik J - J J
gut für nuancierte Halbtöne - J - J
Animation J - - -
Transparenz mit harten Kanten J - J J
Transparenz mit weichen Kanten - - - J 1)
verlustfreie Kompression J - J J
Kompression mit Verlust - 2) J - -

1) Internet-Browser benötigt Zusatz-Plug-in für sog. »Alpha-Transparenz« (wenig verbreitet).

2) Bei ImageReady und Photoshop, nicht bei anderen Programmen, kann man eine Kompression mit Verlust anwählen.

Abbildung 4.138:  Wir vergleichen die Dateiformate JPEG und GIF.  Links: Die Vorlage für diese Schaltfläche beansprucht im RGB-24-Bit-Farbmodus 72 Kbyte Arbeitsspeicher und bei verlustfreier TIFF-LZW-Kompression 21 Kbyte Festplatte.  Mitte: Die TIFF-Vorlage wird im JPEG-Format auf 2,7 Kbyte komprimiert, leichte Kantenfehler sind zu sehen.  Rechts: Bei Kompression bis auf 1,3 Kbyte treten die typischen JPEG-Fehler massiv auf: Schleierbildung, künstliche Schatten und Farbblöcke. Zu erkennen ist, dass JPEG sich eher für nuancierte Halbton-Übergänge als für harte Konturen eignet. Vorlage: News.tif

Abbildung 4.139:  Ganz anders wirkt die Reduktion auf maximal 256 Farben (8-Bit-Farbtiefe), wie sie zum GIF-Format gehört.  Links: Gibt man in der Optimieren-Palette die »Web«-Farbpalette ohne das Dithering-Streuraster an, entstehen grobe Farbsprünge bei einer Dateigröße von nur 2,2 Kbyte; Konturen bleiben freilich im Vergleich zum JPG-Format sauber erhalten.  Mitte: Hier wurde ebenfalls die Web-Palette verwendet, aber mit 100 Prozent Dithering (Farbstreuung); dieses Verfahren simuliert Halbtöne und hebt die Dateigröße auf 5,2 Kbyte.  Rechts: Ebenfalls rund 5,2 Kbyte beansprucht diese Variante: Die »Selektiv«-Farbpalette dieses Bild es enthält die 32 wichtigsten Tonwerte - ohne Rücksicht auf Web-Tauglichkeit. Das GIF-Format eignet sich offensichtlicher eher für harte Konturen als für weiche Farbübergänge.

Automatische Wahl des Formats

Soll ImageReady das geeignete Dateiformat für Ihr Original automatisch anbieten? Wählen Sie Bearbeiten: Voreinstellungen: Optimierung, dann stellen Sie im Bereich Standardoptimierung auf GIF / JPEG automatisch wählen. Haben Sie in den 2fach-Einstellungen und in den 4fach-Einstellungen bereits eine Aktuelle Version eingeplant, können Sie weitere Bildfenster mit der Option Auto verplanen - ImageReady schlägt dann jeweils eine kleinere Bildversion vor.

Auch der Befehl Auf Dateigröße optimieren aus dem Menü der Optimieren-Palette wählt - so Sie es wünschen - das Dateiformat selber aus (Details zu diesem Befehl finden Sie ab Seite 364).

Abbildung 4.140:  GIF, JPG und PNG sind die gängigen Dateiformate zur Veröffentlichung von Bild ern auf den WWW-Seiten im Internet. Alle Formate komprimieren die Daten, teilweise mit Qualitätsverlust; Sie sollten die Besonderheiten kennen. ImageReady bietet eine Vorschau auf mehrere Komprimierungsvarianten gleichzeitig; die Optimieren-Palette nennt die Einstellungen für die aktuelle Variante, die durch ein Rähmchen hervorgehoben wird - hier die GIF-Ansicht im zweiten Fenster von links.

4.10.7 Gewichtete Optimierung  kanaloptimierung.pcx

Sie können einzelne Partien eines Bildes mit unterschiedlichen Qualitätsvorgaben speichern. So könnten Sie beispielsweise den Schriftzug innerhalb eines Bildes vor überstarker Komprimierung schützen, so dass er jederzeit klar erkennbar bleibt; die Umgebung des Slogans dagegen komprimieren Sie mit stärkeren Faktoren, um möglichst viel Speicherplatz zu sparen. Mehrere Eigenschaften lassen sich auf diese Art über das Bild verteilt variieren: JPG-Qualitätsfaktor, GIF-Qualitätsverlust, GIF-Dithering.

Dabei arbeiten Sie mit Alphakanälen. Der ausgewählte (meist weiß unterlegte) Bereich eines Alphakanals markiert den Bildbereich, den Sie mit bester Qualität komprimieren; nicht ausgewählte Bereiche (schwarz unterlegt) erhalten einen niedrigen Faktor.

Möglichkeiten im Überblick

Sie legen ein Maximum und ein Minimum für die gewünschte Höchst- und Mindestqualität fest. Im Einzelnen:

  • Der Maximum-Wert für die JPG-Qualität wird innerhalb des ausgewählten Bereichs angewendet, der im Alphakanal weiß erscheint. Der Minimum-Wert kommt außerhalb der Auswahl zum Tragen, der nicht gewählte Bereich erscheint also in schwächerer Qualität.
  • Der Maximum-Wert für den GIF-Qualitätsverlust (Lossy-Vorgabe) wird wohlgemerkt außerhalb der Auswahl, also im schwarz unterlegten Alphakanal-Bereich angewendet. Der geringste Qualitätsverlust ergibt sich innerhalb der Auswahl. Es ist also dasselbe Schema wie bei JPEG - innen besser, außen schlechter.
  • Der Maximum-Wert für GIF-Dithering wird innerhalb der Auswahl angewendet, das Minimum-Streuraster erzeugt ImageReady außerhalb der Auswahl.
  • Außerdem: Bei der automatischen Wahl der Farbpalette für GIF oder PNG-8 können sich die Programme nur an dem im Alphakanal ausgewählten (nicht maskierten) Bereich orientieren.

Abbildung 4.141:  Sobald ein Alphakanal oder eine Auswahl angelegt ist, können Sie die Schaltfläche »Lossy-Einstellung mit Hilfe eines Kanals ändern« verwenden. Hier teilen wir dem Bild für den ausgewählten Bereich eine »Maximum«-Qualität von 80 Prozent zu, für den nicht ausgewählten Bereich eine »Minimum«-Qualität von 20. Sie sehen auch eine Miniatur des Alphakanals. Weiß erscheint hier der schmale Bild teil, der für die Datei »News« (siehe unten) ausgewählt wurde.

Alphakanäle anlegen

Für die gewichtete Optimierung benötigen Sie einen Alphakanal. Wie Sie mit Alphakanälen arbeiten, klärt ein eigenes Kapitel ab Seite 641. Hier nur eine Kurzanleitung:

  • Um in Photoshop einen Alphakanal zu erzeugen, legen Sie eine Auswahl zum Beispiel mit dem Lasso  an (wie gesagt, der ausgewählte Bereich erhält die höhere Qualität); danach nutzen Sie den Befehl Auswahl: Auswahl speichern oder klicken auf das Symbol Auswahl als Kanal speichern  in der Kanälepalette.
  • Ebenfalls in Photoshop haben Sie die Möglichkeit, einen leeren neuen Kanal anzulegen; dazu klicken Sie in der Kanälepalette auf das Symbol Neuen Kanal erstellen  . Den Kanal können Sie anschließend beispielsweise mit Malwerkzeugen und Farbverläufen bearbeiten. Sie können auf Alphakanäle jederzeit auch Filter und Kontrastkorrekturen anwenden.
  • In ImageReady legen Sie zunächst eine Auswahl an. Anschließend nutzen Sie die Funktion Auswahl: Auswahl speichern. Alternativ klicken Sie in der Optimieren-Palette neben der gewünschten Dateiformat-Eigenschaft auf die Schaltfläche mit einer Erklärung wie Einstellung mit Hilfe eines Kanals ändern  oder ähnlich; im Dialogfeld Einstellung verändern öffnen Sie anschließend das Klappmenü Kanal und klicken auf Auswahl speichern; danach geben Sie einen Kanalnamen an. Auch wenn bereits ein Alphakanal existiert, lassen sich mit diesem Verfahren weitere Kanäle anlegen.

Damit keine harten Übergänge zwischen den verschiedenen Qualitätszonen entstehen, empfehlen sich häufig weiche Auswahlkanten. Diese richten Sie auf verschiedene Arten ein - zum Beispiel in den Optionen zu den Auswahlwerkzeugen, mit dem Befehl Auswahl: Weiche Auswahlkante oder in Photoshop durch Weichzeichnen des Alphakanals (vergleiche Seite 592).

Wollen Sie den Kanal dauerhaft im Bild speichern, verwenden Sie zum Beispiel die Dateiformate TIFF oder Photoshop. Im JPG-Format können Sie keine Alphakanäle speichern.

Abbildung 4.142:  Diese Beispiele zeigen in extremer Form die Wirkung der gewichteten Optimierung. Im Alphakanal ausgewählt wurde in den ersten beiden Beispielen allein der Schriftzug.  Links: Der Schriftzug wird mit 80 Prozent JPG-Qualität komprimiert, der weitere Bild bereich nur mit 20 Prozent.  Mitte: Der Schriftzug wird mit 20 Prozent GIF-Qualitätsverlust komprimiert, der Außenbereich mit 80 Prozent.  Rechts: Hier wurde die Auswahl umgekehrt und neu als Alphakanal »5« gespeichert. Für den Schriftzug gilt 20 Prozent Dithering, für den (ausgewählten) Rest des Bild es 80 Prozent. Datei: News

Gewichtete Optimierung anwenden

Im folgenden Beispiel testen wir in ImageReady die gewichtete Optimierung für den JPG-Qualitätsfaktor mit der Datei »News« aus dem »Praxis«-Verzeichnis der CD zu diesem Buch. Das Verfahren für GIF-Qualitätsverlust und GIF-Dithering ist vergleichbar. Alle Funktionen stehen Ihnen im Übrigen auch mit dem Photoshop-Befehl Datei: Für Web Speichern zur Verfügung. Unsere Datei enthält bereits einen Alphakanal. So geht es weiter:

1. Wir wählen im Dateifenster eine 2fach-Vorschau, aktivieren die rechte Ansicht und geben in der Optimieren-Palette links oben das JPG-Dateiformat vor.
2. In der Optimieren-Palette klicken wir dann rechts neben Qualität auf die Schaltfläche Qualitätseinstellung mit Hilfe eines Kanals ändern  . Diese Schaltfläche steht nur zur Verfügung, wenn es einen Alphakanal oder mindestens eine Auswahl im Bild gibt.
3. Im Dialogfeld Qualitätseinstellung verändern öffnen wir das Klappmenü Kanal und geben den Namen des gewünschten Kanals an; wir verwenden Kanal »4«. Anschließend sehen Sie die Kanalminiatur im Dialogfeld: Weiße Bereiche sind ausgewählt, sie werden mit dem Maximum-Wert bearbeitet, schwarze Bereiche mit der Minimum-Angabe.
4. Legen Sie nun mit den Schiebereglern die gewünschte Maximum- und Minimum-Qualität fest. In unserem Beispiel verwenden wir 80 als Maximum. Das heißt: Die ausgewählten, im Alphakanal weiß unterlegten Bildbereiche werden mit der hohen Bildqualität von 80 Prozent komprimiert; dies ist der zuvor ausgewählte Bereich unseres Schriftzugs, er wird also kaum entstellt. Als Minimum verwenden wir 20 Prozent: Nicht ausgewählte Bereiche - im Alphakanal schwarz - erhalten nur einen Qualitätsfaktor von 20 Prozent; sie werden also zugunsten niedriger Dateigröße stärker gestaucht.
5. Prüfen Sie jetzt die Optimieren-Palette und die Dateiinformationen im Dateifenster: Der Wert, den Sie als Maximum gewählt haben, erscheint hier als Angabe zur Qualität.
6. Setzen Sie testhalber die Qualität in der Optimieren-Palette auf 50 Prozent herunter und öffnen Sie erneut das Dialogfeld Qualitätseinstellung verändern durch einen Klick auf das Symbol Qualitätseinstellung mit Hilfe eines Kanals ändern  : Sie erkennen, dass jetzt auch das Maximum für die Qualität gesunken ist. Wenn Sie das Maximum hier wieder anheben, wird es sich auch in der Optimieren-Palette verändern.

Gewichtete Optimierung beenden

Haben Sie eine gewichtete Optimierung angelegt und wollen diese beenden? So geht's:

1. Klicken Sie die gewünschte optimierte Variante in der Mehrfach-Vorschau an.
2. Klicken Sie in der Optimieren-Palette auf die Schaltfläche Qualitätseinstellung mit Hilfe eines Kanals ändern  . Diese Schaltfläche erscheint eingedrückt beziehungsweise abgedunkelt, sofern Sie die gewichtete Optimierung verwendet haben.
3. Im Dialogfeld Qualitätseinstellung verändern öffnen Sie das Klappmenü Kanal und wählen Ohne.
4. Klicken Sie auf OK.

Nun wird das gesamte Bild mit dem bisherigen Maximum-Wert behandelt.

Die Ergebnisse

Die Ergebnisse überzeugen in Bildqualität und Platzersparnis nicht immer. GIF-Qualitätsverlust und gewichtete Optimierung sind im Übrigen Spezialitäten von Photoshop und ImageReady, die Sie bei anderen Programmen nicht wiederfinden. Im Test des Verfassers ließen sich die resultierenden Dateien in verschiedenen Bildprogrammen und Browsern gleichwohl sofort öffnen. Nicht in allen Fällen konnte man Dateien, die mit gewichteter Optimierung gesichert wurden, in anderen Programmen problemlos bei unveränderter Qualität speichern.

4.10.8 JPEG-Dateiformat

Das JPEG-Format der Joint Photographic Experts Group verkleinert Bilddateien auf Festplatte um fast beliebige Faktoren - zum Beispiel um die Faktoren 10, 50 oder 150. Dabei löscht das Format auf komplizierte Art Bildinformation; es rechnet diese beim Öffnen der JPEG-Datei aber per Mittelwertbildung so geschickt wieder ins Werk, dass man im Druck und am Schirm oft nichts von der Verdichtung bemerkt. Leicht lässt sich ein 30-Mbyte-Titelbild ohne sichtbaren Schaden auf Diskettengröße stauchen. Neben GIF ist JPEG das wichtigste Bilddateiformat für das World Wide Web im Internet.

Wohlgemerkt, wir besprechen JPEG hier als Dateiformat. Es gibt aber andere Dokumenttypen, die Datenkompression nach JPEG-Schema anbieten, zum Beispiel PDF, TIFF und EPS. Bilder im JPEG-Dateiformat sind problemlos austauschbar zwischen Mac und Windows. Sie lassen sich in der Zoomstufe 100 Prozent (ein Bildpunkt auf einem Monitorpunkt) ohne Weiteres auch mit Internet-Browsern betrachten, so dass der Empfänger nicht unbedingt ein Bildprogramm haben muss. Die Ladezeit verlängert sich gegenüber unkomprimierten Dateien deutlich.

ImageReady bietet in der Optimieren-Palette einen JPG-Qualitätsregler von 0 bis 100. 0 bedeutet schlechte Bildqualität und niedrigste Dateigröße. Die Vorgabe 100 erhält die Qualität bestmöglich, spart aber weit weniger Speicherplatz. Wer kleinere Fehler in Kauf nehmen mag, stellt Werte wie 50 oder 60 ein; hier sinkt der Festplattenbedarf - und damit die Übertragungszeit - bereits auf ein Zehntel oder Zwanzigstel gegenüber dem Bedarf an Arbeitsspeicher oder gegenüber einem Dateiformat, das unkomprimiert speichert.

Abbildung 4.143:  Zahlreiche Optionen bietet die ImageReady-Optimieren-Palette für das JPG-Format. Unser Beispielbild belegt 38 Kbyte Arbeitsspeicher bei 98x131 Pixel im RGB-Modus. Im verlustfrei komprimierenden Dateiformat TIFF-LZW benötigt es noch 32 Kbyte, als PNG-24 (ebenfalls verlustfrei) sind es 26 Kbyte. Wir verwenden hier die höchste JPG-Qualitätsstufe von 100 und erzielen 18 Kbyte ohne jeden sichtbaren Schaden. Wir drucken dieses und die folgenden Beispielbilder in Monitorauflösung von 72 dpi. Dies wirkt im Druck grob, entspricht aber eher dem Bild eindruck am Schirm und verdeutlicht die Fehler. Vorlage: Stop_2

Einsatzzweck

JPEG eignet sich besonders für farblich fein abgestufte Vorlagen, etwa Verläufe, Hauttöne oder sanfte Hintergrundkacheln. Freilich kann die Farbvielfalt zu Konfusion auf älteren 8-Bit-Systemen führen: Höchstens 256 Farben erscheinen korrekt, der Rest grotesk verzerrt. Testen Sie die Wirkung einer JPG-Datei innerhalb eines 256-Farben-Rechners mit dem Befehl Ansicht: Vorschau: Browser-Dithering (Strg+Umschalt+Y, Details ab Seite 344); dabei muss eine »optimierte« Dateiansicht aktiviert sein, nicht das Original.

Bei plakativen Grafiken ohne geglättete Kanten sollten Sie JPG vermeiden: Hier entstehen sehr leicht Geisterschatten und Streuselmuster in einheitlichen Flächen. Hier verwenden Sie GIF.

Bildqualität

Selbst bei höchster Qualitätsstufe schrumpft das Bild auf der Festplatte oft um den Faktor fünf bis 15 (Arbeitsspeicher belegt es unabhängig davon in voller Höhe); der Bildqualität ist dabei meist gar nichts anzusehen. Bis hinunter zum Faktor 20 oder 30 bleibt die Verdichtung für den Betrachter unauffällig. Die ersten Schwächen treten besonders bei feinen Farbübergängen in Hauttönen oder Verläufen zu Tage - hier erscheinen grobe Blöcke; harte Linien - etwa Buchstaben - werfen plötzlich dubiose Schatten. Erreichbar sind - bei niedrigster Bildqualität - Faktoren bis 1:100 und darunter; sie eignen sich höchstens für Archivzwecke, doch scheint hier eine Verringerung der Pixelzahl sinnvoller. Adobes Programmierer stimmten den JPEG-Regler allerdings so ab, dass eine nachhaltige Ruinierung der Datei kaum möglich ist.

Abbildung 4.144:  Links: Die Vor-»Einstellung« »JPEG hoch« mit Qualitätsstufe 60 schafft eine Dateigröße von 7,2 Kbyte (ohne »Optimieren«-Option sind es 7,5 Kbyte); kleine, tolerierbare Bild fehler erkennt man.  Mitte: Die Qualitätsstufe bleibt unverändert, den Wert für »Weichzeichnen« stellen wir aber auf 0,25; die Dateigröße sinkt so auf 6,3 Kbyte. Rechts: Die Vorgabe »JPG mittel« mit Qualitätsstufe 30 produziert - ohne »Weichzeichnen« - deutliche Farbflecken bei einer Dateigröße von 4,1 Kbyte.

Gewichtete Optimierung

Sie können mittels gewichteter Optimierung einzelne Bildpartien stärker komprimieren als andere. Beispielsweise wählen Sie ein Hauptmotiv oder einen Schriftzug aus und sichern die Auswahl als Alphakanal. Dann komprimieren Sie das Hauptmotiv weniger stark als den ohnehin diffusen Hintergrund (Details zum Verfahren ab Seite 368). Die Ergebnisse überzeugen im Test jedoch nicht so recht:

  • So wirkt ein Bild, das Sie nur teilweise auf JPG-Stufe 0 herunterrechnen, in diesen Zonen weit entstellter als ein Motiv, das ohne gewichtete Optimierung komplett auf Stufe 0 gesetzt wird.
  • Aber selbst wenn Sie nur einen kleineren Bildteil mit hoher Qualität sichern und den größten Bildteil mit niedriger Qualität, so erinnert die resultierende Dateigröße stark an ein Bild, das Sie insgesamt mit hoher Qualität verewigen.

»Mehrere Durchgänge«

Die Option Mehrere Durchgänge ermöglicht eine schnellere Bildvorschau: das Motiv wird nicht Zeile für Zeile aufgebaut, sondern entsteht aus immer feineren Varianten des gesamten Rechtecks - visuell vage vergleichbar dem Interlaced-Aufbau bei GIF. Die Zahl der Durchläufe können Sie in ImageReady nicht angeben, flexibler zeigt sich jedoch Photoshop, wenn Sie hier den Befehl Datei: Speichern unter nehmen. Die Datenmenge ändert sich gegenüber dem konventionellen JPEG kaum, die Qualität nur unwesentlich. Dieser JPEG-Typ heißt oft auch »Progressive JPEG«.

Ältere Pixelprogramme und Internet-Browser unterstützen JPEGs mit mehreren Durchgängen gar nicht - so etwa Netscape Navigator vor Version 2.0 und Photoshop vor Version 4.0. Im Zweifelsfall verzichtet man auf die Option. Am Bildschirm lässt sich der fortschreitende Aufbau einer JPEG-Datei mit mehreren Durchgängen, die auf der eigenen Festplatte liegt, nicht testen.

Weitere JPG-Optionen

Die Optimieren-Palette bietet weitere Einstellmöglichkeiten für das JPG-Format:

  • Weichzeichnen: JPGs mit harten Kanten beanspruchen deutlich mehr Speicherplatz als diffusere Vorlagen. Deswegen können Sie das Bild per Optimieren-Palette Weichzeichnen. Die Werte von 0 bis 2 entsprechen genau den Resultaten, die auch der Befehl Filter: Weichzeichnungsfilter: Gaußscher Weichzeichner liefert. Seien Sie vorsichtig damit. Das Weichzeichnen empfiehlt sich allenfalls für verschwommene Hintergrundmuster, aber nicht für gegenständliche Abbildungen.
  • Hintergrund: Falls das Originalbild transparente Bereiche enthält, wählen Sie eine Hintergrundfarbe aus, die in transparente Bereiche eingesetzt wird. Nehmen Sie zum Beispiel die Hintergrundfarbe, die für Ihre Internet-Seite vorgesehen ist. Sie können JPEGs generell nicht mit »Transparenz« speichern, die den eigentlichen Seitenhintergrund durchscheinen lässt.
  • Optimieren: Die JPG-Option Optimieren senkt die Dateigröße geringfügig. Ältere Bildprogramme finden das weniger optimal und öffnen solche Dateien nicht, im Internet-Browser gibt es aber keine Probleme. Wirkung zeigt diese Option nur, wenn Mehrere Durchgänge abgeschaltet sind.
  • ICC-Profil: Sofern Sie ein Bild aus Photoshop mit eingebettetem ICC-Profil bearbeiten, bietet die Optimieren-Palette von ImageReady auch den Punkt ICC-Profil. Aktivieren Sie diese Option, sofern das ICC-Profil mit der Datei gespeichert werden soll; manche Browser verwenden es zur Farbkorrektur.

Abbildung 4.145:  Links: Die JPG-»Einstellung« »JPEG niedrig« mit Qualitätsstufe 10 in ImageReady wirkt schon entstellend und reduziert das Bild auf 2,8 Kbyte.  Mitte: Mit einem »Weichzeichnen«- Wert von 0,25 kommt man auf 2,4 Kbyte.  Rechts: Die Stufe 0 - ohne »Weichzeichnen« - senkt Brauchbarkeit und Dateigröße weiter (2,3 Kbyte).

Wiederholt speichern

Generell ist beim wiederholten Speichern im JPEG-Format Vorsicht geboten: In Bildteilen, die Sie zuvor bearbeiteten, drohen weitere Verluste. Und Datenschwund entsteht ebenfalls in den nicht manipulierten Zonen, wenn die JPEG-Qualität geändert wird. Details gehen auch verloren beim Sichern eines gekappten JPEG-Bildes: Der Algorithmus teilt das Bild in neue Segmente ein und interpoliert die Farben anders; ebenso sollte man nicht die Pixelauflösung einer JPEG-Datei umrechnen.

Damit eignet sich das JPEG-Format nicht zum Zwischensichern während der Arbeit an einem Bild. Indes stimmte Adobe seinen JPEG-Filter so ab, dass eine Bilddatei kaum je tatsächlich den Bach runtergeht. In der Praxis verkraften viele Motive auch zwei- oder dreimaliges Speichern mit zwischenzeitlicher Bearbeitung. Aber Sie wurden hiermit gewarnt.

JPEG und 8-Bit-Grafiken

JPEG zeigt besondere Schwächen mit plakativen Grafiken, zum Beispiel GIFs, die bereits ein Farbstreuraster (»Dithering«) zeigen; bei geschickter Anwendung kann JPEG die Farbstreuung zwar glätten, allerdings erreicht man das übersichtlicher per Konvertierung in den RGB-Modus mit Weichzeichnen oder bikubischem Interpolieren. In jedem Fall erzeugt die Konvertierung einer 256-Farben-Datei nach JPEG ein Bild mit weit mehr als 256 Farben. Besonders unergiebig ist die Konvertierung zwischen JPEG und GIF: Hier treffen zwei Formate mit deutlichen und dazu noch unterschiedlichen Beschränkungen aufeinander - die Schnittmenge der damit noch möglichen Qualität ist klein.

JPEG 2000

Der Standard JPEG 2000 sollte noch im Winter oder Frühjahr 2001 endgültig verabschiedet werden und das JPEG-Format wesentlich verbessern: Eine Wavelet-Transformation beseitigt die lästigen Block-Effekte bei starker Komprimierung, wahlweise lassen sich die Daten sogar sehr effektiv verlustfrei stauchen, einzelne Bildteile können Sie individuell stärker oder schwächer komprimieren, zudem nimmt das Format Text- und Copyright-Informationen auf.

Die getesteten deutschen Vollversionen von Photoshop 6 zeigten keine spezielle Unterstützung für JPEG 2000. Immerhin boten Photoshop und ImageReady bereits im Herbst 2000 einige JPEG-2000-Features; sie standen damit allerdings innerhalb des Markts für digitale Bildbearbeitung allein auf weiter Flur, in anderen Programmen ließen sich die Merkmale nicht nutzen:

  • So nehmen Sie Textinformationen mit dem Photoshop-Befehl Datei: Datei-Information oder mit dem ImageReady-Befehl Datei: Bildinformation auf (Details ab Seite 85).
  • Über Alphakanäle wenden Sie zwei unterschiedliche Komprimierungsstufen auf verschiedene Bildbereiche an (Seite 368).

Prüfen Sie, ob Photoshop-Hersteller Adobe über seine Internet-Seite die Nachrüstung auf das Format JPEG 2000 anbietet. Ausführliche englische Informationen fanden wir beim JPEG-Komitee unter der folgenden Internet-Adresse: 

http://www.jpeg.org/JPEG2000.htm

JPG in Photoshop

Die Übersicht der Mehrfach-Vorschau von ImageReady bietet Ihnen in Photoshop der Befehl Datei: Für Web speichern. Aber auch mit dem üblichen Befehl Datei: Speichern unter lassen sich in Photoshop komfortabel JPG-Dateien erzeugen. Überdies haben Sie in Photoshop die Möglichkeit, auch GIFs mit folgenden anderen Merkmalen anzulegen:

  • den Farbmodi Graustufen oder CMYK,
  • mit 16 Bit Farbtiefe pro Grundfarbe,
  • mit einer Miniatur-Ansicht,
  • mit einer selbst gewählten Zahl für die Option Mehrere Durchgänge.

Vorsicht: Diese Merkmale eignen sich kaum für die Verwendung im Internet, mit Ausnahme der Option Mehrere Durchgänge.

Der Befehl Datei: Speichern unter zeigt Photoshops JPG-Dialogfeld, sofern Sie dieses Dateiformat im Klappmenü Dateityp angeben. Hier wählen Sie die Qualitätsstufen von 12 (hohe Qualität) bis 0. Noch bei geöffnetem Dialogfeld nennt Photoshop die resultierende Dateigröße und zeigt den entstehenden Qualitätsverlust am geöffneten Bild. Englische Fragen und Antworten zum JPEG-Format (FAQs, Frequently asked questions) finden Sie auf dieser Internet-Seite: 

http://www.cis.ohio-state.edu/hypertext/faq/usenet/jpeg-faq/

Das Photoshop-Dialogfeld Speichern unter bietet JPG nicht an, wenn Sie ein Bild mit indizierten Farben (8-Bit-Palettenfarben) vor sich haben - zum Beispiel eine GIF-Datei. Ein solches Bild müssen Sie erst mit dem Untermenü Bild: Modus verwandeln, zum Beispiel in RGB-Farbe oder in Graustufen. Der Wechsel von 8-Bit- zu 24-Bit-JPG macht allerdings selten Sinn.

4.10.9 GIF-Dateiformat

Das GIF-Dateiformat wirkt mit seinen maximal 256 Farbtönen (8-Bit-Farbtiefe) reichlich beschränkt. Dennoch können Web-Designer nicht auf GIF (auch »Compuserve GIF«) verzichten:

  • In GIF speichert man auch Trickfilme (Animationen).
  • Im GIF-Format kann man freigestellte Objekte so auf der Seite platzieren, dass der Seitenhintergrund unmittelbar durchscheint; das Bild ist nicht mehr von einem sichtbaren Rechteck umgeben (Transparenz-Funktion).
  • Liegt bereits eine 8-Bit-Datei vor, wird diese im GIF-Format automatisch komprimiert gespeichert - aber ohne jeden Informationsverlust.
  • GIF ist weitverbreitet und in jedem Browser, der überhaupt Grafiken anzeigt, darstellbar.

Die Optionen von GIF und PNG-8 ähneln sich weitgehend. Die meisten Sonderfunktionen von GIF besprechen wir darum in eigenen Hauptabschnitten innerhalb dieses Kapitels - Näheres finden Sie also unter »Animationen« (Seite 273), »Transparenz« (Seite 352) und »Farbtabelle und Farbwahl« (Seite 381). Andere Formate bieten das eine oder andere freilich auch: Verlustfrei komprimierte 8-Bit-Grafiken speichert man kommod in den Formaten TIFF-LZW oder PNG-8. Eine Transparenzfunktion für freigestellte Objekte bietet ebenfalls PNG. Nur: PNG ist im Internet wenig etabliert, TIFF gar nicht. GIF gibt es schon immer.

Abbildung 4.146:  GIF-Dateien enthalten maximal 256 unterschiedliche Farbtöne. Die ImageReady-Farbtabelle zeigt die Tonwerte der in der Mehrfach-Vorschau aktivierten Version. In der Optimieren-Palette machen Sie die Vorgaben für die aktivierte Vorschau-Variante.

Verwendungszweck

Wegen seiner auf 256 begrenzten Farbenzahl eignet sich GIF, das Graphics Interchange Format, vor allem für plakative Grafiken, die ohne Kantenglättung entstanden. Zum Beispiel für Schriftzüge, Logos, Zeichnungen, Bildschirmfotos (Screenshots). Für subtile Hauttöne, Farbübergänge oder für sanfte Hintergründe nimmt man JPEG.

GIF-Dateien erzeugen

Es gibt verschiedene Wege, GIF-Dateien zu erzeugen:

  • Mit dem Photoshop-Befehl Datei: Speichern unter. Liefern Sie allerdings ein Echtfarb-Bild an, zum Beispiel im RGB- oder Lab-Modus, erscheint hier zunächst das Dialogfeld des Befehls Bild: Modus: Indizierte Farben. Sie bestimmen dann, auf welche Art das Bild auf 256 Farben heruntergerechnet wird. Mit diesem Dialogfeld plus GIF-Dialog haben Sie etwa die gleichen Optionen wie in der Optimieren-Palette von ImageReady (siehe unten). Der Lossy-Regler fehlt, aber es gibt die Option Exakte Farben.
  • Mit Mehrfach-Vorschau, GIF-Vorwahl in der Optimieren-Palette und Farbtabelle in ImageReady.
  • Mit dem Pendant zu diesen ImageReady-Bildschirmelementen, dem Photoshop-Befehl Datei: Für Web speichern.
  • Von Hand können Sie das Photoshop-Zusatzmodul GIF 89a Export installieren. Sie haben hier die Möglichkeit, Text in die GIF-Datei einzubetten, ansonsten ist die Funktion ist aufreizend umständlich (Seite 379).

Die größte Flexibilität bietet ImageReady.

»Interlaced«

Mit der Vorgabe Interlaced (Zeilensprung) baut sich das Bild anders auf dem Schirm auf: Statt nach und nach, Zeile für Zeile auf die Bildfläche zu trudeln, steht sofort das komplette Rechteck da (beziehungsweise die freigestellte Form).

Das Verfahren: Der Browser zeigt im ersten Durchgang die erste, die neunte und alle weiteren Zeilen im Achter-Abstand; im zweiten Durchgang folgen Vierer-Sprünge: die fünfte, die dreizehnte Zeile etc. Doch schon im ersten Schritt, wenn nur jede achte Originalzeile zu sehen ist, stellt der Browser das Gesamtfoto schematisch dar, indem er jede vorhandene Zeile vervierfacht; nach dem zweiten Durchgang muss er sie nur noch verdoppeln, bis das Bild komplett geladen ist. Visueller Eindruck: Ein Werk »schwimmt an die Oberfläche«.

Der GIF-Aufbau nach Interlaced-Schema lässt sich in Photoshop oder ImageReady generell nicht verfolgen. Sie sehen den Aufbau einer lokal gespeicherten GIF-Datei nach Interlaced-Verfahren aber eventuell in einem Internet-Browser - zumindest dann, wenn Sie eine sehr große Datei laden. Je schneller der Rechner, desto größer muss die Datei sein. Probieren Sie es mit dem Bild »GIF-Interlaced.gif« aus dem »Praxis«-Verzeichnis der CD zu diesem Buch; es misst 3885x2565 Bildpunkte. Sie können den Interlaced-Modus nicht mit den Vorgaben Lossy oder den Dither-Methoden Störungsfilter und Muster verwenden.

»Lossy«

Lossy bedeutet »mit (Qualitäts-)Verlust«. Dies ist ein spezielles Verfahren von ImageReady, das nicht einmal Photoshop bietet. GIF-Dateien werden hier mit Qualitätsverlust noch kleiner gestaucht. Andere Programme bieten das Verfahren nicht, können solche Dateien aber gleichwohl öffnen - sie sind voll kompatibel. Kapazitätsersparnisse von rund fünf bis 30 Prozent sind möglich, allerdings verursachen schon niedrige Werte am Lossy-Regler sichtbare Qualitätsmängel. Sie können Lossy nicht in Verbindung mit Interlaced oder mit den Dither-Verfahren Störungsfilter oder Muster verwenden.

Mit der gewichteten Optimierung haben Sie die Möglichkeit, zwei unterschiedliche Lossy-Werte in ein und derselben Datei anzuwenden: Sie markieren den Bereich, der die bessere Qualität zeigen soll, mit einer Auswahl, die Sie als Alphakanal sichern; alles außerhalb dieser Auswahl wird mit der niedrigeren Qualität verewigt. So können Sie Schriften oder andere wichtige Details vor allzu starker Entstellung schützen. Details zu diesem Verfahren finden Sie ab Seite 368.

Abbildung 4.147:  Links: Die 38-Kbyte-Vorlage wird hier als GIF mit Web-Palette bei 216 Farben und 30 Prozent Dithering dargestellt; die Datei benötigt 5,2 Kbyte.  Mitte: Um die Dateigröße um ein Kbyte senken zu können, haben wir den »Lossy«-Regler für Datenreduktion mit Verlust auf 45 gestellt (4,2 Kbyte); dabei wirkt das Bild bereits entstellt.  Rechts: Ein weiteres Kbyte lässt sich abspecken, wenn man den »Lossy«-Regler auf 90 stellt. Vorlage: Stop_2

Bildunterschrift exportieren

Das GIF-Format nimmt auf Wunsch auch Text auf - in Photoshop die Objektbeschreibung, die sich mit dem Befehl Datei: Datei-Information notieren lässt (Seite 85). Dazu müssen Sie zunächst ein englischsprachiges Plug-in von Hand installieren (Details über Plug-ins, also Zusatzmodule, finden Sie ab Seite 878). So geht's:

1. Öffnen Sie auf der Photoshop-Programm-CD den Ordner »Zugaben/Optionale Zusatzmodule/Photoshop only/Export«.
2. Kopieren Sie »GIF89a Export.8be« in den »Zusatzmodule«-Ordner des Photoshop-Verzeichnisses auf Ihrer Festplatte.
3. Starten Sie Photoshop neu.
4. Öffnen Sie das Bild mit der Objektbeschreibung und wählen Sie Datei: Exportieren: Gif 89a Export.
5. Im Dialogfeld verwenden Sie die Option Export Caption (»Objektbeschreibung exportieren«).

Dieser GIF-Text wird jedoch kaum von irgendeinem Programm unterstützt. Auch ImageReady bietet keine entsprechende Funktion. Da das Plug-in Gif 89a Export im Übrigen keinerlei Vorteile gegenüber den eingebauten Funktionen von Photoshop und ImageReady bietet, besprechen wir es hier nicht weiter.

Weitere GIF-Optionen

Diese weiteren GIF-Optionen bietet die Optimieren-Palette:

  • Transparenz: Haben Sie durchsichtige Bereiche im Bild - erkennbar an den Karos im Hintergrund - und soll an dieser Stelle der Hintergrund der Internet-Seite durchscheinen? Dann klicken Sie die Transparenz an. Diese Bereiche werden dann in der GIF-Datei als durchsichtig gespeichert.
  • Hintergrund: Hier wählen Sie eine Farbe. Haben Sie die Transparenz-Option abgewählt, füllt ImageReady alle durchsichtigen Bildteile mit der hier gewählten Farbe. Eventuell arbeiten Sie mit der Transparenzfunktion, haben aber halbtransparente Bildbereiche, etwa geglättete Text- oder Objektkanten oder Schatten. In diesem Fall füllt ImageReady die halbdurchsichtigen Bereiche für das GIF-Speichern soweit mit der unter Hintergrund gewählten Farbe auf, bis die Partie komplett deckend ist. Details finden Sie im separaten »Transparenz«-Hauptabschnitt (Seite Bild 352).
  • Hinzu kommen verschiedene Klappmenüs und Optionen wie Web-Ausrichtung oder Dither. Sie bestimmen, welche Farbtabelle Sie verwenden und wie die letztlich verfügbaren Farben die ursprünglich vorhandenen, viel zahlreicheren Farben ersetzen sollen. Dieselben Optionen gelten auch für das Format PNG-8. Wir besprechen sie deshalb im separaten Hauptabschnitt »Farbtabelle und Farbwahl« ab Seite 381.

4.10.10 PNG-Dateiformat

Kenner sagen »Ping« dazu: Das Format Portable Networks Graphics mit dem Kürzel PNG soll eigentlich GIF und JPEG aus dem World-Wide-Web-Publishing verdrängen. ImageReady bietet in der Optimieren-Palette PNG-8 für 8-Bit-Grafiken (maximal 256 Farben) und PNG-24 für Echtfarbdateien (24-Bit-Farbtiefe) getrennt an. Wenn Sie mit 8-Bit-Grafik arbeiten, zeigt die Farbtabelle (aufrufbar im Fenster-Menü) die verwendeten Farbtöne. Ältere Internet-Browser brauchen ein Plug-in, um überhaupt PNG-Bilder anzuzeigen. Ohne Zusatzsoftware öffnen Internet Explorer 4.0 und Netscape ab Version 4.04 das Format.

PNG bietet automatisch eine verlustfreie Kompression. Sie ist oft etwas, aber nicht wesentlich stärker als TIFF-LZW oder GIF. Photoshop bietet beim Speichern als PNG eine Reihe unterschiedlicher Algorithmen an, die bei ImageReady nicht explizit auftauchen.

Die Bearbeitung der Farbtabelle für PNG-8 gleicht dem Umgang mit der Farbtabelle des GIF-Formats - wir besprechen sie deshalb separat im anschließenden Abschnitt »Farbtabelle und Farbwahl« (Seite 381). Weitere PNG-Features wie die eingebaute Gammakorrektur werden nicht unterstützt. Letztlich wird PNG im Internet selten verwendet.

Abbildung 4.148:  Links: Mit der Optimieren-Palette in ImageReady stellen Sie das PNG-Format ein - die Möglichkeiten gleichen mit »Interlaced«-Bild aufbau und »Transparenz« dem GIF-Format.  Rechts: Bei Verwendung des Befehls »Datei: Speichern unter« bietet Photoshop für PNG das Interlaced-Verfahren an.

Transparenz mit 8-Bit-Bildern

In 8-Bit-Bildern (mit 256 Farben und Farbtabelle) können Sie einen transparenten Bereich mit harter Kante festlegen: Erzeugen Sie Transparenz in Ihrer Datei und klicken Sie Transparenz in der Optimieren-Palette von ImageReady an. Die Bearbeitung gleicht den Transparenz-Funktionen von GIF; sie werden deshalb getrennt im Abschnitt Transparenz ab Seite 352 besprochen.

Transparenz mit 24-Bit-Bildern

In Verbindung mit 24-Bit-PNGs können Sie auch »stufenlose« Übergänge nach Art eines Alphakanals oder einer Ebenenmaske speichern. Dazu muss der Internet-Browser freilich mit einem Browser-Plug-in für Alpha-Transparenz bestückt sein. PNG-24-Bilder, die mit Transparenz gespeichert wurden, erschienen im Test mit Browsern ohne dieses Plug-in gänzlich ohne Freistellung - wie normale Bilder im Rechteckformat.

Online-Informationen

Detaillierte englische Informationen, Testbilder und zahllose Querverweise auch zu den Plug-in-Anbietern finden Sie vor allem hier: 

http://www.libpng.org/pub/png/
http://www.w3.org/pub/WWW/Graphics/PNG/Overview.html

Hinweise auf Plug-ins für PNG (und andere Bilddateiformate) finden Sie auf dieser Seite von Browser-Watch: 

http://browserwatch.internet.com/plug-in/plug-in-gr.html

4.11 Farbtabelle und Farbwahl

Um Speicherplatz zu sparen, verwendet man im World Wide Web oft 8-Bit-Farbdateien im GIF-Format. Das heißt, pro Bildpunkt werden nur acht Nullen oder Einsen reserviert (also acht Bit) - und nicht 24 Nullen oder Einsen, wie in einem so genannten Echtfarbbild mit 24-Bit-Farbtiefe. Bei 8-Bit-Farbtiefe sind nur 2 HOCH 8, also maximal 256 unterschiedliche Farbtöne möglich. Die verbleibenden maximal 256 Farbtöne erscheinen in einer Farbtabelle; sie können dort auch bearbeitet werden. Übliche Fotos haben jedoch meist viele tausend unterschiedliche Tonwerte; die Bildqualität sinkt also bei der Konvertierung nach acht Bit.

Wichtig ist die 8-Bit-Farbtiefe für Internet-Designer vor allem, weil das weitverbreitete und derzeit unersetzliche GIF-Dateiformat ausschließlich diese Farbtiefe akzeptiert. 8-Bit-Bilder fürs Internet können Sie auch im (weniger verbreiteten) Format PNG-8 speichern, außerhalb des Internets auch in Formaten wie TIFF, PSD, BMP und vielen anderen, nicht aber in JPG.

In ImageReady können Sie ein Echtfarbbild (also mit hohen 24 oder mehr Bit) laden und bearbeiten und gleichzeitig in der Mehrfach-Vorschau prüfen, wie es in verschiedenen 8-Bit-Varianten wirkt. Generell sollten Sie fein nuancierte Halbtonvorlagen fürs Internet eher als JPG-Datei mit 24-Bit-Farbtiefe sichern, also im üblichen RGB-Modus. Grafisches ohne Kantenglättung sollte eher als GIF mit 256 Farben gesichert werden; und benötigen Sie Animation oder Freisteller, bleibt fast nur GIF.

4.11.1 Übersicht: Möglichkeiten mit der Farbtabelle

Die Farbtabelle listet ImageReady im Fenster-Menü auf. Bei der Arbeit mit Farbtabellen bieten Photoshop und ImageReady alle möglichen Finessen, um im Konflikt zwischen Dateigrößenreduzierung und bestmöglicher Farbtreue einen brauchbaren Kompromiss zu finden:

  • Sie können eine auf allen Rechnern unverfälscht darstellbare, gleichmäßige Farbtabelle verwenden, die aber die Farbschwerpunkte Ihres Bildes nicht berücksichtigt und deshalb die Bildwirkung verfälscht; oder Sie nehmen eine Farbtabelle, die genau die wichtigsten Farbtöne aus Ihrem Bild enthält, aber vielleicht auf 256-Farben-Rechnern verfremdet erscheint.
  • Sie können nicht verfügbare Farben bei Bedarf durch regelbares »Dithering« simulieren - dieses Streuraster verbessert die Wirkung von Halbtonbildern, verursacht aber auch eine gewisse Körnigkeit.
  • Die Zahl der Farben lässt sich unterhalb von 256 beliebig begrenzen, um die Dateigröße zu senken.
  • Sie können einzelne Farben in der Tabelle gegen solche Farben austauschen, die garantiert unverfälscht in einem Internet-Browser erscheinen.
  • Sie können den allgemeinen Anteil der web-tauglichen Farben erhöhen.
  • Einzelne Farben in der Tabelle lassen sich so schützen, dass sie bei weiterer Bearbeitung nicht entfernt werden.

Abbildung 4.149:  Links: Die Farbtabelle wählt man in Photoshop zum Beispiel mit dem Befehl »Bild : Modus: Indizierte Farben«.  Rechts: In ImageReady macht man die Farbtabellen-Vorgaben in der Optimieren-Palette, wenn GIF oder PNG-8 als Dateiformat für die »optimierte Version« gewählt sind. Die Bild schirmpalette »Farbtabelle« zeigt die verwendeten Farben und bietet Korrekturmöglichkeiten. Diese Eingabefelder aus ImageReady bietet auch Photoshop mit dem Befehl »Datei: Für Web speichern«.

Wechsel zu »Indizierten Farben«

Bevor Sie die Farbtabelle korrigieren, müssen Sie erst einmal ein Echtfarbbild in den 8-Bit-Farbmodus verwandeln. Dazu haben Sie folgende Möglichkeiten:

  • Wählen Sie in Photoshop den Befehl Bild: Modus: Indizierte Farben. Noch bei geöffnetem Dialogfeld sehen Sie die Auswirkung auf das Bild. Die Farbtabelle eines geöffneten 8-Bit-Bildes zeigen Sie in Photoshop mit dem Befehl Bild: Modus: Farbtabelle an. Photoshop blendet das Dialogfeld Indizierte Farben auch ein, wenn Sie mit dem Befehl Datei: Speichern unter eine Datei im GIF-Format sichern wollen, die bisher in einem anderen Farbmodus vorlag, zum Beispiel in RGB-Farbe.
  • In ImageReady geben Sie in der Optimieren-Palette die Formate GIF oder PNG-8 vor; dann erscheinen die Optionen für die Wahl der Farben. Die Farbtabelle zeigt die verwendeten Farbtöne und bietet Korrekturmöglichkeiten. Beide Bildschirmpaletten lassen sich mit dem Fenster-Menü aufrufen.
  • Dieselben Möglichkeiten wie ImageReady bietet Photoshop mit dem Befehl Datei: Für Web speichern.

Wollen Sie ein 8-Bit-Bild in Photoshop mit dem Photoshop-Befehl Indizierte Farben verändern? Das Dialogfeld öffnet sich gar nicht, wenn bereits eine 8-Bit- Datei vorliegt. Verwandeln Sie das Bild erst mit dem Befehl Bild: Modus: RGB- Farbe; dies ändert an der Bildinformation nichts. Anschließend lässt sich der Befehl Indizierte Farben aufrufen. Freilich hat Ihre RGB-Vorlage ohnehin nicht mehr als höchstens 256 Farbtöne.

Verwendung

Die Reduzierung der Farbtiefe von 24 auf 8 Bit spart zwar zwei Drittel Arbeitsspeicher. Doch beim Vergleich der Dateien auf der Festplatte - deren Größe die Datenübertragungszeit bestimmt - sind 8-Bit-Bilder nicht unbedingt kleiner als 24-Bit-Echtfarbdateien, die geschickt im JPG-Format gespeichert wurden. Die reduzierte Farbtiefe sollte man vor allem für ohnehin eher grafische Motive verwenden, etwa Schriften, Schaltpläne, Organigramme, Skizzen und Farbflächen ohne Kantenglättung; sie werden durch die JPEG-Komprimierung häufig beschädigt. Fein nuancierte Vorlagen, etwa übliche Halbtonfotos, sind allemal im JPG-Format besser aufgehoben.

Beschränkungen

Achtung: Die meisten Filter und einige Farbkorrekturen funktionieren nicht bei 8-Bit-Farbe. Soll ein 8-Bit-Farbbild doch in Photoshop bearbeitet werden, wechseln Sie vorübergehend zurück zu RGB (Bild: Modus: RGB-Farbe). Das JPEG-Format speichert Indizierte Farben nicht und Photoshop erlaubt in diesem Modus keine Ebenentechnik. ImageReady öffnet alle Bilder zunächst als 24-Bit-Vorlagen - es gibt also keine Schwierigkeiten.

4.11.2 Wahl der Farbtabelle

Auf unterschiedliche Art reduzieren Photoshop und ImageReady die ursprünglich bis zu 16,7 Millionen oder mehr verschiedenen Farben auf 256 Farben. Die Wahl der geeigneten Farbtabelle hängt vom Einsatzzweck ab.

»Exakt«

Die Option Exakt steht in Photoshops Dialogfeld Indizierte Farben bereit, wenn schon die Vorlage nur 256 oder noch weniger Farbwerte enthält. In diesem Fall benutzt Photoshop alle Originalfarben der Ursprungsdatei.

»System«

Wählen Sie Windows oder Mac OS, werden Echtfarben mit den Werten aus der üblichen Farbpalette der Betriebssysteme ersetzt. Diese Paletten enthalten RGB-Farben in einer gleichmäßigen Verteilung. Vorteil: Auch auf einem Rechner mit nur 8-Bit-Farbtiefe desselben Betriebssystems stört das Bild nicht die Anzeige, da es keine anderen Farben beansprucht als das Betriebssystem selbst. Dies gilt besonders, wenn mehrere Bilder zugleich am Schirm erscheinen sollen. Freilich sieht man dem Ergebnis die Reduktion auf die Systempalette schnell an, es ist nicht auf das individuelle Motiv abgestimmt und zerhackt feine Farbübergänge grob.

Abbildung 4.150:  Das Testbild wird mit der »Web«-Palette in ein 256-Farben-Bild ohne »Dithering« verwandelt. Weil diese gleichmäßig Palette die Farbschwerpunkte des Bild es nicht berücksichtigt, kommt es zu groben Verfälschungen. Mit der üblichen 216-Farben-Palette fürs Web benötigt die Datei nur rund 5,1 Kbyte; die Farbflächen lassen sich sehr gut komprimieren. Von den 216 in der Web-Palette festgesetzten Tonwerten verwendet dieses Bild nur 26 Tonwerte. Dies zeigt sich, wenn man im »Farben«-Menü der Optimieren-Palette auf »Auto« schaltet. Verkleinert man die Palette also mit der »Auto«-Option auf die 26 genutzten Tonwerte, ändert sich die Qualität nicht - die Dateigröße sinkt auf rund 4,2 Kbyte. Die Raute in den Farbfeldern kennzeichnet die entsprechenden Tonwerte als »web-sicher«. Die Testbilder erscheinen hier mit der typischen Monitorauflösung von 72 dpi; das wirkt im Druck grob, hebt aber die Eigenheiten heraus. Vorlage: Stop_2

»Web«

Eine einheitliche Palette ist auch wichtig bei der Bereitstellung von Bildern für die Seiten im World Wide Web des Internets. Sie müssen immer damit rechnen, dass Ihre Werke nur auf einem 8-Bit-System betrachtet werden. Hierfür gibt es eine spezielle Web-Palette mit 217 Farben, die auf Mac- und Windows-Rechnern korrekt dargestellt werden, ohne dass es zu verfälschendem Browser-Dithering (Farbstreuung) durch den Rechner des Betrachters kommt.

»Adaptiv«

Die Option Adaptiv verwendet die häufigsten Farben des Bildes. Wollen Sie etwa ein Landschaftsbild in indizierte Farben verwandeln, dann haben Sie viele verschiedene Blau- und Grüntöne, aber wenig Rot im Bild. Entsprechend wird eine blau und grün betonte Tabelle angelegt. Damit kommt das Ergebnis der Echtfarbdatei viel näher als eine Konvertierung mit Web-Palette, denn dort werden ja auf Kosten der Blau- und Grüntöne überflüssige Rot- und Gelbschattierungen parat gehalten.

Der Nachteil: Mehrere »adaptiv« umgerechnete Bilder benötigen unterschiedliche Farbtabellen und damit insgesamt mehr als 256 Farben. Auf Rechnern mit 8-Bit-Farbtiefe, die nur 256 Farben zeigen können, erscheinen zumindest die nicht aktiven Bilder verfälscht - mit der Palette des aktiven Bildes.

»Perzeptiv«

Perzeptiv erzeugt ebenfalls eine Farbtabelle, die sich an den Schwerpunkten im Bild orientiert. Betont werden Farben, die vom menschlichen Auge besser wahrgenommen werden.

»Selektiv«

Selektiv funktioniert ähnlich wie Perzeptiv - doch mit breiterem Farbumfang und besserer Erhaltung der Web-Farben.

»Schwarzweiß«

Die Vorgabe Schwarzweiss erzeugt ein Bild, das nur noch aus den Farbtönen Schwarz und Weiß besteht. Wenn Sie auf Dithering verzichten, erhalten Sie grobe grafische Flächen; hohe Dither-Werte sorgen für den Eindruck gerasterter Drucksachen. Falls es Ihnen auf die Schwarzweißwirkung, aber nicht unbedingt auf den Modus Indizierte Farben ankommt, bieten sich je nach Vorhaben mehrere Alternativen zur Schwarzweiss-Vorgabe - so etwa der Bitmap-Modus (Seite 447) oder der Befehl Bild: Einstellen: Schwellenwert, eventuell in Kombination mit anderen Befehlen (Seite 504) (siehe Abbildung 4.150).

Abbildung 4.151:  Links: Die Vorlage wurde mit der »Adaptiv«-Farbtabelle auf 256 Farben reduziert. Die Paletten »Selektiv« und »Perzeptiv« erzeugen ähnliche Ergebnisse. Das »Adaptiv«-Verfahren verwendet die häufigsten Tonwerte im Bild , so dass ein sehr realistisches Ergebnis entsteht.  Mitte: Die Farbtabelle weist jedoch nur wenige Tonwerte als web-kompatibel aus (erkennbar an der Raute). Alle anderen Tonwerte sind nicht in der Standard-»Web«-Tabelle enthalten. Das heißt: Dieses Bild erscheint meist verfälscht auf Rechnern, die nur 256 unterschiedliche Farbtöne anzeigen.  Rechts: Wir überprüfen die Bild darstellung mit dem Befehl »Ansicht: Vorschau: Browser-Dithering« (vergleiche Seite 364): Tatsächlich tritt deutliche Farbrasterung auf. Auf Rechnern mit 24-Bit-Grafikdarstellung wird das Bild unverfälscht erscheinen.

»Eigene«

Diese Option erhält die aktuelle perzeptive, selektive oder adaptive Farbtabelle als feste Palette. Sie wird bei Veränderungen des Bildes nicht aktualisiert.

»Gleichmäßig«

Die Option Gleichmässig verteilt die Farben der Palette gleichmäßig über das Spektrum. Dabei können Sie unterschiedliche Farbtiefen wählen. Bei fünf Bit Farbtiefe erhalten Sie fünf Rot-, fünf Grün- und fünf Blautöne in gleichmäßigem Abstand, insgesamt eine Palette aus 5x5x5, also 125 Tönen. In Verbindung mit »Diffusion Dithering« erzeugt sie bei niedrigen Werten den für Online-Grafik typischen Streusel-Look in matten Farben.

»Vorige« Palette

Klicken Sie die Vorige Palette an, sofern Sie zuvor bereits ein Bild mit den Optionen Eigene oder Flexibel bearbeitet haben und dieselbe Palette erneut verwenden möchten. Die Option beschleunigt das Bearbeiten mehrerer Bilder.

»Gewichtete« Zusammenstellung der Farbtabelle

Sie können die Adaptiv-, Perzeptiv- oder Selektiv-Farbtabelle nur auf Basis eines einzelnen Bildteils zusammenstellen; sämtliche Farbtöne werden dann aus diesem Bereich genommen. So betonen Sie ein Hauptmotiv und riskieren stärkere Verfälschung von weniger wichtigen Teilen. Wählen Sie in ImageReady den Bereich aus, der allein berücksichtigt werden soll, und speichern Sie die Auswahl als Alphakanal. Anschließend klicken Sie neben dem Klappmenü für die Farbtabellen in der Optimieren-Palette auf die Schaltfläche Farbreduktion mit Hilfe eines Kanals beeinflussen  (Details zum Verfahren ab Seite 368). Auch in Photoshop ist es nicht mehr möglich, einen Bildteil durch reines Auswählen und anschließenden Befehl Bild: Modus: Indizierte Farben zur Basis einer neuen, individuellen Farbtabelle zu machen.

Weitere Optionen bei Photoshop

Photoshops Befehl Bild: Modus: Indizierte Farben bietet weitere Möglichkeiten, um die Farbtabelle eines 8-Bit-Bildes zu bearbeiten:

  • Erzwungen: Mit dem Klappmenü Erzwungen zwingen Sie autoritär bestimmte Farben in die Tabelle, auch wenn sie nicht im Bild vorkommen: Schwarzweiss fügt reines Schwarz und Weiß hinzu. Primärfarben setzt die Farben Rot, Grün, Blau, Zyan, Magenta, Gelb, Schwarz und Weiß ein. Mit der Option Web nehmen Sie die 216 Web-kompatiblen Farben auf und mit der Option Eigene definieren Sie Farben nach Ihrem persönlichen Bedarf. Diese Maßnahmen steigern meist die Dateigröße.
  • Die Option Exakte Farben erhalten verhindert, dass Farben aus der gewählten Palette noch einmal per Streurasterung in mehrere Farbtöne gebrochen werden. So schützen Sie unter anderem feine Konturen oder glatte Flächen. Photoshop bietet diese Option nur in Verbindung mit Diffusion-Dithering an.
  • Für die Tabellen Selektiv, Adaptiv und Perzeptiv bietet Photoshop jeweils die Vorwahlen Lokal oder Master. Die Lokal-Vorgabe orientiert sich unmittelbar am aktuellen Bild; Master nutzt eine in ImageReady erzeugte Standardpalette (Seite Bild 389).

4.11.3 Zahl der Farben in der Farbtabelle herabsetzen

Sie können die Zahl der Farben in der Farbtabelle per Vorgabe auf einen bestimmten Wert beschränken, um die Dateigröße wirkungsvoll klein zu halten. Je weniger mögliche Farbtöne, desto gröber wirkt freilich Ihre Vorlage. Die Bildung von blockartigen Farbflächen lässt sich zwar effektiv mit »Diffusion Dithering« verhindern (siehe oben) - aber damit steigt wiederum die Dateigröße. Dies erledigen Sie in ImageReady mit dem Datenfeld Farben in der Optimieren-Palette, sofern GIF oder PNG-8 als Dateiformat vorgewählt sind. Die Zahl der Farben meldet ImageReady auch bei den technischen Daten in der Mehrfach-Vorschau.

»Auto«

Bei der Web-Palette, aber auch bei Schwarzweiss-, Windows- und Mac-OS-Palette verwendet das Farben-Klappmenü der Optimieren-Palette zunächst die Option Auto. Damit speichert die Farbtabelle nicht zwangsläufig sämtliche verfügbaren Tonwerte, also meist 255 oder 216, sondern nur die tatsächlich verwendeten. Dies ändert die Bildqualität nicht, senkt jedoch die Dateigröße. So verwendet unser Beispielbild »Stop_2« nur 26 Farbwerte aus der genormten Web-Palette; reduziert man die mit dem Bild gespeicherte Farbtabelle auf diese 26 Tonwerte, sinkt die Dateigröße gegenüber einem Bild, das 256 Farben in der Palette hat, davon aber doch nur 26 verwendet. Photoshops Befehl Indizierte Farben enthält keine solche Automatik.

4.11.4 Dithering (Farbrasterung)

Das auf 256 Farben reduzierte Echtfarbbild enthält meist nicht alle Tonwerte des Originals. Darum wirkt das Ergebnis auch grob. Wo das Original hauchfeine Übergänge zeigt, erscheinen in der 8-Bit-Variante harte Kanten zwischen markanten Farbflächen. Diese Erscheinung lässt sich jedoch durch »Dithering« korrigieren: Farbflächen werden hier aufgebrochen durch Untermischen benachbarter, verfügbarer Halbtöne. Beispielsweise könnte man ein mittleres Blau simulieren, indem hellere und dunklere blaue Pixel gemischt werden. So wirken Halbtonbilder deutlich natürlicher, speziell bei Verwendung der nicht ans Bild angepassten »Web«-Palette.

Beachten Sie, dass Internet-Programme mitunter Bilder mit Dithering darstellen, auch wenn das Bild anders gespeichert wurde: Dies gilt dann, wenn ein Bild nicht nur die Web-kompatiblen Farben enthält, sondern mit einer »selektiven« Palette oder mit 24-Bit-Farbtiefe gespeichert wurde und auf einem Rechner erscheint, der nur 256 unterschiedliche Farben abbildet. Sie können dieses Phänomen prüfen mit dem Befehl Ansicht: Vorschau: Browser-Dithering.

Nachteile

Die Farbstreuung per Dithering hat auch Nachteile:

  • An harten Kanten oder in homogenen Farbflächen kann es zu einem auffälligen Streuseleffekt kommen. Sie sollten eventuell solche Farbtöne in der Farbpalette schützen oder bei Photoshop Exakte Farben erhalten.
  • Weil die einheitlichen Flächen in viele unterschiedlich gefärbte Bildpunkte aufgebrochen werden, lässt sich das Ergebnis schlechter komprimieren - die Dateigröße bei Formaten wie GIF, PNG-8 oder TIFF-LZW steigt deutlich gegenüber einem 8-Bit-Bild ohne Dithering.

Wollen Sie auf Dithering verzichten, wählen Sie im Klappmenü der Optimieren-Palette Kein Dithering oder Diffusion mit einem Dither-Wert von 0. ImageReady und Photoshop bieten verschiedene Methoden an, die ein Streuraster ins Bild rechnen.

Abbildung 4.152:  Links: Unser Testbild erscheint hier mit »Web«-Palette, 26 »Auto«-Farben und 100 Prozent Diffusion Dithering. Das Streuraster ist deutlich zu erkennen, dennoch wirkt das Bild besser als die »Web«-Variante ohne Dithering (siehe Seite XX). Die Dateigröße beträgt 5,3 Kbyte gegenüber 4,2 Kbyte ohne Dithering. Auch die weiteren Beispiele wurden mit 26 Farben und Web-Palette errechnet; stehen mehr Farben zur Verfügung, ändert sich das Ergebnis geringfügig.  Mitte: »Muster«-Dithering, 5,3 Kbyte.  Rechts: »Störungsfilter«-Dithering, 5,7 Kbyte. Abbildung hier mit groben 72 dpi. Datei: Stop_2

Diffusion Dithering

Relativ unauffällig und optimal bei Halbtonbildern arbeitet das »Diffusion«-Dithering; es streut nach dem Zufallsprinzip Bildpunkte verfügbarer Farben eng nebeneinander und täuscht so pfiffig Farben vor, die in der Farbtabelle gar nicht erscheinen. Bei angepasster Palette und Diffusion Dithering lässt sich oft weder am Schirm noch im Druck erkennen, dass bloß eine 8-Bit-Datei vorlag; ganz deutlich verbessert Diffusion Dithering auch Bilder mit System- oder Web-Palette.

Vorsicht, wenn Sie Slices erstellen - also größere Bilder, die sich aus mehreren Einzelstücken zusammensetzen: Durch das Diffusion-Dithering können Ränder auftreten. Abhilfe: Markieren Sie die fraglichen Slices und verbinden Sie diese mit dem Befehl Slices: Slices verbinden; dann streut ImageReady das Dithering- Muster über alle verkoppelten Slices, die Ränder verschwinden.

Steuerung des Dither-Effekts

Anders als die meisten Konkurrenzprogramme erlaubt ImageReady die stufenlose Steuerung des Diffusion Dithering. Haben Sie Diffusion eingeschaltet und das Dither-Feld zeigt null Prozent, entspricht dies genau der Vorgabe Kein Dither. Je höher Sie den Dither-Wert setzen,

  • desto deutlicher wird die Farbstreuung,
  • desto mehr lösen sich Farbblöcke auf,
  • desto »natürlicher« wirken viele Halbtonfotos,
  • desto mehr erhöht sich die Dateigröße.

Prüfen Sie individuell, welcher Dither-Wert sich für Ihre Vorlage eignet.

»Gewichtetes« Dithering

Sie können innerhalb eines Bildes zwei verschiedene Dither-Stärken anwenden: Wählen Sie den Bereich aus, der stärker gedithert werden soll, und speichern Sie die Auswahl als Alphakanal. Anschließend klicken Sie neben dem Dither-Wert in der Optimieren-Palette auf die Schaltfläche Dither-Einstellung mit Hilfe eines Kanals ändern  . Im Dialogfeld Dither-Einstellung ändern teilen Sie nun einen höheren Dither-Wert für den ausgewählten Bildteil und einen niedrigeren Wert für den nicht ausgewählten Bereich zu. Eine genaue Beschreibung des Verfahrens finden Sie ab Seite 368.

Betrachten Sie Dateien mit Dither-Raster möglichst in der Zoomstufe 100 Prozent - alle anderen Darstellungen, insbesondere Verkleinerungen, wirken stark verzerrend (Details ab Seite 69). Den Abbildungsmaßstab 100 Prozent richten Sie unter anderem durch Doppelklick auf die Lupe  oder mit Strg+Alt+P ein.

Abbildung 4.153:  Links: Ein »Dither«-Wert von 30 Prozent erzeugt eine erste, leichte Aufweichung der Farbkanten im Bild . Die Dateigröße steigt gegenüber der Variante ohne Dithering (siehe Seite XX) gering auf 4,3 Kbyte.  Mitte: Mit 60 Prozent Dithering verschwinden die Kanten, ohne dass die Vorlage schon so aufgelöst wirkt wie bei 100 Prozent (siehe vorhergehende Reihe); die Dateigröße steigt auf 4,9 Kbyte.  Rechts: Um die Dateigröße zu senken, haben wir gegenüber dem mittleren Bild die Datenkomprimierung mit Qualitätsverlust angewendet und den »Lossy«-Wert in der Optimieren-Palette für GIF auf 45 gesetzt. Dateigröße: 4,0 Kbyte. Alle Beispiele entstanden mit »Web«-Palette und 26 »Auto«-Farben. Vorlage: Stop_2

Weitere Methoden der Farbrasterung

Die Programme bieten weitere Methoden der Farbrasterung, die jedoch selten besser wirken als das »Diffusion Dithering«:

  • Das Muster-Dithering ordnet nach einem Rasterschema Bildpunkte verfügbarer Farben eng nebeneinander, um Farben zu simulieren, die in der Farbtabelle nicht vorkommen.
  • Der Störungsfilter wendet ähnlich dem »Diffusion Dithering« ein Zufallsmuster an - jedoch ohne die Streuung des Musters über benachbarte Pixel. Ränder können bei diesem Verfahren nicht auftreten, so dass es sich besonders für Slices eignet.
  • Mit dem Befehl Filter: Sonstige Filter: DitherBox lassen sich in ImageReady wie in Photoshop eigene Dithering-Muster anlegen. Eine Beschreibung finden Sie in der Online-Hilfe der Programme.

Abbildung 4.154:  Diese Beispiele entstanden jeweils mit 60 Prozent »Diffusion Dithering« und »Web«-Palette. Verwendet man 26 Farben, benötigt das Ergebnis 4,9 Kbyte (siehe obere Reihen). Hier wurde die Farbzahl mit der Optimieren-Palette weiter gesenkt, um die Dateigröße zu verringern.  Links: 16 Farben, 3,5 Kbyte;  Mitte: acht Farben, 2,85 Kbyte;  Rechts: vier Farben, 2,0 Kbyte.

4.11.5 Standardpaletten

Sie können eine Standardpalette für Gruppen von GIF- oder PNG-8-Bildern erstellen, die für ein Multimedia-Projekt bestimmt sind. Alle Bilder erscheinen dann mit denselben, charakteristischen Farben. Das Verfahren im Überblick: Sie sammeln Farben aus einer Anzahl von Bildern, anschließend erstellen und speichern Sie die Standardpalette.

Standardpalette erstellen

So legen Sie eine Standardpalette an:

1. Öffnen Sie das erste 8-Bit-Bild.
2. Wählen Sie, falls verfügbar, Bild: Standardpalette: Standardpalette löschen. So stellen Sie sicher, dass Farben aus vorherigen Bildern nicht in die neue Palette aufgenommen werden.
3. Öffnen Sie ein Bild, dessen Farben Sie in die Standardpalette aufnehmen möchten.
4. Nun heißt es Bild: Standardpalette: In Standardpalette aufnehmen. Alle Farbinformationen für das aktuelle Bild werden in die Standardpalette eingefügt.
5. Wiederholen Sie diese Prozedur für alle Bilder, deren Farben in der Standardpalette erscheinen sollen.
6. In der Optimieren-Palette legen Sie die Optimierungseinstellungen fest, zum Beispiel das Dithering-Verfahren.
7. Erstellen Sie nun eine neue Farbtabelle aus allen bisherigen Informationen; dies erledigen Sie per Bild: Standardpalette: Standardpalette erstellen.
8. Klicken Sie auf Bild: Standardpalette: Standardpalette speichern.
9. Geben Sie der Standardpalette im Dialogfeld einen Namen. Sie sollten die Palette wie vom Programm vorgeschlagen im Photoshop-Unterverzeichnis »Vorgaben/Optimierte Farben« sichern. Sie können Ihre Standardtabelle dann in der Optimieren-Palette aufrufen - im Klappmenü mit den anderen Tabellen wie Web oder Selektiv.

Die neue Farbtabelle erscheint sofort im Klappmenü der Optimieren-Palette.

Standardpaletten anwenden

Um die Standardpalette auf Bilder anzuwenden, öffnen Sie zunächst die Dateien. Nun haben Sie zwei Möglichkeiten:

  • Liegt die Standardfarbtabelle wie vorgeschlagen im Unterverzeichnis »Vorgaben/Optimierte Farben«? Dann zeigen Sie Ihr Bild in Mehrfach-Vorschau, geben Sie für die aktivierte »optimierte« Version GIF oder PNG-8 vor und wählen Sie Ihre Standardfarbtabelle aus dem Klappmenü mit den verschiedenen Farbtabellen.
  • Laden Sie die Tabelle mit dem Menü zur Palette Farbtabelle. Auch dies geht nur, wenn die Optimieren-Palette GIF oder PNG-8 als Dateiformat nennt.

In beiden Fällen gilt: Sobald Sie die Palette aufrufen, erscheinen Farbtöne in der »Farbtabelle«, das Bild ändert sich entsprechend. Bedenken Sie, dass Sie auch zahlreiche Bilder auf einen Rutsch automatisch mit dieser Farbpalette ausstatten können, wenn Sie den Zustand der Optimieren-Palette als so genanntes Droplet speichern (Details zu Droplets finden Sie ab Seite 131).

Diese Tabelle lässt sich auch in Photoshop aufrufen - etwa mit dem Befehl Datei: Für Web speichern, der weitgehend dem beschriebenen Verfahren in ImageReady ähnelt. Alternativ nehmen Sie den Befehl Bild: Modus: Indizierte Farben, wählen im Dialogfeld die Eigene Palette und klicken im darauf folgenden Dialogfeld Farbtabelle auf Laden.

4.11.6 Einzelne Farbtöne in der Farbtabelle bearbeiten

Man kann in der Farbtabelle jeden Einzelfarbton, aber auch Gruppen von Farben, auf verschiedene Art bearbeiten oder entfernen. Ihre Möglichkeiten in der Übersicht:

  • einen Farbton gegen einen beliebigen anderen Farbton austauschen
  • einen Farbton löschen
  • einen Farbton so fixieren, dass er auch bei weiterer Datenreduktion nicht unter den Tisch fällt
  • einen Farbton gegen einen ähnlichen, aber WWW-kompatiblen Farbton austauschen
  • einen bestimmten Prozentsatz an Farbtönen internet-kompatibel machen

Sie öffnen die Farbtabelle in ImageReady über das Fenster-Menü; Sie sehen dort alle Farbtöne für die aktivierte GIF- und PNG-8-Variante in der Dateifenster-Vorschau; haben Sie eine JPEG-Variante angeklickt, zeigt die Farbtabelle gar nichts. Öffnen Sie ein 8-Bit-TIFF-Bild in ImageReady, sehen Sie für die Original-Ansicht ebenfalls keine Farbtabelle - das Programm behandelt alle Bilder wie 24-Bit-Echtfarbe.

Die Reihenfolge der Farbtöne in der Palette können Sie mit den Befehlen des Palettenmenüs ändern: Sortieren nach Farbton, nach Luminanz (Helligkeit) oder nach Häufigkeit. Nicht sortiert stellt die ursprüngliche Abfolge wieder her. Die folgende Grafik zeigt Ihnen die Möglichkeiten mit der Palette Farbtabelle aus ImageReady.

Abbildung 4.155:  ImageReady zeigt Farbtöne in der Farbtabelle nur an, wenn Sie die aktuelle Variante in der Mehrfach-Vorschau in der Optimieren-Palette als GIF- oder PNG-8-Datei angeben. Sie können einzelne Farbtöne löschen, ändern oder gegen Veränderung schützen.

Farbtöne auswählen und abwählen

Sehr gezielt wählen Sie in der Tabelle die Farbtöne aus, die Sie interessieren:

  • Um einen einzelnen Farbton zu markieren, klicken Sie ihn an.
  • Sie markieren mehrere Farbtöne, indem Sie diese bei gedrückter Strg-Taste anklicken.
  • Wollen Sie einen einzelnen Farbton aus der Auswahl entfernen, klicken Sie ihn erneut mit der Strg-Taste an.
  • Eine Reihe von Farbtönen markieren Sie so: Klicken Sie den ersten Farbton an, dann klicken Sie den letzten Farbton bei gedrückter Umschalt-Taste an.
  • Sie können zudem Alle Farben auswählen; diesen Befehl bietet das Menü der Farbtabelle. Sie erreichen dieses Menü wie üblich über das Dreieck rechts oben.
  • Besteht eine Auswahl im Bild, können Sie Alle Farben in Auswahl auswählen - eine Möglichkeit, die Ihnen ebenfalls das Menü der Farbtabelle eröffnet.
  • Zudem lassen sich Alle Web-kompatiblen oder Alle nicht Web-kompatiblen Farben auswählen.
  • Möchten Sie eine bestimmte Farbe aus dem Bild auswählen? Schalten Sie die Pipette  ein (Kurztaste I) und klicken Sie den Farbton an - er wird auf der Farbtabelle hervorgehoben. Dabei spielt es keine Rolle, ob Sie in das Original mit hoher Farbtiefe oder in eine »optimierte« Version in der Mehrfach-Vorschau klicken - ImageReady wählt immer den nächstgelegenen Farbton auf der Palette aus. Achtung: Bei diesem Verfahren ändern Sie auch die aktuelle Vordergrundfarbe.

So heben Sie die gesamte Auswahl wieder auf:

  • Wählen Sie im Palettenmenü Alle Farben abwählen; oder
  • klicken Sie in der Farbtabelle in den grauen Bereich außerhalb der Farbkästchen.

Ausgewählte Farben im Bild hervorheben

Klicken Sie Farben auf der Farbtabelle an - ImageReady hebt sie dann in einer optimierten, auf GIF oder PNG-8 gestellten Dateiansicht hervor. So erkennen Sie, wo in Ihrer Datei der in der Farbtabelle markierte Farbton anzutreffen ist. Dazu klicken Sie den Farbton in der Tabelle an und halten die Maustaste etwas länger gedrückt - der Farbton erscheint nun mit negativem Farbwert. Markieren Sie mehrere Farben (siehe vorhergehender Abschnitt), um sie durch längeres Anklicken im Negativ-Tonwert darzustellen.

Natürlich können Sie den Farbton auch einfach per Doppelklick und Farbwähler gegen einen markanten anderen Tonwert austauschen, nach erfolgtem Erkenntnisgewinn wählen Sie im Menü zur Optimieren-Palette Verschiebung widerrufen für alle Farben.

Abbildung 4.156:  Hier arbeiten wir mit der »Adaptiv«-Palette und 64 Farbtönen. Um den Hauptfarbton in der Farbtabelle auszuwählen, klicken wir ihn mit der Pipette an. In der Farbtabelle können wir den Farbton nun in den web-kompatiblen Bereich verschieben. Datei: Verbindungen

Farbtöne neu aufnehmen und löschen

Die aktuelle Vordergrundfarbe lässt sich in die Farbtabelle aufnehmen. Wählen Sie eine Vordergrundfarbe aus und klicken Sie rechts unten in der Farbtabelle auf das Symbol Fügt die Vordergrundfarbe der Palette hinzu  oder wählen Sie den Befehl Neue Farbe im Palettenmenü. Die Farbe erscheint als neues Kästchen in der Tabelle.

Sie ist zunächst fixiert, wie Sie an dem kleinen Quadrat rechts unten im Kästchen erkennen; das heißt, dieser Farbton wird bei weiterer Bearbeitung der Datei vorerst nicht verworfen (siehe auch unten). Beachten Sie, dass Sie mit dem Photoshop-Befehl Bild: Modus: Indizierte Farben die Möglichkeit haben, Schwarz und Weiß oder die Primärfarben in eine Palette zu zwingen.

Um einen Farbton zu löschen und so die Dateigröße zu senken, ziehen Sie ihn in den Mülleimer  . Alternativ klicken Sie den Farbton einmal an und klicken dann auf den Mülleimer oder auf den Befehl Farbe löschen im Palettenmenü.

Farbton ändern

Einer ausgewählten Farbe können Sie einen neuen RGB-Farbwert zuweisen. Das »optimierte« Bild in der Vorschau übernimmt diesen Farbton sofort. Klicken Sie doppelt auf die Farbe in der Palette Farbtabelle. Damit erscheint der Standardfarbwähler. Wählen Sie eine Farbe aus und verwenden Sie bei Bedarf die Option Nur Web-Farben.

Abbildung 4.157:  Die wichtigsten Bild teile wurden mit dem Zauberstab ausgewählt. Der Palettenbefehl »Alle Farben in Auswahl auswählen« markiert die Farbtöne innerhalb der Fließmarkierung in der Farbtabelle.

Bearbeitete Farben kennzeichnet ImageReady durch eine kleine schwarz gefüllte Raute in der Mitte. Außerdem ist dieser Farbton gegen weitere Veränderung zunächst geschützt, wie Sie an dem kleinen Rechteck rechts unten in der Palette erkennen.

Farbton fixieren und lösen

Ausgewählte Farben lassen sich in der Farbtabelle schützen. Verringern Sie die Farbzahl, bleibt diese Farbe auf jeden Fall erhalten. Beim Dithern wird diese Farbe nicht mitgerastert. Sie schützen so wichtige Tonwerte vor ungewünschter Veränderung - etwa die Signalfarbe einer Firma oder eine Farbe, die die Hintergrundfarbe der Internet-Seite aufnimmt.

Beachten Sie jedoch, dass die im Bild geschützte Farbe auf dem Rechner des Betrachters gleichwohl mit Dithering erscheinen kann, wenn es sich nur um 8-Bit-Darstellung handelt. Sie überprüfen das mit dem Befehl Ansicht: Vorschau: Browser-Dithering.

So fixieren Sie die Farbe, sofern Sie eine GIF- oder PNG-8-Variante bearbeiten:

1. Wählen Sie die Farbe aus.
2. Fixieren Sie die Farbe durch Klicken auf das Symbol Fixieren  oder mit dem Befehl Gewählte Farben fixieren/lösen im Palettenmenü. ImageReady kennzeichnet fixierte Farben durch ein weißes Quadrat mit rotem Punkt in der unteren rechten Ecke des Farbfeldes in der Tabelle.

Genau auf umgekehrtem Weg heben Sie diese Fixierung wieder auf: Markieren Sie fixierte Farben und klicken Sie erneut auf das Symbol Fixieren. Das Symbol verschwindet aus dem Farbfeld. Befinden sich unter den ausgewählten Farben sowohl fixierte als auch nicht fixierte Farben, werden alle Farben fixiert. Wollen Sie alle fixierten Farben zur Verschiebung freigeben, verwenden Sie im Palettenmenü den Befehl Alle Farben lösen.

Wie schon erwähnt, entstehen in einigen Situationen automatisch fixierte Farbtöne:

  • wenn Sie eine Farbe neu in die Palette einfügen;
  • wenn Sie eine vorhandene Farbe per Farbwähler austauschen.

Einzelne Farbtöne web-kompatibel machen

Sie können einzelne Farbtöne so verschieben, dass der nächstgelegene, web-kompatible Farbton eingesetzt wird. Damit gehen Sie sicher, dass dieser Farbton auch auf Rechnern mit 256-Farben-Anzeige unverfälscht erscheint, also ohne Browser-Dithering. Wählen Sie zunächst die gewünschten Farbtöne in einer »optimierten« Vorschauversion aus; dann klicken Sie in der Farbtabelle auf das Symbol Web-Verschiebung  . Derart lassen sich auch mehrere markierte Farben gleichzeitig in den sicheren Bereich verschieben.

In der Mitte einer solchen, so genannten »web-verschobenen« Farbe zeigt ImageReady eine kleine, weiß gefüllte Raute. Diese Raute erscheint auch in allen anderen web-kompatiblen Farben.

Abbildung 4.158:  Links: Der Regler »Web-Ausrichtung« in der Optimieren-Palette macht einen wählbaren Anteil an Farbtönen web-kompatibel. Die web-kompatiblen Tonwerte kennzeichnet ImageReady durch eine weiß gefüllte Raute im Farbfeld.

Den Anteil web-kompatibler Farbtöne erhöhen

Sie können den Anteil web-kompatibler Farben in einem Bild prozentweise erhöhen. Voraussetzung wie immer in diesem Abschnitt: Sie bearbeiten eine Vorschau-Version und haben GIF oder PNG-8 in der Optimieren-Palette als Dateiformat eingerichtet. Dann bietet die Optimieren-Paella den Regler Web-Ausrichtung. Er steht zunächst bei null Prozent.

Je weiter Sie den Wert für Web-Ausrichtung anheben, desto mehr Tonwerte ersetzt ImageReady durch web-kompatible Tonwerte. Das Bild wirkt also weniger entstellt, wenn es auf einem Rechner mit reiner 256-Farben-Anzeige läuft und dort vom Internet-Browser nur mit (nicht im Bild enthaltenem) Dithering wiedergegeben werden kann.

Alle verschobenen Farbtöne zeigen in der Mitte die kleine weiße Raute, das Symbol für Web-Kompatibilität. Je höher der Anteil web-kompatibler Farben, desto ungenauer wird die Bilddarstellung im Vergleich zum Original; Sie entfernen ja zumeist solche Farbtöne, die exakt für dieses Motiv besonders gut gepasst haben.

Änderungen an der Farbtabelle widerrufen

Wollen Sie die Änderungen an der Farbtabelle wieder aufheben, können Sie auch das Palettenmenü mit der Schaltfläche  öffnen. Verwenden Sie für Ihre Rückrufaktion aus dem Palettenmenü den Befehl Verschiebung widerrufen für alle Farben.

Zusätzlich enthält die Palette auch den Befehl Web-Verschiebung für gewählte Farben/Verschiebung widerrufen. Sofern Sie einige Farben gewählt haben, lässt sich die Veränderung hin zu web-kompatiblen Farbtönen annullieren. Alternative: Klicken Sie erneut auf das Symbol Verschiebt ausgewählte Farben in die Web-Palette  .

Farbtabellen speichern und laden

Mittels Palettenmenü können Sie eine brauchbare Farbtabelle speichern. Dabei schlägt ImageReady zunächst das Photoshop-Unterverzeichnis » Vorgaben/Optimierte Farben« vor. Verwenden Sie dieses Verzeichnis, wird diese Farbtabelle sofort auch im Menü der verschiedenen Farbtabellen innerhalb der Optimieren-Palette angeboten - also dort, wo Sie etwa auf Web oder Selektiv zugreifen.

Sie öffnen beliebige Farbtabellen aus jedem beliebigen Unterverzeichnis über den Befehl Farbtabelle laden. ImageReady wendet die Farbtabelle sofort auf das Bild an. (Wie immer in diesem Abschnitt stehen die Funktionen nur bereit, wenn Sie eine »optimierte« GIF- oder PNG-8-Vorschau bearbeiten.)

Farbübergänge

Sie können neue Farbübergänge in die Palette zaubern, Diese Möglichkeit bietet nur Photoshop. Öffnen Sie in diesem Programm ein 8-Bit-Bild und zeigen Sie mit dem Befehl Bild: Modus: Farbtabelle die Farbtabelle an. So geht's weiter:

1. Ziehen Sie den Mauszeiger über den Bereich der Palette, den Sie verändern möchten. Die erfassten Farbtöne erscheinen markiert.
2. Photoshop blendet sofort den Farbwähler ein, in dem Sie einen Farbton für den Beginn des Farbübergangs anklicken. Dann klicken Sie auf OK.
3. Unmittelbar erscheint der Farbwähler erneut und Sie geben eine Endfarbe für den Farbverlauf ein. Photoshop ersetzt die ausgewählten Farbtöne durch einen Farbverlauf mit den von Ihnen gewählten Endfarben.

Die Auswirkung sehen Sie bereits in der Vorschau.

4.11.7 Web-kompatible Farben auswählen und HTML-Farbwerte verwenden

Wir besprechen hier kurz, wie Sie web-kompatible Farben auswählen - also solche Farbtöne, die auch auf unterschiedlichsten Rechnern mit 256-Farben-Anzeige unverfälscht erscheinen. Eine ausführliche Darstellung zur Farbwahl finden Sie ab Seite 528.

Farbwähler

Den Standardfarbwähler erhalten Sie beispielsweise nach Klick auf die Felder für Vordergrundfarbe und Hintergrundfarbe in der Werkzeugleiste oder nach Klick auf ein Farbfeld in der Farbtabelle. Schalten Sie hier die Option Nur Web-Farben ein - dann sehen Sie nur noch Farbtöne aus der 216-Farben-Tabelle, die allseits unverfälscht wiedergegeben wird.

Alternative: Wählen Sie eine Farbe frei aus, ohne die Einschränkung auf Nur Web-Farben. Dann zeigt der Farbwähler meist rechts oben die Farbwarnung für die Webpalette  ; das signalisiert, dass die aktuell gewählte Farbe nicht web-kompatibel ist. Darunter sehen Sie bereits die nächstgelegene web-kompatible Farbe. Klicken Sie den Würfel an - damit verschiebt sich der zuvor gewählte Tonwert auf den web-kompatiblen Wert.

Abbildung 4.159:  Links: Sofern Sie die Option »Nur Web-Farben« im Farbwähler nicht verwenden, erscheint bei nicht web-kompatiblen Farben rechts oben das Symbol »Farbwarnung für die Webpalette«. Darunter zeigt das Programm die nächstgelegene web-kompatible Farbe. Klicken Sie den Würfel an, um den aktuellen Tonwert auf den angezeigten web-kompatiblen Wert zu verschieben.  Unten rechts gibt das Programm den Hexadezimalcode für die Farbe an. Sie können hier Werte kopieren oder einfügen.  Rechts: Der Farbregler bietet spezielle Optionen für web-kompatible Farben.

Farbregler

Am bequemsten lassen sich Farben mit dem Farbregler einstellen, er wird im Fenster-Menü und per F6 angeboten. Klicken Sie im Menü der Farbregler-Palette auf Web-Farbregler; dann erscheinen nur noch Web-kompatible Farbtöne. Ist ein nicht web-tauglicher Farbwert gewählt, erscheint die oben beim Farbwähler bereits beschriebene Farbwarnung für die Web-palette  . Klicken Sie darauf, um die nächstmögliche web-taugliche Farbe einzurichten.

Pipette

Mit der Pipette   klicken Sie einen Bildpunkt an und bestimmen so eine neue Vordergrundfarbe. Wenn Sie nun in ein 24-Bit-Bild oder in ein 8-Bit-Bild mit nicht web-kompatiblen Farben klicken, werden Sie meist Farben erwischen, die wiederum nicht web-kompatibel sind.

Sie können dabei auch Bildtöne außerhalb von ImageReady aufnehmen - zum Beispiel die Farbe aus einem Internet-Browser oder von der Windows-Oberfläche: Klicken Sie zunächst einen Farbton in ImageReady an; dann ziehen Sie das Werkzeug bei gedrückter Maustaste an jede andere Stelle auf dem Bildschirm.

Die Optionen zur Pipette bieten den Punkt An Web-Farbe ausrichten an. Nun lassen sich beliebige Bildpunkte anklicken - als neue Vordergrundfarbe erhalten Sie immer eine web-kompatible Farbe.

HTML-Farbwerte kopieren

Im HTML-Code werden Farben in hexadezimaler Schreibweise angegeben. Es gibt aber auch Bezeichnungen für Standardfarben. Reines Weiß kann beispielsweise auf diese zwei Arten in einem HTML-Code erscheinen: 

COLOR=#FFFFFF
COLOR=White

Weitere vordefinierte Farben sind unter anderem aqua, black, blue oder maroon. Sie können in ImageReady eine Farbe festlegen und den Hexadezimal-Code in die Zwischenablage kopieren; dann lässt er sich in einem Layout-Programm etwa als Hintergrundfarbe einfügen. Sie finden den Befehl Farbe als HTML kopieren im Menü des Farbreglers; das Kontextmenü der Pipette  bietet Ähnliches. Der Farbwähler nennt den HTML-Code in einem Feld rechts unten. Sie können den Code in diesem Dialogfeld markieren und mit Strg+C kopieren; per Rechtsklick (am Mac Ctrl-Klick) erhalten Sie dort auch ein Kontextmenü mit Befehlen wie Kopieren und Einsetzen.

HTML-Farbwerte übernehmen

Vielleicht möchten Sie HTML-Farbwerte von einer Internet-Seite übernehmen. Dann können Sie bei Ihren Grafiken perfekte Übergänge zum Hintergrund erzeugen. Zwei Wege sind denkbar:

  • Öffnen Sie die HTML-Datei, markieren Sie den Farbcode, der hinter Hinweisen wie COLOR oder BGCOLOR erscheint, und kopieren Sie ihn mit Strg+C in die Zwischenablage. Öffnen Sie anschließend den ImageReady-Farbwähler zum Beispiel durch Klick auf die Vordergrundfarbe in der Werkzeugleiste; fügen Sie den Code rechts unten mit Strg+V ein. Spätestens, wenn Sie in ein anderes Datenfeld klicken, erscheint die Farbe im Farbwähler.
  • Öffnen Sie die Internet-Seite mit der gewünschten Farbe - zum Beispiel, indem Sie diese Seite online aufrufen. Schalten Sie die ImageReady-Pipette  ein, klicken Sie in einen Bildpunkt innerhalb von ImageReady und ziehen Sie die Pipette dann bei gedrückter Maustaste über den Internet-Browser. Der zuletzt berührte Bildpunkt liefert die nächste Vordergrundfarbe für ImageReady.

© Copyright Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH
Elektronische Fassung des Titels: Photoshop 6.0 Kompendium, ISBN: 3-8272-5831-6 Kapitel: 4 Funktionen für Internet-Gestalter