Mit den Webwerkzeugen von Photoshop ist es ein Leichtes, Komponenten für deine Webseiten zu erstellen oder komplette Webseiten in vorgegebenen oder benutzerdefinierten Formaten auszugeben.

• Verwende Ebenen und Slices zum Erstellen von Webseiten und Steuerelementen für Webseiten. (Siehe Ebenen und Erstellen von Slices für Webseiten.)

• Verwende Ebenenkompositionen, um mit verschiedenen Seitenkompositionen zu experimentieren oder Varianten einer Seite zu exportieren. (Siehe Ebenenkompositionen.)

• Erstelle Rollover-Text oder Schaltflächengrafiken für den Import in Dreamweaver oder Flash.

• Erstelle mit dem Animationsbedienfeld Webanimationen und exportiere diese dann als animierte GIF-Bilder oder QuickTime-Dateien. Siehe Erstellen von Frame-Animationen

• Erstelle mit Adobe Bridge eine Web-Fotogalerie, um Bildgruppen schnell in eine interaktive Website zu verwandeln. Du kannst dabei auf vielfältige professionell gestaltete Vorlagen zurückgreifen.

Ein Video über das Erstellen von Websites mit Photoshop und Dreamweaver findest du unter Zugriff auf Photoshop über Dreamweaver, um Bilder im Web zu verbessern.

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ötigst du 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:

• Verwende zum Erstellen von Primär- und Sekundärbildern Ebenen. Erstelle Inhalt auf einer Ebene, dupliziere die Ebene dann und bearbeite sie, um einen ähnlichen Inhalt zu erhalten. Dabei bleibt die Ausrichtung zwischen den Ebenen erhalten. Zum Erstellen eines Rollover-Effekts kannst du den Ebenenstil, die Sichtbarkeit oder Position ändern, Farb- oder Tonwertkorrekturen vornehmen oder Filtereffekte anwenden. Siehe Duplizieren von Ebenen.

• Du kannst Ebenenstile auch zum Anwenden von Effekten, wie Farbüberlagerungen, Schlagschatten, Schein oder Relief, auf die Primärebene verwenden. Zur Erstellung eines Rolloverpaars aktiviere oder deaktiviere den Ebenenstil und speichere das Bild im jeweiligen Status. Siehe Ebeneneffekte und -stile.

• Verwende die vorgegebenen Schaltflächenstile im Stilebedienfeld, um schnell und einfach Rollover-Schaltflächen mit den Status „Normal“, „Mouseover“ und „Mousedown“ zu erstellen. Ziehe eine Grundform mit dem Rechteckwerkzeug auf und wende einen Stil, wie z. B. „Normal mit abgeflachter Kante“, an, um das Rechteck automatisch in eine Schaltfläche umzuwandeln. Kopiere die Ebene und wende andere Vorgabestile, wie z. B. „'Mouseover' mit abgeflachter Kante“ an, um weitere Schaltflächenstatus zu erstellen. Speichere jede Ebene als separates Bild, um eine fertige Rollover-Schaltflächengruppe zu erstellen.

• Speichere 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. 

Nachdem du eine Rollover-Bildgruppe in Photoshop erstellt hast, verwende Dreamweaver, um die Bilder auf einer Webseite zu platzieren und automatisch den Javascript-Code für die Rollover-Aktion hinzuzufügen.

Exportieren in Zoomify

Du kannst hochauflösende Bilder im Web präsentieren, welche die Betrachter schwenken und vergrößern können. Das Herunterladen des Bildes in der Ausgangsgröße dauert genauso lange wie das einer JPEG-Datei in entsprechender Größe. Photoshop exportiert die JPEG-Dateien und die HTML-Datei, die du auf deinen Webserver hochladen kannst.

Arbeiten mit hexadezimalen Farbwerten

Photoshop kann die Hexadezimalwerte von Bildfarben anzeigen oder den Hexadezimalwert einer Farbe für die Verwendung in einer HTML-Datei kopieren.

Anzeigen von Hexadezimal-Farbwerten im Infobedienfeld

Kopieren einer Farbe als Hexadezimalwert

Photoshop kopiert Farben entweder als HTML-Attribut „color“ mit dem Hexadezimalwert (color=#xxyyzz) oder nur als Hexadezimalwert.