Webgrafiken / Arbeiten mit Webgrafiken
Erstellen von Rollovern
Ein Rollover ist eine Schaltfläche oder ein Bild auf einer Webseite, das sich ändert, wenn die Maus darüber geführt wird. Zum Erstellen eines Rollovers benötigen Sie mindestens zwei Bilder: ein Primärbild für den normalen Status und ein Sekundärbild für den geänderten Status.
Photoshop bietet eine Reihe hilfreicher Werkzeuge zum Erstellen von Rollover-Bildern:
Verwenden Sie zum Erstellen von Primär- und Sekundärbildern Ebenen. Erstellen Sie Inhalt auf einer Ebene, duplizieren Sie die Ebene dann und bearbeiten Sie sie, um einen ähnlichen Inhalt zu erhalten. Dabei bleibt die Ausrichtung zwischen den Ebenen erhalten. Zum Erstellen eines Rollover-Effekts können Sie den Ebenenstil, die Sichtbarkeit oder Position ändern, Farb- oder Tonwertkorrekturen vornehmen oder Filtereffekte anwenden. Siehe Duplizieren von Ebenen.
Sie können Ebenenstile auch zur Anwendung von Effekten, wie Farbüberlagerungen, Schlagschatten, Schein oder Relief, auf die Primärebene verwenden. Zur Erstellung eines Rolloverpaars aktivieren oder deaktivieren Sie den Ebenenstil und speichern das Bild in jeweiligen Status. Siehe Ebeneneffekte und -stile.
Verwenden Sie die vorgegebenen Schaltflächenstile in der Stile-Palette, um auf schnelle Weise Rollover-Schaltflächen mit den Status „Normal“, „mouseover“ und „mousedown“ zu erstellen. Ziehen Sie eine Grundform mit dem Rechteckwerkzeug und wenden Sie einen Stil, wie z. B. „Abgeflacht Normal“, an, um das Rechteck automatisch in eine Schaltfläche umzuwandeln. Kopieren Sie die Ebene und wenden Sie andere Vorgabestile, wie z. B. „Abgeflacht Mouseover“ an, um weitere Schaltflächenstatus zu erstellen. Speichern Sie jede Ebene als separates Bild, um eine fertige Rollover-Schaltflächengruppe zu erstellen.
Speichern Sie die Rollover-Bilder über das Dialogfeld „Für Web und Geräte speichern“, um Rollover-Bilder in einem webkompatiblen Format und mit optimierter Dateigröße zu speichern. Siehe Optimieren von Bildern.
Verwenden Sie zum Speichern von Rollover-Bildern eine Benennungskonvention, um das Primärbild (kein Rollover-Status) vom Sekundärbild (Rollover-Status) zu unterscheiden.
Nachdem Sie eine Rollover-Bildgruppe in Photoshop erstellt haben, verwenden Sie Dreamweaver, um die Bilder auf einer Webseite zu platzieren und automatisch den Javascript-Code für die Rollover-Aktion hinzuzufügen.
Ein Video über das Erstellen von Webseiten mit Photoshop und Dreamweaver finden Sie unter .
