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

Einzelne Objekte exportieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Es lassen sich nicht nur komplette Zeichenflächen sondern auch einzelne Objekte exportieren. Das Video beschreibt in erster Linie die Möglichkeiten, die bei einem SVG-Export zur Verfügung stehen.

Transkript

Zur Exportfunktion habe ich bereits das eine oder andere gezeigt und mich dabei aber insbesondere auf den Export von Zeichenflächen und PDF-Dateien im Sinne der Dokumentation beschränkt. In diesem Video möchte ich noch einmal genauer auf den Export einzelner Objekte eingehen, denn sobald der Prototyp fertiggestellt und freigegeben ist, folgt der Workflow üblicherweise mit der Weitergabe benötigter Grafiken und Informationen an bspw. den Programmierer. Und das schauen wir uns mal anhand von zwei Beispielen an. Nehmen wir uns einmal z. B. diesen Button. Wenn ich so einen Button exportieren möchte, dann habe ich die Möglichkeit, das Ganze in Form von Grafiken zu tun, also PNG-Grafiken, das Ganze als einzelne Grafik für das Web, da habe ich die 1- und 2-Einstellungen für iOS und für Android mit einer ganzen Liste von Einstellungen. Das haben wir im Prinzip auch schon gemacht. Ich kann das Ganze natürlich auch als PDF exportieren, ist unter Umständen auch nicht verkehrt, je nachdem, was man damit machen möchte. Aber ich glaube, eine besondere, interessante Funktion ist der Export auch als SVG, gerade im weiteren Prozess, wenn die Entwickler das verarbeiten müssen. Schauen wir uns einmal genau die Einstellungen an. Zunächst einmal gehe ich jetzt hierhin und lasse mal die "Dateigröße optimieren" weg. Und exportiere dieses Dokument oder, genau genommen, diese Schaltfläche und benenne es mal "button-01". So, die Optimierungseinstellung lasse ich jetzt bewusst mal weg. Das exportiere ich mal. So, und dann das Gleiche nochmal, "button-02", diesmal allerdings mit "Dateigröße optimieren". So, und schauen wir uns an, was wir dort haben. Sie sehen einmal den "button-01" ohne Optimierung und einmal den Button mit Optimierung. Da haben wir geringfügig eine kleine Optimierung drin. Was hier eigentlich geschieht, ist nichts anderes, dass der Source zusammengezogen wird. Und damit werden einfach ein paar Zeichen gespart. Ich kann das Ganze vielleicht mal kurz demonstrieren, indem man das mit einem Editor öffnet. Sie sehen, so sieht die optimierte Version der SVG-Definition aus. Und so sieht die Version aus, wenn sie nicht optimiert ist. Und das ist das ganze Geheimnis, d. h. hier wird im Grunde das, was gespart wird, sind im Wesentlichen die Leerzeichen. Das macht nicht ganz so viel aus, zumal auch nicht bei einzelnen Objekten, wie wir sie hier sehen. Für die Weiterverarbeitung ist das im Grunde egal, das sollten Sie immer verwenden, wenn die Entwickler tatsächlich Zugriff auf die Sourcen brauchen. Wenn das nicht mehr der Fall ist, dann kann man auch die optimierte Version verwenden. Etwas, was wirklich toll ist, ist die Weiterverarbeitung auch z. B. hier in Adobe Illustrator. Ich habe einfach einen Doppelklick ausgeführt und Sie sehen, der "button.svg" ist geladen und wir befinden uns nun hier in den einzelnen Ebenen. Ich scrolle mal ein bisschen rein, so. Also, es ist wirklich eine detaillierte Ausgabe. Und ich komme, das ist noch viel wichtiger, an wirklich jeden einzelnen Bereich, auch hier in Illustrator in der Weiterverarbeitung heran, d. h. also, wenn ich das jetzt hier aktiviere, dann sieht man tatsächlich, ich habe hier sogar einen Text. D. h., ich kann also beliebig auch hier dann in Illustrator diesen ganzen Prozess weiter verarbeiten und alles machen, was ich mir vorstelle, um das Ganze ein bisschen anzupassen. Also, jede Möglichkeit ist vorhanden und meiner Meinung nach ist das wirklich ideal für die Weitergabe und dann die Verbindung auch zu den nachfolgenden Abteilungen, die sich damit beschäftigen müssen. So, gehen wir wieder zurück, gehen wir wieder nochmal kurz hierhin. Und ich kann natürlich auch diese Sachen direkt bspw. hier in einem Webbrowser öffnen, mir betrachten mit den ganzen Einstellungen. Da sieht man, hier kommt das SVG-Format wirklich voll zum Tragen, denn hier habe ich tatsächlich auch noch die Schattierungen mit, die mir bei Illustrator jetzt zunächst einmal nicht angezeigt wird. Die kann ich aber dort dann auch immer noch nachbilden durch die Zuschaltung von Effekten. Dann führen wir nochmal einen Export durch, und zwar greifen wir uns dafür mal das Bild. Wir haben jetzt hier die einzelnen Einstellungen gehabt, die entsprechend ohne Grafik verwendet werden. Und ich möchte Ihnen noch ganz kurz demonstrieren, was passiert, wenn ich jetzt dieses Objekt, also z. B. dieses Foto, exportiere. Und da habe ich dann, nehmen wir mal "foto" oder "bild-01", ich lasse mal die Dateigröße optimiert und sage aber "Einbetten". So, ein Export, und dann führe ich den zweiten noch einmal durch, "bild-02" als Link. Wechseln wir wieder kurz dorthin. Und jetzt sieht man, was passiert. Bei "bild-01" habe ich 4,8 MB und das Ergebnis ist die komplette Grafik, wie wir sie auch in unserem Mock-up sehen können. In dem zweiten Teil, die Optik hier ist die gleiche, habe ich aber als SVG-Datei nur noch 591 Byte. Und da kann man erkennen, jetzt ist das Bild extra ausgelagert. Das ist der Hinweis mit dem Link. So etwas ist natürlich auch extrem interessant, weil ich hier jetzt dem Entwickler zwar sagen kann, das sind die Bilder, das sind die Entwicklungsbilder oder das sind die Prototypen-Bilder, diese sind aber dann natürlich im Nachhinein auch relativ leicht austauschbar. Ich brauche im Grunde nur die Namen anpassen und an die Sourcen. Wenn die nicht optimiert sind, kommen die Entwickler ja ebenfalls dran. Sie sehen also, es gibt wirklich jede Menge Möglichkeiten, solche Exporte durchzuführen. Diese Dateien kann man dann leicht den weiteren Entwicklungsabteilungen zukommen lassen, bspw. der Grafikabteilung zur Verfeinerung der Details oder aber auch direkt den Entwicklern für die Verwendung in der Programmierung. Somit ist Ihnen der SVG-Export von Adobe XD ebenfalls bekannt. Und Sie wissen, wie Sie aus Adobe XD heraus vektorbasierte und damit verlustfrei zu skalierende Grafiken weitergeben 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!