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

Das Wiederholungsraster für schnelle Fotolisten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Wiederholungsraster ist eine leistungsstarke Funktion, um mehrfach vorkommende Objekte schnell und effizient im Designprozess anlegen zu können. Das Video beschreibt, wie Sie unterschiedliche Fotos in eine Liste kopieren und so schnell vom Grund- zum Detaillayout gelangen.

Transkript

In diesem Video möchte ich erneut auf eine Funktion eingehen, die wir bislang noch nicht besprochen haben und die mich auch immer wieder begeistert, die wirklich die Arbeit erleichtert und so ganz viele tolle Funktionen im Hintergrund auch anbietet. Die Rede ist von dem Wiederholungsraster. Im Moment noch unscheinbar taucht das hier in der Werkzeugpalette auf, etwas ausgeblendet, weil wir das so noch nicht einsetzen können, und genau das, und die Stärke dieser Funktion, möchte ich Ihnen in diesem Video aufzeigen. Ich habe mir dafür mal das Wireframe der Rallye-Fahrzeuge rausgesucht. Denn hier haben wir eine Liste, unschwer zu erkennen an der Bildlaufleiste, das signalisiert mir der Entwurf und das soll bestehen zumindest mal aus einer Fotoliste und einer Art Bewertung. Sie sehen hier rechts bereits die Ausarbeitung des Layouts, angelehnt auch an die Startseite, das sollte ja alles passen. Und das Prinzip ist nicht mehr unbekannt und so habe ich mich quasi dafür entschieden, so einen Eintrag vorzunehmen, der genau der Symbolik entsprechen soll. Erster Gedanke ist natürlich: Alles klar, um so eine Liste zu signalisieren, kopiere ich einfach diese Gruppierung, also Bildüberschrift, Fahrer und Bewertung. Wir haben also entweder rechte Maustaste Kopieren oder mit gedrückter Alt-Taste ziehe ich das jetzt einfach mal auf die Schnelle hier nach unten. Sie sehen, auch da bietet Adobe XD schon recht schnelle Möglichkeiten und genaue Möglichkeiten. Theoretisch gesehen, würde das ja schon ausreichen. Das sieht zumindest schon mal so aus, wie es sein soll. Aber das wäre ja zu einfach oder besser gesagt, das bringt uns in die Verlegenheit, dass wir natürlich jetzt jedes einzelne Bild bearbeiten müssten, wenn wir hier schon was wirklich Unterschiedliches darstellen wollen. Theoretisch gesehen könnte man es so lassen, aber wir lösen uns ja von einem Wireframe und gehen zu einem Mock-up. Hier geht es zwar auch noch nicht um konkrete Inhalte, soll aber schon möglichst das "Look and Feel" darstellen und das ist mit gleichen Bildern nicht wirklich schön. Ich lösche das also wieder heraus und der ganze Trick ist nun folgender: Sie sehen hier, der Aufbau ist ein Bild, ganz normal, ein Text, alles das, was wir schon erstellt haben, plus ein Hintergrund mit abgerundeten Ecken, und das Ganze habe ich dann als Objekt gruppiert. Sobald ich so eine Gruppierung markiere, wird auch dieser Button "Wiederholungsraster" aktiv. Das ganze Geheimnis ist nun, einfach hier draufzuklicken und Sie sehen, jetzt erhalte ich die Möglichkeit dieses Objekt sowohl vertikal, als auch horizontal zu wiederholen, in einem Raster. Und ich brauche nun... -- vertikal habe ich keinen Bedarf in diesem Fall -- aber ich brauche nun für die horizontale Wiederholung nichts anderes zu machen, als diesen Greifer mit gedrückter linker Maustaste festzuhalten und nach unten zu ziehen. Schauen Sie, was passiert. Jetzt bekomme ich hier tatsächlich eine Liste, und die kann ich jetzt aufziehen bis zu einem bestimmten Punkt. Ich muss jetzt mal schauen, bis wohin wir das brauchen. Neun Stück brauche ich. Eins, zwei, drei, vier, fünf... -- ich muss noch ein bisschen rauszoomen -- Eins, zwei, drei, vier, fünf, sechs, sieben, acht, neun, ja, passt perfekt. Was ich zusätzlich jetzt noch kann, ist in diesem Wiederholungsraster, kann ich auch die Abstände verändern, also zum Beispiel sieht man hier, wenn ich die Maus drauflege, dann kann ich das Ganze so ein bisschen zusammenziehen, etwas enger machen, und alles andere passt sich jetzt tatsächlich auch schon diesem Layout an. Ich sollte natürlich hier dann auch stoppen, wo das letzte Bild angezeigt wird. Also, bis dahin ist das schon mal eine schicke Funktion für die Wiederholung. Theoretisch gesehen, kann ich das auch in der Horizontalen machen. Aber das möchte ich gar nicht. Wo es mir jetzt darauf ankommt, ist, dass dieses Wiederholungsraster nicht nur für die Wiederholung zuständig ist, sondern obendrein auch für eine fantastische Funktion der automatisierten Bildzuordnung. Hier habe ich im Hintergrund einmal verschiedene Rallye-Images und das was interessant ist, es ist eigentlich alles, von der Nummer zwei bis zum Schluss, mit Ausnahme dieser beiden Bilder. Und wenn Sie das zählen, sind neun Stück. Diese Bilder, die greife ich mir jetzt mal, diese Grafik. Mit gedrückter linker Maustaste und ziehe sie hier genau auf das Wiederholungsraster. Sie sehen, ich muss nur darauf achten, dass jetzt in dem Fall tatsächlich das Bild blau wird. Nun lasse ich die gedrückte Maustaste los und achten Sie darauf, was passiert. Es wird Sie begeistern. Ich habe neun unterschiedliche Fotos in meinem Raster. Ich überlasse das Ihnen, darüber nachzudenken, welche Arbeitserleichterung das ist. Ich kann Ihnen schon versprechen, das ist noch nicht alles beim Wiederholungsraster. Hier steckt noch eine ganze Menge mehr dahinter, was uns später, bspw. bei der Simulation von Scroll-Effekten noch hervorragend unterstützen wird.

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!