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).
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.
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.
Photoshop kann die Hexadezimalwerte von Bildfarben anzeigen oder den Hexadezimalwert einer Farbe für die Verwendung in einer HTML-Datei kopieren.
Photoshop kopiert Farben entweder als HTML-Attribut „color“ mit dem Hexadezimalwert (color=#xxyyzz) oder nur als Hexadezimalwert.
-
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“.
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.