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

Füllungen zuweisen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sketch bietet zahlreiche Fülloptionen, von einfachen Farben über diverse Verlaufsarten bis hin zu verschiedenen Mustern. Sie können sogar mehrere Füllungen durch Überlagerung miteinander kombinieren.

Transkript

Wir wollen uns nun anschauen, wie sich die unterschiedlichen Elemente mit Farben und Verläufen auffüllen lassen. Schauen wir uns das Ganze mal hier an diesem großen Bereich an. Ich selektiere diesen, und dann haben wir auf der rechten Seite unsere Füllungen. Wir können hier einfach mal auf die Farbe klicken und dann hier eine Farbe auswählen. Da es momentan auf "Solid" steht, also auf einer durchgehenden Farbe, ändert sich in dem Fall hier der komplette Farbton von dem gesamten Element. Wir können also hier jetzt grob den Farbton in diesem Spektrum Rot auswählen. Wenn wir eine andere Farbe haben wollen, dann müssen wir hier unten über diesen Slider in einen anderen Bereich gehen. Außerdem können wir dann hier unten noch die Deckkraft festlegen. Sprich wie stark die "Opacity" oder der Alpha-Kanal sein soll. Sprich je weiter ich das Ganze nach links ziehe, desto geringer wird hier der Alpha-Wert, also die Transparenz von 13 beziehungsweise hier oben die "Opacity" von 13 %. Hier bestimmen wir also die Deckkraft, und wir sehen jetzt weiter unten den dazugehörigen "Hex"-Wert. Das ist der "Hex"-Code, den man in HTML später verwenden kann. Wenn man mit Alpha gearbeitet hat, dann kommt in dem Fall nicht "Hex" in Frage, sondern RGBA, also Rot, Grün, Blau und Alpha, da "Hex" kein Alpha unterstützt. Wenn ich hier unten hin klicke auf diesen Bereich, dann ändert sich RGBA in HSBA. Steht für "Hue", "Saturation" und "Brightness". Das heißt, der Farbton, die Sättigung und die Helligkeit, zusammen mit dem Alpha-Wert natürlich. Standardmäßig arbeitet man aber mit RGBA, wie gesagt, wenn Transparenz mit dabei ist, ansonsten halt auch mit dem "Hex"-Wert. Mit der Pipette kann man übrigens überall Farben aufnehmen. Das heißt, nicht nur hier in unserem Design, wir können auch im Interface, zum Beispiel an dieser Stelle hier, den Blauton aufnehmen. Oder hier diesen Grünton. Oder, wenn man den Finder parallel geöffnet hat, kann man auch im Finder, oder auch parallel auf einer anderen Webseite eine Farbe auswählen. Gut. Als Nächstes einen Blick hier auf die Verläufe. Wenn ich hier den Verlauf auswähle, dann ist auch schon automatisch hier ein Verlauf angewählt, von weiß nach schwarz. Wir sehen hier weiß und schwarz und das gleiche auch hier. Und ich kann jetzt hingehen und den Anfasser oben und unten nehmen und den Verlauf an der Stelle ändern. Ich kann also weiter runter setzen um ihn härter zu machen, oder weiter auseinander ziehen, um ihn weicher zu machen. Genauso sind wir natürlich hier flexibel von dem Winkel. Das Gleiche oben und unten. Wenn ich weitere Punkte haben möchte, dann kann ich einfach hier in die Mitte zum Beispiel, hinklicken, und dann setze ich hier einen weiteren Punkt, den man auch hier sieht, wo ich jetzt wieder eine andere Farbe auswählen kann. Wir können also noch weitere Punkte hier hinzufügen, wenn wir das wollen, einfach indem wir erneut klicken, und dann können wir einen anderen Farbwert hier auswählen. Und wenn wir diese wieder entfernen wollen, dann klicken wir einfach drauf und drücken die Entfernen-Taste. Die Anfangsfarbe legen wir fest, indem wir hier hinklicken und eine Farbe auswählen, den Endpunkt, indem wir hier hinklicken, und dann wiederum eine andere Farbe auswählen. Wie wir sehen, ist es also ziemlich intuitiv hier. Schauen wir uns noch die weiteren Möglichkeiten an. Wir haben hier jetzt einen radialen Verlauf. Diesen kann man, zum Beispiel, nehmen bei eher runden Elementen. Bei ovalen oder Kreisen. Dan kriegt man hier eine gewisse Plastizität hin, sodass das mehr wie eine Kugel aussieht. Ja, wie sehen, wir können jetzt hier den Ursprung festlegen, wo dieser radiale Verlauf anfangen soll, und auch die Breite. Kann also hier den Verlauf breiter machen und dann hier auch den Winkel dafür festlegen. Jetzt könnte das, zum Beispiel, so aussehen. Ja, und der Rest verhält sich wie gehabt, wie wir auch bei dem normalen linearen Verlauf hatten. Kann also das Ganze noch anpassen. Weitere Farben hinzufügen und so weiter. Der nächste Verlauf, den wir hier haben an der Stelle, ist der "Angular Gradient". Das sieht ein bisschen komisch aus. Hier fängt es nämlich mit dem vollem Farbwert an, geht dann im Kreis und wird immer schwächer. Das ist vielleicht etwas, was man eher selten benötigt. Wir können hier hingehen und den Winkel verändern, wo etwas anfangen und aufhören soll, und auch hier natürlich mit mehreren Farben arbeiteten. Das nächste, was wir hier zur Auswahl haben ist "Pattern Fill". Das bedeutet, man kann, zum Beispiel, ein Bild auswählen, was dann hier im Hintergrund liegt und als Füllung dient. Wir können hier auswählen, dass die Füllung komplett auffüllen soll. Dass sie "Fit" also einpassen soll, oder "Stretch", dass sie halt in die Länge gezogen werden soll, oder "Tile", dass sie halt so lange wiederholt wird, bis es den kompletten Bereich ausfüllt. Und wir können an dieser Stelle jetzt noch die Größe festlegen. Wie groß das Element sein soll, was hier eingefügt wird. Wir haben hier unten unter "Global Patterns" verschiedene solch einer Pattern zur Auswahl, die wir dann entsprechend anpassen können. Ja, und zu guter Letzt haben wir hier an dieser Stelle noch "Noise Fill". Das heißt, wir können jetzt hier eine "Noise", also, eine Unruhe ins Bild bringen, und bei dieser "Noise" können wir verschiedene Typen auswählen, und auch hier die Intensivität. Wie stark diese "Noise", diese Unruhe, hier in dem Fall, sein soll. Das kann man, zum Beispiel, verwenden, wenn man mehrere Füllungen hat. Wir können nämlich hingehen, hier über das Plus, eine weitere Füllung hinzufügen. Dann gelangen wir direkt als erstes hier in die Farbwahl. Ich nehme jetzt hier mal "Vollflächig", wähle hier, von mir aus, so einen Grauton aus, und wie wir jetzt sehen können, haben wir in dem Fall jetzt zwei Füllungen. Wir können diese aber jetzt umsortieren, damit man dann in dem Fall auch die "Noise" sieht, weil diese liegt jetzt mit 60 % drüber. Vorher war es halt so, dass grau mit 100 % die "Noise" verdeckt hat. Wir müssten also hierhin gehen jetzt und den Wert einfach mal etwas runter setzen, um auf ein ähnliches Ergebnis zu kommen. Ja, ist natürlich ganz praktisch, dass man die Reihenfolge ändern kann, weil dann ist der Effekt natürlich auch ein anderer. Wir müssten hier dann natürlich immer mit den Werten nacharbeiten und gucken, wie das Ganze hier interessant dann aussieht. Ja, und auf diese Art und Weise kann man mehrere "Fills" sich hier erstellen, -- So. -- und diese alle übereinander lagern, mit verschiedenen Intensivitäten, mit einer unterschiedlichen Reihenfolge und so weiter. Wenn man eine "Fill" wieder löschen will, dann kann diese erst mal temporär an- und aushaken, um zu gucken, wie es denn dann aussieht. Und außerdem, sobald wir einen Haken wegnehmen, erscheint hier ein Mülleimer. Und ich gehe jetzt hin und wähle beide Elemente ab, beide "Fills", beide Füllungen, und kann jetzt auf den Eimer klicken, und dann werden automatisch die gelöscht, die ich deaktiviert hatte. So, ich setzte das jetzt mal wieder auf 100 % und bin somit wieder bei meinem Ursprung. Ja, und jetzt, wollen wir nämlich hingehen und das Ganze in den Farben anlegen, wie es dann nachher auch sein soll. Das heißt, diese Bar hier, dieser Balken, der soll eine vollflächige Farbe haben, und zwar hat er in dem Fall den Farbton: "2abffc". So, das ist dieser Blauton hier. Dann wähle ich den grauen Bereich aus. Auch der hat eine volle Fläche, und in dem Fall ist das: "f1f1f1". Jetzt habe ich aber versehentlich das hier weggeklickt. "f1f1f1". So, man sieht noch nicht viel davon, denn die "Opacity" steht noch auf 10 %. Wenn ich das jetzt hoch ziehe, dann haben wir hier ein ganz leichtes Grau an der Stelle. "f1f1f1". Okay, als nächstes benötige ich noch einen Verlauf auf diesen Buttons hier. Dazu wähle ich mir den Button aus, klicke hier auf "Verlauf", und in dem Fall soll der Verlauf tatsächlich von weiß auf ein ganz helles Grau gehen, und zwar ist das Grau in den Fall hier: "e1e1e1". Somit habe ich jetzt hier meinen leichten Verlauf. Die beiden anderen Kreise sollen den gleichen Verlauf kriegen, deswegen können wir uns den Stil kopieren. Entweder über "Command+Alt+C" oder per Rechtsklick können wir hier auch sagen: "Copy Style". Dann wähle ich die anderen beiden aus und sage hier an dieser Stelle: "Paste Style", oder halt in dem Fall "Command+Alt+V". Und somit wird der Verlauf hier, wie man sieht, übertragen. Wie wir sehen, war ein ganz dezenter Verlauf, aber das ist genau das, was ich mir hier für mein Interface vorgestellt habe. Also, wie wir gesehen haben, ist es sehr leicht, mit Füllungen zu arbeiten, ob es jetzt in dem Fall Verläufe sind, oder ob es irgendwelche Bilder sind, die man verwenden möchte, oder ein Rauschen oder Ähnliches. Wie wir sehen, funktioniert das in Sketch hier sehr, sehr intuitiv und einfach.

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!