Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Adobe XD lernen

Import und Export von Objekten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video demonstriert Michael Rüttger, wie Sie Objekte auf einfache Art in Ihre Zeichenflächen importieren und bereits erstellte Objekte einschließlich ganzer Zeichenflächen exportieren können. Besonders hervorgehoben wird der direkte Export auch für hochauflösende Displays.

Transkript

Eine der Kernfunktionen von Adobe XD ist der Export der einzelnen gestalteten UI-Interface-Objekte oder generell der Zeichenobjekten in meinen Zeichenflächen. Somit habe ich die Möglichkeit auf schnelle Art und Weise alles, das was ich gestaltet und designed habe, zum Beispiel dem Entwickler in einem weiteren Bearbeitungsprozess zur Verfügung zu stellen. Und was man dabei berücksichtigt und wie Sie dabei vorgehen können, zeige ich Ihnen in diesem Video. Starten wir Im- und Export erst einmal mit dem Import von Elementen. Und auch hier gibt es mehrere Möglichkeiten. Eine Möglichkeit ist es den Menüpunkt zu verwenden, oder aber die Tastenkombinationen, die Sie hier erkennen, und wenn man diesen Menüpunkt auswählt, dann öffnet sich ein Dialog, und hier können Sie eine Auswahl bestimmter Datenformate treffen, also es beschränkt sich im Wesentlichen auf Texte oder auch auf Grafikformate, und dann zum Beispiel sagen wir, dieses Element möchte ich importieren. So, das ist jetzt ein sehr großes Element, ich zoome mal kurz raus, und verkleinere das ganze mal massiv, so, und setze das jetzt mal hier an den Knopf, oder den oberen Rand. So, das ist die eine Möglichkeit, also über dem Dialog zu gehen. Das hat hinterher verschiedene Vorteile, aber eine zweite Möglichkeit, das ist meiner Meinung nach mit auch die schnellste, da arbeite ich am liebsten mit, ist es direkt aus dem Finder bzw. aus dem Betriebssystem heraus Informationen zu beziehen. Und sie sehen, ich habe jetzt hier auch wieder den Finder aufgemacht, und befinde mich nun in dem Ordner mit dieser Grafik, und wenn ich die Grafik nun hier mir greife, und auf die Zeichenfläche oder in den Bearbeitungsbereich von Adobe XD ziehe, dann bekomme ich so ein "+", das war gerade eben zu sehen, und dann, wenn ich die linke Maustaste loslasse, habe ich die Grafik hier entsprechend eingetragen. Ich platziere das jetzt mal hier an einer bestimmten Position, die erste lösche ich mal, und das war's. So, das heißt also ich habe jetzt hier den Import vollzogen. Und erstellen wir nun gerade auf die Schnelle noch mal so 'nen Button. Mache ich mir mal so ein Rechteck auf, und ziehe das Ganze so, dann kommt noch ein simpler Text. OK, das platziere ich jetzt auch noch schön in der MItte von den Button, und Sie sehen, da helfen mir diese Orientierungslinien ganz hervorragend bei. Ich markiere alles, und drücke Command+G, oder alternativ die rechte Maustaste "Gruppieren", und hab' jetzt einen Button erstellt. Ich führe nochmal einen Doppelklick aus, und gehe in die Buttonbearbeitung, also da sind wir hier jetzt drin, und verändere mal schnell die Farbe, so in einen Graubereich, dann sehen wir das auch besser. Damit haben wir ein paar Objekte, die wir erstellt, und vor allen Dingen neu importiert haben, und kommen nun zum Export. Hier habe ich nun die Möglichkeit natürlich die gesamte Zeichenfläche zu exportieren. Primär würde es natürlich bei der Freigabe hinterher beim Prototyping auch darum gehen, und auch hier wähle ich wieder über den Menüpunkt "Datei" die Funktion "Exportieren" aus oder alternativ die Command+E Kombination. Es öffnet sich dann ein Dialog, und jetzt muss ich nur an die richtige Stelle gehen, wechseln wir gerade dort in die Projektdateien. Und hier erstelle ich mir nun als erstes mal einen neuen Ordner, den nenne ich mal "iOS", so dann sind wir da in diesem Ordner, und habe dann hier die Möglichkeit auszuwählen, was ich exportieren möchte. Und mir geht's jetzt zunächst mal darum, dass ich ihnen auch demonstriere, welche Funktionen sich dahinter zum Beispiel verbergen. Exportieren sie beispielsweise für ein iPhone oder ein Apple Device, dann ist das Betriebssystem iOS, und Sie wissen, dass die einzelnen mobilen Geräte unterschiedliche Auflösungsvarianten haben. Also, einmal hochauflösend, die sogenannten Retina-Displays, einmal etwas ältere iPhones haben das nicht, und je nachdem, wie man das macht, brauchen sie unterschiedliche Varianten. Und das kann ich entsprechend hier schon ablesen. Ausgewählte Elemente werden exportiert, als einmal, zweimal und dreimal, und das bedeutet immer ausgehend von der jeweiligen Größe. Gleich wird es deutlich, ich klicke jetzt also als erstes Mal auf "Alle Zeichenflächen exportieren", und dann sehen sie auch schon das, also ich habe zwar nur eine, aber dann würde auch wirklich für jede einzelne Zeichenfläche ein Export durchgeführt. So, das mach' ich mal, das ist schon damit erledigt. Wechseln wir kurz in diesen Ordner hinein, und jetzt sehen wir, haben wir drei Daten, ich lasse mal grade die Vorschau anzeigen, und es ist genau das, was wir jetzt hier auch im Hintergrund sehen, nur als PNG, also als PNG-Grafik, und die kann ich dann auch weiterverarbeiten. Ich rufe mal kurz die Information zu diesem Im- und Export, und zwar von allen drei Dateien auf. Und jetzt wird auch noch mal deutlich, die Datei, die erste, die ich aufgerufen habe, ist die kleinere, die 284 KB groß ist, oder 287, um genau zu sein, dann haben wir hier noch 1MB, und zwar 2,1 MB. Wenn wir uns über "Weitere Informationen" das Ganze mal genauer anschauen, dann sehen wir, die kleinste Datei hat nur 375 x 667 Pixel, das ist die Standardgröße. Und jetzt wird jeweils größer bis zu 1125 x 2001 Pixel die unterschiedliche Auflösung für die Retina-Displays erstellt. Das benötigen die Entwickler hinterher, wenn sie die Auflösungen abfragen, und dann enstprechend die Grafiken, entweder hochauflösend, oder nicht so hochauflösend, anzeigen müssen. So, das ist einmal beim Export über iOS. Und zwar für die gesamte Zeichenfläche. Ich gehe mal zurück in Adobe XD, und genauso, wie ich bei der Auswahl keines Objektes oder anders, bei der Auswahl einer kompletten Zeichenfläche diese exportieren kann, kann ich selbstverständlich auch einzelne Objekte exportieren. Und ich habe ja diesen Button erstellt, also markiere ich ihn, gehe auf "Datei exportieren". So, ich bleibe mal jetzt hier in iOS, aber Sie sehen, ich kann genauso vorgehen wie zuvor auch. Also, jetzt würden auch drei Varianten von meinem Button "OK" exportiert, oder ich gehe zum Beispiel auf das Web, dann habe ich hier zunächst mal nur eins und zwei, das ist die Voreinstellung davon, also auch einmal als normal und einmal hochauflösend. Bei "Android" sind das eine ganze Menge mehr, Sie sehen hier, was da alles exportiert wird. Ja, oder als "Design". Damit habe ich die Standardeinstellung, dass PNG nur einmal exportiert wird. Als Format kann ich allerding noch wählen: PNG, SVG und PDF. In dem Falle bei diesem Button würde durchaus auch SVG interessant sein, und den kann ich wiederum einbetten, oder als Link exportieren, die Dateigröße optimieren, also hier gibt es ganz viele schöne Möglichkeiten, - probieren sie die einfach mal aus -, das ist sehr interessant; und als PDF habe ich die Möglichkeit den Button als einzelne PDF-Datei zu exportieren, oder das macht aber mehr Sinn z. B. bei Zeichenflächen, in mehrere PDF-Dateien. Also, das heißt, wenn Sie Ihrem Kunden z. B. eine PDF mit allen Zeichenflächen zukommen lassen möchten, dann könnte man das zum Beispiel mit dieser Einstellung durchaus vornehmen. Ich wechsle jetzt mal zurück zu PNG, und lasse die eine hier stehen, oder ich kann auch, nehmen wir ruhig mal SVG. Das Ganze soll eingebettet werden, und ja, exportiere ich, unter "button_OK". Das gucken wir uns kurz im Explorer an, und dann sieht man hier, haben wir hier den Button, und ja, ich sagte gerade Explorer, also im Finder bzw. im Fileexplorer, und dann sieht man auch das, wenn ich das Ganze verkleinere und vergößere, dadurch, dass das eine SVG-Grafik ist, habe ich hier auch keinerlei Qualitätsverlust bei der Skalierung, und damit wissen Sie auch, wie Sie nun einzelne gestaltete Elemente exportieren können. Denken sie einfach mal auch an ein Webseitendesign, wo sie nun die einzelnen Elemente, die sie benötigen, einfach über diese Art und Weise den Entwicklern, oder den Webdesignern zukommen lassen können.

Adobe XD lernen

Lernen Sie die Funktionen des Adobe Experience Design, kurz Adobe XD, anhand eines kompletten Praxisworkshops.

3 Std. 20 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.01.2017
Aktualisiert am:17.03.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!