Erstellen Sie benutzerdefinierte Symbolschriften: Erstellen Sie ein exklusives Symbolsystem mit Illustrator und iComoon

Kernpunkte:

• Custom Icon System ist ein wichtiges Designelement in Webprojekten. Tools wie Illustrator und Icomoon k?nnen diesen Vorgang vereinfachen.
• Erstellen Sie eine Symbolschrift, entwerfen Sie zuerst das Symbol im Illustrator und speichern Sie sie als SVG -Datei. Bevor Sie mit dem Zeichnen beginnen, definieren Sie unbedingt die Stileigenschaften der Glyph, wie z. B. Schlaganfallgr??e und Netzskala.
• Nachdem das Symbol als SVG -Datei entworfen und gespeichert wurde, kann es auf ICOMOON hochgeladen werden, um Symbolschriften zu generieren. Mit der ICOMOON -App erm?glicht das Importieren von SVG -Dateien, das Anordnen und Bearbeiten und das Kompilieren in Schriftarten.
• iComoon App enth?lt Icon -Schriftart -CSS -Dateien, die die erforderlichen Browserkompatibilit?tsbehebungen enthalten. Diese Datei enth?lt @font-face Regeln und alle Symbolauswahl, die in der HTML -Website aufgenommen werden k?nnen, wodurch auf Webseiten -Elementen benutzerdefinierte Symbolschriften hinzugefügt werden.

Symbolsysteme sind in der Regel das Kerndesignelement in Webprojekten. Es gibt viele kostenlose oder kommerzielle Symbols?tze online, die normalerweise im Haupt -CSS -Framework enthalten sind (Bootstrap 3 Glyphicons ist ein gutes Beispiel).

manchmal ben?tigen Sie jedoch m?glicherweise eine spezifischere -Glyphe, die nicht im allgemeinen Satz enthalten ist. Oder Sie m?chten das Symboldesign m?glicherweise nur mit anderen Designelementen in Ihrem Projekt besser koordinieren. In diesen F?llen müssen Sie ein neues Symbol von Grund auf neu zeichnen.

Zwei gemeinsame M?glichkeiten zum Hinzufügen von Symbols?tzen zu Ihrem Projekt:

Web -Schriftarten
svg

In diesem Artikel werden Web -Schriftarten eingeführt. SVG wird in einem anderen Artikel behandelt.

traditionell war die Sch?pfung der Schriftart eine schwierige und anspruchsvolle Aufgabe, aber zum Glück ist es dank des Aufkommens einfacher Online -Tools wie ICOMOON, Fontastic oder Fontello viel einfacher geworden, Symbol -Schrifts?tze zu erstellen. Mit jedem Tool k?nnen Sie Schriftarten erstellen, indem Sie vorgefertigte Symbole aus der ?ffentlichen Bibliothek "ausw?hlen" oder Ihre eigenen vorbereiteten SVG-Dateien hochladen und zusammenstellen.

Erstellen Sie Ihr eigenes Symbol

Um Ihre eigenen Symbolschriften zu erstellen, besteht der erste Schritt darin, die Symbole zu entwerfen - wir werden Illustrator für diese Aufgabe verwenden - und sie dann im SVG -Format speichern.

Best?tigen Sie den Designstil

Bevor Sie mit dem Zeichnen beginnen, müssen Sie die Stileigenschaften der Glyphen wie Schlaganfallgr??e, Gitterskala usw. definieren.

Führen Sie zun?chst einige Lesbarkeitstests an verschiedenen Gr??en durch und erstellen Sie eine Vorlage zum Zeichnen aller Glyphen. Die wundersch?n detaillierten Symbole, die Design bei niedrigeren Aufl?sungen nicht funktioniert, sind nutzlos.

Es ist auch nützlich, vor dem Zeichnen Schriftkizzen zu zeichnen, und selbst eine sehr grobe Skizze (siehe unten) kann Ihnen helfen, Ideen für alle Symbole zu finden, die Sie ben?tigen.

Sie k?nnen dann die Netzgr??e für die Glyphe bestimmen. Mein Rat ist nicht, nicht direkt auf die Zielgr??e (z. B. 16x16px) oder sehr gro?e Gr??en zu zeichnen. Stattdessen stellte ich fest, dass ein Gitter von 60-80px normalerweise gut für mich ist. Das Auf- oder Ab von dieser Gr??e ist normalerweise erfolgreich.

Dies ist natürlich keine "eigenst?ndige" Regel: Projektanforderungen und Erfahrung k?nnen von Situation zu Situation variieren.

In diesem Artikel habe ich mich für 8PX -Striche entschieden, um das Symbol zu zeichnen, nicht zu füllen und es in ein 64x64px -Gitter einzustellen.

Zeichnen

Artboards Illustrator funktionieren sehr nützlich: Sie k?nnen jede Glyphe in verschiedenen Artboards zeichnen und jede Glyphe in einer einzelnen Datei speichern. Die ARTboard kann als eigenst?ndige SVG -Datei umbenannt und als eigenst?ndige SVG -Datei exportiert werden (genau das brauchen wir für ICOMOON).

Jedes ARTBOD kann auch unabh?ngige Achsenkoordinaten haben, was für die Objektausrichtung sehr wertvoll ist, die wir sp?ter sehen werden.

Jetzt k?nnen wir ein neues 64x64px -Illustrator -Dokument erstellen:

Beachten Sie, dass Sie mit der Option "Anzahl der Arttboards" alle Artboards erstellen k?nnen, die Sie gewünscht haben.

Jetzt k?nnen wir das Netz einrichten. Wir m?chten, dass es mit jedem Artafel -Ursprung (obere linke Ecke) beginnt und die ARTboard in 8x8 Checkerboard -Netze unterteilt. Schauen wir uns zuvor einen kurzen Blick darauf an, wie das Illustrator -Koordinatensystem funktioniert.

Illustrator Arbeitsbereich

Illustrator Workspace besteht aus einer Leinwand mit einem oder mehreren Artboards.

Die Kunstboote befindet sich auf der Leinwand, beginnend mit einem Punkt, der den Ursprung des globalen Herrschers bezeichnet. Darüber hinaus verfügt jede Artboard auch einen eigenen originellen Ursprung und Herrscher. Wenn Sie mit dem Kunstboard -Tool eine neue Kunstboard finden, werden Sie immer einen globalen Herrscher verwenden. In fast jedem anderen Fall verwenden Sie das ARTboard -Lineal gem?? der Ansicht → Lineal → Wechsel zu den Optionen für die artboard (oder globalen) Herrscher.

Wenn Sie ein globales Herrscher verwenden, wird jedes auf einer Kunstboard gezogene Objekt relativ zu diesem einzelnen Ursprung gezeichnet (d. H.

globales Herrscher -Ursprung

). Andernfalls beziehen sich die Koordinaten auf den Ursprung des es enthaltenden ARTboards. Kurz gesagt, verwenden Sie das ARTboard -Lineal -System:

Die Kunstboote befindet sich in der Leinwand gem?? dem

globalen Lineal -Ursprung

• Die Objekte, die wir zeichnen, werden gem?? dem -Artboard -Lineal -Ursprungs in der Artboard
in der ArtBoard platziert (im Bild unten sehen Sie, dass zwei Quadrate die gleichen Koordinatenwerte haben, selbst wenn sie in zwei unterschiedlichen Personen platziert sind Artboards).

Für diese Arbeit werden wir das ARTboard -Lineal verwenden, da es besser für die Glyphenausrichtung geeignet ist.

Stellen Sie das Netz

fest

Illustrators Gitter wird vom Arbeitsbereich aus dem globalen Herrscherorschinenraum gesetzt. Sie k?nnen Einstellungen → Führer und Gitter ausw?hlen, um seine Eigenschaften festzulegen. Da wir unsere 64x64px -Leinwand in 8 Teile unterteilen wollen, eines auf jeder Seite, setzen wir alle 16px eine Hauptnetzlinie (dies führt dazu,

Jetzt müssen wir sicherstellen, dass unser Gitter genau zu unserer Kunstkarte passt. Standardm??ig wird die erste ARTBOD im Global Ruler Origin platziert, da die ARTBODE bewegt und zurückgesetzt werden kann: Um dies zu tun, doppelklicken Sie einfach mit dem Werkzeug für die Kunstboard-Tool auf den Ursprung der Lineal.

Unser Netz sollte jetzt perfekt auf unsere Kunstkarte ausgerichtet sein:

Erster Glyphen

Beginnen wir mit unserem ersten Glyphen, einem einfachen

überprüfen Sie Mark im Kreis:

Um einen Kreis zu zeichnen, müssen wir das Ellipse -Tool ausw?hlen, auf einen Punkt in der Kunstkarte klicken und die Breite und H?he der Ellipse eingeben:

Als n?chstes müssen wir jede Füllung entfernen und die schwarzen Striche der 8px -Gr??e einstellen. Zu diesem Zeitpunkt k?nnen wir den Kreis mit der ARTboard ausrichten (stellen Sie sicher

Aber das Ergebnis ist nicht das, was wir erwartet haben: Illustrator richtet den

Pfad

aus, ohne die Schlaganfallbreite zu berechnen. Zum Glück kann dies leicht gel?st werden, indem die Option Preview -Grenzen in der Einstellungsgrenze festgelegt wird. Der Illustrator berechnet nun die Schlaganfallbreite innerhalb der Kunstkarte, unabh?ngig von Ausrichtung und Gr??e, wodurch das Zeichnen schneller und genauer wird.

Komplette Glyphenzeichnung

Jetzt müssen wir jede Glyphe zeichnen und jeweils eine neue Kunstboote hinzufügen. Sie k?nnen mithilfe der ARTboard -Tools und -Optionen /Alt ein vorhandenes Artikett ziehen oder auf das neue ARTboard -Symbol in der ARTboard -Panel klicken, um ein ARTboard hinzuzufügen.

Sie k?nnen die Artboards dann leicht neu ordnen, indem Sie Objekt → ARTBODE → Um ordnen (oder den Befehl neu ordnungsgem?? im Menü mit dem Kunstboard -Panel neu ordnen) und in der Reihenfolge in der ARTboard -Panel neu ordnen.

Beachten Sie, dass Glyphen immer alphabetisch hochgeladen werden. Wenn Sie also m?chten, dass die ARTboard -Bestellung in Illustrator die Glyphen in Schriftarten entspricht, denken Sie daran.

Namen für jedes Kunstboard (ohne Leerzeichen): Dies wird zum Namen der Glyphen und des Klassennamens des generierten CSS. Daher ist es sehr wichtig, sinnvolle W?rter zu verwenden.

Obwohl wir h?ufig Striche verwenden, um Symbole zu zeichnen, gibt es einige besondere Bedürfnisse für die Sch?pfung von Schriftarten. Wir müssen uns erinnern:

• Jeder Strich muss umgewandelt werden, um
zu füllen
• Füllung muss kombiniert werden, um zusammengesetzte Pfade (falls erforderlich) (keine überlappenden Formen)
zu erzeugen
• Jede Farbe wird ignoriert: Der Glyphe wird immer als schwarz interpretiert. Sie k?nnen Wei? auch nicht als Hintergrund verwenden: Sie k?nnen nur transparenten Hintergrund
verwenden
• Alle eingebetteten Bilder in SVG werden ignoriert

Sie k?nnen den Befehl Extend verwenden, um Pfade zu konvertieren, um Formen zu füllen und das Pfadfinderfeld schnell überlappende Formen zu einzelnen Elementen zu kombinieren.

Wenn die Glyphe fertig ist, k?nnen wir jede Glyphe als separate SVG -Datei im Dialogfeld Speichern als Dialogfeld speichern, indem wir die Option "ARTboard verwenden".

Illustrator speichert SVG -Dateien, indem der Name .ai Dokument (icons_) vorangestellt wird. Da ICOMOON Dateinamen als Glyphen verwendet, bevorzuge ich dieses Pr?fix (es gibt viele kleine Anwendungen, die problemlos alle Dateien umbenennen k?nnen), um Verwirrung zu verringern.

Laden Sie die Datei auf iComoon

hoch hoch

ICOMOON -Website bietet eine Online -Bewerbung zum Erstellen von Symbolschriften. Die App beginnt mit unbenannten Elementen und bietet Zugriff auf eine kostenlose Symbolbibliothek, aus der Sie Symbole ausw?hlen k?nnen.

Da wir unsere eigenen Glyphen hochladen, k?nnen wir alle vorinstallierten Bibliotheken mit dem kleinen Menü rechts in jeder Bibliothek l?schen (beachten Sie, dass dies nicht obligatorisch ist, da nur die ausgew?hlten Symbole Ihrer Schriftart hinzugefügt werden). Es h?lt Ihr Projekt einfach einfach.

Sie k?nnen dann rechts neben der Anwendungsmenüleiste auf das Projektsymbol verwalten, um Ihr Projekt zu speichern. Beachte .

Sie k?nnen jetzt Ihre SVG -Datei mit der Schaltfl?che Symbol importieren: Ihr Glyphe wird in der Anwendung als Sammlung angezeigt. Jede Glyphe kann mithilfe der von der Anwendung in dieser Phase bereitgestellten Tools problemlos neu arrangiert, gel?scht oder bearbeitet werden. Sie k?nnen auch die Sammelmetadaten (den Namen der Sammlung und einige Autoreninformationen) bearbeiten oder andere Aufgaben mit dem kleinen Menü auf der rechten Seite der Sammlung ausführen.

Symbole k?nnen mit dem Bearbeitungswerkzeug in der Anwendung bearbeitet werden. Sie k?nnen die Vektordaten nicht auf diese Weise ?ndern, aber die Gr??e des Glyphs ?ndern oder verschieben, die SVG -Datei herunterladen oder ersetzen.

Um eine Schriftart zu erstellen, müssen Sie zun?chst das Auswahlwerkzeug verwenden, um alle erforderlichen Symbole auszuw?hlen (gegebenenfalls k?nnen Sie auch den Befehl "All/No W?hlen Sie alle ausw?hlen" im Menü Sammlung verwenden ). Sie k?nnen ausgew?hlte Glyphen über ihre gelben Grenzen identifizieren. Anschlie?end müssen Sie unten auf der Seite auf die Schaltfl?che Schriftart klicken.

Die Anwendung l?dt ein Helferfenster mit allen ausgew?hlten Symbolen und zeigt jedes Symbol den Glyphen, den Namen und die Unicode -Punkte an, die von Icomoon innerhalb des PUA -Bereichs zugewiesen werden. Die Verwendung von PUA -Bereichen gilt als der sicherste Unicode -Bereich für Host -Symbole in den PUA -Bereichen. Icomoon erm?glicht es Ihnen jedoch, den Standard -Latin -Reichweite der Standard -Basis zu verwenden, indem Sie oben auf die Schaltfl?che "Code" klicken, wenn Sie es vorziehen.

Sie k?nnen jedem Charakter auch einen anderen Range -Code zuweisen, indem Sie einen neuen Code oder Zeichen manuell einfügen:

Fügen Sie vor dem Herunterladen der Schriftart den Schriftnamen hinzu (dies wird für die @font-face -Regel verwendet) sowie das Klassenpr?fix und/oder das Suffix (dies wird als Selektor im generierten CSS verwendet).

Sie k?nnen viele andere Parameter festlegen: Von Metadateninformationen zu metrischen Werten empfehle ich die kurze und gut erkl?rte Dokumentation sorgf?ltig, um alle Parameter korrekt festzulegen.

Ihr Symbolsatz ist fertig! Laden Sie Ihre Schriftart herunter (oder, wenn Sie ein Premium -Konto haben, einfach zu CSS verlinken) und fügen Sie es Ihrem Projekt hinzu.

Die heruntergeladene .ZIP-Datei enth?lt Schriftarten in verschiedenen Formaten, Demo-Dateien, die Sie als Referenz verwenden k?nnen, .json-Dateien, die erneut aufgefordert werden k?nnen, um das Projekt wiederherzustellen (z. B. auf einem anderen Computer anzeigen) und von von Natürlich gibt es auch .CSS -Dateikodier -Symbol.

CSS (Sie k?nnen unten ein Beispiel sehen) enth?lt @font-face Regeln und alle Symbolauswahl.

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-88cxph');
    src:url('fonts/icomoon.eot?#iefix-88cxph') format('embedded-opentype'),
        url('fonts/icomoon.woff?-88cxph') format('woff'),
        url('fonts/icomoon.ttf?-88cxph') format('truetype'),
        url('fonts/icomoon.svg?-88cxph#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="myicon-"], [class*=" myicon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.myicon-alert:before {
    content: "\e600";
}
.myicon-arrow-down:before {
    content: "";
}

/* etc */

, darf es versuchen!

Ich habe festgestellt, dass dies eine sehr schnelle M?glichkeit ist, Symbolschriften zu erstellen, aber es braucht sicherlich Zeit, um den perfekten Workflow zu finden und alle Optionen zu testen, die sowohl Illustrator als auch Icomoon bieten k?nnen.

Ich wünsche Ihnen eine glückliche Zeit!

(Folgendes ist der FAQ

FAQs (FAQ) zum Erstellen von Symbolschriften mit Illustrator und ICOMOON

F: Was sind die Vorteile des Erstellens von Symbolschriften mit iComoon?

A: ICOMOON ist ein leistungsstarkes Tool, mit dem Sie Ihr eigenes Symbolsatz erstellen und verwalten k?nnen. Es bietet eine Vielzahl von Symbolen zur Auswahl, und Sie k?nnen auch Ihr eigenes SVG importieren, um benutzerdefinierte Symbolschriften zu erstellen. Der Vorteil der Verwendung von iComoon besteht darin, dass es den Prozess des Erstellens von Symbolschriften vereinfacht, die auch von Anf?ngern leicht verwendet werden k?nnen. Au?erdem k?nnen Sie die Gr??e, Farbe und andere CSS -Eigenschaften des Symbols steuern und eine gr??ere Flexibilit?t im Design bieten.

F: Wie importiere ich meine eigene SVG in iComoon?

A: Stellen Sie zun?chst sicher, dass Ihr SVG korrekt optimiert ist, um Ihr eigenes SVG in ICOMOON zu importieren. Gehen Sie dann zur ICOMOON -App und klicken Sie auf die Schaltfl?che "Symbol importieren". Dort k?nnen Sie Ihre SVG -Datei ausw?hlen und hochladen. Nach dem Hochladen wird Ihr Symbol im Abschnitt "Ihre benutzerdefinierten Symbole" angezeigt, um zu Ihrem Symbol hinzugefügt zu werden.

F: Kann ich mit Adobe Illustrator SVGs für ICOMOON erstellen?

A: Ja, Sie k?nnen mit Adobe Illustrator SVGs für ICOMOON erstellen. Illustrator ist ein leistungsstarker Vektorgrafikeditor, mit dem Sie SVG -Dateien erstellen und bearbeiten k?nnen. Nachdem Sie ein Symbol im Illustrator erstellt haben, k?nnen Sie es als SVG -Datei exportieren und dann in ICOMOON importieren, um ein Symbol zu erstellen.

F: Wie kann man die Gr??e und Farbe eines Symbols in iComoon kontrollieren?

a: In iComoon k?nnen Sie CSS verwenden, um die Gr??e und Farbe des Symbols zu steuern. Beim Generieren von Symbolschriften bietet ICOMOON eine CSS -Datei mit den Klassen für jedes Symbol. Sie k?nnen diese CSS -Datei bearbeiten, um die Gr??e, Farbe und andere Eigenschaften des Symbols zu ?ndern.

F: Was sind die besten Praktiken zum Erstellen von Symbolschriften in Icomoon?

a: Beim Erstellen von Symbolschriften in ICOMOON sollten Sie einige Best Practices im Auge behalten. Stellen Sie zun?chst sicher, dass die SVG korrekt optimiert wird, bevor Sie sie in ICOMOON importieren. Zweitens versuchen Sie, das Symbol so klein wie m?glich zu gestalten, um die Ladezeit der Website zu verkürzen. Denken Sie schlie?lich daran, Ihre Symbolschriften in verschiedenen Browsern zu testen, um sicherzustellen, dass sie korrekt angezeigt werden.

F: Kann ich Symbolschriften für Gesch?ftsprojekte mit iComoon erstellen?

A: Ja, Sie k?nnen ICOMOON verwenden, um Symbolschriften für Gesch?ftsprojekte zu erstellen. Sie sollten jedoch wissen, dass einige der von Icomoon bereitgestellten Symbole Lizenzbeschr?nkungen unterliegen. überprüfen Sie immer die Lizenz des Symbols, bevor Sie sie in einem kommerziellen Projekt verwenden.

F: Wie füge ich meine Symbolschrift meiner Website hinzu?

A: Nachdem Sie eine Symbolschrift in ICOMOON erstellt haben, k?nnen Sie diese Ihrer Website hinzugefügt, indem Sie die von ICOMOON in der HTML der Website bereitgestellte CSS -Datei aufnehmen. Sie k?nnen das Symbol mit der in der CSS -Datei definierten Klasse zu Ihrer Website hinzufügen.

F: Kann ich nach dem Erstellen des Symbols in Icomoon es bearbeiten?

A: Ja, nachdem Sie das in iComoon festgelegte Symbol erstellt haben, k?nnen Sie es bearbeiten. Gehen Sie dazu in den Abschnitt "Projekte verwalten" in der ICOMOON -Anwendung. Dort k?nnen Sie Ihr Projekt ausw?hlen und die erforderlichen ?nderungen am Symbolsatz vornehmen.

F: Wie stellen Sie sicher, dass meine Symbolschriften in allen Browsern korrekt angezeigt werden?

A: Um sicherzustellen, dass Ihre Symbolschriften in allen Browsern korrekt angezeigt werden, sollten Sie sie w?hrend der Entwicklung in verschiedenen Browsern testen. Darüber hinaus stellt ICOMOON eine Icon -Schriftart -CSS -Datei mit den erforderlichen Browserkompatibilit?tsbehebungen bereit.

F: Was soll ich tun, wenn ich auf Probleme beim Erstellen von Symbolschriften in iComoon sto?e?

A: Wenn Sie Probleme haben, Symbolschriften in ICOMOON zu erstellen, k?nnen Sie sich auf die ICOMOON -Dokumentation verweisen oder das ICOMOON -Support -Team wenden, um Hilfe zu erhalten. Darüber hinaus gibt es viele Online -Communities und Foren, in denen Sie Hilfe und Rat einholen k?nnen.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Symbolschrift mit Illustrator und iComoon. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!