Rollover Slices

Mit Slices kann man nicht nur Bilder zerteilen, sonder man kann sie auch für Rollover-Grafiken einsetzen. Wie man soetwas mit PS herstellt möchte ich mit Ihnen anhand eines Beispieles durcharbeiten.
Die Aufgabenstellung lautet: Pebbles soll als graues Bild erscheinen, an Schwanz und Kopf soll ein farbiges Rollover eingebracht werden.

Duplizieren Sie dazu die Originalebene dreimal und benennen Sie diese mit "grau", "kopf" und "schwanz". Um das Grau zu erlangen wird "grau" gewählt, mit "Bild->Einstellungen->Farbton/Sättigung" die Sättigung auf -100% reduziert und mit "Bild->Einstellungen->Helligkeit/Kontrast" der Helligkeitswert auf +60% hinaufgesetzt. Wir aktivieren nun "schwanz", wählen das Auswahlrechteck aus der Toolbox und zeichnen eine Auswahl in die linke untere Ecke. Mit "Auswahl->Auswahl transformieren" kann diese noch nachgearbeitet werden. Der Rest um die Auswahl wird gelöscht. Um später beim Einblenden des Rollovers keinen harten Übergang zu bekommen wird die Auswahl nun mit "Auswahl->Auswahl verändern->Umrandung->10px" erweitert und durch "Filter->Weichzeichnungsfilter->Gaußscher Weichzeichner->Radius 10px" zum Rand transparent gemacht. Genauso verfahren wir nun mit "kopf". Da beim Kopf noch ein Klick-Effekt eingesetzt werden soll wird diese Ebene nun noch einmal dupliziert, mit "kopf-button" benannt und der Effekt mit einem Ebenenstil hervorgerufen. Ich habe für diesen Effekt als Kontur "Gaußsche umgekehrt" und einen Schattierungswinkel von 130° verwendet. Alle anderen Einstellungen wurden beibehalten. Doch experimentieren Sie ruhig. Wahrscheinlich finden Sie Einstellungen, die mehr Ihrem Geschmack entsprechen. Bild 1 zeigt nun die Effekte bei eingeschalteten Ebenen, und die Ebenen-Palette sollte in etwa so aussehen wie in Bild 2.
Jetzt sind alle Vorbereitungen für das Slicen getroffen. Im nächsten Schritt werden die ebenenbasierten Slices erstellt. "kopf" wird in der Ebenenpalette ausgewählt und mit "Ebene->neues ebenenbasiertes Slice" das Slice berechnet. Genauso verfahren Sie mit "schwanz" (Bild 3).

Jetzt wird es Zeit, zu IR zu wechseln. Klicken Sie auf die Schaltfläche ganz unten in der Toolbox. IR wird geöffnet und das Bild geladen. Sollten Sie jetzt die Slices noch nicht sehen, dann wählen Sie das Slice-Auswahlwerkzeug aus. Jetzt erscheinen die Slices. Sofern Sie es nicht schon getan haben, so blenden Sie jetzt die Fenster "Ebenen" und "Rollover" ein. Diese sind die Hauptwerkzeuge in den nächsten Schritten. Ausserdem sollten Sie bereits jetzt in den Optimierungsoptionen die Werte "jpeg" und "mittel" einstellen, um webgerechte Dateigrössen zu erlangen.
Von Beginn an haben wir einen Status "normal" und leere Staten für die beiden Ebenen-Slices. Wir erstellen jetzt mittels "RMT->Rollover Status hinzufügen" einen Status für "kopf-over", einen für "kopf-click" und einen für "schwanz-over". Bei "kopf-click" wird automatisch zuerst ein Status "kopf-down" generiert. Klicken Sie mit der RMT in dieses Feld und wählen sie "click" aus. Nun muss jedem Status eine Ebenensichtbarkeit zugeordnet werden. Dazu wird der Status in der Rollover-Palette angeklickt, dann zur Ebenenpalette gewechselt und dort die zugehörigen Ebenen sichtbar geschaltet.
1) Rollover "normal": die Ebene "grau"
2) Rollover "kopf": die Ebene "grau"
3) Rollover "kopf-over": die Ebenen "grau" und "kopf"
4) Rollover "kopf-click": die Ebenen "grau" und "kopf-button"
5) Rollover "schwanz": die Ebene "grau"
6) Rollover "schwanz-over": die Ebenen "grau" und "schwanz".
Wenn Sie nun die Vorschau aktivieren sehen Sie bereits das funktionierende Rollover-Slice mit dem dazugehörigen Quellcode. Sollten Sie die Einzelbilder auf dem Server in einen anderen Ordner verschieben, so denken Sie bitte auch daran, die Pfade im Quelltext zu ändern.
Und wie dieses Slice aussehen sollte, das sehen Sie hier. Gutes Gelingen.