Rollover Slices mit Adobe Photoshop
|
Mit Slices kann man nicht nur Bilder zerteilen, sonder man kann sie auch für Rollover-Grafiken einsetzen. Wie man so etwas mit PS herstellt möchten wir Ihnen anhand eines Beispieles zeigen. |
||
 Bild 1 |
 Bild 2 |
 Bild 3 |
|
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. Wir haben 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 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.
