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

  • Verwenden Sie Ebenen und Slices zum Erstellen von Webseiten und Steuerelementen für Webseiten. (Weitere Informationen finden Sie unter Ebenen und Erstellen von Slices für Webseiten.)

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

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

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

  • Erstellen Sie mit Adobe Bridge eine Web-Fotogalerie, um Bildgruppen schnell in eine interaktive Website zu verwandeln. Sie können dabei auf vielfältige professionell gestaltete Vorlagen zurückgreifen.

Ein Video über das Erstellen von Websites mit Photoshop und Dreamweaver finden Sie unter Access Photoshop from Dreamweaver to enhance web image (Zugriff auf Photoshop über Dreamweaver, um Bilder im Web zu verbessern).

Erstellen von Rollover-Bildern

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 zum Anwenden 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 im jeweiligen Status. Siehe Ebeneneffekte und -stile.

  • Verwenden Sie die vorgegebenen Schaltflächenstile im Stilebedienfeld, um schnell und einfach Rollover-Schaltflächen mit den Status „Normal“, „Mouseover“ und „Mousedown“ zu erstellen. Ziehen Sie eine Grundform mit dem Rechteckwerkzeug auf und wenden Sie einen Stil, wie z. B. „Normal mit abgeflachter Kante“, an, um das Rechteck automatisch in eine Schaltfläche umzuwandeln. Kopieren Sie die Ebene und wenden Sie andere Vorgabestile, wie z. B. „'Mouseover' mit abgeflachter Kante“ 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. Weitere Informationen finden Sie unter Optimieren von Bildern.

Hinweis:

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.

Exportieren in Zoomify

Sie können 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 Sie auf Ihren Webserver hochladen können.

  1. Wählen Sie „Datei“ > „Exportieren“ > „Zoomify“ und legen Sie die Exportoptionen fest.

    Vorlage

    Legt den Hintergrund und die Navigation für das im Browser angezeigte Bild fest.

    Ausgabeort

    Legt den Speicherort und den Namen der Datei fest.

    Bildanordnungsoptionen

    Legen die Bildqualität fest.

    Browseroptionen

    Legt die Pixelbreite und -höhe für das Grundbild im Browser des Betrachters fest.

  2. Laden Sie die HTML- und Bilddateien auf Ihren Webserver hoch.

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

  1. Wählen Sie „Fenster“ > „Info“ oder klicken Sie auf die Registerkarte des Infobedienfelds, um das Bedienfeld anzuzeigen.
  2. Klicken Sie im Menü des Bedienfelds auf „Bedienfeldoptionen“. Wählen Sie unter „Erste Farbwerteanzeige“ oder „Zweite Farbwerteanzeige“ aus dem Menü „Modus“ die Option „Webfarbe“ und klicken Sie auf „OK“.
  3. Positionieren Sie den Zeiger über der Farbe, für die Hexadezimalwerte angezeigt werden sollen.

Kopieren einer Farbe als Hexadezimalwert

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

  1. Führen Sie einen der folgenden Schritte durch:
    • Bewegen Sie den Mauszeiger mit der Pipette über die Farbe, die Sie kopieren möchten. Klicken Sie mit der rechten Maustaste (Windows) bzw. mit gedrückter Ctrl-Taste (Mac OS) und wählen Sie „Farbe als HTML kopieren“ oder „Hex-Code der Farbe kopieren“.

    • Legen Sie die Vordergrundfarbe mit dem Farbreglerbedienfeld, dem Farbfelderbedienfeld oder dem Adobe-Farbwähler fest. Wählen Sie im Farbbedienfeldmenü die Option „Farbe als HTML kopieren“ oder „Hex-Code der Farbe kopieren“.

    • Klicken Sie im Dialogfeld „Für Web speichern“ auf das Farbfeld oder wählen Sie „Hintergrund“ > „Andere“. Klicken Sie im Adobe Farbwähler mit der rechten Maustaste auf den Hexadezimalwert und wählen Sie „Kopieren“.

  2. Öffnen Sie die gewünschte Datei in einem HTML-Editor und wählen Sie „Bearbeiten“ > „Einfügen“.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie