Scharfe / pixelgenaue Icons Font in Illustrator für Iconmoon anlegen

BLOG

Selber Iconfonts erstellen: Hier beschreibe ich wie man mit Illustrator pixelgenaue und kantenscharfe Icons anlegt um diese in icomoon zu importieren.

Selber Iconfonts erstellen: Hier beschreibe ich wie man mit Illustrator pixelgenaue und kantenscharfe Icons anlegt um diese in z.B. Icomoon (Iconmoon ist ein Service zum einfachen erstellen von Iconfonts. ) als SVG zu importieren.

Anhand der folgenden Abbildunge ist gut zu erkennen was kantenscharfte Icons ist und was nicht.


Zuerst ermittelt man die Schriftgröße in welcher die Icons scharf angezeigt werden soll. In diesem Beispiel nehme ich 16px. Die werden also bei 16px, 32px, 48px, usw. scharf aussehen.

Die Icons in Illustrator erstellen:

Wir legen eine neu Zeichenfläche mit den Maßen 512px × 512px an. Anschließend erstellet man nun ein Raster für die gewünschte Größe der Icons. In unserm Fall 512 ÷ 16 = 32.

In diesem Raster erstellt man alle Icons.

Die fertigen Icons speichert man als SVG. ich nehme dafür folgende Einstellungen:

Nach dem Import in Icomoon kann man leicht kontrollieren ob die Icons richtig angelegt sind (in dem man das edit Werkzeug benutzt). 

Wenn man sauber arbeitet und in Illustrator „Am Raster ausrichten“ einstellt ist es recht einfach scharfe Icons zu erstellen.

Tipp: Ich lege immer mehrere Zeichenflächen in einem Dokument an und benenne diese so wie die Icons heissen sollen.
Diese Bezeichnungen übernimmt Icomoon beim Import.
Quelle: http://asimpleframe.com/writing/custom-icon-font-tutorial-icomoon