Skizzenanleitungen

87 Stunden deines Lebens mit Sketch zurückfordern

Erstellen Sie Hunderte von Text- und Ebenenstilen automatisch in wenigen Minuten

Foto: Sauerstoff / Getty Images

Als Sketch 52 herauskam, wurde die Möglichkeit eingeführt, Symbole mithilfe von Textstilen und Ebenenstilen zu überschreiben, anstatt diese schrecklichen Farb- / Textsymbole erstellen zu müssen. Erinnerst du dich an diese? Ew.

Während dies für Leute wie mich ein gewaltiger Gewinn war, die bereits sehr pingelig waren, Textstile zu erstellen und zu pflegen, hatte das Klagen über die Notwendigkeit, Textstile zu erstellen, in Designer News und Twitter bereits begonnen.

Zum einen begrüße ich die Änderung mit offenen Armen und einem Korb mit Backwaren, aber ich verstehe, dass es eine etwas mühsame Aufgabe ist, Textstile zu erstellen.

Fürchte dich nicht, Designer-Typen und -Dudettes, ich bin gekommen, um dich zu retten.

In diesem Tutorial zeige ich Ihnen, wie ich das Erstellen von Hunderten von Text- und Ebenenstilen automatisiere, damit ich sie beim Erstellen meiner Symbole in Sketch verwenden kann.

Bedarf

  • Benennen Sie es Plugin von Rodrigo Soares
  • Suchen und Ersetzen von Plugins durch Autre Planete
  • Sketch Styles Generator von Luca Orio
  • Die Geduld!

Was wir machen

Es gibt 972 benannte Textstile im Raster darunter. Die werden wir machen.

Schritt 1

Richten Sie Ihre Basistypografie-Größen ein. Nachdem ich drei Jahre lang dasselbe gemacht hatte, stellte ich fest, dass ich nie mehr als neun Größen benötige (und ich verwende selten die größten).

Schritt 2

Benenne deine Ebenen. Dies ist von entscheidender Bedeutung, da unser Plug-in für den Stilgenerator die Ebenennamen verwendet, um Stile zu generieren.

Um das Ordnersystem von Sketch für gespeicherte Stile zu nutzen, verwende ich gerne die folgende Benennungshierarchie:

00 GRÖSSE / FARBE / TRANSPARENZ - AUSRICHTUNG

  • 00: Dadurch werden meine Textstile im Menü für gespeicherte Stile in der Reihenfolge ihrer Vergrößerung beibehalten (siehe unten).
  • GRÖSSE: Dies ist der Name meines Textstils. Sofern Sie dies nicht möchten, sind sie nicht für die Zuordnung zu tatsächlichen HTML-Tags vorgesehen. Ich finde es viel einfacher, sich Textstile und ihre relative Größe zu merken, wenn sie Namen haben (anstelle von H1, H2, H3 usw.).
  • FARBE: Dies ist die Farbe des Textstils. Mit Ausnahme von Schwarzweiß empfehle ich die Verwendung generischer Namen für Ihre Farben (Primär, Sekundär, Akzent 1, Akzent 2 usw.), da Sie diese Farbe möglicherweise später ändern. Es wäre schade, wenn 104 "rote" Stile verwendet würden, wenn sich die Farbe in Blau geändert hätte.
  • TRANSPARENZ: Ich habe bereits darüber gesprochen. Weitere Informationen finden Sie in Abschnitt 3 dieses Artikels. Grundsätzlich ist dies die Helligkeit dieser bestimmten Farbe.
  • AUSRICHTUNG: Links, Mitte, rechts. So wird Ihr Text ausgerichtet.

Sobald Sie Ihre fünf bis zehn Basistextebenen entsprechend der obigen Struktur benannt haben, können Sie mit Schritt 3 fortfahren.

Schritt 3

Markieren Sie alle Textebenen und duplizieren Sie sie. Führen Sie das Plug-in "Suchen & Ersetzen" aus, während die neuen Duplikate noch ausgewählt sind, und ersetzen Sie die Ausrichtung:

Vergessen Sie nicht, die Ausrichtung dieser Ebenen zu ändern. Ich neige dazu, diesen Schritt zu vergessen.

Spülen und wiederholen Sie dies für alle Ausrichtungen (Links, Mitte, Rechts).

Schritt 4

Jetzt werden wir die gleiche Aktion ausführen, um Transparenz zu duplizieren / zu finden / zu ersetzen. Ich mag es, drei Ebenen zu erstellen: Standard, Leicht und Leichter.

Ich verwende diese Namen absichtlich, weil Sketch Ihre Ebenenstile alphabetisch sortiert. Fühlen Sie sich frei, sich Ihre eigenen Namen auszudenken, aber ich empfehle, diese in diesem Stilmenü in transparenter Reihenfolge zu halten. Benennen Sie sie also entsprechend:

Vergessen Sie auch hier nicht, die Transparenz der duplizierten Ebenen zu ändern. Normalerweise mache ich 100%, 50% und 25%.

Spülen und wiederholen Sie dies für alle Deckkraftstufen (Standard, Hell, Hell).

Schritt 5

Genial. Sie haben soeben einen so genannten „Mustersatz“ von Textstilen mit drei Ausrichtungen und drei Deckkraftstufen erstellt. Das sind viele Textstile!

Jetzt werden wir dieses Master-Set verwenden, um schnell Master-Sets für eine Reihe verschiedener Farben zu erstellen!

Duplizieren Sie die soeben erstellten Master-Sets für so viele Farben, wie Sie benötigen. Verwenden Sie das Plugin Suchen & Ersetzen, um den Farbnamen und die Farbe zu ändern:

Schritt 6

Sobald Sie dies für alle gewünschten Farben getan haben, können Sie das Styles Generator-Plugin ausführen!

Markieren Sie alle soeben erstellten Textebenen und wählen Sie "Gemeinsame Stile erstellen", um Stile zu erstellen! Wenn Sie das Plugin richtig installiert haben, finden Sie es unter Plugins → Styles Generator → Generate Shared Styles.

Warnung: Es kann ein oder zwei Minuten dauern. Sie generieren mehrere hundert Textstile gleichzeitig. Geben Sie ihm also Zeit, um seine Sache zu erledigen. Holen Sie sich eine Tasse Kaffee oder stören Sie Ihre Kollegen.

Wenn Sie fertig sind, sollten Sie eine schöne Liste gespeicherter Stile haben, damit Sie sie in Ihren Designs und Symbolen verwenden können:

Schritt 7

An diesem Punkt sind Sie fertig, aber ich möchte hinzufügen, dass Sie gerade einen schönen Stilleitfaden erstellt haben, mit dem Sie massenweise Änderungen an Ihren gespeicherten Textstilen ganz einfach vornehmen können.

Klicken und ziehen Sie einfach, um alle Textebenen in einer der Farbzeilen hervorzuheben, ändern Sie die Farbe mithilfe der Farbauswahl im Inspektorfenster und aktualisieren Sie die Stile in der Dropdown-Liste „Darstellung“:

Verwenden Sie den Farbwähler, um die Farbe zu ändern ...… Dann aktualisieren Sie den Textstil, indem Sie auf das Menü Darstellung klicken und „Textstil aktualisieren“ auswählen.

Sketch ist intelligent genug, um alle individuellen Attribute der einzelnen Textstile beizubehalten. Wenn Sie also die Farbe aktualisieren, bleiben Ausrichtung und Transparenz unverändert. Ich liebe dich, Sketch.

Das ist es!

Sie haben in etwa fünf Minuten mehrere hundert Textstile generiert. Sie können dieselbe Methode zum Generieren von Ebenenstilen für Elemente wie Farben und Ränder verwenden:

Weil ich Sie alle liebe, gebe ich Ihnen eines meiner Text-Stylesheets. Diese Datei enthält 972 Textstile in verschiedenen Farben, Ausrichtungen und Transparenzstufen. Bitte!