Das Creative Cloud-Extrahiermodul ist eine neue, kostenlose Funktion auf „Creative Cloud-Elemente“, mit der Sie ein PSD einschließlich der Ebenen und Ebenenkompositionen erkunden können. Davon profitieren vor allem Webdesigner und -entwickler, die PSD-Dateien austauschen, Designinformationen entsperren und für die Produktion optimierte Elemente herunterladen. Mit dem Extrahiermodul können Sie für eine PSD-Datei vom Webbrowser aus die folgenden Vorgänge ausführen:

  • Kopieren von Text und CSS
  • Extrahieren von Farb-, Verlaufs- und Schriftinformationen
  • Messen der Abstände zwischen den Elementen
  • Speichern optimierter Bildelemente für die Produktion

Für Webdesigner und Entwickler, die mit PSD-Dateien arbeiten, wird durch das Creative Cloud-Extrahiermodul die Umsetzung eines Designs in Code radikal vereinfacht, da sich die Anzahl langwieriger Arbeitsschritte reduziert und der ständige Austausch mit den Entwicklern wegfällt.

Hinweis:

Der Zugriff über das Extrahiermodul erfolgt schreibgeschützt und eine Bearbeitung von PSD-Dateien ist nicht möglich.

Stilinformationen extrahieren

  1. Melden Sie sich bei der Creative Cloud-Website an.
  2. Rufen Sie den Bereich Elemente in Ihrem Creative Cloud-Konto auf.
  3. Laden Sie eine PSD-Datei hoch, indem Sie sie in den Bereich „Dateien“ ziehen oder die Dateiauswahl verwenden. Sie können auch zu einer zuvor hochgeladenen PSD-Datei navigieren.
  4. Klicken Sie auf die Miniatur für die PSD-Datei, um sie in der Ansicht Extrahieren zu öffnen.
Die Datei wird in der Ansicht „Extrahieren“ geöffnet

In dieser Ansicht können Sie ein PSD-Design vom Browser aus untersuchen. Sie können dort die Ebenenhierarchie erkunden, verschiedene Ebenenkompositionen anzeigen und Teile des PSD als neue Bilddateien extrahieren. Wenn Sie in der PSD-Vorschau auf ein Element klicken, wird eine Ebene ausgewählt und es werden Informationen zu dieser Ebene angezeigt. Nach dem Auswählen können Sie folgende Aktionen durchführen:

Koordinaten und Abmessungen von Elementen anzeigen und kopieren

Wenn Sie auf ein einzelnes Element in der PSD-Datei klicken, wird das Infobedienfeld angezeigt. In diesem Bedienfeld werden die Abmessungen für Höhe und Breite des Elements angezeigt sowie die X- und Y-Position der Ebene des Elements im Design.

In Pixel (px) angezeigte Koordinaten und Abmessungen eines Designelements
In Prozent (%) angezeigte Koordinaten und Abmessungen eines Designelements

Hinweis:

Klicken Sie auf einen Wert wie W, H, X oder Y, um ihn in die Zwischenablage zu kopieren.

Die Abmessungen können im Extrahiermodul entweder in Pixel oder in Prozent angezeigt werden. Wenn Sie ein Element ausgewählt haben, beziehen sich die Prozentangaben für die Höhen- und Breitenabmessungen einzelner Elemente auf die Gesamthöhe und -breite des PSD-Designs. Wenn Sie zwei Elemente ausgewählt haben und eines vollständig vom anderen umschlossen ist, wird die Höhe und Breite des inneren Elements relativ zu den Abmessungen des äußeren Elements angegeben.

Die Maße der inneren Elemente werden relativ zu den Maßen der äußeren Elemente angezeigt

Hinweis:

Klicken Sie auf einen beliebigen Wert, um ihn in die Zwischenablage zu kopieren.

Abstand zwischen zwei Elementen anzeigen

Klicken Sie bei gedrückter Umschalttaste auf zwei Elemente, um den Abstand zwischen diesen Elementen anzuzeigen. Wenn Sie den Abstand zwischen Elementen kennen, ist es einfacher für Sie, die Größe von Rändern und Auffüllungen festzulegen.

Abstand zwischen zwei Elementen

CSS-Code kopieren

Ist ein Element im PSD-Design ausgewählt, können Sie den CSS-Code dieses Elements kopieren, indem Sie im blauen Infobedienfeld auf „CSS kopieren“ klicken. Sie können den CSS-Code auch aus dem CSS-Inspektor heraus anzeigen und kopieren.

Der CSS-Code wird im CSS-Inspektor angezeigt

Hinweis:

Das Extrahiermodul unterstützt Präprozessoren. Klicken Sie auf der Registerkarte „Stile“ neben „CSS“ auf (Pfeil nach unten), um die Optionen für die Verwendung von CSS-Präprozessoren anzuzeigen.

Option für die Verwendung von CSS-Präprozessoren

Text kopieren

Wenn das ausgewählte Element Text enthält, klicken Sie auf „Text kopieren“, um den Text in die Zwischenablage zu kopieren.

Kopieren Sie den ausgewählten Text in die Zwischenablage

Schrift-, Farb- und Verlaufsinformationen anzeigen und kopieren

Sie können Informationen über die im Design-Dokument (PSD) verwendeten Schriften, Farben und Verläufe anzeigen und kopieren, indem Sie das Bedienfeld „Stile“ öffnen. Während die Informationen angezeigt werden, klicken Sie auf eine Schriftgröße, eine Farbe oder ein Verlaufsfeld, um den betreffenden Wert in die Zwischenablage zu kopieren.

Beispiel für einen Farbverlaufswert

Wenn Sie ein Element auswählen, werden die verwendeten Text- und Farbstile im Bedienfeld „Stile“ hervorgehoben.

Hinweis:

Durch die Integration mit Adobe Typekit bietet das Extrahiermodul Ihnen Zugang zu Tausenden von hochwertigen Schriften. Im Bedienfeld „Stile“ wird neben den aus Typekit stammenden Schriften das Typekit-Symbol () angezeigt. Wenn Sie auf dieses Typekit-Symbol klicken, öffnet das Extrahiermodul die Seite zu dieser Schrift in Typekit.

Wenn Sie eine websichere Schrift finden, die Sie verwenden wollen, fügen Sie sie in ein Kit in Typekit ein und verknüpfen sie mit Ihrem Produktionscode.

Schrift- und Farbinformationen zum ausgewählten Element

Einsatz des Farbwählers

Mithilfe des Farbwählers () können Sie schnell herausfinden, welche Farbe ein Element im Design hat.

  • Wählen Sie den Farbwähler aus und klicken Sie dann auf eine beliebige Stelle in Ihrem Design. Der Farbwähler bestimmt die Farbe und fügt sie als Farbfeld in das Bedienfeld „Stile“ ein. Sie können jetzt ganz einfach CSS-Informationen für die Farben anzeigen und kopieren.
Der Farbwähler

Bildelemente extrahieren

Mit dem Creative Cloud-Extrahiermodul können Sie eine oder mehrere Ebenen in der PSD-Datei auswählen und ein Bildelement extrahieren. Die Elemente können als 8-Bit-PNG-, 32-Bit-PNG-, JPG- und SVG-Bilder extrahiert werden.

Extrahieren eines Bildelements

Klicken Sie im blauen Infobedienfeld zu einem Element auf das Symbol  und gehen Sie wie folgt vor:

  1. Prüfen Sie die Einstellungen für das Bildelement. Wählen Sie ggf. ein anderes unterstütztes Bildformat (PNG, JPG oder SVG) aus.
  2. Wenn Sie ein JPG-Element generieren, passen Sie die Qualität des Bildelements an.
  3. Wählen Sie bei Bedarf eine Skalierungsoption aus. Wählen Sie beispielsweise „Skalieren“ zusammen mit „2ד aus. Sie können das Element 0,1× bis 5× skalieren.
  4. Klicken Sie auf „Speichern“.
  5. Suchen Sie im Bedienfeld „Elemente“ nach dem generierten Element. Die Elemente sind auch in einem neu erstellten Ordner neben der PSD-Datei in der Creative Cloud-Ansicht Elemente verfügbar. Der neue Ordner erhält den Namen -Elemente. Lautet der Dateiname beispielsweise adventure.psd, so erhält der Elementordner den Namen adventure-Elemente.

    Wenn Sie im Bedienfeld „Elemente“ auf eine Bildminiatur klicken, wird das Element auf Ihren Computer heruntergeladen.
Das Bedienfeld „Elemente“

Hinweis:

Wenn Sie angemeldet sind und eine auf Creative Cloud-Elemente gespeicherte PSD-Datei anzeigen, haben Sie Zugriff auf anspruchsvolle Elementextrahierungsfunktionen. Jedes Mal, wenn Sie ein Element herunterladen, wird es in das Bedienfeld „Elemente“ und in den Ordner .psd_assets auf „Creative Cloud-Elemente“ eingefügt. Sie können im Bedienfeld „Elemente“ auf eine Bildminiatur klicken, um das Element auf Ihren lokalen Computer herunterzuladen.

Das Bedienfeld „Elemente“ ist nicht verfügbar, wenn Sie auf den Link eines anderen Benutzers klicken, um eine PSD-Datei anzuzeigen. Sie können in diesem Fall zwar ganz normal mit dem Extrahiermodul arbeiten, aber sobald Sie auf das Symbol  klicken, werden die Elemente heruntergeladen. Verwenden Sie den Download-Manager Ihres Browsers, um die Elemente auf Ihrem lokalen Laufwerk zu finden.

Mit Ebenen arbeiten

Im Bedienfeld „Ebenen“ werden alle Ebenen und Ebenengruppen im PSD-Design angezeigt. Da der Zugriff auf das Creative Cloud-Extrahiermodul schreibgeschützt erfolgt, werden Änderungen an den Ebenen nicht in die PSD-Datei zurückgespeichert.

Im Bedienfeld „Ebenen“ können Sie die Sichtbarkeit aktivieren und deaktivieren, Ebenenelemente auswählen und Elemente extrahieren. 

Ebenen oder Ebenengruppen als Bildelemente extrahieren

Sie können eine Ebene oder Ebenengruppe aus der PSD-Datei als Bildelement extrahieren. Führen Sie die folgenden Schritte aus:

  1. Klicken Sie auf das Bedienfeld „Ebenen“, um die Ebenenhierarchie in der PSD-Datei anzuzeigen.
Ebenenhierarchie

Hinweis:

Sie können mehrere Ebenen in der Hierarchie auswählen und ein einzelnes neues Bildelement exportieren, das alle ausgewählten Ebenen kombiniert. 

  1. Prüfen Sie die Ebenenhierarchie und gehen Sie sie durch. 
    • Zum Erweitern einer Ebenengruppe klicken Sie auf das Ordnersymbol () neben der Ebenengruppe.
    • Klicken Sie im linken Bedienfeld auf ein Element, um die entsprechende Ebene/Ebenengruppe im Bedienfeld „Ebenen“ hervorzuheben.
  2. Wählen Sie die Ebene/Ebenengruppe aus, die Sie als Bildelement extrahieren möchten. Um mehrere Ebenen auszuwählen, klicken Sie bei gedrückter Strg- (Windows) bzw. Befehlstaste (Mac) auf die einzelnen Ebenen. Sind mehrere Objekte ausgewählt, werden sie als ein einzelnes Element extrahiert, das die ausgewählten Ebenen oder Gruppen enthält.
  3. Klicken Sie auf das Symbol  neben der Ebene oder Ebenengruppe. Wenn Sie mehrere Ebenen/Ebenengruppen ausgewählt haben, klicken Sie neben den ausgewählten Ebenen auf das Symbol .
  4. Geben Sie einen Namen für das neue Bildelement ein.
  5. Wählen Sie ein Format für das Bildelement (PNG 8 Alpha, PNG 32, JPG oder SVG).
  6. Optional: Wenn Sie ein JPG-Bildelement generieren, können Sie seine Qualität anpassen.
  7. Klicken Sie auf „Speichern“
  8. Suchen Sie im Bedienfeld „Elemente“ nach dem generierten Element. Die Elemente sind auch in einem neu erstellten Ordner verfügbar, der auf Creative Cloud-Elemente neben der PSD-Datei liegt.

Hinweis:

Mit der Option „Ebenen zurücksetzen“ wird die Sichtbarkeit der Ebenen auf den ursprünglichen Zustand im Design zurückgesetzt.

Ebenen oder Ebenengruppen ausblenden

Um eine Ebene oder Ebenengruppe aus- oder einzublenden, klicken Sie im Bedienfeld „Ebenen“ neben der Ebene bzw. Gruppe auf das Augensymbol ().

Arbeiten mit Ebenenkompositionen

Mithilfe des Creative Cloud-Extrahiermoduls können Sie verschiedene Photoshop-Ebenenkompositionen anzeigen. Wenn Sie ein PSD für die Bearbeitung im Extrahiermodul hochladen und dieses Dokument mehrere Ebenenkompositionen enthält, erscheint oben im PSD ein Popupmenü. Dieses Popupmenü umfasst alle Ebenenkompositionen in diesem PSD sowie eine Auswahl mit der Bezeichnung „Letzter Dokumentstatus“. Der letzte Dokumentstatus entspricht dem Status in Photoshop, bevor die Datei gespeichert und zur Creative Cloud hochgeladen worden ist. Dieser Status kann eine Ebenenkomposition sein, muss es aber nicht.

Arbeiten mit Ebenenkompositionen im Extrahiermodul

Dateien freigeben

Während Sie auf der Registerkarte „Extrahieren“ eine PSD-Datei anzeigen, können Sie sie mithilfe der Freigabe-Funktionalität der Creative Cloud freigeben. Die Benutzer, für die Sie die Datei freigeben, können die Elemente und Abmessungen daraus extrahieren, selbst wenn sie nicht bei der Creative Cloud angemeldet sind.

Ausführliche Informationen finden Sie unter Freigeben von Dateien und Ordnern.

Feedback abgeben

Wenn Sie Fragen haben, uns über ein Problem berichten wollen oder Ihr Feedback abgeben wollen, schreiben Sie bitte an unser Forum zum PSD-Extrahiermodul.

Häufig gestellte Fragen

Unterstützt das Extrahiermodul Photoshop Generator-Tags?

Ja. Nach Möglichkeit werden für Einstellungen beim Extrahieren eines Bildelements die Generator-Tags als Standard verwendet, die im entsprechenden Ebenennamen angegeben sind.

Kann ich mit dem Extrahiermodul eine PSD-Datei bearbeiten?

Nein. Der Zugriff über das Extrahiermodul erfolgt schreibgeschützt.

Werden bestimmte Zeichen im PSD- oder Elementnamen nicht unterstützt?

Die Sonderzeichen |, ", ?, <, >, /, \, ;, * und : werden in den Namen von PSD-Dateien und Bildelementen nicht unterstützt.

Wer hat Zugriff auf die von mir hochgeladenen PSD-Dateien?

Auf alle Dateien, die Sie zum Extrahiermodul hochladen, kann nur über Ihr Creative Cloud-Konto zugegriffen werden.

Wenn Sie eine PSD-Datei freigeben wollen, können Sie sie veröffentlichen und dann den Link freigeben. Ist bei der Freigabe die Option „Extrahieren“ aktiviert, kann jeder, der den Link hat, Ihr PSD-Design im Extrahiermodul anschauen und Elemente daraus extrahieren.

Funktioniert das Extrahiermodul auch bei PSD-Dateien, die den CMYK-Farbraum verwenden?

Nein. Konvertieren Sie CMYK-PSD-Dateien in den RGB-Farbraum, bevor Sie sie zum Extrahiermodul hochladen.

Werden weitere Dateiformate außer PSD unterstützt?

Nein. Derzeit werden nur PSD-Dateien unterstützt.

Welche Beschränkungen gelten für die PSD-Dateien, damit sie vom Extrahiermodul verarbeitet werden können?

Das Extrahiermodul wurde für PSD-Dateien entwickelt, die mit Photoshop erstellt wurden. Es wird nicht empfohlen, das Extrahiermodul für PSD-Dateien mit mehr als 2 GB oder mehr als 1000 Ebenen zu verwenden.

Worin unterscheiden sich das Extrahiermodul und Adobe Generator for Photoshop CC?

Generator and das Extrahiermodul sind beide dafür konzipiert, die Umsetzung von Komposition zu Code für Designer und Entwickler möglichst reibungslos zu gestalten. Während Generator Bildelemente aus Photoshop CC heraus extrahiert, funktioniert das Extrahiermodul direkt von Ihrem Browser aus als Creative Cloud-Dienst. Um mit dem Extrahiermodul zu arbeiten, braucht Photoshop nicht installiert sein und muss auch nicht ausgeführt werden.

Außerdem können Sie im Extrahiermodul aus mehreren Ebenen ein einzelnes Element erstellen.

Benötige ich ein Creative Cloud-Abonnement, um mit dem Extrahiermodul arbeiten zu können?

Jeder mit einem kostenlosen oder kostenpflichtigen Creative Cloud-Konto kann eine PSD-Datei zu „Creative Cloud-Elemente“ hochladen und das Extrahiermodul verwenden.

Wenn Sie einen Link im Extrahiermodul freigeben, muss der Empfänger nicht bei einem Creative Cloud-Konto angemeldet sein, damit Elemente und Abmessungen aus Ihrer PSD-Datei extrahiert werden können.

Warum kommen bestimmte Farben und Verläufe im Bedienfeld „Stile“ des Extrahiermoduls nicht vor?

Der Grund hierfür ist meist, dass diese Farben und Verläufe pixelbasierte Füllungen sind, die vom Extrahiermodul nicht unterstützt werden. Wenn die PSD-Datei solche Füllungen verwendet, setzen Sie den Farbwähler ein, um die Farben im Design auszuwählen und die Farbfelder in das Bedienfeld „Stile“ aufzunehmen.

Welche Beschränkungen gelten für den CSS-Code, den das Extrahiermodul für Verläufe bereitstellt?

Bestimmte Arten von Verläufen können mit CSS nicht ohne Tricks erzeugt werden. Das Extrahiermodul bietet momentan keinen präzisen CSS-Code für schräge, reflektierte, Rauten- oder Explosionsverläufe. Allerdings werden lineare und radiale Verläufe unterstützt.

Warum stimmt meine PSD-Vorschau nicht mit dem überein, was ich in Photoshop sehe?

Beim Rendern im Extrahiermodul kann die Darstellung von dem abweichen, was Sie in Photoshop sehen. Wenn Sie solche Unterschiede beobachten, würden wir gerne von Ihnen hören.

Bitte senden Sie eine Beschreibung Ihres Problems und dessen, was Sie sehen, an unser Forum. Oder noch besser: Senden Sie uns ein Bild mit dem Unterschied, und wir werden versuchen, das Problem für Sie zu lösen.

Kann ich das Extrahiermodul auch auf Mobilgeräten verwenden?

Auf Mobilgeräten können Sie eine Vorschau Ihres PSD und einige Stile mit Farben, Schriften und Verläufen anzeigen. Sie können nicht so mit dem PSD interagieren, wie das auf dem Desktop möglich ist.

Kann ich alle meine Elemente auf einmal herunterladen?

Momentan unterstützt das Extrahiermodul nicht das gleichzeitige Herunterladen aller Elemente. Sie müssten die Elemente einzeln extrahieren und herunterladen.

Kann ich den gesamten CSS-Code für ein Design auf einmal herunterladen?

Momentan unterstützt das Extrahiermodul nicht das gleichzeitige Herunterladen des gesamten CSS-Codes für ein Design. Sie müssen einzelne Elemente auswählen und deren CSS-Code in Ihren Produktionscode kopieren.

Bei Interesse senden Sie Ihr Anliegen an unser Forum und beschreiben, wie Ihrer Meinung nach die CSS-Ausgabe organisiert sein sollte.

Ich habe mein PSD freigegeben, aber die Empfänger können die Registerkarte „Extrahieren“ nicht sehen. Was ist der Grund dafür?

Wenn Sie das PSD vor der Veröffentlichung des Extrahiermoduls Ende August 2014 freigegeben haben, ist die Registerkarte „Extrahieren“ in dem PSD noch nicht aktiviert. Um sie zu aktivieren, gehen Sie folgendermaßen vor:

Diese Option aktiviert das Extrahiermodul ohne Ihre öffentlich freigegebene URL zu ändern.

  1. Klicken Sie im Dialogfeld „Link senden“ auf „Erweiterte Optionen“.
  2. Aktivieren Sie die Option „Extrahieren zulassen“.

Was ist der Unterschied zwischen Project Parfait und dem Extrahiermodul?

Project Parfait ist der Dienst, den Adobe als Betaversion für die Arbeitsabläufe gestartet hat, die Sie heute im Extrahiermodul vorfinden. Neben einigen neuen Funktionen, unterstützt das Extrahiermodul auch alle Funktionen von Project Parfait. Nachdem Project Parfait nun offiziell in der Creative Cloud eingeführt worden ist, endet der Dienst Project Parfait und er kann nicht mehr zum Extrahieren von Informationen und Elementen aus PSD-Dateien verwendet werden. 

Was passiert mit den PSD-Dateien, die ich zum Project Parfait hochgeladen habe?

Wenn Sie Project Parfait verwendet haben, können Sie die Dateien, an denen Sie dort gearbeitet haben, noch bis Ende 2014 herunterladen. 

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