Generieren von Schriftsymbolen aus Sketch

Es gibt verschiedene Möglichkeiten, wie Symbole im Web verwendet werden können, wobei SVGs und Schriftsymbole die beliebtesten Formate sind. In diesem Artikel wird erläutert, wie Sie die Symbole exportieren, um sie mit einem einzigen Klick in Schriftsymbole zu konvertieren.

Warum Schriftsymbole? Schriftsymbole sind für Entwickler einfach zu verwenden. Sie können den Symbolen ganz einfach eine Schriftgröße oder eine beliebige Farbe beim Codieren zuweisen. Dadurch haben Sie die volle Kontrolle über ihren Stil. Wie erstellen wir Schriftsymbole?

Der Prozess

Erstellen Sie eine Symbolbibliothek

Erstellen Sie Symbolsymbole in Sketch, sofern Sie noch keine Symbolbibliothek haben. Sie können mit einer 24x24 Zeichenfläche zum Erstellen von Symbolen beginnen, da dies normalerweise ein guter Standard ist und leicht skaliert werden kann. Wenn Sie erfahren möchten, wie Sie in Sketch eine dynamische Symbolbibliothek erstellen, lesen Sie diesen Artikel. Für diesen Artikel habe ich auch eine Sketch-Ressource mit 4 Symbolen erstellt, falls Sie keine Symbolbibliothek haben. Sie können es hier herunterladen.

Erstellen Sie eine Reihe von Symbolen

Wandeln Sie Striche in Konturen um

Wenn Sie für eines Ihrer Symbole Rahmen / Striche verwendet haben, müssen Sie diese in Konturen umwandeln, bevor Sie fortfahren. Schriftsymbole sind eine einzige Form und funktionieren nicht mit Rahmen.

Sie können die Teile des Symbols auswählen, die Konturen sind, und dann Ebene> In Konturen konvertieren auswählen. Eine Abkürzung dazu ist einfach die Tastenkombination Umschalt + Befehlstaste + O.

Kombinieren Sie die Formen zu einer einzigen Form

Damit ein Symbol ein Schriftzeichensymbol ist, muss es sich um eine einzelne kombinierte Form handeln. Sie können dies über die Skizzensymbolleiste tun. Wählen Sie zwei Ebenen aus, die Sie kombinieren möchten, und wählen Sie die Boolesche Operation aus, die Sie ausführen möchten. Wiederholen Sie diesen Vorgang, bis Sie eine einzige kombinierte Form haben.

Sie können diese booleschen Operationen in der Symbolleiste verwenden, um eine einzelne kombinierte Form zu erstellenWie Ihr Icon aussehen soll, wenn Sie alles zu einer einzigen Form kombinieren

Wenn Sie Probleme beim Kombinieren der Formen haben, habe ich eine Ressource mit 4 Symbolen, die alle komplexe Formen sind, sodass Sie mit ihnen interagieren und sehen können, wie sie hergestellt werden. Sie können die Sketch-Datei hier herunterladen.

Exportieren Sie die Symbole als SVGs in einen Ordner

Wählen Sie alle zu exportierenden Symbole aus, machen Sie sie exportierbar und wählen Sie SVGs aus der Dropdown-Liste unter den Exportoptionen aus. Sie können dies unter Voreinstellungen in der rechten Seitenleiste tun. Exportieren Sie alle Dateien in einen einzelnen Ordner, um sie einfacher zu finden.

Exportieren Sie die Symbole als SVGs in einen Ordner

Laden Sie alle Symbole auf Icomoon hoch

Nachdem alle Symbole im SVG-Format vorliegen, öffnen Sie Icomoon (kostenlos) und klicken Sie auf "Symbole importieren". Wählen Sie alle Symbole aus, die Sie in Schriftsymbole konvertieren möchten, und laden Sie sie hoch. Sie müssen sich nicht einmal anmelden, um dies zu tun, und Ihre Symbolbibliothek bleibt immer online, wenn Sie icomoon besuchen, solange Sie von demselben Gerät aus zugreifen.

Wie es aussehen sollte, nachdem Sie die SVGs hochgeladen haben

Konvertieren Sie die Symbole in Schriftsymbole

Sobald wir alle Symbole hochgeladen haben, wählen Sie sie alle aus und klicken Sie unten rechts auf der Seite auf Schriftart generieren. Sie sehen nun eine Liste aller erstellten Glyphen und können sie einfach unten rechts auf der Seite herunterladen.

Sie können jetzt die Schriftsymbole für diese SVGs herunterladen

Das ist es! Jetzt können wir den Entwicklern einfach die ZIP-Datei geben und sie können den Inhalt verwenden, um die Schriftsymbole auf der Website zu verwenden.

Danke fürs Lesen! Wenn Sie erfahren möchten, wie Sie eine dynamische Symbolbibliothek erstellen, lesen Sie diesen Artikel.