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

Sketch Grundkurs

Basislayout erstellen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Grundlayouts basieren in der Regel auf einfachen Vektorformen. In diesem Video legt der Trainer mit Ihnen das Grundlayout einer Musik-Player-App an.

Transkript

Wir wollen diese Music-Player-App nachbauen. Dazu möchte ich als Erstes starten, und die Basis erstellen. Das heißt, die Grundelemente, die wir benötigen. Also hier oben zum Beispiel dieses Rechteck. Dann diesen größeren Bereich hier. Darin diesen Kreis mit dem Cover. Und dann hier unten diesen Player, mit diesen drei Buttons. Diese Basiselemente möchte ich jetzt in einem neuen Dokument erzeugen. Dazu erstelle ich mir eine neue Sketch-Datei. Und diese werde ich als Erstes mal abspeichern. Und zwar nenne ich diese jetzt einfach mal "Outline". So, und als Erstes benötigen wir natürlich ein Artboard. Ich klicke also hier oben auf die entsprechende Schaltfläche, und wähle mir jetzt hier das iPhone 7 aus. Somit erhalte ich jetzt hier ein Artboard in der Größe vom iPhone 7. Das kann man natürlich noch umbenennen. Ich nenne das jetzt einfach mal "Cover". Ja, und dann können wir auch schon loslegen, mit unseren Basiselementen. Als Erstes erzeuge ich mir mal ein Rechteck. Ich gucke, dass ich hier oben direkt die entsprechende Stelle treffe. Und ziehe mir jetzt ein Rechteck auf, mit der vollen Breite von 375, und einer Höhe von 20 Pixeln. Also gehe ich hier mal etwas runter auf 20 Pixel, ich habe jetzt ein bisschen daneben geklickt, kein Problem, wir gehen einfach hier an diese Stelle und minimieren das. Oder wir haben ja gelernt, wir können, wenn ein Objekt selektiert ist, die Command-Taste drücken, und dann mit den Pfeiltasten rauf und runter die Größe anpassen. Wir sehen aber hier bei Position, dass wir X und Y jeweils auf Null getroffen haben, das heißt, das Rechteck sitzt perfekt, Breite und Höhe stimmen, ich möchte in dem Fall keine Border haben, also keine Outline rund um das Rechteck. Und dann kann ich auch schon hingehen, und das Rechteck duplizieren, indem ich die "Alt"-Taste gedrückt halte, klicke und ziehe, und es rastet dann auch hier unter dem anderen Rechteck wieder ein. Jetzt muss ich noch die Höhe dafür festlegen. Die Höhe ist in dem Fall 460. Dadurch, dass wir es dupliziert haben, hat es dann auch keine Borders. Ich möchte aber in dem Fall hingehen, und die Farben ändern, damit wir den Unterschied überhaupt sehen. Der Bereich hier oben wird später schwarz sein, also wähle ich hier mal bei "Fill", der Füllung, schwarz aus. Wir brauchen ein weiteres Element darunter, das ist in dem Fall die Komponente, die uns anzeigt, wie weit der Player schon den Track abgespielt hat. Und das Element hat eine Höhe von sechs. Das heißt, ich drücke "Cmd+Shift" einmal nach oben, hab's jetzt auf zehn gebracht, und jetzt "Cmd" und dann noch vier mal nach oben, und habe jetzt hier die Höhe von sechs Pixeln. Auch hier ändere ich jetzt einfach mal den Farbton zu einem anderen Grau. Ja, und jetzt benötigen wir noch den letzten Bereich hier, auch hier gehe ich einfach hin, klicke hier oben, halte die "Alt"-Taste gedrückt, ziehe das Element nach unten, und kann es dann hier einfach ganz nach unten ziehen. Auch hier gebe ich jetzt einfach noch eine andere Farbe, einen anderen Grauton, machen wir mal ungefähr so. Und das Element hat jetzt eine Höhe von 181. Somit haben wir schonmal die einzelnen Bereiche hier unterteilt. Als Nächstes möchte ich mir jetzt die Kreise erstellen für das Cover, und hier für den Player. Dazu nehme ich mir das Oval, ich drücke also die Taste "O", und gehe dann mit der Maus hier in die Mitte, und wir sehen schon, dass hier automatisch die Mitte erkannt wird, wenn ich jetzt klicke und ziehe, muss ich in dem Fall die "Alt"-Taste gedrückt halten, damit die Mitte auch ausgewählt wird, zusammen mit der "Shift"-Taste, und dann ziehe ich hier den Kreis groß, und der Kreis hat eine Breite von 340. Ja, und hier ändere ich jetzt auch mal die Füllfarbe, nehmen wir auch hierfür einen anderen Farbton, diesen hier von mir aus, völlig egal. Wir gucken, der Kreis sitzt genau in der Mitte. Die Position auf der Y-Koordinate stimmt noch nicht, dazu können wir jetzt in dem Fall die "Alt"-Taste gedrückt halten, und dann sehen wir hier die Abstände. Zu dem oberen Element sind es in dem Fall jetzt 60, nach ganz oben sind es in dem Fall hier 80. Was ich haben möchte, ist 64. Also gehe ich ganz einfach hin und schiebe jetzt mit den Pfeiltasten den Kreis noch vier Pixel nach unten. Somit haben wir es von hier 64, von oben sind es 84. Wenn wir die Reihenfolge der Ebenen ändern wollen, haben wir gelernt, können wir einfach die "Cmd"-Taste drücken, zusammen mit der "Alt"-Taste und dann einen Pfeil nach unten, und dann sehen wir wie hier das Oval jetzt nach unten wandert, mit jedem Mal, wo ich "Pfeil nach unten" drücke. Wenn ich aber jetzt ganz nach unten möchte, dann halte ich in dem Fall "Cmd+Alt+Ctrl"-Taste gedrückt. Wenn ich jetzt den Pfeil nach unten tippe, dann wandert das Oval hier ganz nach unten. Wenn ich wieder die drei Tasten mit dem "Pfeil nach oben" tippe, dann ist das Oval ganz oben. Ich benutze diese Tasten-Kürzel sehr, sehr häufig, da ich keine Lust habe, hier in den Ebenen zu hantieren, ich gehe einfach hin, wähle das Objekt aus, und verschiebe es dann in der Reihenfolge. Gut, was uns jetzt noch fehlt, sind hier unten die Kreise für die Buttons des Players. Dazu kann ich jetzt ganz einfach hingehen, mit der "Alt"-Taste, hier diesen Kreis duplizieren, nach unten ziehen, er bleibt ja dann hier auf der horizontalen Mitte bestehen. Und jetzt gehe ich einfach hin und skaliere den Kreis. Und in dem Fall halte ich auch die "Alt"-Taste gedrückt, um ihn zur Mitte hin zu skalieren. So, und der soll jetzt eine Breite haben von 100. So, wir sehen das ja hier auch direkt, wie groß der Kreis wird, ich gehe also noch kleiner, bis ich dann jetzt gleich bei der 100 angekommen bin, und lasse dann los. Links und rechts brauche ich jetzt weitere Kreise, ich halte die "Alt"-Taste gedrückt, ziehe jetzt den Kreis heraus, so. Auch der bleibt ja automatisch auf der richtigen Achse, ich verkleinere den Kreis jetzt hier auch mit gedrückter "Alt"-Taste, und ziehe den Kreis jetzt in dem Fall auf 60 Pixel. Da haben wir es schon. Auch den Kreis dupliziere ich wieder, schiebe ihn nach links, und jetzt müssen wir nur noch die Abstände haben, ich möchte den Abstand hier nach links bei 40 Pixeln haben. Ich halte also die "Alt"-Taste gedrückt, dann sehen wir hier den Abstand, mit den Pfeiltasten gehe ich jetzt ein Stück zur Seite. Das Gleiche mache ich hier. Hier sehe ich 37 Pixel. Dreimal nach links, dann haben wir das. So, jetzt möchte ich die drei Elemente hier nach oben noch ausrichten. Also mit gedrückter "Shift"-Taste wähle ich alle drei aus, halte die "Alt"-Taste gedrückt, und sehe jetzt hier nach oben sind es 41 Pixel. Nach oben sollen es aber nur 28 sein, also mit gedrückter "Shift"-Taste einmal nach oben, und dann noch dreimal die Pfeiltasten, und schon haben wir jetzt hier unsere Kreise korrekt ausgerichtet. Somit sind wir also jetzt mit unserem Basis-Layout fertig. Wie wir gesehen haben, ging das Ganze recht schnell. Wenn man die ganzen Tasten-Kürzel kennt, dann ist so ein Basis-Layout ratzfatz erstellt. Man braucht wenige Minuten dafür, oder wenn man schnell ist, noch nicht einmal eine Minute, um so ein Basis-Layout wie dieses hier zu 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!