Erstelle deine eigene Symbolschrift mit Inkskape, Glyphter und IcoMoon für Joomla!
Icons oder Symbole könnten ein wertvolles Gestaltungselement in deinem Web-Projekt sein. Sicher weißt du schon, dass du viele freie oder auch kommerzielle Icon-Sets im Internet findest. Oft sind diese in großen Frameworks enthalten. Bootstrap 3 Glyphicons ist nur eines von vielen Beispielen. Vielleicht ist für dich aber nichts Passendes dabei oder du möchtest dich von der großen Masse der Joomla! Erweiterungen mithilfe eines eigenen Designs abheben. Dann kannst du deine eigenen Symbole mithilfe einer selbst erstellten Web Font - die anders als der Name vermuten lässt nicht aus zeichen, sondern aus Icons besteht - kreieren.
Ganz grob gibt es zwei Möglichkeiten selbst erstellte Icons zum eigenen Projekte hinzufügen.
- Web- oder Icon-Fonts
- SVG (Scalable Vector Grafics, skalierbare Vektorgrafiken)
Heute will ich mir mit dir Web-Fonts einmal kurz ansehen. Noch vor kurzer Zeit galt die Erstellung einer Schriftart als sehr aufwendig. Dies hat sich aber, dank der einfachen Online-Tools wie IcoMoon, Fontastic oder Fontello, zwischenzeitlich geändert. Jedes dieser Tools ermöglicht es dir eine Schriftart selbst zu kreieren. Auch Joomla! verwendet seit Version 3.0.0 sein eigenes angepasstes Joomla! Icomoon Font Set!
Erstelle deine eigenen Symbole
Also erstes musst du natürlich deine Bilder entwerfen. Wir werden den meistgenutzten Open-Source-Editor für Vektorgrafiken - Inkscape - für diese Aufgabe verwenden. Auch wenn du noch keine Erfahrung im Bearbeiten von Vektorgrafiken hast, musst du nicht aufhören weiterzulesen. Ich erkläre jeden Schritt und falls du wenn du dich gar nicht auf Inkscape einlassen willst, findest du bei jedem Schritt auch eine Link zum Download der SVG-Beispieldateien. Inkscape kannst du entweder "richtig" installieren oder als portable Version verwenden. Downloaden kannst du die Installationsdateien unter inkscape.org. Das Grafikprogramm wird genau wie Joomla! als freie Software entwickelt. Mit diesem Programm lassen sich meiner Meinung nach genauso professionelle Grafiken erstellen wie mit kommerziellen Programmen wie zum Beispiel dem Illustrator von Adobe. Also, falls du Inkscape noch nicht kennst, sieh es dir doch einmal an!
Finde deinen Stil
Bevor du mit dem Zeichnen beginnst, solltest du dir klar darüber werden, welcher Typ von Symbolen zu deiner Erweiterung passt. Sollen sie eher grob oder fein sein? Elegant oder derb? Albern oder seriös?
Am besten beginnst du mit einem Test in verschiedenen Größen. Vielleicht hilft es dir, wenn du eine Vorlage baust und alle deine Zeichen oder Glyphen in diese ziehst. Falls dies deine erste Web Font ist, solltest du folgenden Hinweis beachten: Verzichte auf detaillierte Symbole, die bei niedrigeren Auflösungen nicht erkannt werden! Manchmal ist es so, dass man selbst ganz genau erkennt, welches Symbol man darstellen will. Andere sehen aber etwas ganz anderes darin. Frag einfach einmal ein paar Freunde, was sie in deinem Symbol sehen. Nur so kannst du dir sicher sein, dass deine Symbole auch von der Allgemeinheit richtig erkannt werden. Und das ist ja dein Ziel, oder?
Spaß beim Zeichnen
Wenn du Inkscape noch gar nicht kennst, bietet dir das Basis Tutorial einen guten Überblick. Vielleicht hilft dir dann auch meine Vorlage 'magazin.svg' (Download am Schluss des Artikels). Zumindest beginnen wir dann mit den gleichen Einstellungen. Nachdem du meine Vorlage in der Datei magazin.svg geöffnet hast, siehst du eine quadratische Zeichenfläche. Sonst ist die Datei ganz leer. Wundere dich also nicht :).
Falls du meine Datei nicht nutzen willst, legst du am besten selbst eine quadratische Zeichenfläche in Inkscape an. Welche Einstellungen sonst noch wichtig sind, schreibe ich später.
Öffne nun als erstes im Menü Objekt den Untermenüpunkt "Ausrichten und anordnen....".
Die Werkzeuge hier wirst du später garantiert benötigen.
Öffne nun im Menü Text die SVG-Schriftbearbeitung.
Nun öffnet sich ein weiteres Fenster in dem du die SVG-Schrift bearbeiten kannst.
Als erstes benötigen wir nun eine einfache Grafik. Du hast sicher selbst jede Menge Ideen. Ich zeichne einfach einmal einen Kreis und zentriere den mittig auf der Seite.
Als nächstes wähle ich den Kreis aus, indem ich links auf das Werkzeug zum Auswählen und danach auf den Kreis selbst anklicke. Nun lege ich rechts im Bereich SVG Schriftbearbeitung eine neue Schrift an und wechsele dann ins Register Glyphen.
Genauso kannst du nun alle deine Symbole zu dieser Schrift hinzufügen. Beachte aber dabei, dass
- jeder Strich in eine Füllungen umgewandelt werden muss (Pfad|Kontur in Pfad umwandeln),
- Formen sich nicht überlappen dürfen (alle Formen auswählen und Pfad|Vereinigung) und
- jede Farbe ignoriert wird: Glyphen werden immer in schwarzer Farbe interprediert.
- Und last, but not least der Hintergrund immer transparent – nicht weiß - sein sollte.
Wenn du alle Glyphen gezeichnet hast, kannst du diese als SVG-Datei abspeichern. Diese Vektor-Datei kannst du noch nicht als Icon-Font verwendet werden. Hierzu sind zwei weitere Schritte notwendig.
Erstelle deine Symbolschrift mit Glyphter und IcoMoon
Rufte als erstes die Webseite von Glyphter im Webbrowser auf und klicke auf eine der roten Kacheln.
Es öffnet sich nun ein Fenster, in dem du die eben erstellte SVG-Datei auswählen kannst. Ich hatte diese magazinMitKreis.svg genannt, nachdem ich den Kreis erstellt hatte. Falls du dies nicht mitgemacht hast, kannst du die Datei 'magazinMitKreis.svg' verwenden (Download am Schluss des Artikels).
Je nachdem wie viele Grafiken du angelegt hast, siehst du nun die gefüllten Kacheln. Hier im Beispiel ist das nur ein Kreis, weil ich ja auch nur einen Kreis in der Datei gespeichert hatte.
Wie in der nächsten Abbildung könnte es aussehen, wenn du mehr Symbole in deiner Inkscape-SVG-Datei gespeichert hast. Willst du Glyphter.com auch einmal mit mehren Dateien testen, hast aber selbst noch keine SVG-Schrift mit vielen Glyphen erstellt? Dann kannst du gerne auch meine Datei 'design.svg' verwenden (Download am Schluss des Artikels).
Nun kannst du dir mithilfe der Schaltfläche Font, die Symbole als Zip-Archiv auf deinen Rechner kopieren. Wahrscheinlich heißt dieses herunterladene Datei bei dir auch glyphter-font.zip. Bei wurde die Datei zumindest von Glypher.com so benannt.
Entpacke das heruntergeladene Archiv, also die Datei glyphter-font.zip.
Dies Datei sollte folgende Dateien und Ordner enthalten:
- css
- glyphter.css
- fonts
- glyppter.eot
- glyphter.svg
- glyphter.ttf
- glyphter.woff
Wähle die SVG-Schrift im Unterverzeichnis fonts. Sicherlich heißt die Datei auch bei dir glypther.svg. Vielleicht wunderst du dich nun, warum du die von dir erstellte SVG-Datei nicht sofort verwenden kannst. Diese Datei enthält noch icht alle Informationen, die für den Import in die Iconmoon-App oder die Verwendung als Web Font erforderlich sind.
Du könntest nun zwar schon das glyphter-font.zip Archive nutzen. Iconmoon bietet dir aber sehr viele tolle Weiterbearbeitungsmöglichkeiten. Sieh dir diese einfach einmal an. Alles ist sehr intuitiv und benutzerfreundlich.
Öffene also nun die Icomoon-App und importiere die von dir eben entpackte glyphter.svg über die Schaltfläche Import Icons.
Du siehst nun alle deine Glyphten in der Icomoon-App. Dort lassen sich die Icons wirklich gut weiterverarbeiten. Klicke dazu auf den Stift in der Werkzeugleiste.
Anschließend wählst du alle Icons die du als Symbol in deiner Anwendung nutzen willst aus und exportierst die nun "fertige" Schrift.
Wieder lädst du ein ZIP-Archiv herunter. Das Archiv wird standardmäßig Icomoon.zip genannt.
Nun kannst du diese einfach in deinem Webprojekten verwenden. Wenn du noch nie eine Web Font in eines deiner Projekte eingebunden hast, findest du im Icomoon Archive viele Beispiel, an denen du dich orientieren kannst. Sieh dir am besten die demo.html im Stammverzeichnis des Icomoon-Archives an. Hier ist jedes Zeichen eingebunden und kannst genau sehen, welche CSS-Datei du einbinden musst und über welche Klasse du welches Zeichen sichtbar machst.
Fehlt dir irgendwann ein Icon, weißt du nun, wie dieses leicht in deine Symbolschrift gelangt.
Ich habe für mich festgestellt, dass ich auf diese Art und Weise sehr schnell eine individuelle und passende Web Font erstellen kann. Aber jeder ist und arbeitet anders. Außerdem braucht es sicherlich Zeit, um die perfekte Arbeitsweise zu finden, denn InkScape und IcoMoon bieten eine ganze Menge.
Ich wünsche dir viel Spaß beim Ausprobieren und hoffe das dieser Beitrag hilfreich ist.
Quellen:
Wie aus einem Icon ein Webfont wird.
In wenigen Schritten eigene Icons als Icon-Font erstellen
