Share
Icons sind untrennbarer Bestandteil eines GUI-Designs (Graphical User Interfaces). Ich habe Icons für Ewigkeiten heruntergeladen, gekauft und erstellt, und eines Tages entschied ich mich, mein eigenes brauchbares Icon-Set zu erstellen. Etwas, das anderen GUI-Designern hilft, ihre Arbeit schneller und besser zu machen. In diesem Artikel wird der Prozess des Erstellens und der Phasen, die ich mit diesem Projekt durchlaufen habe, detailliert beschrieben. Sie können als Anhaltspunkt dienen, wenn Sie sich für eine ähnliche Entwicklung entscheiden. Ich habe mehr als einen kreativen Weg eingeschlagen, bevor ich die Schriftart "GUI Design Icons" fertiggestellt habe.
Da dieser Artikel etwas länger ist, habe ich ihn in Kapitel aufgeteilt. Sie können diese Links verwenden, um zum gewünschten Kapitel zu springen.
Ich habe seit Jahrhunderten buchstäblich Skizzen grafischer Benutzeroberflächen gezeichnet, und diese Idee war die ganze Zeit in meinem Kopf. Ich habe darüber nachgedacht, ein Lineal - eine Schablone - mit jedem häufig benötigten Symbol für das GUI-Design zu erstellen?
Seien wir ehrlich - ich habe die Chance verpasst, die erste zu sein. Jemand anderes hatte das schon gemacht. Ich habe ein schönes, rostfreies Lineal (Schablone) von DesignCommision (siehe Foto) gefunden, das Sie bei uistencils.com kaufen können.
Ich habe es sofort bestellt. Nachdem ich es live gesehen hatte, war ich noch mehr entschlossen, es alleine zu machen. Meine Idee war, dies etwas anders auszuführen - mit Plastik. Mit Edelstahl ist nichts auszusetzen. Es ist glänzend, modern, es ist schön. Aber man kann es nicht sehen, die Kanten sind scharf und es zerstört die Bleistifte und kratzt sich die Finger (es ist nicht so schlimm, aber das Arbeiten damit ist nicht sehr angenehm).
Am Anfang war Papier, jede Menge Papier, Stifte, Filzstifte und viel Zeit. In der Zwischenzeit (in der nicht-ziehenden Zeit) habe ich verschiedene GUIs untersucht, was nützlich sein kann, und am Ende gab es viele Papiere mit Zeichnungen. Diese können Sie auch hier sehen (klicken für größeres Foto). Nachdem ich entschieden hatte, dass ich genug zum Skizzieren hatte, markierte ich alle Symbole, die ich auf dem Computer neu erstellen könnte. Hier bin ich in die zweite Phase gesprungen.
Der Zeitaufwand für Skizzen war nichts im Vergleich zu Adobe Illustrator. Wie Sie sehen können, sind die Icons recht einfach, aber Sie müssen auf maximale Genauigkeit achten, so wenig Punkte wie möglich (keine unnötigen Punkte) und vor allem die Konsistenz im Stil.
Wenn Sie das Lineal von DesignCommision aus näher betrachten, ist dies die größte Unvollkommenheit - die Symbole haben keinen einheitlichen Stil. Die meisten Symbole sind einfach, aber das Benutzersymbol ist sehr detailliert. Die meisten Symbole haben eine ähnliche Größe, aber die Wiedergabetaste ist zu groß (und zu breit). Die meisten Symbole bestehen aus geraden Linien, aber die Symbole "i" und "Buch" sind unangemessen gerundet ... und so weiter.
Ich zeige Ihnen, wie Sie zwei Symbole erstellen: das Schlosssymbol und das Symbol für das Laden der Animation. Am Anfang habe ich zwei geschaffen Führungen (ganz zufällig) im Dokument - und ich habe versucht, die Größe der Symbole entlang dieser Anleitungen zu halten. Nicht dass jedes Symbol von der ersten bis zur zweiten Anleitung ist, sondern dass die Skala ungefähr gleich bleibt.
Symbole können am schnellsten erstellt werden, wenn Sie sich das Symbol als eine Mischung aus Grundformen vorstellen. Es ist immer schneller, einen halben Kreis zu löschen, als den Halbkreis von Hand zu zeichnen (mit dem Stiftwerkzeug). Wenn Sie die Arbeit mit dem Stiftwerkzeug auf ein Minimum beschränken, können Sie in kürzester Zeit präzise Formen erstellen. Versuchen Sie, anstelle des Stiftwerkzeugs verwendete Grundformen und die Pathfinder-Werkzeuge zu verwenden, um sie bei Bedarf auseinander zu brechen.
Das Symbol für das entsperrte Vorhängeschloss lässt sich noch einfacher (und schneller) erstellen.
Denken Sie nicht, dass Sie auf Anhieb alles perfekt machen können - genau wie die Vorhängeschloss-Symbole. In der Tat habe ich viele Papiere gedruckt, um die Symbole in größerem Format und auf Papier zu sehen (ob Sie es glauben oder nicht, Papier ist immer noch besser für Anpassungen). Danach habe ich einige Details hinzugefügt, einige Bereiche angepasst und einige Teile gelöscht. Diese Änderungen wurden dann in Illustrator übernommen.
Die Bilder unten zeigen meinen Prozess. Nachdem ich die Icons in einer größeren Größe gedruckt hatte, habe ich die Markierung in der gleichen Farbe ausgewählt (frage nicht warum grau, ich mag es einfach) und fügte ein paar Teile hinzu, an denen ich nicht zufrieden war. ich habe auch
andere Unvollkommenheiten mit einer roten Markierung markiert (z. B. Größenänderung, Schlaggewicht usw.). Zum löschen, Ich habe das weiße Korrekturband oder nur einen weißen Aufkleber verwendet.
Wie Sie unten sehen können, sind einfachere Symbole nur Linien in verschiedenen Längen und Winkeln, aber mit demselben Gewicht.
Nun zurück zur Schöpfung. Sehen wir uns an, wie Sie ein anderes Symbol erstellen, das zum Laden von Animationen verwendet wird.
Das Anpassen dieses Symbols ist noch einfacher, da es aus nur zwei Zeilen besteht. Alles was Sie tun müssen, ist:
Einer der Hauptvorteile dieser Symbole sollte die Möglichkeit gewesen sein, sie zu kombinieren. B. ein kleines Pluszeichen neben dem Benutzersymbol, um ein Benutzersymbol hinzuzufügen, oder ein kleines Kreuz über dem Ordnersymbol, um ein Symbol zu erstellen Ordner entfernen Symbol. Und so weiter. Unten sehen Sie ein Beispiel für eine Lupe, die Sie mit einem Plus- und Minuszeichen kombinieren können.
Mein ursprünglicher Plan bestand darin, Zahlen hinzuzufügen, die beispielsweise über dem Kalendersymbol oder im Kommentarblasen-Symbol platziert werden konnten.
So sieht es in Illustrator aus - Symbol, in / über / neben dem ich einige kleine Symbole platziert habe, um das Erscheinungsbild zu testen.
Um die Verwirrung zwischen dem Symbol und dem gerade kopierten Symbol zu vermeiden, habe ich die Farbe des kopierten in ein helleres Grau geändert.
Und jetzt zum Testen…
… Und drucken, anpassen und ändern.
Ich möchte kurz eine sehr nützliche Funktion in Adobe Illustrator erwähnen. Mit Zeichenflächen, die in Illustrator CS4 eingeführt wurden, können Sie mehrere Seiten in einem Dokument anzeigen. Man kann sagen - nichts Neues bei Wettbewerbsprodukten, aber man denke an die Möglichkeit unterschiedlicher Seitengrößen und Positionen. Sie können die Seiten hinzufügen, während Sie die Seiten in Ihre Arbeit einfügen. Und so fügte ich die Zeichenbretter hinzu…
… Und ich bewegte unbenutzte Symbole zur Seite, während die letzten in die neuen Zeichenflächen verschoben wurden.
Es hat mir sehr geholfen, vor allem beim Drucken und Korrekturen. Ohne Zeichenflächen müsste ich Ebenen oder ein großes Dokument verwenden (aber Sie können nicht einfach einen Teil dieser großen Leinwand drucken)..
Ich wollte das Lineal wirklich vielseitig machen. Ich habe über alle Möglichkeiten nachgedacht, wie ich es noch besser machen kann. Zum Beispiel mit dem Hinzufügen von Trennlinien. In Illustrator ist es sehr einfach, zeichnen Sie einfach eine Linie und fügen Sie dann einen Zickzack-Effekt hinzu, um eine gezackte Linie (a) und eine Zickzack-Linie (b) zu erzeugen. oder gepunktet (d).
Vielleicht haben Sie bemerkt, dass wir bei der Erstellung des Schlosssymbols das Schlüsselloch weiß gelassen haben, sodass es wie das Loch aussieht, aber nicht. Sie können dies einfach feststellen, indem Sie die Farbe der darunter liegenden Ebene ändern.
Es war vorher nicht wichtig, aber für das Endprodukt benötigen wir Symbole nur in einer Farbe, ohne Strich und Effekt und im Idealfall nur als ein Objekt. Um dies zu erreichen, verwenden wir die zwei Funktionen Expand Appearance und Expand und die Pathfinder-Palette. Hier ist der Prozess:
Wenn wir uns ein Dutzend Tage später bewegen, geraten wir in die Phase, in der alle Icons fertiggestellt und auf diese Weise vorbereitet wurden. Also habe ich ein neues Dokument in der Größe des Schablonenlineals erstellt und mit dem Platzieren dieser Symbole begonnen. Als Bonus habe ich noch ein paar Buttons hinzugefügt.
Da es sich um ein Schablonenlineal handelt, das ausgeschnitten wird, können die Symbole nicht angezeigt werden schwimmend Teile - weil es keine Möglichkeit gibt, wie man es macht. Wie Sie im nächsten Bild sehen können, müssen Sie diese Teile (gekreuzte Teile) löschen oder diese mit dünnen Linien verbinden (eingekreist), wenn Sie so etwas wie ich machen möchten..
Hier sind diese "Verbindungslinien" im Detail - siehe das Antennensymbol. Sie können auch feststellen, dass das Auffüllen des Akkusymbols bereits gelöscht ist.
Das Lineal in seiner endgültigen Darstellung in Illustrator sieht so aus. Ich brauchte nur jemanden zu finden, der es herstellt.
Ich habe viele E-Mails gesendet, um die richtige Firma zu finden. Zunächst schien es kein Problem zu geben, es herzustellen. Dann fand ich heraus, dass es ein Problem gab und ein großes. Die Icons waren zu klein (manchmal schneidet der Laser den falschen Teil aus). Das ganze Lineal war zu dick (manchmal zu dick, um einen Bleistift hineinzusetzen), und die Anzahl der Schnitte machte den Preis des Endprodukts unrealistisch.
Nach dem frühen Enthusiasmus hatte ich nur ein einziges Muster, viele gedruckte Papiere und die Möglichkeit, mit diesem Projekt irgendetwas anderes zu tun. Also habe ich dieses Projekt auf Eis gelegt, da es noch viel mehr Spaß macht…
Nachdem ich einige Monate aufgegeben hatte, dachte ich wieder über das Projekt nach. Das Lineal ist weg, was ist mit diesen Icons? Was ist mit einer Schrift? Wicklungen, aber mit dem Stil? Das
Die Begeisterung war zurück und ich arbeitete wieder. Wie Sie gleich sehen werden, macht das Erstellen einer Schriftart aus vorbereiteten Symbolen wie diesen Spaß.
Für den Zeichensatzauftrag musste ein weiteres Dokument (mit nur einer Zeichenfläche) mit einer Größe von 1000 x 1000 pt erstellt werden.
Danach begann ich, die Symbole aus dem Originaldokument in separate Ebenen zu kopieren, und die Größe dieser Symbole an die Dokumentgröße angepasst (um das Dokument schön auszufüllen). Da alle Icons bereits ohne Striche und Effekte waren, war die Größenänderung eine Frage von nur einem Klick. Platzieren Sie die kleinen Symbole nicht nur in der Mitte des Dokuments, sondern verwenden Sie dazu auch die Palette Ausrichten. Wählen Sie "An Zeichenfläche ausrichten" aus und klicken Sie auf "Horizontales Ausrichtungszentrum" und "Vertikales Ausrichtungszentrum", um alles auszurichten.
Nun wollte ich die großen Symbole nacheinander zeigen und sie an der richtigen Stelle gegenüber kleinen Symbolen platzieren (falls diese großen Symbole mit kleinen kombiniert werden können). Ich habe das von Hand gemacht. Wie Sie im nächsten Bild sehen können, wird das Symbol für Kommentare nach unten verschoben, während das Symbol für das Dokument nach oben verschoben wird. Der letzte Teil des Bildes zeigt das Kalendersymbol mit allen kleinen Symbolen, um ein Überlappen der Konturen zu vermeiden.
Das Symbol des Feuers zeigt, dass wir ein Dokument mit einer Größe von 1000 x 1000 pt haben, aber in seltenen Fällen können wir die Grenzen überschreiten. Für das Lesezeichensymbol (und einige andere spezielle Symbole) müssen wir uns nicht um die kleinen Symbole kümmern. In das seitliche Loch können wir nur ein Pluszeichen, ein Minuszeichen und einen Pfeil setzen.
Exportieren Sie die Icons für FontLab
Nachdem alle Symbole an der richtigen Stelle platziert wurden, war es an der Zeit, sie aus Illustrator herauszuholen. Natürlich so, dass sie in Software zum Erstellen von Schriftarten verwendet werden können (in unserem Fall FontLab, aber es ist für jede andere Software gleich)..
Wenn Sie dies für fast 200 Icons von Hand tun, würde dies stundenlang arbeiten. Warum sollten Sie dies tun, wenn Sie ein Skript verwenden können? Es ist kein Teil von Illustrator, aber ich habe ein Skript verwendet. Welches ist für diejenigen verfügbar, die die Schrift bestellen.
Mit Skripts zu arbeiten ist sehr einfach. Laden Sie es, führen Sie es aus, und Sie haben alle Ebenen als EPS-Dateien exportiert. Und mit Illustrator sind wir fertig.
Das Erstellen einer Schriftart in FontLab ist nicht für einen Artikel gedacht, sondern für ein großes Buch. Das Erstellen einer "Dingbats" -Schriftart aus vorbereiteten EPS-Symbolen ist jedoch einfach. Wie Sie sehen werden, würde jede andere Software zur Erstellung von Schriften die Arbeit erledigen, da wir nur die EPS-Dateien in einzelne Zeichen laden und die Breite festlegen müssen.
Am Anfang haben wir eine neue, leere Schriftart.
Um ein neues Zeichen zu erstellen, doppelklicken Sie in ein beliebiges Feld, und legen Sie die Größe (Breite) auf 1000 fest (wie in Illustrator)..
Importieren Sie die gewünschte EPS-Datei und… fertig.
Bei großen Icons ist die Vorgehensweise etwas anders. Wir wollen sie hinter den Kleinen zeigen und brauchen daher keinen Platz. Deshalb setzen wir ihre Breite auf Null.
Ein schneller Test mit dem Vorschaufenster zeigt an, ob es richtig funktioniert. Im Vorschaufenster habe ich mit dem Zeichen "k" (Symbol des Ordners, dessen Breite null sein sollte) begonnen. Dies bedeutet, dass das zweite Zeichen "V" (Symbol zum Neuladen) von Anfang an angezeigt wird und daher über dem vorherigen Symbol liegt.
Und das ist alles. Nach einer Stunde Klicken ist der Zeichensatz fertig. Das einzige, was übrig bleibt, ist den Namen zu setzen und zu exportieren.
Die folgenden Fotos zeigen das Testen der Vorschau von Microsoft Word.
Und jetzt haben wir eine komplette Schrift.
Vielen Dank, dass Sie sich durch einen so langen Artikel durchgelesen haben. Ich hoffe, dass Sie heute etwas Neues und Inspirierendes gelernt haben. Wie Sie im Artikel sehen können, waren meine ursprünglichen Pläne ziemlich unterschiedlich, aber die resultierende Schrift wurde großartig. Manchmal beginnen Sie in einer kreativen Richtung und enden dann auf einem anderen kreativen Weg.
Die Schriftart "GUI Design Icons" kann von myfonts.com erworben werden.
Abonnieren Sie den Vectortuts + RSS-Feed, um mit den neuesten Vektor-Tutorials und Artikeln auf dem Laufenden zu bleiben.
Accentsconagua