Die Herstellung der GUI-Design-Symbole-Schriftarten

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Symbole sind ein untrennbarer Bestandteil eines GUI-Designs (Graphical User Interfaces). Ich habe seit Ewigkeiten Icons heruntergeladen, gekauft und erstellt, dann beschloss ich eines Tages, mein eigenes verwendbares Symbol-Set zu erstellen. Etwas, das anderen GUI-Designern hilft, die Arbeit schneller und besser zu machen. Dieser Artikel erklärt im Detail den Erstellungsprozess und die Phasen, die ich bei diesem Projekt durchlaufen habe, und kann als Anleitung dienen, wenn Sie sich entscheiden, etwas Ähnliches zu erstellen. Ich bin mehr als einen kreativen Weg gegangen, bevor ich diese Schriftart "GUI Design Icons" fertiggestellt habe.

Kapitel

Da dieser Artikel etwas länger ist, habe ich ihn in Kapitel unterteilt. Über diese Links können Sie zum gewünschten Kapitel springen.

Die Idee
Zeichnen von Symbolen in Adobe Illustrator
Schablonenlineal ist fertig, na ja, fast
Wie das Schablonenlineal eine Schrift werden
- Symbole exportieren für FontLab
Erstellen der Schriftart in FontLab
Abschluss

Die Idee

Ich habe buchstäblich seit Ewigkeiten Skizzen von grafischen Benutzeroberflächen gezeichnet, und diese Idee war die ganze Zeit in meinem Kopf. Ich dachte darüber nach, ein Lineal - eine Schablone - mit jedem häufig benötigten Symbol zu erstellen, das im GUI-Design verwendet wird?

Seien wir ehrlich - ich habe die Chance verpasst, der Erste zu sein. Das hatte schon jemand anders gemacht. Ich habe ein schönes, rostfreies Lineal (Schablone) von DesignCommision gefunden (sehen Sie Foto), das Sie bei uistencils.com kaufen können.

Ich habe es sofort bestellt. Nachdem ich es live gesehen hatte, war ich noch entschlossener, selbst eines zu machen. Meine Idee war, dies etwas anders auszuführen – mit Kunststoff. An Edelstahl ist nichts auszusetzen. Es ist glänzend, modern, es ist schön. Aber man sieht es nicht, die Kanten sind scharf, und es zerstört die Bleistifte und kratzt sich die Finger (es ist nicht so schlimm, aber das Arbeiten damit ist nicht sehr komfortabel).

Am Anfang stand ein Papier, jede Menge Papier, Bleistifte, Filzstifte und viel Zeit. In der Zwischenzeit (in der zeichnerischen Zeit) habe ich verschiedene GUIs erkundet, gesucht, was nützlich sein kann, und landete bei vielen Papieren voller Zeichnungen. Diese können Sie auch hier sehen (klicken für größeres Foto). Nachdem ich entschieden hatte, dass ich genug vom Skizzieren hatte, markierte ich alle Symbole, die ich auf dem Computer nachbilden könnte. Hier bin ich in die zweite Phase gesprungen.

Zeichnen von Symbolen in Adobe Illustrator

Die für Skizzen benötigte Zeit war nichts im Vergleich zu der Zeit, die in Adobe Illustrator verbracht wurde. Wie Sie sehen, sind die Symbole recht einfach gehalten, aber Sie müssen auf maximale Genauigkeit, möglichst wenige Punkte (keine unnötigen Punkte) und - das Wichtigste - Konsistenz im Stil achten.

Schaut man sich das Lineal von DesignCommision genauer an, ist dies der größte Mangel – die Symbole haben keinen einheitlichen Stil. Die meisten Symbole sind einfach, aber Benutzersymbole haben einen sehr detaillierten Umriss. Die meisten Symbole haben eine ähnliche Größe, aber der Play-Button ist zu groß (und breit). Die meisten Symbole bestehen aus geraden Linien, aber das "i" und das Buchsymbol sind unangemessen abgerundet... und so weiter.

Lassen Sie mich Ihnen zeigen, wie Sie zwei Symbole erstellen: das Schlosssymbol und das Symbol für die Ladeanimation. Am Anfang habe ich zwei Hilfslinien (ziemlich zufällig) im Dokument erstellt - und ich habe versucht, die Symbolgrößen entlang dieser Hilfslinien beizubehalten. Nicht, dass jedes Symbol von der ersten Anleitung bis zur zweiten ist, aber um den Maßstab ungefähr gleich zu halten.

Verschlossenes Vorhängeschloss

Am schnellsten lassen sich Symbole erstellen, wenn man sich das Icon als eine Mischung aus Grundformen vorstellt. Es ist immer schneller, einen halben Kreis zu löschen, als den Halbkreis von Hand (mit dem Zeichenstift-Werkzeug) zu zeichnen. Wenn Sie die Arbeit mit dem Zeichenstift-Werkzeug auf ein Minimum beschränken, können Sie in kurzer Zeit genaue Formen erstellen. Anstatt das Zeichenstift-Werkzeug zu verwenden, versuchen Sie, sich die verwendeten Grundformen und die Pathfinder-Werkzeuge vorzustellen, um sie nach Bedarf zu trennen.

Beginnen wir mit der Erstellung eines Rechtecks, auf das der Effekt Abgerundete Ecken (Menü > Effekt > Stilisieren) angewendet wurde. Wir könnten auch das abgerundete Rechteck mit dem Werkzeug für abgerundetes Rechteck zeichnen, aber auf diese Weise behalten die Ecken den Radius auch nach der Größenänderung bei.
Zeichnen Sie nun mit dem Ellipse-Werkzeug die Basis des Schlüssellochs (halten Sie beim Zeichnen des Kreises die Umschalttaste gedrückt). Für eine perfekte Ausrichtung verwenden Sie die Schaltfläche in der oberen Leiste oder verwenden Sie die Schaltflächen in der Ausrichtungspalette.
Der untere Teil des Schlüssellochs wird mit dem Abgerundetes-Rechteck-Werkzeug gezeichnet (drücken Sie die Pfeiltasten nach oben und unten, um den Radius anzupassen).
Auch der obere Teil des Vorhängeschlosses wird mit diesem Werkzeug gezeichnet, hier vertauschen wir nur die Füllung und die Kontur (Umschalt + X). Dies bedeutet keine Füllung und eine fette Kontur. Da das Schlüsselloch nicht transparent, sondern weiß ist, müssen Sie zum Ausblenden des unteren Teils dieses letzten abgerundeten Rechtecks nur dieses Objekt nach hinten verschieben (klicken Sie mit der rechten Maustaste auf das Objekt, wählen Sie Anordnen > Nach hinten senden. Darüber brauchen wir uns vorerst aber keine Sorgen zu machen.

Entsperrtes Vorhängeschloss

Das Symbol für das entsperrte Vorhängeschloss ist noch einfacher (und schneller) zu erstellen.

Wählen Sie zuerst das gesamte Symbol aus und ziehen Sie es zur Seite. Halten Sie beim Ziehen die Alt-Taste gedrückt, um das Objekt zu duplizieren (oder Sie können Befehl + C und Befehl + V verwenden).
Bewegen Sie den oberen Teil nach links und ein wenig nach oben (genau wie beim Öffnen des echten Vorhängeschlosses).
Fügen Sie mit dem Zeichenstift-Werkzeug einen neuen Punkt hinzu (stellen Sie sicher, dass der Pfad ausgewählt ist und der Cursor ein Pluszeichen zeigt, andernfalls fügen Sie den Punkt nicht zum aktuellen Pfad hinzu).
Wählen Sie nun das Direktauswahl-Werkzeug (weißer Pfeil), wählen Sie den unerwünschten Punkt aus und drücken Sie die Entf-Taste, um sie zu löschen.
Suchen Sie die Konturpalette und überprüfen Sie, ob der Pfadstil auf Round Cap eingestellt ist.

Anpassungen, Änderungen und Feinabstimmung

Denken Sie nicht, dass Sie beim ersten Versuch alles perfekt machen können - genau wie die Vorhängeschloss-Symbole. Tatsächlich habe ich viele Papiere gedruckt, um die Symbole in größerer Größe und auf Papier zu sehen (ob Sie es glauben oder nicht, Papier ist immer noch besser für Anpassungen). Danach habe ich einige Details hinzugefügt, einige Bereiche angepasst und einige Teile gelöscht. Und dann diese Änderungen in Illustrator angewendet.

Die Bilder unten zeigen meinen Prozess. Nachdem ich die Symbole größer gedruckt habe, habe ich den Marker in der gleichen Farbe ausgewählt (nicht fragen warum grau, ich mag es einfach) und einige Teile hinzugefügt, bei denen ich nicht zufrieden war. ich habe auch andere Unvollkommenheiten mit einem roten Marker markieren (wie Größenänderung, Konturstärke usw.). Zum Löschen habe ich das weiße Korrekturband verwendet oder einfach ein Stück weißen Aufkleber.

Wie Sie unten sehen können, sind einfachere Symbole nur Linien in verschiedenen Längen und Winkeln, aber mit dem gleichen Gewicht.

Nun zurück zur Schöpfung. Sehen wir uns an, wie Sie ein weiteres Symbol erstellen, das zum Laden von Animationen verwendet wird.

Laden-Symbol

Beginnen Sie mit einer Linie als Show (verwenden Sie das Liniensegment-Werkzeug). Wählen Sie in der Konturpalette abgerundete Enden (Round Cap) und dasselbe Gewicht wie gewohnt (in meinem Fall 4 px).
Kopieren Sie diese Linie und verschieben Sie sie nach unten - sie kann die Führung ein wenig überschreiten. Dies geht am schnellsten, indem Sie die Linie mit gedrückter Umschalt- und Alt-Taste ziehen. Wählen Sie dann beide Zeilen aus und gruppieren Sie sie mit Command + G - dieser Schritt ist sehr wichtig! Andernfalls würde die folgende Transformation jede Zeile einzeln ändern.
Wählen Sie den Effekt Transformieren (Effekt > Verzerren und Transformieren).
Und alles, was Sie für das letzte Symbol tun müssen, ist, die Kopien auf 5 und den Winkel auf 30° einzustellen. Und das ist es.

Das Anpassen dieses Symbols ist noch einfacher, da es aus nur zwei Zeilen erstellt wird. Sie müssen nur Folgendes tun:

Wählen Sie einen Punkt in der obersten Zeile aus.
Bewegen Sie es nach oben.
Wählen Sie einen Punkt in der zweiten Zeile aus und verschieben Sie ihn nach unten.
Je nach Bewegungsdauer können Sie Symbole aus kurzen Linien, langen Linien oder nur kleinen Punkten haben.

Kombinationen

Einer der Hauptvorteile dieser Symbole sollte die Möglichkeit sein, sie zu kombinieren. Zum Beispiel, um ein kleines Pluszeichen neben dem Benutzersymbol zu platzieren, um ein Benutzersymbol hinzuzufügen, oder ein kleines Kreuz über dem Ordnersymbol, um ein Ordner entfernen-Symbol zu erstellen. Und so weiter. Unten sehen Sie ein Beispiel für eine Lupe, die Sie mit einem Plus- und Minuszeichen kombinieren können.

Mein ursprünglicher Plan war es, Zahlen hinzuzufügen, die zum Beispiel über das Kalendersymbol oder in das Kommentarblasensymbol platziert werden können.

So sieht es in Illustrator aus - Symbol, in / über / neben dem ich einige kleine Beispielsymbole platziert habe, um das Erscheinungsbild zu testen.

Um Verwechslungen zwischen gezeichnetem und gerade kopiertem Symbol zu vermeiden, habe ich die Farbe des kopierten in ein helleres Grau geändert.

Und jetzt zum Testen...

...und drucken, anpassen und ändern.

Ich werde kurz eine sehr nützliche Funktion in Adobe Illustrator erwähnen. Zeichenflächen, die in Illustrator CS4 eingeführt wurden, ermöglichen es Ihnen, mehrere Seiten in einem Dokument zu haben. Sie können sagen - nichts Neues bei Konkurrenzprodukten, aber bedenken Sie die Möglichkeit unterschiedlicher Seitengrößen und unterschiedlicher Positionen. Sie können die Seiten hinzufügen, während Sie die Seiten zu Ihrer Arbeit hinzufügen. Und so fügte ich die Zeichenflächen hinzu und fügte sie hinzu...

...und ich habe nicht verwendete Symbole seitlich verschoben, während ich die letzten in die neuen Zeichenflächen verschoben habe.

Es hat mir sehr geholfen, vor allem beim Drucken und bei Korrekturen. Ohne Zeichenflächen müsste ich Ebenen oder ein großes Dokument verwenden (aber Sie können nicht einfach nur einen Teil dieser großen Leinwand drucken).

Trennlinien

Ich wollte das Lineal wirklich vielseitig machen. Ich habe über jeden möglichen Weg nachgedacht, wie ich es noch besser machen kann. Zum Beispiel mit dem Hinzufügen von Trennlinien. In Illustrator ist es wirklich einfach, zeichnen Sie einfach eine Linie und fügen Sie dann einen Zick-Zack-Effekt hinzu, um eine gezackte Linie (a), eine Zickzack-Linie (b) zu erstellen, die Optionen im Konturfenster richtig einzustellen, um die Linien gestrichelt zu machen (c), oder gepunktet (d).

Symbole für das Endprodukt vorbereiten

Vielleicht haben Sie bemerkt, dass wir bei der Erstellung des Schlosssymbols das Schlüsselloch weiß belassen haben, damit es wie das Loch aussieht, aber es ist nicht. Sie können dies einfach erkennen, indem Sie die Farbe der darunter liegenden Ebene ändern.

Früher war das egal, aber für das Endprodukt brauchen wir Symbole in nur einer Farbe, ohne Kontur und Effekt und idealerweise als nur ein Objekt. Um dies zu erreichen, verwenden wir zwei Funktionen Erweitern des Erscheinungsbilds und Erweitern sowie die Pathfinder-Palette. Hier ist der Prozess:

Beginnen Sie mit der Auswahl des Körper-Symbols, auf den der Effekt der abgerundeten Ecken angewendet wird und der mit der Funktion "Erweitern des Erscheinungsbilds" in Pfade umgewandelt werden kann.
Ergebnis wird hier angezeigt.
Wählen Sie das Schlüsselloch aus, das aus einem Kreis und einem abgerundeten Rechteck besteht. Konvertieren Sie es dann in ein Objekt, indem Sie beide auswählen und die Funktion Vereinen in der Pathfinder-Palette auswählen.
Ergebnis wird hier angezeigt.
Subtrahieren Sie dieses Schlüsselloch vom Körper mit der Funktion Minus Front (gleiche Palette). Beide Screenshots sehen gleich aus, beachten Sie jedoch die linke untere Ecke, die die Füll- und Konturfarbe zeigt. Im ersten Bild ist die Füllfarbe gemischt (Fragezeichen).
Hier wird nur eine Farbe verwendet. Das bedeutet, dass das Schlüsselloch wirklich ein Loch im Objekt ist.
Die Konturen können mit der Expand-Funktion in Fills umgewandelt werden.
Ergebnis wird hier angezeigt.
Und schließlich verbinden wir die Teile mit dem Unite . zu einem Objekt Funktion.
Der verbundene Teil hat keine redundanten Punkte, und so ist dies die endgültige Form des Symbols

Wenn wir Dutzende Tage später umziehen, kommen wir in die Phase, in der ich alle Symbole fertig und auf diese Weise vorbereitet habe. Also habe ich ein neues Dokument in der Größe des Schablonenlineals erstellt und mit dem Platzieren dieser Symbole begonnen. Als Bonus habe ich ein paar Schaltflächen hinzugefügt.

Da es sich um ein Schablonenlineal handelt, das ausgeschnitten wird, können die Symbole keine schwebenden Teile haben - weil es keine Möglichkeit gibt, wie man es macht. Wie Sie im nächsten Bild sehen können, müssen Sie, wenn Sie so etwas wie ich machen möchten, diese Teile löschen (gekreuzte Teile) oder diese Teile mit dünnen Linien verbinden (eingekreist).

Hier sind diese "Verbindungslinien" im Detail - siehe das Antennensymbol. Sie können auch feststellen, dass das Ausfüllen des Batteriesymbols bereits gelöscht ist.

Das Lineal in seinem endgültigen Aussehen in Illustrator sieht so aus. Alles, was ich brauchte, war, jemanden zu finden, der es herstellte.

Das Schablonenlineal ist fertig, na ja, fast

Ich habe viele E-Mails gesendet, um die richtige Firma zu finden. Zunächst schien es kein Problem mit der Herstellung zu geben. Dann fand ich heraus, dass es ein Problem gab, und zwar ein großes. Die Symbole waren zu klein (manchmal schneidet der Laser den falschen Teil aus). Das ganze Lineal war zu dick (manchmal zu dick, um einen Bleistift hineinzustecken), und die Anzahl der Schnitte machte den Preis des Endprodukts unrealistisch.

Nach der frühen Begeisterung hatte ich nur ein Muster, viele gedruckte Papiere und eine Scheu, etwas anderes mit diesem Projekt zu machen. Also habe ich dieses Projekt auf Eis gelegt, da es noch viel mehr schöne Dinge zu tun gab...

Wie wird aus dem Schablonenlineal eine Schrift?

Nach einigen Monaten des Aufgebens begann ich wieder über das Projekt nachzudenken. Das Lineal ist weg, was ist mit etwas anderem mit diesen Symbolen? Wie wäre es mit einer Schriftart, etwa Windings, aber mit dem Stil? Die Enthusiasmus war zurück, und ich arbeitete wieder. Wie Sie gleich sehen werden, macht das Erstellen einer Schriftart aus vorbereiteten Symbolen wie diesen Spaß.

Für den Font-Job war es notwendig, ein weiteres Dokument (mit nur einer Zeichenfläche) mit einer Größe von 1000 x 1000 pt zu erstellen.

Danach habe ich angefangen, die Symbole aus dem Originaldokument in separate Ebenen zu kopieren und die Größe dieser Symbole an die Dokumentgröße angepasst (um das Dokument schön auszufüllen). Da alle Symbole bereits ohne Konturen und Effekte waren, war die Größenänderung eine Frage von nur einem Klick. Verwenden Sie nicht nur die kleinen Symbole in der Mitte des Dokuments, sondern verwenden Sie einfach die Ausrichten-Palette. Wählen Sie An Zeichenfläche ausrichten und klicken Sie auf Horizontale Mitte ausrichten und Vertikale Mitte ausrichten, um alles auszurichten.

Jetzt wollte ich die großen Symbole einzeln anzeigen und sie an der richtigen Stelle vor kleinen Symbole platzieren (falls diese großen Symbole mit kleinen kombiniert werden können). Ich habe das von Hand gemacht. Wie Sie im nächsten Bild sehen können, wird das Symbol für Kommentare nach unten verschoben, während das Symbol für Dokument nach oben verschoben wird. Der letzte Teil des Bildes zeigt das Kalendersymbol mit all den kleinen Symbolen, die angezeigt werden, um ein Überlappen der Umrisse zu vermeiden.

Das Feuersymbol zeigt, dass wir ein Dokument mit einer Größe von 1000 x 1000 pt haben, aber in seltenen Fällen können wir die Grenzen überschreiten. Für das Lesezeichensymbol (und einige andere spezielle Symbole) müssen wir uns nicht um all die kleinen Symbole kümmern. Im seitlichen Loch können wir nur ein Pluszeichen, ein Minuszeichen und einen Pfeil platzieren.

Exportieren von Symbolen für FontLab

Nachdem alle Symbole an der richtigen Stelle platziert waren, war es an der Zeit, sie aus Illustrator herauszuholen. Natürlich so, dass sie in einer Software zum Erstellen von Schriften verwendet werden können (in unserem Fall FontLab, aber das ist bei jeder anderen Software genauso).

Dies von Hand für fast 200 Symbole zu tun, würde Stunden in Anspruch nehmen - warum tun Sie dies, wenn Sie ein Skript verwenden können? Es ist kein Teil von Illustrator, aber ich habe ein Skript verwendet. Welche ist verfügbar für diejenigen, die die Schriftart bestellen.

Die Arbeit mit Skripten ist wirklich einfach. Laden Sie es, führen Sie es aus, und Sie haben alle Ebenen als EPS-Dateien exportiert. Und wir sind mit Illustrator fertig.

Erstellen der Schriftart in FontLab

Nun, das Erstellen einer Schriftart in FontLab ist nicht für einen Artikel gedacht, sondern ein Thema für ein großes Buch. Aber das Erstellen einer "Dingbats"-Schriftart aus vorbereiteten EPS-Symbolen ist einfach. Wie Sie sehen werden, würde jede andere Software zum Erstellen von Schriftarten die Arbeit erledigen, da wir nur die EPS-Dateien in einzelne Zeichen laden und die Breite einstellen müssen.

Am Anfang haben wir eine neue, leere Schriftart.

Um einen neuen Charakter zu erstellen, doppelklicken Sie in ein beliebiges Feld und stellen Sie dann die Größe(Breite) auf 1000 (wie in Illustrator).

Importieren Sie die gewünschte EPS-Datei und... das war's.

Bei großen Symbole ist die Vorgehensweise etwas anders. Wir wollen sie hinter den Kleinen zeigen, deshalb brauchen wir sie, um keinen Platz einzunehmen. Deshalb setzen wir ihre Breite auf Null.

Ein kurzer Test mit dem Vorschaufenster zeigt, ob es richtig funktioniert. Im Vorschaufenster habe ich mit dem Zeichen "k" begonnen (Symbol des Ordners, der keine Breite haben sollte). Das bedeutet, dass das zweite Zeichen „V“ (Symbol für Nachladen) von vorne und damit über dem vorherigen Symbol angezeigt wird.

Und das ist alles. Nach einer Stunde Anklicken ist die Schriftart fertig, es bleibt also nur noch der Name festzulegen und zu exportieren.

Die folgenden Fotos zeigen das Testen der Vorschauen aus Microsoft Word.

Und jetzt haben wir eine komplette Schriftart.

Abschluss

Vielen Dank, dass Sie sich durch einen so langen Artikel gelesen haben. Ich hoffe, dass Sie heute etwas Neues und Inspirierendes gelernt haben. Wie Sie dem Artikel entnehmen können, waren meine ursprünglichen Pläne ganz anders, aber die resultierende Schriftart ist großartig geworden. Manchmal beginnt man in einer kreativen Richtung und geht am Ende einen anderen kreativen Weg.

Die Schriftart "GUI Design Icons" kann auf myfonts.com erworben werden.

Abonnieren Sie den Vectortuts+ RSS-Feed, um mit den neuesten Vektor-Tutorials und -Artikeln auf dem Laufenden zu bleiben.