Sie können JPEG-, PNG- oder GIF-Bildelemente aus den Inhalten einer Ebene oder Ebenengruppe in einer PSD-Datei erzeugen. Elemente werden automatisch erzeugt, wenn Sie eine unterstützte Bildformaterweiterung an einen Ebenennamen oder einen Ebenengruppennamen anhängen. Optional können Sie auch Qualitäts- und Größenparameter für die erzeugten Bildelemente angeben.

Die Erzeugung von Bildelementen aus einer PSD-Datei ist insbesondere für Mehrgeräte-Webdesign nützlich.

Video: Erzeugen von Webassets in Photoshop CC

Video: Erzeugen von Webassets in Photoshop CC
Dieses Video präsentiert Ihnen verschiedene Möglichkeiten, wie Sie mit dem Asset-Generator in Photoshop CC Bilder in unterschiedlichen Größen und Auflösungen für die Verwendung in anderen Projekten ausgeben können.
Chris Converse

Informationen zum Erstellen und Generieren von Webgrafiken mit Adobe Generator finden Sie unter PSD-Dateien extrahieren.

Erzeugen von Bildelementen aus Ebenen oder Ebenengruppen

Stellen Sie sich zum besseren Verständnis der Bildelementerzeugung eine einfache PSD-Datei (über diesen Link herunterladen) mit der folgenden Ebenenhierarchie vor:

Erzeugen von Bildelementen in Photoshop
PSD-Beispieldatei und ihre Ebenenhierarchie

Die Ebenenhierarchie für diese Datei hat zwei Ebenengruppen – Rounded_rectangles und Ellipses. Jede dieser Ebenengruppen enthält fünf Ebenen.

Führen Sie folgende Schritte aus, um Bildelemente aus dieser PSD-Datei zu erzeugen:

  1. Bei geöffneter PSD-Datei wählen sie „Datei“ > „Generieren“ > „Bildelemente“.
  2. Fügen Sie den Namen der Ebenen oder der Ebenengruppen, von denen Sie Bildelemente erzeugen möchten, entsprechende Dateiformaterweiterungen (.jpg, .png oder .gif) hinzu. Benennen Sie zum Beispiel die Ebenengruppen Rounded_rectangles und Ellipses in Rounded_rectangles.jpg und Ellipses.png um und die Ebene Ellipse_4 in Ellipse_4.gif.

Hinweis:

Die Sonderzeichen: und *sind in den Ebenennamen nicht erlaubt.

Photoshop erzeugt die Bildelemente und speichert sie in einem Unterordner neben der Quell-PSD-Datei. Wenn die Quell-PSD-Datei noch nicht gespeichert ist, speichert Photoshop die erzeugten Elemente in einem
neuen Ordner auf Ihrem Desktop.

Bildelementnamen in Photoshop
Bildelemente werden aus den Ebenennamen/Ebenengruppennamen erzeugt

Hinweis:

Die Erzeugung von Bildelementen ist für das aktuelle Dokument aktiviert. Sobald diese Option aktiviert ist, bleibt die Funktion verfügbar, wenn das Dokument beim nächsten Mal geöffnet wird. Um die Erzeugung von Bildelementen für das aktuelle Dokument zu deaktivieren, haben Sie die Auswahl von „Datei“ > „Generieren“ > „Bildelemente“ auf.

Erzeugen von mehreren Elementen aus einer Ebene oder Ebenengruppe

Um mehrere Elemente aus einer Ebene/Ebenengruppe zu erzeugen, trennen Sie die Elementnamen mit Kommas. Der folgende Ebenenname erzeugt zum Beispiel drei Elemente:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Speichern von Elementen in einem Unterordner

Sie können nun Bildelemente, die von bestimmten Ebenen oder Ebenengruppen generiert wurden, in einem Unterordner direkt unter dem Elementeordner des Dokuments speichern. Schließen Sie den Namen des Unterordners in den Namen der Ebene/Ebenengruppe ein; Beispiel:

[Unterordner]/Ellipse_4.jpg 

Ein Webdesign-Anwendungsfall

Die Erzeugung von Bildelementen aus einer PSD-Datei ist insbesondere für Mehrgeräte-Webdesign nützlich. Betrachten Sie das folgende Webdesign und seine Ebenenstruktur:

Ein Webdesign und seine Ebenenhierarchie
Ein Webdesign und seine Ebenenhierarchie

Lassen Sie uns das Symbol oben und die obere Reihe des Global Hotspots-Bildrasters als Bildelemente extrahieren:

  • Fügen Sie Bildformaterweiterungen zu den entsprechenden Ebenennamen hinzu.
Umbenennen der entsprechenden Ebenen/Ebenengruppen in Photoshop
Umbenennen der entsprechenden Ebenen/Ebenengruppen in Photoshop

Benennen Sie die entsprechenden Ebenen/Ebenengruppen um

Hinweis:

Ein einzelnes Bildelement wird aus den Inhalten einer Ebene/Ebenengruppe erzeugt. Beispielsweise enthält die Ebenengruppe „AdventureCo Logo“ im Screenshot oben eine Formebene und eine Live-Textebene. Diese Ebenen werden reduziert, wenn ein Bildelement aus der Ebenengruppe erzeugt wird.

Photoshop erzeugt die Elemente und speichert sie am selben Speicherort wie die Quell-PSD-Datei.

Erzeugte Bildelemente in Photoshop
Erzeugte Bildelemente

Geben Sie die Parameter für Qualität und Größe an

JPEG-Elemente werden standardmäßig mit 90%iger Qualität erzeugt. PNG-Elemente werden standardmäßig als 32-Bit-Bilder erzeugt. GIF-Elemente werden mit Basis-Alphatransparenz erzeugt.

Beim Umbenennen von Ebenen oder Ebenengruppen in Vorbereitung auf die Erzeugung von Elementen können Sie Qualität und Größe individuell festlegen.

Parameter für JPEG-Elemente

  • Fügen Sie die gewünschte Ausgabequalität dem Elementnamen als Suffix hinzu: .jpg(1-10) oder .jpg(1-100 %). Beispiel:
    • Ellipse_4.jpg5
    • Ellipse_4.jpg50%
  • Fügen Sie dem Elementnamen die gewünschte Ausgabebildgröße (relativ oder in unterstützten Formaten) als Präfix hinzu: px, in, cm und mm. Photoshop skaliert das Bild entsprechend. Beispiel:
    • 200% Ellipse_4.jpg
    • 300 x 200 Rounded_rectangle_3.jpg
    • 10in x 200mm Rounded_rectangle_3.jpg

Hinweis: Denken Sie daran, ein Leerzeichen zwischen Präfix und Elementname zu setzen. Wenn Sie die Größe in Pixel angeben, können Sie die Einheit weglassen. Zum Beispiel: 300 x 200.

Hinweis:

Wie gezeigt können Sie verschiedene Einheiten und Pixel beim Festlegen der gewünschten Ausgabebildgröße mischen. Beispielsweise ist 4in x 100 Rounded_rectangle_3.jpg ein gültiger Ebenenname für die Elementerzeugung.

Parameter für PNG-Elemente

  • Fügen Sie dem Elementnamen die gewünschte Ausgabequalität als Suffix hinzu: 8, 24 oder 32. Beispiel:
    • Ellipse_4.png24
  • Fügen Sie die gewünschte Ausgabebildgröße (relativ oder in unterstützten Formaten) dem Elementnamen als Präfix bei: px, in, cm und mm. Photoshop skaliert das Bild entsprechend. Beispiel:
    • 42% Ellipse_4.png
    • 300mm x 20cm Rounded_rectangle_3.png
    • 10in x 50cm Rounded_rectangle_3.png

Hinweis: Denken Sie daran, ein Leerzeichen zwischen Präfix und Elementname zu setzen. Wenn Sie die Größe in Pixel angeben, können Sie die Einheit weglassen. Zum Beispiel: 300 x 200.

Hinweis:

Wie gezeigt können Sie verschiedene Einheiten und Pixel beim Festlegen der gewünschten Ausgabebildgröße mischen. Beispielsweise ist 4in x 100 Rounded_rectangle_3.png ein gültiger Ebenenname für die Elementerzeugung.

Parameter für GIF-Elemente

  • Fügen Sie die gewünschte Ausgabebildgröße (relativ oder in unterstützten Formaten) dem Elementnamen als Präfix bei: px, in, cm und mm. Beispiel:
    • 42% Ellipse_4.gif
    • 300mm x 20cm Rounded_rectangle_3.gif
    • 20in x 50cm Rounded_rectangle_3.gif

Hinweis: Denken Sie daran, ein Leerzeichen zwischen Präfix und Elementname zu setzen. Wenn Sie die Größe in Pixel angeben, können Sie die Einheit weglassen. Zum Beispiel: 300 x 200.

Hinweis:

Wie gezeigt können Sie verschiedene Einheiten und Pixel beim Festlegen der gewünschten Ausgabebildgröße mischen. Beispielsweise ist 4in x 100 Rounded_rectangle_3.gif ein gültiger Ebenenname für die Elementerzeugung.

Qualitätsparameter sind für GIF-Elemente nicht verfügbar.

Erstellen Sie komplexe Ebenennamen

Sie können mehrere Elementnamen mit Parametern beim Benennen einer Ebene für die Elementerzeugung angeben. Beispiel:

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

Photoshop erzeugt die folgenden Elemente aus dieser Ebene:

  • Delicious.jpg (ein JPG-Bild der Qualität 8, skaliert auf 120 %)
  • Delicious.png (ein 24-Bit-PNG-Bild, skaliert auf 42 %)
  • Delicious_2.jpg (ein JPG-Bild der Qualität 90 % mit einer absoluten Größe von 100x100 Px)
  • Delicious.gif (ein GIF-Bild, skaliert auf 250 %)

Festlegen von Standardeinstellungen für Bildelemente

Sie können dokumentumfassende Standardeinstellungen für die erzeugten Elemente angeben. Führen Sie folgende Schritte aus:

  1. Erstellen Sie eine leere Ebene im Dokument.
  2. Beginnen Sie den Namen der Ebene mit default. Geben Sie dann die Standardeinstellungen an, die Sie auf alle Bildelemente anwenden möchten, die aus dem Dokument erstellt werden. Beispiel:

default hi-res/

Generiert alle Bildelemente im Unterordner hi-res. Beispiel: [Bildelementordner]/hi-res/Delicious.jpg.

default hi-res/@2x

Generiert alle Bildelemente im Unterordner hi-res. Darüber hinaus werden Elementnamen mit dem Suffix @2x versehen. Beispiel [Bildelementordner]/hi-res/Delicious@2x.jpg.

default 50% lo-res/

Skaliert Bildelemente um 50 % nach unten und speichert sie im Unterordner lo-res unter dem Bildelementeordner des Dokuments 

default hi-res/@2x + 50% lo-res/

Generiert zwei Bildelemente aus einer Ebene:

  • Ein Bildelement im Unterordner hi-res, an dessen Name @2x angefügt wird
  • Ein zweites Bildelement im Unterordner lo-res, das um 50 % nach unten skaliert wird

Hinweis:

Standard-Skalierungsfaktoren werden durch die Skalierungsfaktoren überschrieben, die für einzelne Ebenen angegeben werden.

Deaktivieren der Bildelementerzeugung für alle Dokumente

Sie können die Bildelementerzeugung für alle Photoshop-Dokumente global deaktivieren, indem Sie Ihre Voreinstellungen ändern.

  1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“ > „Zusatzmodule“.
  2. Heben Sie die Auswahl von „Generator aktivieren“ auf.
  3. Klicken Sie auf „OK“.

Hinweis:

Der Menübefehl „Datei“ > „Generieren“ ist nicht verfügbar, wenn Sie die Bildelementerzeugung über die Voreinstellungen deaktivieren. Die Funktion kann nur im Dialogfeld „Voreinstellungen“ erneut aktiviert werden.

Häufig gestellte Fragen

Muss ich eindeutige Elementnamen angeben?

Elementnamen auf einer Dokumentenebene müssen eindeutig sein.

Auf welcher Qualitätsstufe werden Bildelemente standardmäßig erzeugt?

JPG-Elemente werden standardmäßig mit 90%iger Qualität erzeugt. PNG-Elemente werden standardmäßig als 32-Bit-Bilder erzeugt. GIF-Elemente werden mit Basis-Alphatransparenz erzeugt.

Werden in Photoshop Bildelemente von Ebenen mit Transparenz und anderen Effekten erzeugt?

Ja. Transparenz und andere Effekte, die auf eine Ebene angewendet wurden, werden in die Elemente übernommen, die aus dieser Ebene erzeugt werden. Jedoch können solche Effekte in den generierten Elementen reduziert werden.

Wie werden Bildelemente aus Ebenen erzeugt, die über die Arbeitsfläche hinausreichen?

Elemente werden an den Rändern des Dokuments beschnitten. Wenn ein Bild nicht innerhalb der Ränder des Dokuments liegt, erstellt Generator die zugehörigen Bildelemente nicht.

Ist das Komma das einzige zulässige Trennzeichen zwischen Bildelementnamen?

Neben dem Komma (,) können Sie auch das Pluszeichen (+) als Trennzeichen zwischen Bildelementnamen verwenden. Beispiel:

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

entspricht:

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

Video: Ein Edge Reflow-Projekt von Photoshop Generator erstellen

Video: Ein Edge Reflow-Projekt von Photoshop Generator erstellen
Dieses Video zeigt, wie Sie ein Weblayout erstellen, das auf eine Bildschirmbreite zwischen 320 und über 1000 Pixel reagiert.
Chris Converse

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