Benutzerhandbuch Abbrechen

Arbeiten mit Webgrafiken

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.

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ö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. 

Hinweis:

Verwende zum Speichern von Rollover-Bildern eine Benennungskonvention, um das Primärbild (kein Rollover-Status) vom Sekundärbild (Rollover-Status) zu unterscheiden.

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.

  1. Wähle „Datei“ > „Exportieren“ > „Zoomify“ und lege 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. Lade die HTML- und Bilddateien auf deinen 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ähle „Fenster“ > „Info“ oder klicke auf die Registerkarte des Infobedienfelds, um das Bedienfeld anzuzeigen.
  2. Klicke im Menü des Bedienfelds auf „Bedienfeldoptionen“. Wähle unter „Erste Farbwerteanzeige“ oder „Zweite Farbwerteanzeige“ aus dem Menü „Modus“ die Option „Webfarbe“ und klicke auf „OK“.
  3. Positioniere 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ühre einen der folgenden Schritte durch:
    • Bewege den Mauszeiger mit der Pipette über die Farbe, die du kopieren möchtest. Klicke mit der rechten Maustaste (Windows) bzw. mit gedrückter Ctrl-Taste (Mac OS) und wähle „Farbe als HTML kopieren“ oder „Hex-Code der Farbe kopieren“.

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

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

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

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?