Adobe XD lernen

Spezielle Effekte in Adobe XD

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit Adobe XD lassen sich auch komplexe oder spezielle Effekte erzielen. Das Video demonstriert einige solcher Möglichkeiten anhand von zwei Beispielen.

Transkript

Speziell bei der App-Entwicklung kennen Sie vielleicht die sehr schöne Optik, wenn etwas im Hintergrund verschwommen dargestellt wird. Solche Effekte sind selbstverständlich auch mit Adobe XD umzusetzen, ebenso sehr komplexe Zeichenobjekte. Wobei ich hier, wenn die Möglichkeit besteht, immer auf Adobe Illustrator in diesem Fall zurückgreifen würde. Beide Varianten möchte ich Ihnen einmal in diesem Video aufzeigen. Wir haben hier bei der Idee des Designs, die Aufgabe, dass von Rallye-Cars auf die zweite Seite verwiesen werden soll, wenn man hier entsprechend auf die Detailinformation, zum Beispiel des Bildes klickt. Dann möchte ich aber nicht, dass der Hintergrund verschwindet, sondern ich möchte nur, dass dieses Bild größer wird und über diesen Rahmen gezogen wird. Und für so einen Zweck geht man ganz gerne hin und lässt es auch später bei dem fertigen Mock-up als verschwommen im Hintergrund darstellen. Und auch da bietet Adobe XD die Möglichkeiten. Als allererstes ziehe ich mir zu diesem Zweck einmal einen Rahmen auf. Den lege ich jetzt hier drüber. Mehr muss ich zunächst gar nicht machen. Um das im Hintergrund nun unscharf darzustellen, gibt es hier eine spezielle Funktion. Die heißt "Hintergrund weichzeichnen" und diese aktiviere ich jetzt in dem Moment. Dann sieht man schon, was passiert. Jetzt muss ich nur die richtigen Werte finden. Also hier würde ich zum Beispiel das Ganze ein bisschen weiter runterziehen, so auf 8 oder dergleichen, das passt ganz gut, glaube ich. Das müsste auch in den Negativbereich, sodass es etwas dunkler wird, -22, und Sie sehen schon, jetzt haben wir hier einen sehr schönen Special-Effect, um es mal so zu sagen. Das, was ich jetzt brauche, ist hier erneut so eine Grafikfläche aufzuziehen, dann kann man ein Symbol hier drüberlegen. Kopiere ich mir mit Alt hier hinein, ich ziehe es erstmal hier daneben, und löse das aus der Symbolgruppierung heraus, weil ich brauche hier ein paar andere Farben. Und zwar möchte ich das Ganze doch lieber grau haben, so, den Rahmen ebenfalls grau. Dann den Ball oder die Sonne oder wie auch immer und den Rahmen. So soll’s aussehen. Jetzt kann ich mir das einfach hier hinüberziehen. Dann brauche ich noch ein Button. Da nehme ich gerade den hier unten, der liegt da perfekt. Platziere mir den und habe jetzt quasi diesen Effekt relativ schnell erstellt. Sie sehen, worauf es mir ankommt, speziell hier dieses "Hintergrund weichzeichnen" und da gibt es auch die Möglichkeit, das Objekt weichzuzeichnen. Dann haben wir aber hier eine etwas andere Einstellung, also da sieht man, da wird das Ganze dann quasi von außen heraus gesteuert, und beim Hintergrund selber, dort haben wir dann diese Glasscheibe, wenn man so will, da drüber. Eine weitere Besonderheit möchte ich Ihnen gerne zeigen, hier an diesem Zeichnungsobjekt. Das, wie man schon sehen kann, ist ja doch sehr komplex und ich führe mal einen Doppelklick drauf aus und gehe mal in dieses Objekt hinein. Und Sie sehen, das ist kein normales Objekt mehr, sondern das wurde hier mit diesem Zeichenstift erstellt. Genau genommen, stimmt das auch nicht, denn man sieht zwar, dass das möglich ist, aber Sie können sich schon vorstellen, dass auch das sehr viel Arbeit wäre. Ich kann das natürlich im Nachhinein jederzeit verändern. Solche Objekte, wenn Sie die Möglichkeit haben, würde ich Ihnen auf jeden Fall empfehlen, mit bspw. Adobe Illustrator zu erstellen. Was habe ich hier gemacht? ich habe mir einfach aus dem Internet eine Karte herausgesucht, die die Umrisse von Deutschland abbildet und dabei war mir egal, was da für ein Inhalt drin ist. Ich wollte nur die Umrisse haben. Dann gibt es eine schicke Funktion in Illustrator, die nennt sich "Nachzeichnen". Das habe ich dann durchgeführt und habe dann dieses Objekt gehabt und das Tolle ist, das ich dieses Objekt, wenn in Illustrator eine Flächenfüllung und eine Kontur eingestellt ist, dann brauche ich das nur noch über die Zwischenablage hier in Adobe XD hineinzukopieren. Und kann dann auch hier direkt Änderungen vornehmen. Also, wenn mir das zum Beispiel gefallen würde, dass der Rand etwas dicker ist, dann kann ich auch das einstellen. Und diese volle Bearbeitungsfunktion, die wird übernommen, und es ist durchaus... -- finde ich zumindest -- eine sehr schöne Möglichkeit und dann auch eine starke Vereinfachung, wenn man doch sehr komplexe Zeichenobjekte mit übernehmen möchte. Und damit haben Sie die beiden Möglichkeiten kennengelernt, sehr aufwendige, komplexe Objekte in Adobe XD einzusetzen, und den einen oder anderen Special-Effect auch hier zu verwenden.

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!