Tipp: Um eine gepunktete Linie zu erstellen, legen Sie den Endtyp auf eine runde Kappe fest, und legen Sie dann den Bindestrichwert auf 0 fest. Das Anpassen der Spaltentfernung ändert das Aussehen des gepunkteten Rahmens. Sie können auch das Uhrsymbol über der Bildvorschau saugen, um häufig verwendete Bilder in Ihrem Dokument anzuzeigen, oder ein grundlegendes Muster oder Rauschfüllungen aus den globalen Voreinstellungen unten auswählen. Winkelgradienten platzieren beliebige Farbpunkte, die Sie erstellen, auf einem Kreis (basierend auf der maximalen Höhe oder Breite eines Layers). Sie können die Punkte ziehen, um ihre Position anzupassen, oder auf den Kreis klicken, um neue Punkte hinzuzufügen. Diese Zeichentafel wird das Muster halten, das wir wiederholen möchten. Die Zeichentafel muss nicht diese Größe oder sogar ein Quadrat sein, aber um dieses Tutorial einfach zu halten, halten wir es in dieser Größe. Für das erste Muster werden wir so etwas schaffen… Angenommen, Sie möchten ein Muster erstellen, bei dem es eine Überlappung wie im folgenden Beispiel gibt. Um dies zu tun, müssen Sie in ein wenig Mathematik arbeiten sowie etwas Zeit brauchen, um ein wenig zu experimentieren.
Natürlich, je mehr Sie es tun, desto einfacher wird es, Muster wie diese zu erstellen. Wiederholen Sie den letzten Schritt, um Ihre H1-bis-H6-Elemente zu erstellen. Meine Überschrift Schriftgrößen sind H1: 37pt, H2: 31pt, H3: 25pt, H4: 21pt, H5: 18pt und H6: 15pt. Da jede Überschrift eine Textformatvorlage ist, werden alle Änderungen auf alle anderen Instanzen angewendet. Ich habe das Werkzeug “Typskala” von Jeremy Church verwendet, um die Größe meiner Überschriften zu bestimmen. Type Scale verwendet die modulare Skala, um proportionale Schriftgrößen auszuwählen, abhängig von dem ausgewählten Verhältnis. Nichts überschneidet sich, und es ist ziemlich klar, was innerhalb des Quadrats sitzen wird, das wir gerade geschaffen haben. Lassen Sie uns also eine Hintergrundfarbe erstellen. Wenn die Zeichenfläche ausgewählt ist, sollte die Option angezeigt werden, eine Hintergrundfarbe auf der rechten Seitenseite des Skizzenfensters hinzuzufügen. Stellen Sie sicher, dass aktiviert ist, wählen Sie die gewünschte Farbe aus (ich verwende #E6E1DD), und stellen Sie schließlich sicher, dass der Umschalter “in export ieren” ausgewählt ist. Ohne das, wenn wir versuchen, das Muster zu erstellen, wird die Hintergrundfarbe, die wir gerade gemacht haben, fehlen.
Um Symbole in Aktion anzuzeigen, ändern Sie die Hintergrundfarbe einer Schaltfläche. Beachten Sie, wie sich die Farbe für beide ändert. Wenn Sie jedoch den Text einer Schaltfläche ändern, ändert sich der Text der anderen Schaltfläche nicht. Nur die Stile sind synchron, nicht die Textzeichenfolgen. Das bedeutet, dass wir z. B. Anmelde-, Jetzt-kaufen-Buttons und Kontakt-Buttons erstellen können, die alle den gleichen Stil haben. Wählen Sie ein Farbmuster aus und klicken Sie auf die Füllfarbe im Inspektor.
Am unteren Rand der Farbauswahl werden Sie zwei Abschnitte bemerken: Globale Farben und Dokumentfarben. Globale Farben werden für alle Sketch-Dokumente gespeichert, die Sie erstellen, während Dokumentfarben für jedes Dokument eindeutig sind.