Erzeugen von·Bildelementen aus Ebenen

Du kannst JPEG-, PNG-, GIF- oder SVG-Bildelemente aus den Inhalten einer Ebene oder Ebenengruppe in einer PSD-Datei erzeugen. Elemente werden automatisch erzeugt, wenn du eine unterstützte Bildformaterweiterung an einen Ebenennamen oder einen Ebenengruppennamen anhängst. Optional kannst du 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.

Informationen zum Erstellen und Exportieren von Webgrafiken findest du unter So exportierst du Dateien in verschiedenen Formaten aus Photoshop.

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

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

Führe folgende Schritte durch, um Bildelemente aus dieser PSD-Datei zu erzeugen:

1. Wähle bei geöffneter PSD-Datei Datei > Automatisieren > Generator-Plug-ins > Bildelemente.
2. Füge den Namen der Ebenen oder der Ebenengruppen, von denen du Bildelemente erzeugen möchtest, entsprechende Dateiformaterweiterungen (.jpg, .png, .gif oder .svg) hinzu. Benenne 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.

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 deinem Desktop.

Generieren von Elementen für Cloud-Dokumente

Wenn du mit einem Cloud-Dokument arbeitest, werden die Elemente im Verzeichnis „Photoshop Cloud Associates“ gespeichert:

• Windows: C:\Users/DeinName/Dokumente/Adobe/Photoshop Cloud Associates
• macOS: /Users/DeinName/Dokumente/Adobe/Photoshop Cloud Associates

Erzeugen von mehreren Elementen aus einer Ebene oder Ebenengruppe

Um mehrere Elemente aus einer Ebene/Ebenengruppe zu erzeugen, trenne 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

Du kannst nun Bildelemente, die von bestimmten Ebenen oder Ebenengruppen generiert wurden, in einem Unterordner direkt unter dem Elementeordner des Dokuments speichern. Schließt du 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. Betrachte das folgende Webdesign und seine Ebenenstruktur:

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

• Füge Bildformaterweiterungen zu den entsprechenden Ebenennamen hinzu.

Benenne die entsprechenden Ebenen/Ebenengruppen um

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

Gib 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 kannst du Qualität und Größe individuell festlegen.

Parameter für JPEG-Elemente

• Füge 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üge 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: Denke daran, ein Leerzeichen zwischen Präfix und Elementname zu setzen. Wenn du die Größe in Pixel angibst, kannst du die Einheit weglassen. Zum Beispiel: 300 x 200.

Parameter für PNG-Elemente

• Füge dem Elementnamen die gewünschte Ausgabequalität als Suffix hinzu: 8, 24 oder 32. Beispiel:
  • Ellipse_4.png24
• Füge 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: Denke daran, ein Leerzeichen zwischen Präfix und Elementname zu setzen. Wenn du die Größe in Pixel angibst, kannst du die Einheit weglassen. Zum Beispiel: 300 x 200.

Parameter für GIF-Elemente

• Füge 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: Denke daran, ein Leerzeichen zwischen Präfix und Elementname zu setzen. Wenn du die Größe in Pixel angibst, kannst du die Einheit weglassen. Zum Beispiel: 300 x 200.

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

Erstelle komplexe Ebenennamen

Du kannst 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 %)

Beispiele für absolute Skalierung

Gute Beispiele für absolute Skalierung

• 100x80 foo.png (einfache absolute Skalierung)
• 80 x 100px foo.png (Abstände zwischen den Längen)
• 4in x100 foo.png (Mischung aus Einheiten und keine Einheiten)
• 90mm x120cm foo.png (Mischung verschiedener Einheiten)
• 100x? foo.png (Platzhalter)
• ?x60in foo.png (Platzhalter am Anfang)

Schlechte Beispiele für absolute Skalierung

• 100x100foo.png (kein Leerzeichen vor Dateiname)
• 80x100 60% foo.png (Mischung aus absoluter und relativer Skalierung)
• 50% 80x100 foo.png (Mischung aus absoluter und relativer Skalierung)
• 20in cm x50cm foo.png (mehrere Einheiten)
• 30nm x20 nano.png (ungültige Einheit)

Formatieren und Trennen mehrerer Dateien

Gute Beispiele

• Layer 1.png (Platz im Dateinamen ist zulässig, dies führt zu einer einzelnen Datei namens „Layer 1.png“)
• Layer 1.png,Layer 2.jpg (Komma als Trennzeichen)
• Layer 1.png, Layer 2.jpg (Komma gefolgt von Leerzeichen als Trennzeichen)
• Layer 1.png+Layer 2.jpg (Plus als Trennzeichen)
• Layer 1.png + Layer 2.jpg (Plus, gefolgt von Leerzeichen als Trennzeichen)

Alles in einem Programm.

100% Delicious, 42% Layer 1.png24 + 100x100 Layer.jpg-90% , 250% Quux/Foo Bar Baz.gif ergibt drei Dateien (die Zeichenfolge „100%“ Delicious wird ignoriert, da es sich nicht um einen Dateinamen handelt):

• Layer 1.png mit einer Skalierung von 42 % als 24-Bit-png
• Layer.jpg in absoluter Größe von 100 x 100 Pixeln und in 90 % Qualität
• Foo Bar Baz.gif im Unterordner Quux, im Maßstab 250 %, als GIF.

Festlegen von Standardeinstellungen für Bildelemente

Du kannst dokumentumfassende Standardeinstellungen für die erzeugten Elemente angeben. Führe folgende Schritte durch:

1. Erstelle eine leere Ebene im Dokument.
2. Beginne den Namen der Ebene mit default. Gib dann die Standardeinstellungen an, die du auf alle Bildelemente anwenden möchtest, die aus dem Dokument erstellt werden. Beispiel:
   

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

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

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

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
  

Deaktivieren der Bildelementerzeugung für alle Dokumente

Du kannst die Bildelementerzeugung für alle Photoshop-Dokumente global deaktivieren, indem du deine Voreinstellungen änderst.

1. Wähle Bearbeiten > Voreinstellungen > Zusatzmodule.
2. Hebe die Auswahl von Generator aktivieren auf.
3. Klicke auf OK.

Generator-Plug-ins-Menü

Vor der Version vom Juli 2024 von Photoshop auf Desktop 25.11 waren Generator-Plug-ins im Menü Datei > Generieren zu finden.

Du findest jetzt alle Generator-Plug-ins, einschließlich des Standard-Bildelemente-Plug-ins, im Menü Datei > Automatisieren > Generator-Plug-ins.  Diese Änderung wurde vorgenommen, um den Namen des Untermenüs besser zu verdeutlichen und ihn von den neuen generativen Funktionen wie Bild generieren zu unterscheiden.

Häufig gestellte Fragen