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

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

Im Stapel extrahieren

PSD-Datei in den Arbeitsbereich „Extract“ hochladen

Laden Sie die Datei batch-extract-assets.zip herunter, und extrahieren Sie die enthaltenen Projektdateien. Öffnen Sie in Dreamweaver CC die Datei „index.html“, und wechseln Sie zum Arbeitsbereich Extract.

Klicken Sie auf PSD hochladen, und öffnen Sie die Projektdatei „vermilion-design.psd“.

PSD-Datei in den Arbeitsbereich „Extract“ hochladen

Wählen Sie das Titelbild aus, und klicken Sie auf den Pfeil, um die Optionen zum Extrahieren anzuzeigen.

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

Titelbild auswählen

Voreinstellungen für Extract festlegen

Dreamweaver CC 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“ gehen Sie wie folgt vor:

  1. Geben Sie die zu extrahierenden Auflösungen an.

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

  3. Geben Sie den Ordner an, in dem Sie die Bilder speichern möchten.

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

Voreinstellungen für Extract festlegen

Bilder extrahieren

In den Optionen zum Extrahieren können Sie weitere Details festlegen, etwa den Namen und den Dateityp des Elements.

Klicken Sie auf Mehrere speichern.

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

Bilder extrahieren

Media Queries bestimmte Bilder zuweisen

Öffnen Sie 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. Passen Sie für jede Klasse die Property background-image an, indem Sie das für die jeweilige Query am besten geeignete extrahierte Bild auswählen.

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.

Media Queries bestimmte Bilder zuweisen

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ählen Sie das Titelbild aus, und klicken Sie auf das Prozentsymbol (%).

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

Bildgrößen anhand von Prozentwerten definieren
04/13/2018

Beitrag von: Sergiy Maidukov

War diese Seite hilfreich?