Erfahre, wie du Web-optimierte Bilder in unterschiedlichen Auflösungen – auch für HiDPI-Bildschirme – im Stapel aus einem Photoshop-Dokument extrahierst.

Mit Wirkung zum 1. Juli 2022 werden die Funktionen im Bedienfeld „Extract“ in Dreamweaver 21.2 und früheren Versionen eingestellt. Du kannst Adobe Photoshop verwenden, um Stilinformationen und Elemente aus PSD-Komponenten zu extrahieren und in Dreamweaver weiterzuverwenden.

Illustration eines Tauchers, der in ein Schwimmbecken springt

Aus dem Dreamweaver-Arbeitsbereich Extract heraus kannst du produktionsreife Bilder stapelweise in mehreren Auflösungen aus einem Photoshop-Dokument extrahieren. Die Verwendung von Bildern in mehreren Auflösungen hat den Vorteil, dass deine Website später mit dem für das jeweilige Endgerät am besten geeigneten Bild angezeigt wird.

Die Website „Queen of Flora“ wird auf einem Desktop-Monitor, Tablet und Smartphone angezeigt.

PSD-Datei in den Arbeitsbereich „Extract“ laden.

Lade die Datei batch-extract-assets.zip herunter. Extrahiere die enthaltenen Projektdateien. Öffne in Dreamweaver die Datei „index.html“, und wechsle zum Arbeitsbereich Extract.

Klicke auf PSD hochladen, und öffne die Projektdatei „vermilion-design.psd“.

Nach dem Laden einer PSD-Datei in den Arbeitsbereich „Extract“ können die Elemente in der Live-Ansicht angezeigt werden.

Wähle das Titelbild aus. Klicke auf den Pfeil, um die Optionen zum Extrahieren anzuzeigen.

Stelle vor dem Extrahieren von Bildern sicher, dass der Ziel-Speicherort und die Dateibenennung zur Struktur deiner Website passen. Klicke dazu auf das Symbol Voreinstellungen bearbeiten (Stiftsymbol).

Wähle das Titelbild aus, und lege die Optionen zum Extrahieren fest.

Voreinstellungen für Extract festlegen.

Dreamweaver extrahiert Bilder standardmäßig in drei Auflösungen: MDPI (mittlere Auflösung), XHDPI (extra-hohe Auflösung) und XXHDPI (extra-extra-hohe Auflösung). Im Dialogfeld „Voreinstellungen“ gehst du wie folgt vor:

  1. Gib die zu extrahierenden Auflösungen an.

  2. Lege fest, welche Suffixe an den Dateinamen anhängt werden sollen.

  3. Gib den Ordner an, in dem du die Bilder speichern möchtest.

Füge in der Spalte „Ordner“ für jede der drei Auflösungen am Anfang des Dateipfads den Zusatz images/ ein. Klicke auf Anwenden und dann auf Schließen.

Füge in den Voreinstellungen für Extract am Anfang des Dateipfads den Zusatz „images/“ ein.

Bilder extrahieren.

In den Optionen zum Extrahieren kannst du weitere Details festlegen, etwa den Namen und den Dateityp des Elements.

Klicke auf Mehrere speichern.

Öffne nach dem Extrahieren das Bedienfeld Dateien, um das Resultat der Stapelextraktion anzuzeigen. Entsprechend den Voreinstellungen extrahiert Dreamweaver das Titelbild in drei verschiedenen Auflösungen und legt sie in benutzerdefinierten Ordnern innerhalb der Verzeichnisstruktur der Website ab – alles mit nur einem Klick.

Klicke in den Optionen zum Extrahieren auf „Mehrere speichern“.

Media Queries bestimmte Bilder zuweisen.

Öffne die Datei DeviceAware.css. Sie enthält drei Media Queries, die drei unterschiedliche Bildschirmauflösungen definieren (kleiner Bildschirm ohne Retina-Display, mittleres Retina-Display, großes Retina-Display). Zu jeder Media Query gehört eine CSS-Klasse. Passe für jede Klasse die Property background-image an, indem du das für die jeweilige Query am besten geeignete extrahierte Bild auswählst.

Das Beispiel rechts zeigt die Media Query für ein mittelgroßes Retina-Display sowie die entsprechende CSS-Klasse. Für diese Auflösung eignet sich am besten die XHDPI-Version des extrahierten Bilds.

Für jede Media Query wird das Hintergrundbild im CSS-Stylesheet festgelegt.

Bildgrößen anhand von Prozentwerten definieren.

Beim responsiven Design bestimmen Prozentwerte statt absoluter Pixelwerte die Breite, Höhe und sonstigen Positionseigenschaften eines Bilds.

Um im Arbeitsbereich „Extract“ die Maßeinheit in Prozent zu ändern, wählst du das Titelbild aus. Klicke dann auf das Prozentsymbol (%).

Die Properties „width“ und „height“ werden jetzt als Prozentsätze angezeigt. Wenn du zwei Bilder auswählst, wird der Abstand zwischen ihnen in Prozent angegeben. CSS-Code lässt sich wie auch sonst aus dem Extract-Arbeitsbereich kopieren und in den Code deiner Web-Seite einfügen.

Ändere im Arbeitsbereich „Extract“ die Maßeinheit in Prozent, um proportionale Bildgrößen festzulegen.
02/01/2022

Beitrag von: Sergiy Maidukov

War diese Seite hilfreich?