Alles, was ein Photoshop-User braucht, um mit Adobe XD zu beginnen

Wenn du ein Photoshop-User bist und Adobe XD bislang noch nicht ausprobiert hast, dann ist jetzt der perfekte Zeitpunkt, um damit zu beginnen.
Denn das aktuelle XD-Release bietet eine intuitive und leicht zu handhabende Funktionalität, um deine PS-Designs hochzuladen und sie in interaktive App- und Web-Prototypen umzuwandeln. Die intuitive Schnittstelle macht das Arbeiten in beiden Apps zu einem leistungsfähigen und wirkungsvollen Workflow. Zudem sind Optionen enthalten, mit denen Designs geteilt und Feedback schnell eingeholt werden können.

Stolz präsentieren wir mit der Hilfe des Senior Creative Cloud Evangelisten Paul Trani ein paar einfache Schritte, um deine Photoshop-Dateien zu Adobe XD zu bringen und um aus einem Multi-App-Workflow das Optimum herauszuholen. Lies weiter und du erfährst alles, was du wissen musst, um deine Photoshop-Designs auf die nächste Ebene zu bringen.

So geht‘s: Bring deine PSD-Dateien zu Adobe XD

  1. Wenn du Adobe XD nicht installierst hast, lade es jetzt herunter.
  2. Beginne mit einem neuen Design und klicke auf Datei > Öffnen. Suche deine .PSD-Datei heraus und klicke auf “Öffnen”.
  3. Adobe XD importiert deine Photoshop-Datei detailgetreu und fügt automatisch Ebenen, Effekte, Gruppierungen und Masken hinzu. Dieser detailgetreue Import ermöglicht es dir, das .PSD in Adobe XD zu bearbeiten und für Hintergründe, Icons und so weiter zu verwenden. Hier findest du eine Liste der unterstützten Funktionen beim Öffnen einer Photoshop-Datei in XD.
  4. Nutze die Adobe XD-Tools für das Design deiner App oder Website. Schalte in den Prototyp-Modus um und verknüpfe dann Bildschirmbilder, um einen vollständig interaktiven Prototyp zu
    erstellen.
  5. Sieh zu, wie deine Photoshop-Designs als voll interaktive App- und Website-Prototypen lebendig werden.

„Es ist so einfach, das PSD direkt in XD zu öffnen und loszulegen. Wenn du dein Photoshop-Asset in XD hast, mach daraus einen Prototyp und verknüpfe einige Bildschirmbilder damit. Von da an sind alle Ebenen individuelle Ebenen und alles fügt sich schön ordentlich zusammen“, sagt Trani.

Deine Photoshop-Designs kopieren und in Adobe XD einfügen

Noch schneller bringst du deine Photoshop-Designs zu Adobe XD, indem du deine Arbeiten einfach kopierst und in die App einfügst. Mit dem Kopieren und Einfügen kannst du einzelne Ebenen eines Photoshop-Bildes oder auch dein komplettes Design als ein einzelnes Bild übernehmen, in dem alle Ebenen zusammengeführt sind. Mit diesen Schritten bringst du dein Photoshop-Design durch Kopieren und Einfügen zu Adobe XD:

  1. Wähle die Inhalte, die du zu XD kopieren möchtest, in Photoshop mithilfe des Marquee-Tools aus.
  2. Klicke in Photoshop auf “Bearbeiten” > “Kopieren”, um den Inhalt des aktuellen Layers zu kopieren oder wähle “Bearbeiten” > “Auf eine Ebene reduziert kopieren” aus, um alle Inhalte aller Ebenen im ausgewählten Bereich zu kopieren.
  3. Öffne Adobe XD und klicke auf “Bearbeiten” > “Einfügen”, um die kopierte Ebene beziehungsweise das komplette Design als Bitmap einzufügen.

Photoshop-Assets mithilfe der Creative Cloud Libraries in Adobe XD importieren

Eine der einfachsten Möglichkeiten zur Arbeit mit Photoshop und XD ist, deine Photoshop-Designs in eine Creative Cloud Library zu importieren und in Adobe XD über diese Library auf deine Designs zuzugreifen. So kannst du nicht nur deine Photoshop-Assets auf einfache Weise für deine App- und Website-Prototypen in XD wiederverwenden, du kannst diese Assets ebenso in Photoshop bearbeiten und deine Änderungen werden automatisch in Adobe XD aktualisiert. Mit diesen Schritten importierst du deine Photoshop-Assets in deine Creative Cloud Library und greifst auf diese in Adobe XD zu:

  1. Wähle in Photoshop die Inhalte aus, die du importieren möchtest. Klicke auf der rechten Seite deines Bildschirms auf die + Schaltfläche unter Libraries. Achte darauf, dass eine Grafik ausgewählt ist, bevor du auf Hinzufügen klickst.
  2. Klicke in Adobe XD auf Datei > CC Libraries öffnen. Klicke dann auf dein Photoshop-Asset und ziehe es auf dein Adobe XD-Projekt.
  3. Jetzt arbeitest du mit einem verknüpften Asset. Jede Änderung, die du an diesem Asset in Photoshop vornimmst, wirkt sich automatisch auch in Adobe XD aus.

„Ich würde Creative Cloud Libraries verwenden, weil das eine Verknüpfung herstellt. So kann ich zu meiner Bibliothek gehen, in Photoshop den Hintergrund optimieren und dann anschließend zu XD zurückkehren. Es ist eine Live-Verbindung; und wenn du 15 verschiedene Art-Boards hast, macht es das Leben ziemlich einfach“, rät Trani.

Erfahre mehr über Creative Cloud Libraries in XD.

Schnell Mehrbildschirm-Erlebnisse mit deinen Photoshop-Assets herstellen

Wenn du viel mit Photoshop arbeitest, dann verwendest du wahrscheinlich viel Zeit darauf, kleine Korrekturen an mehreren visuellen Elementen vorzunehmen. Nachdem du diese Assets zu Adobe XD gebracht hast, kannst du die mächtige Repeat Grid-Funktion nutzen, um Zeit zu sparen. Mit Repeat Grid erstellst du im Prinzip eine Gruppe von Objekten, zu denen auch dein Photoshop-Design gehören kann. An einem Art-Board vorgenommene Änderungen werden automatisch auch auf alle anderen übernommen.

Trani dazu: „Wenn es um die Erstellung eines neuen Designs mit kleinen Icons oder Schaltflächen geht, ist die Verwendung von Tools wie Repeat Grid echt unkompliziert. Wenn ich einen Bildschirm mit fünf unterschiedlichen Dingen haben muss und alle müssen irgendwie auf allen Art-Boards gleich sein, dann muss ich in Photoshop eine Menge kopieren und einfügen. In XD ist es richtig einfach, konsistente Erlebnisse über viele Art-Boards zu erstellen, die deine Photoshop-Assets verwenden.“

Ein ausführliches Tutorial zur Verwendung des Repeat Grid in Adobe XD findest du in unserem Blog-Post Exploring Repeat Grid in Adobe XD. Anschließend kannst du es mit deinen eigenen Designs selbst ausprobieren.

Auf einfache Weise Feedback zu deinen Photoshop-Designs erhalten

Ein großer Vorteil der Gestaltung und Erstellung interaktiver Prototypen mithilfe von Adobe XD ist die Möglichkeit, deine Entwürfe auf einfache Weise über Links zu teilen und Feedback zu erhalten. Das kann auch dann eine effektive Methode sein, wenn du Feedback zu deinen Photoshop-Designs einholen möchtest.

Um mit dem Teilen eines interaktiven Prototypen zu beginnen, nachdem du ihn erstellt und deine Art-Boards miteinander verknüpft hast, klicke auf die Teilen-Schaltfläche in der oberen rechten Ecke von Adobe XD und klicke auf Prototyp veröffentlichen. Von dort aus kannst du auf “Öffentlichen Link erstellen” klicken, um eine URL zu generieren, die du mit anderen teilen kannst. Dort kann jeder, mit dem du den Link geteilt hast, Kommentare hinterlassen und bestimmte Aspekte eines Designs hervorheben.

„Wenn ich diesen Link habe und Feedback zu einem Photoshop-Design geben möchte, kann ich Kommentare zu bestimmten Teilen hinzufügen, was in dem Adobe XD Prototyp einmal in Photoshop war. Der Kunde kann sagen: ‚Hey, mach das grün‘, und diesen Kommentar genau an den Teil links oben anheften, wo etwas grün werden soll. Das alles wird nachverfolgt und du als Designer kannst es dann auflösen; und wenn diese Assets verknüpft sind, kannst du einfach zurück zu Photoshop gehen und diesen Link später aktualisieren“, erklärt Trani.

Auch für die Zusammenarbeit mit Entwicklern kann dies ein hervorragendes Tool sein, weil sie zu allen Elementen eines veröffentlichten Designspezifikationslinks auf Größeninformationen zugreifen können.

„Meiner Meinung nach ist XD für jeden Photoshop-User einfach genug zu bedienen. Die Tools sind wirklich unkompliziert. Wenn du Photoshop kennst, dann kennst du auch XD“, meint Paul Trani.

Mehr dazu:

Wenn du Infos rund um UX direkt per Mail erhalten möchtest, abonniere den Adobe Experience-Design-Newsletter.

_Kostenlose Icon-Kits
_

Wusste ihr das schon? Wir haben von den berühmten Designern Anton & Irene, Büro Destruct und Lance Wyman drei exklusive und kostenlose Icon Kits designen lassen! Alle Infos dazu gibt’s im Blog und die Kits findet ihr hier zum kostenlosen Download.

Nimm an unserem Adobe-XD-Wettbewerb teil und gewinne eine Reise zur Adobe MAX in Los Angeles

Wir veranstalten einen einzigartigen Design-Wettbewerb, um Adobe-XD-Nutzer zu inspirieren. Wir möchten, dass du eines der drei exklusiven Icon Kits von Anton & Irene, Büro Destruct und Lance Wyman nutzt und einen Prototypen für eine App entwirfst, mit der andere kreative Köpfe deine Stadt mit deinen Augen sehen können. Wie du teilnehmen kannst und alle weiteren Informationen findest du in unserem Blog – aber schnell, denn der Einsendeschluss ist bereits der 15. März.

Wir sind jetzt auf Instagram! Folgt @adobecreativecloud_de und zeigt uns unter dem Hashtag #AdobeCreativeCrowd, was ihr draufhabt!