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

Sketch Grundkurs

Craft: Elemente im Raster wiederholen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die beiden Funktionen Duplicate und Data des Craft-Plug-ins ermöglichen es, sich wiederholende Elemente sehr einfach über ein Raster zu duplizieren und die Inhalte automatisch zu befüllen.

Transkript

Um das CRAFT Plugin in Sketch nutzen zu können, müssen wir uns hier mit unserer EMail-Adresse registrieren, und dann können wir es kostenlos herunterladen. Das habe ich bereits gemacht auch installiert habe ich das Plugin bereits. und wenn man es installiert hat, dann taucht hier rechts in Sketch eine neue Leiste auf. Wenn wir mal hier unter Plugins schauen, dann sehen wir hier den Menüpunkt Toggle Craft und somit können wir diese Leiste ein- und ausschalten. Wir haben also jetzt hier eine Leiste mit verschiedenen Paletten und was wir uns jetzt gerade mal anschauen wollen, ist in dem Fall einmal Data und einmal Duplicate. Dazu zoome ich in dem Fall mal hier in diesen Screen hinein und zwar habe ich jetzt Folgendes vor: Ich möchte diesen Bereich hier mit einem Bild auffüllen und ich möchte rechts daneben Text haben. Also erzeuge ich mir mal eine Textbox. Von der Position her ist die eigentlich schon in Ordnung. Vielleicht noch ein bisschen weiter nach links. Und jetzt möchte ich diese Box hier mit einem Bild auffüllen und den Text mit Platzhaltertext. Dazu nehme ich das Bild hier oder bzw. den Platzhalter erstmal, und dann gehe ich hier auf die Palette Data. Die Palette Data unterteilt sich in Text und Bild. In unserem Fall möchte ich jetzt ein Bild einfügen. Wir haben hier verschiedene Ansichten. Ich finde neben der Listenansicht, finde ich diese Ansicht hier schicker. Und was möchte ich jetzt hier auffüllen? Entweder Platzhalterbilder von Stränden, von Kindern oder von Natur? Wir können aber auch einen Ordner bei uns auf der Festplatte auswählen und dann die Bilder aus dem Ordner nehmen, wir können Bilder aus der Dropbox nehmen oder von dem Online Stock Photo Dienst UnSplash, wo man kostenlos Stock Photos einbetten kann. Darüber hinaus können wir hier oben über diese Reiter auf den Bereich WEB gehen, können zum Beispiel hier bei Google eine Bildersuche machen und dann alle Bilder, die uns hier als Ergebnis angezeigt werden, ebenfalls hier einfüllen. Und dann gibt's noch die Möglichkeit, per JSON eine Schnittstelle zu nutzen, um ebenfalls Bilder einzufügen. Schauen wir uns mal gerade eben CUSTOM an. Hier muß ich im Prinzip einfach nur hingehen und sagen, ich möchte Bilder von Stränden haben, dann dauert es eine Sekunde und da wird ein Strandbild eingefügt. Ich möchte Bilder von Kindern haben oder von Natur. In dem Moment wird natürlich ein Bild dann aus dem Netz geladen und hier angezeigt. Wenn mir das Bild nicht gefällt, klicke ich einfach erneut auf Natur und dann wird ein anderes runtergeladen. Ich nehme jetzt mal Strandbilder und als nächstes möchte ich noch Text definieren. Ich wähle also jetzt die Textbox aus, gehe dann in den Bereich Type und habe jetzt hier verschiedene Arten von Text zur Auswahl, Namen, Überschriften, Artikel, Daten, wir können auch Currency, also Geldbeträge, EMail-Adressen, normal Adressen, Städte und Länder einfügen. In meinem Fall wäre das jetzt Namen. Ich nehme mal hier Namen. Und dann können wir auswählen, ob weiblich, männlich oder beides. Ja, und jetzt sind wir eigentlich an der Stelle schon fertig, haben also Platzhalterbild und Platzhaltertext. Was ich als nächstes mache ist, ich möchte beide duplizieren. Ich möchte hier eine Liste haben. Da kann man natürlich hingehen und kopieren, einfügen, verschieben, kopieren, einfügen, verschieben, aber dann haben wir überall die gleichen Bilder und überall die gleichen Texte. Und in dem Fall hilft uns hier der Duplicator. Bei dem Deupicator geben wir jetzt ein, ob wir horizontal oder vertikal verschieben wollen. In unserem Fall nach unten, also vertikal. Dann sagen wir wie oft, ich sage jetzt hier viermal und dann sehen wir schon, was passiert. Diese vier Bilder werden geladen auch unterschiedliche Textfelder. Und dann müssen wir nur noch den Platz zwischen diesen Bereichen definieren. Das können wir, indem wir hier einen Wert eingeben z.B. 10, oder wir nehmen diesen Schieberegler hier und ziehen mit dem Schieberegler den Bereich auf, den wir gerne hätten. Ja, und ich finde, das ist ja mal echt ein Plugin. Eine riesen Arbeitserleichterung. Und ich würde sagen, als nächstes ist es ja wohl ein Kinderspiel, jetzt hinzugehen, diesen Bereich hier nach rechts und nach unten zu duplizieren, und mit unseren eigenen Bildern aufzufüllen, indem man einfach hier hingeht, bei Photos den Ordner auswählt, in dem sich die Bilder befinden. Dann werden diese platziert und im nächsten Schritt müssen wir noch hingehen, und das Ganze hier horizontal und vertikal verteilen. Man kann die Abstände noch definieren und so hier in wenigen Sekunden einen solchen Screen erstellen.

Sketch Grundkurs

Lernen Sie die grundlegende Bedienung von Sketch am Beispiel des UX-Designs einer App.

4 Std. 45 min (54 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:25.04.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!