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.

Sketch Grundkurs

Rahmen gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Rahmen um Vektorformen lässt sich auf unterschiedliche Weise formatieren. Sketch bietet sogar Verläufe für Rahmen und die Möglichkeit, verschiedene Rahmen miteinander zu kombinieren.

Transkript

Wir wollen uns nun die Verwendung von Rahmen oder "Borders" in Sketch anschauen. Rahmen beziehungsweise "Border" lassen sich auf alle möglichen Vektor-Elemente setzen. Das heißt, ich kann den Kreis auswählen und dem einen Rahmen zuweisen, oder auch, zum Beispiel, hier diesem Rechteck. In unserem Fall möchte ich hier dem Kreis eine "Border" geben. Dazu wähle ich diesen aus und, wie wir sehen, hat er schon eine von einem Pixel. Ich erhöhe den Wert mal auf 10 Pixel. Außerdem ändere ich die Farbe und wähle hier diesen Blauton aus. Die Position sitzt in dem Fall auf "Center". Das heißt, dass bei den 10 Pixeln 5 Pixel außerhalb und 5 Pixel innerhalb liegen. Das heißt, bei einer Breite und Höhe von 100 Pixeln, sind es in Wirklichkeit 105 Pixel oben und unten. Kommen wir zusammen auf 110 Pixel, der unser Button jetzt groß ist. Wenn ich das hier auf "Outside" setze, dann wird der Button deutlich größer. Wir haben in dem Fall oben und unten 10 Pixel mehr. Wir kommen also auf eine Breite und Höhe von "120". Mir gefällt aber am besten, wenn wir das hier auf "Inside" setzen. Dann ist der Button hier deutlich kleiner und die Werte stimmen nun überein, weil die 10 Pixel ja, jetzt an den Rahmen nach innen abgerechnet werden. Es besteht sogar die Möglichkeit mehrere Rahmen miteinander zu kombinieren. Wenn ich hier oben, bei "Borders" auf das Plus klicke, dann kann ich jetzt einen weiteren Rahmen hinzufügen. Ich nehme jetzt hier mal diesen Rotton. Wir sehen aber hier kaum das Ergebnis, deswegen erhöhe ich den Wert mal auf "5". Jetzt sehen wir, dass diese 5 Pixel hier draufgerechnet werden, aber, wenn wir es auf "Outside" setzen, dann sehen wir tatsächlich jetzt hier, dass es außerhalb unseres derzeitigen "Borders", unseres blauen "Borders" liegt. Man kann sogar hingehen und den Rahmen Verläufe geben. Dazu wählt man hier den Verlauf aus, oder hier "Radiale Verläufe", ganz egal, und dann sehen wir auch schon hier das Ergebnis. Wir haben jetzt hier einen Verlauf, den wir natürlich noch weiter anpassen können. Wenn man eine "Border" wieder entfernen möchte, -- können über das Plus noch weitere hinzufügen, aber ich sie wieder entfernen --, dann klicke ich hier auf den Haken. Dann sehen wir sie nicht mehr, und dann erscheint hier der Mülleimer. Wenn ich jetzt darauf klicke, werden alle "Border" gelöscht, die deaktiviert sind. Es besteht sogar die Möglichkeit, Masken-Outlines zu geben beziehungsweise "Border". Dazu wähle ich jetzt hier diese Maske aus, und jetzt kann ich hingehen und hier eine "Border" aktivieren, die man jetzt natürlich kaum sieht. Ich erhöhe die "Thickness", die Stärke, einfach mal auf 5 Pixel. Jetzt sehen wir allerdings nur 2,5 Pixel, da es auf "Center" steht. Wenn ich es "Outside" setze, dann sehen wir jetzt hier den Rahmen von 5 Pixel. Wenn ich es auf "Inside" setzen würde, dann verschwindet die "Outline", die "Border" komplett, weil sie hinter der Maske verschwindet. Ich setzte es also wieder auf "Outside" und ändere hier den Farbton jetzt mal auf weiß. Die "Border" bietet uns aber noch weitere Eigenschaften, wenn wir hier auf das Zahnrad klicken. Was diese bewirken, sehen wir am besten, indem ich einfach mal hingehe und mit dem Pinsel einfach mal eine Form zeichne. Diese sehen wir jetzt nicht, da sie in dem Fall außerhalb des Artboards liegt. Wenn ich hier jetzt die Ebene auswähle, die wir gerade eben gezeichnet habe, -- Ich muss das mal ein bisschen dicker machen. Sagen wir mal 6 Pixel. Wenn ich jetzt diesen Pfad auswähle, dann sehen wir, der befindet sich innerhalb des "Cover". Hier ist der Pfad. Wenn ich diesen jetzt auswähle und nach links schiebe, dann sehen wir ihn hier auf unserer Canvas. Wenn ich ihn rausschiebe, dann verschwindet er. Das muss man natürlich wissen. Und um diesen rauszubekommen, muss man ihn einfach anfassen und hier nach oben schieben, und wenn er hier außerhalb der Ebene "Cover" ist, dann sehen wir in dem Fall die Form. Wenn sie innerhalb des "Covers" ist, wenn ich sie hier auf das "Cover" ziehe, dann verschwindet sie wieder. Also, alles was außerhalb liegt wird nicht angezeigt innerhalb des Artboards. Wenn es darüber liegt, dann schon. Gut, wir wollten uns jetzt die Kanten anschauen. Dazu gehe ich hier wieder auf die Eigenschaften. Hier können wir jetzt die Enden definieren. Wir sehen das vielleicht besser, wenn wir hier mal in den Vektor-Bearbeitungsmodus reingehen, indem ich "Return" drücke. Und wenn wir uns dann hier mal die Vektor-Punkte ansehen, wenn ich jetzt hier in den Eigenschaften hingehe und den Endpunkt ändere, dann wird dieser größer. Das müsste ich vielleicht noch etwas reinzoomen. So, zoomen wir mal hier an die Stelle. Hier sehen wir jetzt den Endpunkt, und wenn ich diesen hier auf dieser Stelle festsetze, dann verkürzt er sich genau auf den Vektor-Punkt. Wenn ich die dritte Option auswähle, dann wird der Vektor-Punkt erweitert um die Hälfte der Gesamtbreite. Oder ich kann das Ganze auch abrunden, indem ich hier diese mittlere Option auswähle. Eins tiefer, können wir hier an dieser Stelle noch festlegen, dass, zum Beispiel, der Endpunkt ein Pfeil haben soll. Noch eins weiter tiefer können wir die Linie beeinflussen. Dass diese, zum Beispiel, gepunktet oder gestrichelt sein soll. Ich kann also hier den Strich festlegen, also den "Dash". Den setze ich mal auf "5", zum Beispiel, und die "Gap", also die Lücke, nehme ich mal "20". Und hier sehen wir das Ergebnis. Natürlich eine sehr große "Gap". Vielleicht tut es auch einfach nur "10", so. Und so können wir jetzt also, eine gestrichelte Linie uns erzeugen. Wenn wir jetzt die Enden verändern, dann sehen wir auch, dass sich das hier auf die Lücken beziehungsweise die einzelnen Striche auswirkt. Die Option hier auf der rechten Seite betrifft die "Joins", also die Verbindungen. Dazu brauchen wir eine Vektor-Form, wo es "Joins"-Verbindungen gibt. Dafür zeichne ich mir jetzt in dem Fall mit dem Vektor-Werkzeug einfach mal hier eine simple Form, vielleicht irgendwie so was hier, und wenn wir jetzt hingehen und die Strichstärke erhöhen, sagen wir mal vielleicht auf "8", -- natürlich muss ich den Pfad auch hier wieder außerhalb des "Covers" haben, damit wir ihn sehen --, dann kann ich jetzt hingehen und die "Joins" bearbeiten. Mit den "Joins" sind hier diese Ecken gemeint, wo ein Strich auf den anderen trifft. So, und hier gehe ich ganz einfach mal hin und runde die "Joins" ab. Das sehen wir dann hier, diese Rundung, die das Ganze jetzt bekommt, oder ich wähle rechts auf "Abgeflacht", dann haben wir halt hier eine Kante, die die Ecke entgratet. So, wir haben also nun die wichtigsten Eigenschaften von "Borders", von Rahmen kennengelernt. Wir wissen also nun, wie man "Borders" hinzufügt, Wie man mehrere "Border" miteinander kombiniert. Dass es die Möglichkeit gibt, diese nach innen und nach außen oder zentriert auszurichten. Die Farbe zu ändern, Verläufe zu definieren, die Stärke zu ändern und natürlich hier noch Einfluss zu nehmen auf die Endpunkte, die Verbindungen. Start- und Endpunkte können wir durch Grafiken, also Pfeile zum Beispiel, ergänzen, und wir können eine gestrichelte Linie definieren.

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!