Wie man sein eigenes Icon Webfont macht
In diesem Artikel werde ich die Wissenschaft hinter der Erstellung erfolgreicher UI-Symbole untersuchen, bevor ich Ihnen beibringe, wie Sie Ihre eigene einbettbare Symbolschrift erstellen können .
Von der Gestaltung der einzelnen Icons bis hin zur Konvertierung @font-face Einbetten und sogar Lizenzieren für den Vertrieb verwenden wir nur freie Software und Online-Dienste. Wie ist es damit? Sie müssen sich nicht auf das esoterische Wissen verlassen, das für erfolgreiche alphanumerische Schriften erforderlich ist. nur ein Auge für die Gestaltung von Dingen, die sehr, sehr klein erscheinen mögen.
Letztendlich sollte man einen Prozess zur Gestaltung von Designelementen aufgeben, der weit über die Herstellung einfacher Icons hinausgeht.
Bevor wir fortfahren, sollte etwas darüber gesagt werden, was wir genau versuchen achieve durch die Verwendung von Symbolen in unseren Designs an erster Stelle, und was macht eine Ikone erfolgreicher als die nächste. Theorie vor der Anwendung. Um dies zu erreichen, müssen wir die Rolle der Ikone als Teil der Semiologie betrachten.
Was macht ein gutes Symbol?
Semiologie Im weitesten Sinne ist das Studium der Zeichensysteme , wie wir zu ihrer Bildung und Erhaltung beitragen und welchen Einfluss sie auf unser Verständnis der Welt innerhalb und außerhalb von uns haben.
Wann immer Sie einen Teil Ihrer Designarbeit aus der Perspektive dessen betrachten, was es ist bedeutet - was es zu deinen Zuhörern sagt oder welche Konzepte es an sie erinnert - du überlegst dein Design als Semiotiker. Obwohl die Semiologie, wie die Linguistik, die Sprache abdeckt, gibt es auf einer Website noch viel mehr Dinge, die etwas sagen, ohne Worte, wie Farben, Schriften und die Formen, die wir als Symbole bezeichnen . Man sollte vorsichtig sein, dass das, was diese Dinge sagen, eine starke kulturelle Dimension hat. In China Die Farbe Rot kann Glück bedeuten, während sie in vielen westlichen Ländern als Gefahr bezeichnet wird.
(Basierend auf einem Bild von ell braun )
Der Begriff "Ikone" hat auf dem Gebiet der Semiologie eine besondere Bedeutung. Ein Icon ist ein Artefakt, das etwas bedeutet, indem es ihm ähnelt. Nehmen Sie zum Beispiel ein Kartensymbol . Als eine Form, die einem "echten" Pin ähnelt, ist es in der Lage, es zu bezeichnen. Der echte Map-Pin erinnert wiederum an sinnvolle Konzepte . Zu diesen gehören abstrakte Konzepte wie der Ort sowie weniger abstrakte Konzepte wie die Karte, zu der der Pin gehören könnte.
Einige sogenannte Icons sind nicht wirklich ikonisch. Das allgegenwärtige RSS-Icon mit seinem Punkt und zwei konzentrischen Kreissegmenten ähnelt nicht mehr Syndizierung als die Worte "Really Simple Syndication". Die Konfiguration von Shapes, die das RSS-Icon darstellen, bedeutet RSS nach Konvention; Wir haben uns darauf geeinigt, dass dies das ist, wofür sie sind. Ein RSS-Symbol wird richtiger als RSS-Symbol bezeichnet .
Inzwischen hoffe ich, dass erfolgreiche Web-Icons eines oder beide der folgenden zwei Kriterien erfüllen:
- Eine starke Ähnlichkeit mit einer echten Sache, zum Beispiel einem Drucksymbol, das einem tatsächlichen Drucker ähnelt
- Etablierung und damit Vertrautheit als erkennbares Symbol im Zeichensystem
Icon-Schriften gewinnen an Popularität
Symbole wurden lange als gute Möglichkeit zur Verbesserung von UI-Designs angesehen, da sie eine visuelle Kurzschrift darstellen, die das Verständnis einer ansonsten rein textlichen Nachricht unterstützt. Überall in der Webdesign-Community werden Blätter von Ikonenbildern wie Schmuggelware verteilt, wobei jedes Set verspricht, Ihr Design glänzender, verlockender und anklickbarer als das letzte zu machen.
Im Vergleich zu Bildern ist die Idee, eingebettete Schriften für Icons zu verwenden, eine relativ neue Idee. Es ist jedoch eine, die aufgrund der vielen inhärenten Vorteile gegenüber dem Bild (oder background-image ) Methode. ich geschrieben über einige dieser Vorteile auf meinem kleinen Blog Anfang September. Chris Coyier hatte offensichtlich eine ähnliche Idee und brachte die Idee Wochen später einem ( viel, viel ) größeren Publikum näher. Ich habe diese umfangreiche Liste von Funktionen zusammengestellt, die auf den beiden Posts und anderen basiert:
- Sie können leicht ohne Degradierung skaliert werden (weil sie im Wesentlichen Vektoren sind)
- Ein erneutes Füllen des Symbols ist so einfach wie das erneute Verfärben von Text. Beispielsweise,
color: orangefür ein RSS-Symbol - Viele Icons sind in einer Datei gruppiert und benötigen nur eine HTTP-Anfrage
- Wie Chris hervorhebt, handelt es sich um Formen mit transparenten "Knockouts", die in Browsern bereits im IE6 funktionieren (im Gegensatz zu Alpha-PNGs).
- Bei Symbolen, die neben Text angezeigt werden sollen, sind Ausrichtung und Umbruch keine Probleme (weil sie Text sind)
- Sie können CSS3-Effekte über anwenden
text-shadowundbackground-clip:textdas respektiert die Form der Glyphe - Im Gegensatz zu SVG ist die browserübergreifende Unterstützung einfach zu erreichen
Probleme
In den Worten von Chris ist die Verwendung von Schriftarten für Symbole eine gute Idee, sage ich dir
. Nichtsdestoweniger ist der Status quo bezüglich der Verwendung von Symbolschriften nicht ideal. Erstens, die meisten der verfügbaren Qualitätsschriften, genannt Dinge wie Bilder , Fico , Klepto, Cheetos, Ponyo und Sailor Moon (Ich habe einige davon falsch), sind bezahlte Schriften. In der Praxis bedeutet das, dass es wirklich zwei Probleme gibt :
- Sie müssen sich vielleicht mit Geld trennen
- Egal, ob du dich von Geld trennen musst oder nicht, du musst die schmutzige Designarbeit anderer akzeptieren
Abgesehen von automatisierten Crawler-Programmen gehe ich davon aus, dass es hauptsächlich Webdesigner sind, die diesen Artikel lesen werden. Ich bin selbst Designer und ich glaube nicht, dass ich die Idee, meinen eigenen Entwurf kompromittieren zu müssen, indem ich mich auf das Handwerk eines anderen setze, allein hasse. Natürlich bin ich noch weniger verliebt in den Gedanken , das Privileg zu bezahlen . Ich weiß, welche Symbole ich verwenden möchte und ich weiß genau, wie ich sie auf mein Gesamtdesign abstimmen möchte. Ich will diese Kontrolle .
Nach einigem Suchen war ich schließlich eingeführt zu den Möglichkeiten von Inkscape SVG Font Editor . Mit ein wenig Übung mit Inkscape und der Hilfe eines Online-Konverters, um meine SVG-Schrift in eine TTF zu verwandeln, konnte ich "Heydings" machen. Diese Schriftart ist jetzt in enthalten Simurais Liste (wie in Coyiers Artikel verlinkt). Ich versuche nicht, dir meine Schrift zu verkaufen (es ist sowieso kostenlos), aber ich denke, es ist ein ziemlich guter Beweis für das Konzept :
Icon-Glyphen mit Inkscape machen
Einrichten von Inkscape
Lass uns anfangen wird heruntergeladen und Installieren von Inkscape. Sie sollten auch meine Vorlage für Symbolschriftarten verwenden, die sich im Ressourcenordner von befindet Dieses GitHub-Repository (mehr zu diesem GitHub-Projekt später). Sobald Sie diese Datei in Ihrer neuen Inkscape-Installation geöffnet haben, sollten Sie Ihren Arbeitsbereich einrichten, indem Sie die folgenden Fenster aus dem Hauptmenü öffnen:
- OBJEKT → FÜLLEN UND HALTEN
- OBJEKT → AUSRICHTEN UND VERTEILEN
- TEXT → SVG FONT EDITOR
Klicken Sie im SVG Font Editor auf "Font 1" unter "Font". Ihr Arbeitsbereich sollte nun ungefähr wie dieser Screenshot aussehen:
Es ist erwähnenswert, dass die Grundlinie Der Guide befindet sich nicht versehentlich unter der unteren Grenze der Zeichenfläche: Aus Gründen, die Ihnen am besten bekannt sind, sollten Ihre Symbole den unteren Rand der Zeichenfläche leicht überragen, wenn Sie möchten, dass sie dieselbe Grundlinie wie angrenzende Schriftarten verwenden. Ich habe das mit Georgia, Arial und einigen Webfonts getestet.
Machen Sie Ihre erste Glyphe
Um das Glyph zu definieren, klicken Sie auf die Registerkarte Glyphs im Bereich SVG Font Editor , und klicken Sie dann auf die Schaltfläche Glyph hinzufügen im unteren Teil des Fensters. Es ist nicht sofort bei der ersten Inspektion klar, aber wenn Sie auf Ihre Glyphe ("Glyph 1") klicken, erscheint ein Feld, in dem Sie das Zeichen eingeben können, dem Sie Ihr Symbol zuweisen möchten. Wir werden zuerst eine einfache Sternform machen, also empfehle ich dir die Zeichen "s", "S" oder "*" einzugeben:
Jetzt, da wir das entsprechende Zeichen der Glyphe definiert haben, müssen wir die Glyphe selbst erstellen. Da wir diesmal nur einen Stern machen, sollten wir Inkscapes hilfreiches Stern- und Polygontool aus der linken Werkzeugleiste auswählen und einen Stern in die Leinwand zeichnen. Sie werden feststellen, dass dieses Tool Optionen enthält, mit denen Sie das Aussehen des Sterns ändern können. In meinem Beispiel habe ich 5 Ecken, ein Speichenverhältnis von 0,5 und einen gerundeten Wert von 0,1 gewählt.
Zentrieren Sie den Stern horizontal mit dem Bedienfeld "Ausrichten und verteilen" (der unter dem SVG-Schriften-Editor verborgen sein kann) und ziehen Sie die Form nach unten, um die Grundlinie zu erreichen. Wenn das Raster deaktiviert ist, sollte die Leinwand ungefähr so aussehen:
Glyphen in unserer Symbolschrift sind nur Formen; Formen ohne Farben, Ebenen oder Farbverläufe. Um unseren Star zu einem legitimen Kandidaten für unsere Schriftart zu machen, müssen wir ihn von einem Objekt in eine pfadbasierte Form konvertieren. Wählen Sie dazu den Stern und wählen Sie PATH → OBJECT TO PATH aus dem Hauptmenü. Jetzt, mit dem ausgewählten Stern, können wir zu unserem SVG Font Editor gehen , das zutreffende "s" Glyph markieren und den Kurven holen Knopf drücken:
Wenn Sie im Feld " Beispieltext " "s" eingeben, sollte Ihr Stern nun als Vorschau angezeigt werden:
Erstellen komplexerer Symbole
Sie haben jetzt Ihr erstes skalierbares SVG-Zeichen erstellt. Durch Verwendung von Optionen aus dem Bereich " Fläche" und " Kontur", Bearbeiten von Pfadknoten und Kombinieren von Objekten und Konturen können Sie viel ambitioniertere Icon-Designs erstellen. Ich möchte nicht auf ein vollständiges Inkscape-Tutorial eingehen, da wir noch viel mehr zu behandeln haben, aber die Beachtung dieser einfachen Regeln wird Ihnen zugute kommen:
- Bleiben Sie bei der Verwendung von schwarzen Strichen und Füllungen, nur um Sie daran zu erinnern, dass die Symbole nur Formen sind, keine komplexen Vektorgrafiken. Das Einfärben des Icons ist im Endprodukt mit CSS möglich.
- Alle Objekte und Striche (Linien) müssen unter Verwendung von PATH → OBJECT TO PATH oder PATH → STROKE TO PATH in Pfade umgewandelt werden
- Mehrere Objekte und / oder Striche, die für ein Symbol verwendet werden, müssen mit PATH → COMBINE (oder unter bestimmten Umständen mit PATH → UNION) kombiniert werden.
- Um Formen aus Formen herauszuschneiden (z. B. mit einem Ausstecher), platzieren Sie die Form, die den "Knockout" erzeugt, über die Hauptform, wählen Sie beide aus und wählen Sie PATH → DIFFERENCE. Weiße Bereiche auf Schwarz, die wie "Knockouts" aussehen, reichen nicht aus, wie Sie feststellen werden, wenn Sie Kurven aus Auswahl holen. Siehe Regel 1.
Vorbereiten der Schriftart zum Einbetten
Stellen Sie sich vor, Sie haben eine Reihe nützlicher Symbole für Ihre Schriftart erstellt, indem Sie die beschriebene Glyphen- Laichmethode wiederholen und die Datei als myicons.svg speichern . Jetzt sollten Sie diese Symbolbibliothek für die Verwendung in Webseiten vorbereiten.
Konvertieren der SVG zu TTF
Die erste Maßnahme, die Sie ergreifen sollten, ist das Konvertieren der @font-face Anforderungen. Online-Dienste, mit denen Sie Schriftarten zwischen Formaten konvertieren können, gehören http://onlinefontconverter.com/ , http://www.fontconverter.org/ und http://www.font2web.com/ . Mein persönlicher Favorit ist jedoch http://www.freefontconverter.com/ weil ich nicht in der Schlange bin und ich habe nie gewusst, dass es irgendwelche Störungen zurückgibt.
Ich werde dich nicht bevormunden, indem ich erkläre, wie man diese Ressource benutzt. Das sukzessive Datei-Upload-Feld, Select-Element und gigantische Convert- Button sprechen wirklich für sich.
Bearbeiten der Metainformationen der Schriftart
Jetzt, da Sie die TTF in der Hand haben, empfehle ich Ihnen, die generierten Metadaten zu bearbeiten. Wenn Sie die Schriftart zu Ihrer Zufriedenheit umbenennen, zuordnen und beschreiben, können Sie sie installieren, einbetten und verteilen . Es ist auch eine Möglichkeit zu zeigen, dass die Schriftart Ihre eigene Arbeit ist. Leser, die Windows verwenden, haben die Möglichkeit, das täuschend große Geräusch zu verwenden Microsoft-Schriftarteigenschaften-Editor oder die Free-for-X-Tage Typograf . Für Apple- und Linux-Benutzer flehe ich diejenigen an, die besser informiert sind als ich, um in den Kommentaren zu helfen.
Der klobige, aber brauchbare Font Properties Editor
Wichtiger Hinweis: Obwohl Sie im Microsoft-Editor für Eigenschaften von Schriftarten Autor, Beschreibung und Lizenzinformationen hinzufügen können, scheint es Ihnen nicht möglich zu sein, grundlegende Daten wie den Namen der Schriftart und den PostScript-Namen zu bearbeiten. Diese Felder sind deaktiviert. Wenn Sie diese spezielle Software verwenden, müssen Sie die verbotenen Werte im SVG-Code vor der TTF-Konvertierung suchen und bearbeiten. Öffne das originale SVG in deinem Lieblingseditor (ich benutze es Notizblock ++ ) und editiere folgendes:
Schriftartname: Gefunden im Tag, font-family Attribut
Postscript Name: Gefunden im Tag, id Attribut
Beschreibung: Sie sollten eine Beschreibung (Autor, Lizenz usw.) in das Tag einfügen. Bitte beachten Sie, dass dies nicht dem TTF-Beschreibungstext entspricht und nicht durch Konvertierung erhalten bleibt. Sie müssen die TTF-Beschreibung separat hinzufügen.
Die Schrift einbetten lassen
Sobald Sie die TTF auf Ihrem lokalen System installiert und eine Vorschau angezeigt haben, um sicherzustellen, dass nichts schief gegangen ist, ist es Zeit, sie durch Font Squirrels auszuführen @ font-face Generator . Um den ausgegebenen Code so effizient und effektiv wie möglich zu gestalten, gibt es im Expertenmodus des Generators einige interessante Optionen:
Subsetting: Mit der Subsetting-Option können Sie nur die Zeichen einfügen, die Sie delegiert haben, wodurch die Dateigröße reduziert wird.
Unterschneidung entfernen: Ihre Symbole erscheinen fast immer isoliert, so dass Unterschneidung (zusätzliche Informationen bezüglich der Nähe von Zeichen zueinander) nicht notwendig ist. Dies wird, angeblich, auch die Dateigröße reduzieren.
WebOnly ™ : Wenn Sie evangelisch sind über Menschen, die Ihre Schriftart wie beabsichtigt verwenden - und nicht darauf zurückkommen, Bilder aus den Glyphen heraus zu machen Photoshonk - Sie können diese Option auswählen. Es könnte auch besser zu Ihrem Lizenzplan passen. Ich werde jetzt die Lizenzierung abdecken.
Verteilen Sie Ihre Schriftart
Wenn Sie daran interessiert sind, Ihre Schriftart zu veröffentlichen, ist es eine gute Übung, eine Lizenz zu vergeben. Viele Schriftarten-Websites werden Ihre Schriftart nicht ohne eine Schriftart enthalten. Da wir freie, Open-Source-Software zur Erstellung der Icons verwendet haben, ist es angebracht, sie als solche zu verteilen.
Es gibt viele Lizenzierungsoptionen, deren Untersuchung manchmal verwirrend ist. Das GNU General Public Lizenz ist vollkommen akzeptabel, aber Sie sollten vielleicht die SIL Open Font Lizenz . Der Hauptvorteil dieser Lizenz ist die Bereitstellung eines reservierten Fontnamens : Andere Designer dürfen Ihre Schriftart ändern, solange sie sie anders benennen. In der Praxis bedeutet dies, dass Verbrechen gegen das Icon-Design nicht "in Ihrem Namen" durchgeführt werden können.
Im Falle einer der beiden Lizenzen sollten Sie eine Version in eine Textdatei einfügen und den Urheberrechtshinweis und einen Link zur vollständigen Lizenz-URL im Meta der Schriftart einfügen. Besuchen Sie die jeweiligen Lizenzierungsseiten (oben verlinkt) für spezifischere Anweisungen.
Das Ende des CSS-Sprites
Warum nicht aufhören, generische Icons mit SVG-Schriften zu erstellen? Mit der Fähigkeit, Icons zu erstellen, ist es möglich, mehr Site-spezifische Formen, Branding-Elemente und Dekorationen zu erstellen. Mögen CSS-Sprites Alle diese visuellen Elemente können in einer Datei gespeichert werden, wodurch Serveraufrufe auf eine einzige HTTP-Anfrage reduziert werden. Im Gegensatz zu CSS-Sprites sind die Elemente sowohl skalierbar als auch unabhängig von Positionskoordinaten (
background-position Werte), um korrekt angezeigt zu werden. Dies macht sie für reaktives Design besonders geeignet .
Lassen Sie uns so tun, als ob ich mich dazu entschlossen hätte, eine SVG-Schriftart zu verwenden, um einige grundlegende Design-Elemente in meiner Vision zu behandeln Steampunk -mögen Blog . Ein einfaches HTML-Table-Rendering der Komponenten-Designs würde etwa so aussehen:
Eines der besten Dinge an diesem Ansatz ist die Vielseitigkeit. Zum Beispiel könnte die zweite Zahnform von links als ein kleines Kugelpunktdesign und eine riesige, abstrahierte Hintergrunddekoration verwendet werden . Malen ist so einfach wie das Verwenden color:maroon , aber es ist nicht notwendig, flache Farben einzuhalten; Eine Vielzahl von CSS3- Effekten kann verwendet werden, um Textur und Taktilität hinzuzufügen. Für eine kleine Inspiration, um Sie zu beginnen, untersuchen Diese ausgezeichnete Galerie von CSS3-verbesserten Webfonts .
Eine kurze Anmerkung zu Bildschirmleseprogrammen
Ein Problem bei der Verwendung von Schriftarten zum Anzeigen von visuellen Elementen auf diese Weise ist die Auswirkung auf Bildschirmleser Ausgabe. Ein Besucher der Website, der visuell liest, sieht Rädchen, Pfeile und dergleichen, aber ein Bildschirmleser wird darauf bestehen, die Zeichen auszulesen, die diese Entwürfe bezeichnen. Für die Verwendung von SVG-Font-Elementen, die dekorativ sind, empfehle ich den Vorschlag von Coyier: Weisen Sie die Vektoren der Zusätzlicher privater Bereich von Unicode. Solche Zeichen sollten nicht von Lesern ausgelesen werden.
Ein kollaboratives Icon Webfont
Als mein JavaScript Mentor, Rupert , sagte mir neulich, die Verwendung von SVG-Fonts zum Erstellen von Icon-Sets bietet eine interessante Möglichkeit für die Zusammenarbeit. Sie sehen, SVG-Code - eine Form von XML - ist hoch standardisiert und leicht lesbar. Es ist genau die Art von Quellcode, der für die Entwicklung geeignet ist, die einen "sozialen Codierungsdienst" wie z GitHub .
Die Idee kam mir wegen ihrer semiotischen Implikationen in den Sinn: Wenn die Befürwortung einer Ikone durch Konsens bestimmt wird , dann sollte sicher auch der Konsens eine Rolle bei ihrer Entstehung spielen. Durch die Zusammenarbeit über unser "Zeichen-System" sollten nur die archetypischsten Ikonendesigns entstehen. Wir sollten in der Lage sein, Ikonenvokabulare zu erstellen, die wirklich zu den Gemeinschaften gehören, für die sie etwas bedeuten sollten.
Ich habe ein öffentliches GitHub-Repository erstellt, um diese Idee zu unterstützen. Namens Gemeinschaftssymbol Schriftart , die Codebasis des Repositories ist nicht komplex: Eine genaue Inspektion des vorhergehenden Inkscape-Tutorials und eine schnelle Lektüre des Projektseite sollte Ihnen alles geben, was Sie brauchen, um sich zu engagieren. Wenn Sie GitHub noch nicht kennen, versuchen Sie es mit ihrem Hilfeseiten oder fragen Sie Ihren Nachbarschaft Technikfreak (das ist was ich tue).