Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Adobe XD lernen

Auflösung der Praxisübung zum Wireframe

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Hier gibt‘s die Auflösung der Übung zur Elementerstellung für das Wireframe.

Transkript

Da sind wir wieder und ich hoffe, Sie sind gut zurecht gekommen. Sollten Sie dennoch an der einen oder anderen Stelle überlegt haben oder es ein bisschen schwierig empfunden haben, zeige ich Ihnen nun, wie Sie die Werkzeuge in Kombination aufeinander abstimmen können und eben diese geforderten Objekte erstellen. Ich habe das bereits vorbereitet auf einer separaten Zeichenfläche. Diese Zeichenfläche braucht zunächst einmal ein Raster, also schalte ich mir dieses Raster ein. Jetzt ist das allerdings viel zu grob, ich kann also ein solches Objekt auf so einem Raster, wie man auch gut erkennen kann, nicht abbilden oder ich müsste es sehr groß machen und anschließend verkleinern, das würde natürlich gehen. Aber ich gehe für solche Zwecke ganz gerne hin und stelle mir tatsächlich ein Einser-Raster ein und das mache ich hier in dieser Werkzeugpalette und, wie man sieht, haben wir dann wirklich ein enges, dichtes Raster beisammen. So, schauen wir uns das erste Objekt einmal an, diese Straße. Und dafür zoome ich hier hinein. Diese Straße, die ist quasi gebildet, man könnte meinen, mit einem Rechteck. Und genauso ist es auch. Wenn ich hier mal einen Doppelklick drauf ausführe, dann sieht man, habe ich hier ein ganz normales Rechteck mit Rahmen und mit einer Flächenfüllung. Theoretisch könnte ich den Rahmen auch wegnehmen, dann wären wir ganz genau, wie man jetzt erkennen kann, an den Eckpunkten. Das überlasse ich Ihnen, also, wie auch immer Sie das handhaben möchten, das ist ganz egal. Wichtig ist auf jeden Fall, dass ich, wenn ich mir einen solchen Rahmen erstelle, ich zeige das noch mal ganz kurz hier nebenbei, dass ich einen solchen Rahmen, wenn ich den erstellt habe, im Nachhinein durch einen Doppelklick auf diesen Rand bearbeiten kann, d. h. jetzt habe ich die Möglichkeit, mir die ganzen einzelnen Punkte hier zu greifen. Und Sie sehen schon, worauf das hinausläuft. Und da kann ich entsprechend so eine Form erstellen. Mit dem Raster, ich lösche diese Beispielform mal, mit dem Raster ist es dann auch relativ leicht, die einzelnen Rechtecke, die nun hier drin sind, das ist im Grunde genau das gleiche Prinzip, zu erstellen und dann immer wieder kleiner zu werden. Also, wenn wir uns das mal hier bei dem letzten Raster angucken, dann ist der in der Tat sehr klein, also ich bin hingegangen, am besten sieht man das hier, und habe quasi mit diesem Raster gearbeitet und dann das Ganze so ein bisschen, ich gestehe, auch mit Augenmaß versucht, aufeinander abzustimmen. Aber das ist das ganze Geheimnis. Schauen wir uns das nächste Objekt an, ein bisschen rauszoomen. Das ist schon etwas komplexer, nämlich das ist der Schraubenschlüssel. Und was für Grundformen findet man hier? Ich löse das mal komplett auf. Ich hebe also auch hier die Gruppierung auf. Und dann sieht man, ich habe ein Rechteck, ich habe einen Kreis und ich habe nochmal ein Rechteck. Das hier, wissen Sie auch, wie man das macht. Ich ziehe also quasi diesen Rahmen auf, kann dann die Rundung erstellen. Und ein Kreis ist jetzt auch überhaupt kein Problem, die Shift-Taste, die man gedrückt hält, das ist auch nicht schwierig. Das zweite Rechteck, was wir jetzt hier sehen, das bedarf auch wieder einer besonderen Einstellung. Und zwar muss ich auch hier wieder einen Doppelklick drauf ausführen. Und jetzt brauche ich aber einen zusätzlichen Ankerpunkt. Also, in dem Moment, wenn ich in dieser Pfadbearbeitung bin, kann ich diesen zusätzlichen Ankerpunkt setzen und damit das Problem lösen. Jetzt natürlich noch angepasst auf das entsprechende Raster. Ich lösche das wieder raus, so. Und damit haben wir entsprechend alle Objekte, die wir benötigen. Und nun muss ich das Ganze nur noch miteinander verbinden, also genau genommen, dieses Objekt und das Objekt. Das soll miteinander, und hier sehen wir das, addiert werden, Tastenkombination ist sehr komplex, also, ich klicke dann meistens hier drauf. So, und dieses Objekt muss nun von dem abgezogen werden. Und damit markiere ich mir dann auch wieder meine Schablone, wenn man so will, und verwende subtrahieren. Und schon haben wir den perfekten Schraubenschlüssel. Um es noch für die Verwendung, so wie geplant, in meinem Dokument einzusetzen, kippe ich das Ganze noch um 75 oder so, das, glaube ich, sieht ganz gut aus. Und schon ist der Schraubenschlüssel fertig. Scrollen wir weiter runter zur Lösung mit dem Auto. Auch hier ist es im Grunde genau das gleiche Konzept, deswegen spare ich mir die genauere Auflistung. Wenn man sich das hier etwas präziser anschaut, dann haben wir hier zwei Reifen. So, und ich brauche den hinteren, den großen Reifen und die Karosserie, die im Übrigen auch mit dem Zeichenstift erstellt wurde, und subtrahiere das Ganze voneinander. Das Ganze muss ich dann hier noch mal machen. Auch hier mit dem Hintergrund, subtrahiere das Ganze voneinander. Und kann jetzt dann den Reifen passend platzieren. Jetzt dürften wir es schon haben. Und das Auto ist fertig. Ich markiere das, drücke Strg bzw. Command+G und das Fahrzeug ist fertig. Scrollen wir nochmal ganz nach rechts zu dem Stern. Der ist jetzt in der Tat etwas komplizierter, denn hier muss man doch, ich sage mal, mit ein paar Tricks arbeiten. Und zwar, zunächst einmal könnte das Raster durchaus ausreichen. Wir haben also hier sämtliche Eckpunkte, die wir benötigen. Ich zeige Ihnen aber trotzdem, wie ich bei so etwas vorgehe, weil wir haben ja in Adobe XD keine Hilfslinie. Also, erstelle ich mir einfach mit dem Linienwerkzeug hier eine solche Hilfslinie. Und damit man dann auch etwas erkennen kann, setze ich die Stärke dieser Hilfslinie mal auf 0,1. Und das ist nämlich möglich, das ist eine sehr schöne Funktion. Und damit man das auch vielleicht nochmal unterscheidet, eine Farbe, die man so gar nicht braucht, ach so, ich bin jetzt in der Flächenfüllung, da muss ich ja gar nicht hin, nehmen wir da, so. So soll es sein. Und jetzt kann ich diese Linie natürlich dafür verwenden, mir einmal genau die Positionen, die ich brauche, zu definieren. Also, hier sieht man, wie das Ganze funktionieren kann, aber ich möchte Ihnen das für ein Beispiel zeigen, wo man nämlich mit dem Raster sonst Schwierigkeiten bekommt. Und Sie sehen, das sind diese Punkte hier. Und da die ja immerhin im Einser-Raster sind, habe ich das Problem, dass ich das hier irgendwo reinkriegen muss. Und das schaffe ich so nicht. Wenn ich natürlich das Raster ausblende, Command+Ü ist das, dann kann ich das hier schon platzieren, aber selbst dann springt er ja an dem Raster. Jetzt hat man hier natürlich auch die Möglichkeit, man sieht das hier, "An Pixelraster ausrichten", das alles kann ich verwenden. Jetzt wäre das frei, so, jetzt richtet er sich hier aus, das wäre die eine Möglichkeit. Auch wenn das Objekt jetzt noch nicht existieren würde, könnte ich das so in die Mitte setzen. Aber gehen wir wieder hier hin, ich richte das wieder daran aus. Ich kann das aber auch anders machen, ich platziere mir diese beiden Objekte, gruppiere die und dann markiere ich mir diese mittlere Linie, dieses Objekt und zentriere das nun. So, und ich denke, jetzt wird deutlich, wenn ich das Raster, Command+Ü, wieder einblende, dann ist es relativ leicht, hier die einzelnen Punkte wirklich genau zu platzieren. Man sieht auch, da sind die schon entsprechend genau ausgerichtet und der Rest ist genauso möglich, genauso zu platzieren. Und damit kann ich ein solches komplexes Gebilde, ein sehr geometrisches Gebilde wie den Stern, auch locker abbilden. Und somit denke ich mal, haben Sie in der Kombination, ich blende das Raster mal wieder aus, dann sieht man das besser, in der Kombination durchaus alle Werkzeuge genutzt, vom Rechteck über den Kreis über die Linie, einschließlich dem Zeichenstift, mit den Einstellungen, die Sie hier in der Werkzeugpalette finden. Und wenn Sie das super hinbekommen haben, dann bin ich sicher, kennen Sie auch die Funktionen und können für Ihre eigenen Projekte komplexe UI-Components abbilden.

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!