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

Sketch Grundkurs

9-Slice Skalierung nutzen

Testen Sie unsere 2018 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die 9-Slice-Skalierung kann besonders beim Skalieren von Interface-Elementen auf Bitmap-Basis hilfreich sein. Erfahren Sie in diesem Film alles über diese Funktion.

Transkript

Eine sehr interessante Funktion innerhalb von Sketch nennt sich "9-Slice"-Skalierung, und diese möchte ich jetzt anhand eines Beispielbildes demonstrieren. Dazu werde ich jetzt hier mal ein Bild importieren und zwar diese "Scrollbar". So, und hier habe ich jetzt ein Scrollbar, und die möchte ich vielleicht an mein Interface anpassen. Das heißt, ich habe bereits ein Design von einem Interface und diese Scrollbar soll einfach ein bisschen größer oder ein bisschen kleiner sein. Wären das hier unten jetzt Vektoren, wäre das kein Problem. Vektoren kann man beliebig groß- und kleinskalieren. Aber da es sich jetzt hierbei um ein Bitmap handelt, wie würde man dann vorgehen? Man würde normalerweise so vorgehen, dass man diesen Bar hier in drei Teile teilt. Einmal die Teile, die sich nicht verändern, wie zum Beispiel, hier den rechten Teil und hier den linken Teil, und dann der Teil dazwischen, der skaliert wird. Das heißt, zum Beispiel, dieser graue Bereich, da der sich ja, quasi unendlich wiederholen kann nach links und rechts, kann man den dann in die Breite ziehen. Oder man nimmt diesen Teil hier, dann kann man den in die Breite ziehen. So oder so ist halt so. Man muss es in drei Teile unterteilen. Und dabei hilft uns das "9-Slice Scaling". Wir müssen nicht wirklich hier Hand anlegen und das Ganze zerschneiden, sondern wir wählen das Objekt aus, gehen dann über "Layer" "Image" und wählen dann hier: "Convert to 9-Slice Image" aus. So, und jetzt sehen wir hier bereits die Unterteilung in drei Bereiche. So, das stimmt noch nicht ganz, weil dieser Bereich, hier dazwischen, soll nicht skalieren. Ich will, zum Beispiel, dass dieser graue Bereich hier skaliert wird, okay. Dann schiebe ich einfach den Bereich hier zur Seite, so. Gerne auch hier bis nach ganz oben. Das gleiche machen wir mit dem Bereich. Auch den schiebe ich jetzt hierhin. Das heißt, ich definiere diesen Bereich und das ist der, der nachher skaliert wird. Wenn ich das jetzt mit "Return" bestätige, und jetzt hingehe und das Element hier skaliere, dann sehen wir, dass es lediglich hier zwischenskaliert und der Rest verändert sich nicht. Das heißt, ich kann das Objekt jetzt hier sehr weit in die Länge ziehen. Wie wir sehen, verhält es sich fast wie ein Vektor, weil man es beliebig skalieren kann, ohne dass es pixelig wird oder irgendwo verzerrt wird. Okay, das ist ein Beispiel. Ich möchte noch ein weiteres Beispiel zeigen. Dazu importiere ich mir erneut ein Bild, und zwar in dem Fall hier diese "Browser.png"-Datei. Ich zoome etwas raus. Hier ist der Browser. Er verdeckt die Siderbar. Die Sidebar brauchen wir jetzt gar nicht mehr. Ich lösche sie mal raus. Okay, ich habe also hier ein Browser-Fenster, und dieses Browser-Fenster möchte ich vielleicht skalieren können. Weil ich möchte hier ein Screendesign von mir einbauen und das Fenster passt nicht. Ja, auch hier können wir die "9-Slice"-Skalierung verwenden, denn dieser Teil hier, zum Beispiel, der lässt sich ja problemlos skalieren. Man muss lediglich hier oben aufpassen, was man da skaliert. Hier kann man, zum Beispiel, diesen Bereich skalieren oder diesen Bereich hier. Das ist kein Problem. Okay, also, ich habe das Element ausgewählt, ich gehe auf "Layer" "Image" und dann "Convert to 9-Slice Image". Ja, und jetzt gehe ich hin und wähle den Bereich aus, der skaliert werden soll. Da nehme ich jetzt tatsächlich mal diesen Bereich hier und dann diesen Bereich hier zwischen. So, ich habe es also jetzt ausgewählt, ich bestätige mit "Return". Und jetzt -- Ich zoome mal ein bisschen raus, damit wir es besser sehen. Jetzt kann ich hingehen und das Fenster beliebig skalieren. Es verhält sich also quasi so, als wäre es responsiv. Wir können das Fenster so groß und klein machen, wie wir es wollen. Wenn wir jetzt im Nachhinein merken, wir haben die "9-Slices" an die falsche Stelle gesetzt, dann können wir einfach das Bild auswählen, erneut über "Layer" gehen, dann auf "Image". Dann heißt das in dem Fall "Edit 9-Slice Guides". Und jetzt kann ich die "Guides", zum Beispiel, verschieben, hierhin. So, ich bestätige das. Und wenn ich jetzt wieder hingehe und hier skaliere, dann skaliert sich in dem Fall das Adressfeld. Ja, wie wir sehen, also, sehr komfortabel das Ganze. Wir können die "9-Slice"-Skalierung wunderbar nutzen, um Elemente zu vergrößern. Das ist natürlich sehr praktisch bei User-Interface-Elementen, wie wir es hier gesehen haben. Bei Browser-Fenstern, bei Buttons, bei Scrollbars und so weiter. Alles Elemente, die vielleicht nicht aus Vektoren bestehen, sondern, wenn wir mit Bitmaps arbeiten, dann macht es Sinn zu schauen, welchen Bereich kann man tatsächlich ohne Probleme skalieren, und dann kann man dies mit der "9-Slice"-Skalierung durchführen.

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!