Sketch Grundkurs

Smart-Guides, Layout, Grid und Lineal

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Film stellt der Trainer die verschiedenen Layouthilfsmittel von Sketch vor. Erfahren Sie, wie Sie mittels intelligenter Hilfslinien, Layout, Grid und Lineal akkurate Screendesigns erzeugen.

Transkript

Wir wollen uns nun anschauen, wie man mit dem Layout, dem Grid und mit Linealen arbeiten kann. Fangen wir mal an mit dem Grid. Das Grid sorgt für ein Raster. Wenn wir dieses einblenden, entweder hier über die Schaltfläche, die ich hier hinzugefügt habe, ansonsten über "View" "Canvas" und dann haben wir hier "Show Grid", dann wird uns jetzt hier ein Raster eingeblendet. Wie groß das Raster genau ist, sehen wir, wenn wir uns mal die Lineale einblenden, die können wir über diese Schaltfläche oder ebenfalls über das Menü "View" "Canvas" und dann "Show Rulers" aktivieren oder deaktivieren. So, wie wir sehen, basiert dieses Raster jeweils auf Zweihunderter-Schritten: 200, 400, 600. So, wenn ich das auf Hunderter-Schritte umändern möchte, dann gehe ich ebenfalls wieder über das Menü "View" "Canvas" und dann gehen wir hier auf "Grid Settings". Und hier steht jetzt die "Grid block size" auf 200. Wenn ich die Shift-Taste gedrückt halte und einmal Pfeil nach unten tippe, dann habe ich hier zehn, natürlich kann ich es auch eintippen; ich kann die Farben ändern für dieses Grid; ich kann sagen, das soll jetzt mein Default sein -- jawohl --, das soll also standardmäßig geladen werden; ich klicke auf "OK" und habe jetzt hier ein Hunderter-Grid mit Zehnerschritten. Und wenn ich jetzt ein Rechteck aufziehe, dann kann man sich hier an dem Grid orientieren, man sieht also ganz genau, wie viele Pixel in Zehnerschritten hier jetzt ausgewählt werden. Abgesehen davon, sehen wir natürlich auch neben dem Mauszeiger die Werte. So habe ich jetzt also hier ein Rechteck aufgezogen, was genau 100 mal 100 Pixel groß ist. Wenn ich das Grid wieder deaktiviere, dann kann ich wie gewohnt weiterarbeiten. Über die Alt-Taste kann ich jetzt weitere Elemente herausziehen, und wie man sieht, können wir jetzt wieder pixelgenau arbeiten. Das wird nicht in Zehnerschritten hier ausgerichtet, so wie das mit dem Grid der Fall ist. Wenn ich mit dem Grid das Ganze hier rausziehe, dann rastet das hier in Zehnerschritten ein. Die Abstände zwischen den Elementen sieht man natürlich, wenn man sie verschiebt, dann wird es kurz eingeblendet oder wenn man die Alt-Taste gedrückt hält und dann über ein anderes Element überfährt. Hier sehen wir jetzt einen Abstand von 30 Pixeln, zu dem Element 160 Pixel. Das ist natürlich auch sehr praktisch zum Vermessen. Wenn ich jetzt ein anderes Objekt zum Beispiel hier habe und jetzt überfahre, sehe ich den Abstand sowohl auf der Vertikalen als auch auf der Horizontalen. Das ist natürlich auch für die Entwicklung später spannend, wenn man genau wissen muss, wie viel Abstand zwischen Elementen besteht. Wenn man diese intelligenten Hilfslinien nicht haben möchte, die an und für sich sehr hilfreich sind, dann kann man diese ebenfalls über "View" "Canvas" und dann in dem Fall "Show Smart Guides" hier deaktivieren und wenn wir jetzt was verschieben, sehen wir die Smart Guides nicht mehr. Ich muss zugeben, dass sich das jetzt irgendwie ganz komisch anfühlt, ohne dieses Smart Grid, weil ich es gewohnt bin, dass dieses immer angezeigt wird, deswegen blende ich mir das ganz schnell wieder ein über "View" "Canvas" und dann "Show Smart Guides". Ja, wie sieht das jetzt mit dem Lineal aus? Wie man das ein- und ausblendet haben wir ja bereits gesehen, auch übers Menü. Wenn wir jetzt eine Hilfslinie benötigen, dann können wir einfach hier mit der Maus auf das Lineal fahren, ich gehe jetzt hier mal an diese Stelle und dann einfach klicken, wo man die Hilfslinie haben möchte. Man muss also nicht wie in anderen Programmen das irgendwie rausziehen, sondern man kann auch so hingehen, auch ohne dass man klickt oder irgendwas rauszieht, schon mal sehen, wie die Maße sind. Und dann kann man immer noch klicken, um eine Hilfslinie zu erzeugen. Wenn ich jetzt ein Objekt nehme und das dupliziere, dann richtet sich das auch schon hier an der Hilfslinie aus und zeigt auch die Maße zu der Hilfslinie. Das ist natürlich auch sehr komfortabel, wenn man die Hilfslinie wieder löschen möchte, dann gibt es zwei Möglichkeiten, man überfährt mit der Maus die Hilfslinie, macht einen Rechtsklick und dann kann man sagen: "Remove Guide" oder "Remove All Horizontal Guides", alle horizontalen Hilfslinien, oder man fasst sie an, zieht sie zur Seite, dann sieht man hier das X neben dem Mauszeiger und wenn man loslässt, dann verpufft es. Zu guter Letzt schauen wir uns jetzt noch hier das Layout an. Wenn wir dieses aktivieren, dann sehen wir, wir kriegen hier ein entsprechendes Raster angezeigt, ein klassisches Zwölfer-Raster, allerdings finde ich das hier jetzt nicht so spannend, interessanter ist es, wenn man ein Artboard hat. Wenn ich mir jetzt also ein Artboard auswähle, sagen wir mal hier fürs iPhone 7 und ich mir jetzt hier das Layout einblende, dann sehen wir jetzt basierend auf dem Artboard hier das Zwölfer-Grid oder das Zwölfer-Layout-Grid, sagt man eigentlich. Man kann also jetzt hingehen und an diesem Grid seine Objekte ausrichten. Das heißt, wir können hingehen und jetzt zum Beispiel wieder ein Rechteck aufziehen und das Rechteck, wie man sieht, richtet sich auch schon daran aus. Wenn man es verschiebt, dann ebenfalls, wir können also auch so sehr präzise mit diesem entsprechenden Layout hier arbeiten. Das ist vor allem auch sehr gut, wenn es nachher um die Umsetzung geht, weil bei der Umsetzung kann man zum Beispiel Frameworks nutzen wie Bootstrap. Und Bootstrap arbeitet ebenfalls mit so einem Zwölfer-Grid, und somit kann man wunderbar dann die Layouts von Sketch dort hin überführen. Das Grid lässt sich natürlich auch bearbeiten über "View" "Canvas" und dann "Layout Settings". Wir sehen jetzt die gesamte Breite unseres Dokumentes hier angezeigt; wir sehen das Offset, Null in dem Fall und zentriert; wir sehen wie viele Columns, ich mache jetzt einfach mal spaßhalber zehn draus; wir sehen auch im Hintergrund was passiert. Wir können den Abstand der Gutter, heißt es in dem Fall, also zwischen diesen einzelnen Elementen vergrößern und verkleinern, lassen das mal bei 5. Und wir können zusätzlich auch noch sagen, wir wollen Rows anzeigen, also nicht nur Columns, Spalten, sondern auch Zeilen. Und auch für die Zeilen kann man hingehen und sagen, wie viel Pixel sollen die hoch sein und wie viel Platz soll dazwischen sein. Wir können auch einfach nur mit horizontalen Linien arbeiten in dem Fall und wir können uns das Ganze auch einfach nur als Linien, als Outlines, anzeigen. Die Farben lassen sich auch definieren und dann kann man hingehen und sagen: "Make Default", sodass in Zukunft immer wieder das gleiche Layout verwendet wird. Das ist natürlich auch sehr komfortabel, wie gesagt, vor allem später, wenn es um die Umsetzung geht. Man hat ein Raster an dem man sich orientieren kann und wenn man entsprechende Frameworks nutzt wie zum Beispiel Bootstrap, dann kann man damit hervorragend arbeiten.

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!