Erstellung von Symbolen für Lebensmittelarten

Kontext

Um eine gute Schriftart für Symbole zu erstellen, müssen ein paar wichtige Schritte befolgt werden. Mit dieser kurzen Anleitung kannst du eine tolle Symbol-Schriftart für deine App erstellen.

Kennzeichnung der Symbole

Hier sind die Buchstaben, die wir derzeit verwenden, um die verschiedenen Lebensmittelarten im Management Center zu identifizieren:

• A - Vegetarisch
• B - Vegan
• C - Alkohol

Bitte beachte: Innerhalb der Kanäle wird die Farbe auf Basis der Symbol-Schriftfarbe definiert, die in der Anpassungsdatei angegeben ist. Wenn also Veganer und Vegetarier grün sind, wird das Symbol in allen Kanälen ebenfalls grün sein.

Im MC kann der Benutzer den Alkohol-Tag in der Symbol-Lade „special food type“ (Spezielle Lebensmittelart) auswählen.

Anleitung

1. Lade, installiere und öffne FontForge. Es ist ein kostenloser Open-Source-Schriftarteneditor, der für Windows, macOS und Linux verfügbar ist. Er eignet sich hervorragend für alle, die ihre eigenen einzigartigen Symbol-Schriftarten erstellen möchten:
   
   
   
2. Wenn du das Programm öffnest, musst du als Erstes die richtigen Schriftarten eingeben. Nur so kann sichergestellt werden, dass die Schriftart in unserem System erkannt wird und richtig funktioniert.
   Also:
   -  Klicke auf Element in der oberen Menüleiste
   - Wähle dann Font Info (Schriftart-Info) aus dem Dropdown-Menü (wie auf dem ersten Bild)
   - Nachdem du das Font Info-Fenster geöffnet hast, solltest du drei Eingabefelder sehen. Trage in jedes dieser Felder den Namen deiner Schriftart als iconfont ein. Nachdem du den Namen in alle drei Felder eingegeben hast, klicke auf die Schaltfläche OK, um die Änderungen zu bestätigen und zu speichern (wie auf dem zweiten Bild):
   
   
3. Nachdem du die Schriftartdetails gespeichert hast, musst du im nächsten Schritt die veganen und vegetarischen Symbole, die du zuvor erstellt hast, als SVG in einem Vektor-Editor wie Illustrator hinzufügen. Dazu musst du die entsprechenden Buchstaben auswählen und die entsprechenden SVG-Symbole in diese Buchstaben importieren.  
   Wähle den Großbuchstaben A, um die vegetarische Option zu repräsentieren, und den Buchstaben B, um die vegane Option zu repräsentieren. Doppelklicke auf den gewählten Buchstaben, um die Seite zu öffnen:
   
   
   

4. Nachdem du die Seite innerhalb des gewählten Buchstabens geöffnet hast, gehe in der oberen Menüleiste auf File (Datei) und wähle Import (Importieren). Gehe zu dem Ort, an dem sich die SVG-Symboldatei auf deinem lokalen Laufwerk befindet und klicke auf die Schaltfläche Import (Importieren). Dadurch wird das SVG-Symbol in den ausgewählten Buchstaben eingefügt, wie unten gezeigt:

5. Sobald die Symbole importiert wurden, musst du sie richtig ausrichten – das ist sehr wichtig. Dazu musst du das Symbol mit CMD+A oder STRG+A (je nachdem, ob du mit Mac oder Windows arbeitest) auswählen und seine Ausrichtung nach Bedarf anpassen. Nachdem du das Symbol ausgerichtet hast, klicke auf die Schaltfläche Close (Schließen), um die Änderungen zu speichern und den Glypheneditor zu schließen:
   

6. Nachdem du alle oben genannten Schritte ausgeführt hast, solltest du sehen können, dass das vegetarische Symbol erfolgreich in den Buchstaben A eingefügt wurde:
   
   
   Bitte beachte: du musst genau die gleichen Schritte wiederholen, um den Buchstaben B und C ein veganes Symbol hinzuzufügen.
   
   

7. Der letzte Schritt besteht darin, die erstellte Schriftart zu exportieren. Wenn du diesen Schritt abgeschlossen hast, sollte deine Symbol-Schriftart voll funktionsfähig sein und dem Customization Center hinzugefügt werden können. Gehe dazu auf File (Datei) und klicke auf Generate Fonts (Schriftart erstellen). Wähle dann in den Optionen das Format OpenType und den Speicherort, in den die Schrift exportiert werden soll:
   Danach musst du nur noch auf Generate (Erzeugen) klicken, um den Vorgang abzuschließen.

Und das war's schon!