Wie kann man ein Texteditor-Symbolset in Adobe Illustrator erstellen?

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Im heutigen Tutorial beschäftigen wir uns mit einem anderen Symbol-Projekt, in dem wir nach und nach lernen, wie man eine Reihe von Texteditor-Elementen erstellt, indem wir einige der grundlegenden Formen und Werkzeuge des guten alten Illustrators verwenden.

Wenn das also nach etwas für Sie klingt, schnappen Sie sich eine frische Tasse magischen Bohnensaft und fangen wir an!

Und vergessen Sie nicht, Sie können den Pack jederzeit erweitern, indem Sie zu GraphicRiver gehen, wo Sie eine riesige Auswahl an UI-Symbolen finden.

1. Wie kann man eine neue Projektdatei einrichten?

Angenommen, Sie haben Illustrator bereits im Hintergrund ausgeführt, rufen Sie es auf und richten Sie ein Neues Dokument (Datei > Neu oder Strg-N) mit den folgenden Einstellungen ein:

Anzahl der Zeichenflächen: 24
Abstand: 20 px
Spalten: 4
Breite: 32 px
Höhe: 32 px
Einheiten: Pixel

Und auf der Registerkarte Erweitert:

Farbmodus: RGB
Rastereffekte: Bildschirm (72ppi)
Vorschaumodus: Standard

2. Wie kann man ein benutzerdefiniertes Raster einrichten?

Da wir die Symbole mit einem pixelperfekten Workflow erstellen werden, möchten wir ein schönes kleines Raster einrichten, damit wir die volle Kontrolle über unsere Formen haben.

Schritt 1

Gehen Sie zum Untermenü Bearbeiten > Einstellungen > Hilfslinien und Raster und passen Sie die folgenden Einstellungen an:

Rasterlinie jede: 1 px
Unterteilungen: 1

Kurzer Tipp: Sie können mehr über Raster erfahren, indem Sie diesen ausführlichen Artikel zur Funktionsweise des Rastersystems von Illustrator lesen.

Schritt 2

Sobald wir unser benutzerdefiniertes Raster eingerichtet haben, müssen wir nur noch die Optionen Am Raster ausrichten und Am Pixel ausrichten im Menü Ansicht aktivieren, die sich jedes Mal in Am Pixel ausrichten verwandeln Sie rufen den Pixelvorschau-Modus auf (wenn Sie eine ältere Version der Software verwenden).

Wenn Sie mit dem gesamten „pixelperfekten Workflow“ noch nicht vertraut sind, empfehle ich Ihnen dringend, mein Tutorial zum Erstellen von pixelperfekten Kunstwerken durchzugehen, das Ihnen helfen wird, Ihre technischen Fähigkeiten in kürzester Zeit zu erweitern.

3. Wie kann man die Ebenen einrichten?

Wenn das neue Dokument erstellt wurde, wäre es eine gute Idee, unser Projekt mit mehreren Ebenen zu strukturieren, um die Referenzraster von den eigentlichen Symbolen zu trennen. Wenn Sie mit meinen vorherigen Tutorials vertraut sind, werden Sie feststellen, dass wir mit diesem einen etwas anderen Ansatz verfolgen, da wir das Projekt aufgrund der hohen Symbolanzahl auf Zeichenflächen statt auf Ebenen basieren.

Rufen Sie jedoch das Ebenen-Bedienfeld auf und erstellen Sie insgesamt zwei Ebenen, die wir wie folgt umbenennen:

Ebene 1: Referenzraster
Ebene 2: Symbole

4. Wie kann man die Referenzraster erstellen?

Die Referenzraster (oder Basisraster) sind eine Reihe von genau abgegrenzten Referenzflächen, die es uns ermöglichen, unsere Icons zu erstellen, indem wir uns auf Größe und Konsistenz konzentrieren.

Normalerweise bestimmt die Größe der Raster die Größe der eigentlichen Icons, und sie sollten immer die erste Entscheidung sein, die Sie treffen, wenn Sie ein neues Projekt beginnen, da Sie immer mit der kleinstmöglichen Größe beginnen und darauf aufbauen möchten.

Jetzt erstellen wir in unserem Fall das Symbol-Pack mit nur einer Größe, genauer gesagt 32 x 32 px, was auf der kleineren Seite der Skala liegt.

Schritt 1

Stellen Sie sicher, dass Sie sich auf der richtigen Ebene befinden (das wäre die erste), und greifen Sie dann zum Rechteck-Werkzeug (M) und erstellen Sie ein 32 x 32 px großes oranges Quadrat (#F15A24), das wir mittig an der ersten Zeichenfläche ausrichten und verwenden, um die Gesamtgröße unserer Symbole zu definieren.

creating the main shape for the reference grid

Schritt 2

Fügen Sie eine kleinere 28 x 28 px (#FFFFFF) hinzu, die wir über der vorherigen Form positionieren, da sie als unser aktiver Zeichenbereich fungiert und uns somit eine Rundum-Auffüllung von 2 px zur Verfügung stellt.

creating the main shape for the active drawing area

Schritt 3

Wählen und gruppieren Sie die beiden Quadrate mit der Tastenkombination Strg-G und erstellen Sie dann die verbleibenden Raster mit 23 Kopien (Strg-C > Strg-F), die wir auf jeder der leeren Zeichenflächen positionieren. Nehmen Sie sich Zeit und stellen Sie sicher, dass Sie die aktuelle Ebene sperren, bevor Sie mit dem nächsten Abschnitt fortfahren.

5. Wie kann man das Justify-Symbol erstellen?

Angenommen, Sie haben es geschafft, die kleinen Referenzraster zu erstellen und zu positionieren, gehen Sie zur nächsten Ebene (das wäre die zweite) und starten wir das Projekt, indem Sie das erste Symbol des Sets erstellen.

Schritt 1

Beginnen Sie damit, die untere horizontale Linie mit einer 2 px dicken Kontur zu erstellen, den wir mit #252A2D einfärben und dann in einem Abstand von 2 px von der Mitte der unteren Kante des aktiven Zeichenbereichs positionieren.

Schritt 2

Beenden Sie das Symbol, indem Sie die verbleibenden Zeilen mit zwei Kopien (Strg-C > Strg-F zweimal) der gerade erstellten Zeile hinzufügen, die wir vertikal in einem Abstand von 4 px vom Original stapeln werden. Wenn Sie fertig sind, wählen Sie alle drei aus und gruppieren Sie sie mit der Tastenkombination Strg-G, bevor Sie zum nächsten Referenzraster wechseln.

6. Wie kann man das Links ausrichten-Symbol erstellen?

Sobald wir mit der Arbeit am zweiten Symbol fertig sind, können wir zum nächsten aktiven Zeichenbereich übergehen, wo wir schnell unser nächstes zusammenstellen.

Schritt 1

Da einige der kommenden Symbole auf denen basieren, an denen wir gerade gearbeitet haben, erstellen wir eine Kopie (Strg-C) davon, die wir dann in das aktuelle Referenzraster einfügen (Strg-F), um sicherzustellen, dass , um zuerst auf die darunter liegende Zeichenfläche zu klicken, um sie zu aktivieren.

Schritt 2

Isolieren Sie die mittlere Kontur, indem Sie darauf doppelklicken, und verkürzen Sie dann seine Länge von 24 px auf 16 px – Sie können dies tun, indem Sie seinen rechten Ankerpunkt mit dem Direktauswahl-Werkzeug (A) auswählen und ihn dann um 8 px nach links schieben mit dem Verschieben-Werkzeug (Rechtsklick > Transformieren > Verschieben > Horizontal > - 8 px).

Wenn Sie fertig sind, drücken Sie die Escape-Taste, um den Isolationsmodus zu verlassen, und erstellen Sie dann eine Kopie (Strg-C) des resultierenden Symbols, bevor Sie zum nächsten Raster wechseln.

7. Wie kann man das Rechtsausrichtung-Symbol erstellen?

Als Nächstes erstellen wir schnell das Rechtsausrichtung-Symbol. Stellen Sie also sicher, dass Sie sich auf der richtigen Zeichenfläche befinden (das wäre die dritte) und legen wir los.

Schritt 1

Fügen Sie mit der Tastenkombination Strg-F eine Kopie des gerade fertiggestellten Symbols in den leeren aktiven Zeichenbereich ein.

Schritt 2

Passen Sie die soeben erstellte Kopie an, indem Sie sie mit dem Spiegeln-Werkzeug vertikal spiegeln (Rechtsklick> Transformieren> Spiegeln> Vertikal). Wenn Sie fertig sind, vergessen Sie nicht, eine Kopie (Strg-C) des resultierenden Symbols zu erstellen, bevor Sie mit dem nächsten fortfahren.

8. Wie kann man das Mittenausrichtung-Symbol erstellen?

Da kein Texteditor ohne eine Option zur Mittenausrichtung vollständig ist, werden wir in den folgenden Momenten schnell einen hinzufügen.

Schritt 1

Fügen Sie mit der Tastenkombination Strg-F eine Kopie des vorherigen Symbols in die vierte Zeichenfläche ein, sodass es genau an derselben Position platziert wird.

Schritt 2

Isolieren Sie die mittlere Kontur der gerade erstellten Kopie, indem Sie darauf doppelklicken, und richten Sie ihn dann mit der Option Horizontale Mitte ausrichten des Ausrichtung-Bedienfelds zentriert an der darunter liegenden Zeichenfläche aus. Wenn Sie fertig sind, verlassen Sie den Isolationsmodus schnell, indem Sie die Escape-Taste drücken.

9. Wie kann man das Einzug vergrößern-Symbol erstellen?

Gehen Sie weiter nach unten zur zweiten Reihe und vergrößern Sie dann die erste Zeichenfläche, auf der wir mit der Arbeit an unserem nächsten Symbol beginnen.

Schritt 1

Erstellen Sie die Hauptformen des Symbols mit einer Kopie (Strg-C) des Ausrichtens, die wir in den aktuell aktiven Zeichenbereich einfügen (Strg-F) und dann durch Isolieren und Verkürzen der Länge der mittleren und unteren Konturen von 24 px anpassen auf 12 px mit dem Verschieben-Werkzeug (linke Ankerpunkte ausgewählt > Rechtsklick > Transformieren > Verschieben > Horizontal > 12 px).

Schritt 2

Fügen Sie die Hauptform für den nach rechts weisenden Pfeil mit einem 8 x 12 px großen Rechteck hinzu, das wir mit #252A2D einfärben und dann auf der linken Seite des aktiven Zeichenbereichs positionieren, wie im Referenzbild zu sehen.

Schritt 3

Beenden Sie das Symbol, indem Sie die gerade erstellte Form in einen Pfeil verwandeln, indem Sie zuerst mit dem Ankerpunkt hinzufügen-Werkzeug (+) einen neuen Ankerpunkt in der Mitte seiner rechten Kante hinzufügen und dann den oberen und unteren mit dem Ankerpunkt löschen-Werkzeug (-) entfernen. Wenn Sie fertig sind, beenden Sie den Isolation-Modus und erstellen Sie eine Kopie (Strg-C) des gesamten Symbols, bevor Sie mit der nächsten Zeichenfläche fortfahren.

10. Wie kann man das Symbol zum Verkleinern des Einzugs erstellen?

Angenommen, Sie haben die Arbeit am vorherigen Symbol abgeschlossen, positionieren Sie sich auf der benachbarten Zeichenfläche, wo wir die alternative Version erstellen.

Schritt 1

Verwenden Sie die Tastenkombination Strg-F, um eine Kopie des Symbols zum Vergrößern des Einzugs in den aktuell aktiven Zeichenbereich einzufügen.

Schritt 2

Doppelklicken Sie auf den kleinen Pfeil, um ihn zu isolieren, und passen Sie ihn dann schnell an, indem Sie ihn mit dem Spiegeln-Werkzeug vertikal reflektieren (Rechtsklick > Transformieren > Spiegeln > Vertikal). Wenn Sie fertig sind, vergessen Sie nicht, den Isolationsmodus mit der Escape-Taste zu verlassen, bevor Sie zum nächsten Symbol wechseln.

11. Wie kann man das Leerzeichen vor Absatz hinzufügen-Symbol erstellen?

Sobald Sie mit der Arbeit am Symbol zum Verkleinern des Einzugs fertig sind, können wir zum nächsten aktiven Zeichenbereich übergehen, wo wir unser nächstes Element erstellen.

Schritt 1

Erstellen Sie die Hauptformen des Symbols mit einer Kopie (Strg-C) des Ausrichtens, die wir in die aktuelle Zeichenfläche einfügen (Strg-F), und achten Sie darauf, dass sie zentriert am unteren Rand des aktiven Zeichenbereichs ausgerichtet ist.

Schritt 2

Gruppieren Sie die gerade eingefügte Kopie (Rechtsklick > Gruppierung aufheben oder Umschalt-Strg-G) und passen Sie sie dann an, indem Sie die oberste Konturlinie entfernen, indem Sie sie auswählen und dann die Entf-Taste drücken.

Schritt 3

Beenden Sie das aktuelle Symbol, indem Sie den nach unten weisenden Pfeil hinzufügen. Wir erstellen es mit einem 12 x 8 px großen Rechteck (#252A2D), das wir anpassen, indem wir mit dem Ankerpunkt hinzufügen-Werkzeug (+) einen neuen Ankerpunkt in der Mitte seiner unteren Kante hinzufügen und dann den unteren mit dem Ankerpunkt löschen-Werkzeug (-) entfernen. Wenn Sie fertig sind, wählen Sie alle drei Formen aus und gruppieren Sie sie (Strg-G), bevor Sie mit der nächsten fortfahren.

12. Wie kann man das Leerzeichen nach Absatz hinzufügen-Symbol erstellen?

Als Nächstes erstellen wir schnell eine alternative Version des Symbols, an dem wir gerade gearbeitet haben.

Schritt 1

Erstellen Sie eine Kopie (Strg-C) des vorherigen Symbols, die wir (Strg-F) in den leeren aktiven Zeichenbereich einfügen, wie im Referenzbild zu sehen.

Schritt 2

Heben Sie die Gruppierung der gerade erstellten Kopie auf (Rechtsklick > Gruppierung aufheben oder Umschalt-Strg-G) und passen Sie dann das Symbol an, indem Sie die Position seiner Konturen mit dem Pfeil wie im Referenzbild zu sehen spiegeln, und stellen Sie sicher, dass Sie auswählen und gruppieren (Strg-G) bevor Sie mit dem nächsten fortfahren.

13. Wie kann man das Text-Werkzeug-Symbol erstellen?

Angenommen, Sie sind bereits in die dritte Zeile vorgerückt, beginnen wir mit der Arbeit an der nächsten Kategorie, die mit der Textformatierung zu tun hat.

Schritt 1

Erstellen Sie den oberen Abschnitt des Symbols mit einem 20 x 6 px großen Rechteck mit einer 4 px dicken Kontur, den wir mit #252A2D einfärben und dann mittig an der Oberkante des aktiven Zeichenbereichs ausrichten.

Schritt 2

Öffnen Sie den Pfad der gerade erstellten Form, indem Sie mit dem Ankerpunkt hinzufügen-Werkzeug (+) einen neuen Ankerpunkt in der Mitte der unteren Kante hinzufügen und ihn dann sofort auswählen und entfernen, indem Sie die Entf-Taste drücken.

Schritt 3

Fügen Sie den mittleren Abschnitt mit einer 20 px hohen 8 px dicken vertikalen Kontur-Linie (#252A2D) hinzu, die wir zentriert an der vorherigen Form ausrichten, wie im Referenzbild zu sehen.

Schritt 4

Beenden Sie das Symbol, indem Sie den unteren Abschnitt mit einer 16 px breiten 4 px dicken Kontur-Linie (#252A2D) erstellen, die wir zentriert an der unteren Kante des aktiven Zeichenbereichs ausrichten. Nehmen Sie sich Zeit, und wenn Sie fertig sind, wählen und gruppieren Sie (Strg-G) alle drei Formen, bevor Sie mit der nächsten fortfahren.

14. Wie kann man das Fett-Symbol erstellen?

Als Nächstes erstellen wir schnell eines der am häufigsten verwendeten Symbole in der gesamten Texteditor-Geschichte. Stellen Sie also sicher, dass Sie sich auf der nächsten Zeichenfläche positioniert haben, und springen wir direkt hinein.

Schritt 1

Erstellen Sie den unteren Abschnitt des Symbols mit einem 12 x 12 px großen Quadrat mit einer 4 px dicken Kontur, den wir mit #252A2D einfärben und dann mittig an der unteren Kante des aktiven Zeichenbereichs ausrichten.

Schritt 2

Passen Sie die gerade erstellte Form schnell an, indem Sie den Radius der rechten Ecken in den Rechteck-Eigenschaften des Transformieren-Bedienfelds auf 6 px setzen.

Schritt 3

Vervollständigen Sie das aktuelle Symbol, indem Sie den oberen Teil mit einem 8 x 8 px großen Quadrat mit einer 4 px dicken Kontur (#252A2D) hinzufügen, die wir anpassen, indem wir den Radius der rechten Ecken auf 4 px in den Rechteck-Eigenschaften des Transformieren-Bedienfelds einstellen. Sobald Sie fertig sind, positionieren Sie die resultierende Form wie im Referenzbild zu sehen ist, stellen Sie sicher, zu wählen und gruppieren Sie sie zusammen, nachdem mit dem Control-G Tastaturkürzel.

15. Wie kann man das Unterstreichung-Symbol erstellen?

Gehen Sie wie gewohnt zur nächsten Zeichenfläche, wo wir sehen, wie Sie das Unterstreichung-Symbol zusammenstellen.

Schritt 1

Beginnen Sie mit der Erstellung des unteren Abschnitts mit einer 24 px breiten 4 px dicken Kontur-Linie, die wir mit #252A2D einfärben und dann mittig an der unteren Kante des aktiven Zeichenbereichs ausrichten.

Schritt 2

Erstellen Sie die Hauptform für den Buchstaben „U“ mit einem 12 x 14 px großen Rechteck mit einer 4 px dicken Kontur (#252A2D), den wir zentriert an der Oberkante des aktiven Zeichenbereichs ausrichten, so dass sein Pfad ihn überlappt.

Schritt 3

Beginnen Sie mit der Anpassung der Form, indem Sie den Radius der unteren Ecken in den Rechteck-Eigenschaften des Transformieren-Bedienfelds auf 6 px einstellen.

Schritt 4

Beenden Sie das Symbol, indem Sie den Pfad der zuvor angepassten Form öffnen, indem Sie mit dem Ankerpunkt hinzufügen-Werkzeug (+) einen neuen Ankerpunkt in der Mitte der oberen Kante hinzufügen und ihn dann sofort auswählen und entfernen, indem Sie die Löschen-Taste drücken. Wenn Sie fertig sind, vergessen Sie nicht, die beiden Formen mit der Tastenkombination Strg-G auszuwählen und zu gruppieren.

16. Wie kann man das Kursiv-Symbol erstellen?

Wir sind jetzt beim letzten Symbol der aktuellen Zeile angelangt. Angenommen, Sie haben sich bereits auf der Zeichenfläche positioniert, erstellen wir das nächste Element.

Schritt 1

Erstellen Sie den unteren und oberen Abschnitt des „I“-förmigen Buchstabens mit zwei 16 px breiten 4 px dicken Kontur-Linien (#252A2D), die wir wie im Referenzbild zu sehen positionieren.

Schritt 2

Beenden Sie das aktuelle Symbol, indem Sie die diagonale Linie hinzufügen, die die beiden horizontalen Abschnitte mit einer 4 px dicken Kontur (#252A2D) verbindet. Wie immer, wenn Sie fertig sind, wählen und gruppieren Sie (Strg-G) alle drei Formen, bevor Sie mit der nächsten fortfahren.

17. Wie kann man das Nach vorne bringen-Symbol erstellen?

Angenommen, Sie sind eine weitere Zeile nach unten verschoben, zoomen Sie in die erste Zeichenfläche hinein und erstellen wir unser nächstes Symbol.

Schritt 1

Beginnen Sie mit der Erstellung der vorderen Form mit einem 12 x 12 px großen Quadrat mit einer 4 px dicken Kontur, den wir mit #252A2D einfärben und dann an der oberen linken Ecke des aktiven Zeichenbereichs ausrichten.

Schritt 2

Erstellen Sie die hintere Form mit einem weiteren 12 x 12 px großen Quadrat mit einer 4 px dicken Kontur (#252A2D), den wir an der unteren rechten Ecke des aktiven Zeichenbereichs ausrichten.

Schritt 3

Passen Sie die Form des gerade erstellten Quadrats an, indem Sie mit dem Ankerpunkt hinzufügen-Werkzeug (A) einen Satz neuer Ankerpunkte hinzufügen, an denen sich seine Pfade mit denen des ersten schneiden Referenzbild.

Schritt 4

Beenden Sie das Symbol, indem Sie der resultierenden Form eine Füllung hinzufügen, die wir mit einer Kopie (Strg-C) erstellen, die wir an der richtigen Stelle einfügen (Strg-F) und dann anpassen, indem wir die Kontur mit der Füllung (Umschalt-X). Wenn Sie fertig sind, wählen Sie die beiden Formen aus und gruppieren Sie sie (Strg-G), und machen Sie das gleiche anschließend für das gesamte Symbol.

18. Wie kann man das Nach hinten senden-Symbol erstellen?

Inzwischen kennen Sie die Übung bereits, also springen Sie auf die nächste Artboard und lassen Sie uns an unserem nächsten Artikel weiterarbeiten.

Schritt 1

Erstellen Sie die hintere Form mit einem 12 x 12 px großen Quadrat mit einer 4 px dicken Kontur (#252A2D), den wir an der oberen linken Ecke des aktiven Zeichenbereichs ausrichten.

Schritt 2

Beenden Sie das aktuelle Symbol, indem Sie die vordere Form mit einem weiteren 12 x 12 px großen Quadrat mit einer 4 px dicken Kontur (#252A2D) und einer 12 x 12 px Füllform (#252A2D) hinzufügen, die wir gruppieren (Control-G) und dann an der unteren rechten Ecke des aktiven Zeichenbereichs ausrichten. Wenn Sie fertig sind, wählen Sie alle Formen aus und gruppieren Sie sie (Strg-G), bevor Sie mit der nächsten fortfahren.

19. Wie kann man das Kopfzeilen einfügen-Symbol erstellen?

Stellen Sie sicher, dass Sie sich auf der leeren benachbarten Zeichenfläche positioniert haben, und beginnen wir dann mit der Arbeit an unserem nächsten Symbol.

Schritt 1

Erstellen Sie den oberen Abschnitt mit einem 20 x 6 px großen Rechteck mit einer 4 px dicken Kontur, den wir mit #252A2D einfärben und dann mittig an der Oberkante des aktiven Zeichenbereichs ausrichten.

Schritt 2

Fügen Sie die Hauptform für den unteren Abschnitt mit einem 20 x 8 px großen Rechteck mit einer 4 px dicken Kontur (#252A2D) hinzu, das wir so positionieren, dass der untere Pfad den Rand des aktiven Zeichenbereichs überlappt, wie im Referenzbild zu sehen.

Schritt 3

Schritt 4

Beenden Sie das Symbol, indem Sie das kleine Füllsegment mit einem 12 x 4 px großen Rechteck (#252A2D) hinzufügen, das wir zentriert an der unteren Kante des aktiven Zeichenbereichs ausrichten. Wenn Sie fertig sind, wählen Sie alle zusammenstellenden Formen aus und gruppieren Sie sie mit der Tastenkombination Strg-G.

20. Wie kann man das Fußzeilen einfügen-Symbol erstellen?

Als Nächstes erstellen wir schnell eine weitere Version des Kopfzeilensymbols. Stellen Sie also sicher, dass Sie sich im nächsten aktiven Zeichenbereich positionieren, und legen wir los.

Schritt 1

Erstellen Sie eine Kopie (Strg-C) des vorherigen Symbols, die wir dann mit der Tastenkombination Strg-F in die aktuelle Zeichenfläche einfügen.

Schritt 2

Beenden Sie das aktuelle Symbol, indem Sie die gerade erstellte Kopie horizontal spiegeln (Rechtsklick > Transformieren > Spiegeln > Horizontal), und stellen Sie sicher, dass Sie es danach wieder zentrieren.

21. Wie kann man das Listen-Symbol erstellen?

Unser nächster Artikel ist ein Muss für jeden guten Texteditor, also springen Sie in die nächste Zeile und springen wir direkt hinein.

Schritt 1

Erstellen Sie das obere Aufzählungszeichen mit einem 4 x 4 px großen Quadrat, das wir mit #252A2D einfärben und dann am linken Rand des aktiven Zeichenbereichs ausrichten, indem wir ihn in einem Abstand von 2 px von seinem oberen positionieren.

Schritt 2

Fügen Sie das Listenelement mit einer 16 px breiten 4 px dicken Kontur-Linie (#252A2D) hinzu, die wir neben dem Aufzählungszeichen positionieren, wie im Referenzbild zu sehen, und stellen Sie sicher, dass Sie die beiden vor dem Verschieben auswählen und zum nächsten Schritt gruppieren (Strg-G).

Schritt 3

Beenden Sie das Symbol, indem Sie zwei Kopien (Strg-C > Strg-F zweimal) der gerade gruppierten Formen erstellen, die wir unten in einem Abstand von 4 px vom Original vertikal stapeln werden. Sobald Sie Ihre Formen an Ort und Stelle haben, vergessen Sie nicht, sie alle auszuwählen und mit der Tastenkombination Strg-G zu gruppieren.

22. Wie kann man das Unterlisten-Symbol erstellen?

Wir haben jetzt ein Listensymbol, aber wie wäre es, wenn wir zur nächsten Zeichenfläche übergehen und eine untergeordnete erstellen.

Schritt 1

Erstellen Sie zunächst eine Kopie (Strg-C) des vorherigen Symbols, die wir mit der Tastenkombination Strg-F in den aktuell aktiven Zeichenbereich einfügen.

Schritt 2

Beenden Sie das aktuelle Symbol, indem Sie die mittleren und unteren Listenelemente isolieren und dann ihre Länge so anpassen, dass ihre Aufzählungszeichen wie im Referenzbild zu sehen am oberen Ende ausgerichtet sind. Nehmen Sie sich Zeit und verlassen Sie den Isolationsmodus, wenn Sie fertig sind, indem Sie die Escape-Taste drücken.

23. Wie kann man das Seitenumbruch einfügen-Symbol erstellen?

Nummer 19 unserer Artikelliste ist das Seitenumbruch-Symbol, das wir im Handumdrehen erstellen werden.

Schritt 1

Beginnen Sie mit der Erstellung der Mittellinie mit einer 24 px breiten 4 px dicken Kontur, den wir mit #252A2D einfärben und dann mittig an der darunter liegenden Zeichenfläche ausrichten.

Schritt 2

Fügen Sie die Hauptformen für die Seiten mit zwei 12 x 6 px großen Rechtecken mit einer 4 px dicken Kontur (#252A2D) hinzu, die wir auf den oberen und unteren Rändern des aktiven Zeichenbereichs positionieren, wie im Referenzbild zu sehen.

Schritt 3

Beenden Sie das Symbol, indem Sie die Pfade der gerade erstellten Formen öffnen, indem Sie einen neuen Ankerpunkt in der Mitte ihrer Außenkanten hinzufügen und sie dann sofort mit der Entf-Taste auswählen und entfernen. Wenn Sie fertig sind, wählen Sie alle drei Formen aus und gruppieren Sie sie mit der Tastenkombination Strg-G.

24. Wie kann man das Größenänderung-Symbol erstellen?

Als nächstes haben wir ein weiteres einfaches, aber nützliches Werkzeug, das die meiste Zeit übersehen wird, aber heute nicht.

Schritt 1

Erstellen Sie den Hauptkörper des Symbols mit einem 20 x 20 px großen Quadrat mit einer 4 px dicken Kontur (#252A2D), den wir mittig an der darunter liegenden Zeichenfläche ausrichten.

Schritt 2

Beenden Sie das aktuelle Symbol, indem Sie ein kleineres 12 x 12 px großes Quadrat mit einer 4 px dicken Kontur (#252A2D) erstellen, das wir an der unteren rechten Ecke des aktiven Zeichenbereichs ausrichten. Wenn Sie fertig sind, vergessen Sie nicht, die beiden auszuwählen und zu gruppieren (Strg-G), bevor Sie mit dem nächsten fortfahren.

25. Wie kann man das Formen-Symbol erstellen?

Wir sind jetzt bei unserer sechsten und letzten Reihe von Symbolen angelangt. Angenommen, Sie haben sich bereits auf der ersten Zeichenfläche positioniert, lassen Sie uns unser nächstes Element erstellen.

Schritt 1

Beginnen Sie mit dem Erstellen eines 16 x 16 px großen Kreises mit einer 4 px dicken Kontur, den wir mit #252A2D einfärben und dann an der oberen linken Ecke des aktiven Zeichenbereichs ausrichten.

Schritt 2

Fügen Sie ein kleineres 12 x 12 px großes Quadrat mit einer 4 px dicken Kontur (#252A2D) hinzu, den wir wie im Referenzbild auf dem Kreis positionieren.

Schritt 3

Beenden Sie das aktuelle Symbol, indem Sie mit dem Ankerpunkt hinzufügen-Werkzeug (+) einen Satz neuer Ankerpunkte an den Kanten des Quadrats hinzufügen, an denen sich die beiden Pfade überlappen, und dann den Eckpunkt mit der Entf-Taste auswählen und entfernen. Vergessen Sie wie immer nicht, die beiden Formen auszuwählen und zu gruppieren (Strg-G), wenn Sie fertig sind.

26. Wie kann man das Diagramm-Symbol erstellen?

Wenn Sie Charts lieben, werden Sie sich freuen zu erfahren, dass wir in den folgenden Momenten eine unserer eigenen erstellen werden.

Schritt 1

Erstellen Sie den unteren Abschnitt des Symbols mit einer 24 px breiten 4 px dicken Kontur-Linie (#252A2D), die wir zentriert an der unteren Kante des aktiven Zeichenbereichs ausrichten.

Schritt 2

Fügen Sie die vertikalen Diagrammsegmente mit drei 16 px hohen 4 px dicken Konturen (#252A2D) hinzu, die wir 4 px voneinander entfernt horizontal positionieren und dann zentriert am oberen Rand des aktiven Zeichenbereichs ausrichten.

Schritt 3

Beenden Sie das Diagramm, indem Sie die Länge der äußeren vertikalen Segmente anpassen, wie im Referenzbild zu sehen. Nehmen Sie sich Zeit, und wenn Sie fertig sind, stellen Sie sicher, dass Sie alle zusammensetzenden Formen des Symbols auswählen und gruppieren (Strg-G), bevor Sie mit der nächsten fortfahren.

27. Wie kann man das Tabelle-Symbol erstellen?

Der nächste Punkt von unserer Liste ist einer, den Sie wahrscheinlich ziemlich häufig verwenden. Stellen Sie also sicher, dass Sie sich auf der nächsten Zeichenfläche positionieren, und lernen Sie schnell, wie Sie sie erstellen.

Schritt 1

Beginnen Sie mit der Arbeit am oberen Abschnitt, indem Sie ein 8 x 8 px großes Quadrat mit einer 4 px dicken Kontur (#252A2D) erstellen, das wir an der oberen linken Ecke des aktiven Zeichenbereichs ausrichten.

Schritt 2

Fügen Sie einen breiteren 12 x 8 px mit der gleichen 4 px dicken Kontur (#252A2D) hinzu, den wir auf der rechten Seite des Quadrats positionieren, sodass sich ihre Umrisse überlappen.

Schritt 3

Erstellen Sie die linke Form für den unteren Abschnitt des Symbols mit einem 8 x 12 px großen Rechteck mit einer 4 px dicken Kontur (#252A2D), das wir an der unteren linken Ecke des aktiven Zeichenbereichs ausrichten.

Schritt 4

Vervollständigen Sie das aktuelle Symbol, indem Sie ein 12 x 12 px großes Quadrat mit einer 4 px dicken Kontur (#252A2D) in der unteren rechten Ecke der aktiven Zeichenfläche hinzufügen. Stellen Sie sicher, dass Sie alle vier Formen auswählen und anschließend mit dem Tastenkombination Control-G zusammenfassen.

28. Wie kann man das Lineal-Symbol erstellen?

Wir sind jetzt bei unserem letzten Symbol angekommen, also machen Sie sich auf den Weg zur verbleibenden Zeichenfläche und lassen Sie uns die Dinge abschließen!

Schritt 1

Erstellen Sie den oberen Abschnitt des Lineals mit einem 20 x 6 px großen Rechteck mit einer 4 px dicken Kontur (#252A2D), den wir zentriert an der Oberkante des aktiven Zeichenbereichs ausrichten.

Schritt 2

Beenden Sie das Symbol und damit das Projekt selbst, indem Sie ein 6 x 20 px großes Rechteck mit einer 4 px dicken Kontur (#252A2D) hinzufügen, das wir zentriert am linken Rand des aktiven Zeichenbereichs ausrichten. Vergessen Sie wie immer nicht, die beiden Formen auszuwählen und zu gruppieren (Strg-G), bevor Sie auf die Schaltfläche zum Speichern klicken.

Gut gemacht!

Es war vielleicht länger als sonst, aber wenn Sie es bis zum Ende geschafft haben, sollten Sie jetzt ein nettes kleines praktisches Icon-Set haben, das Sie in jedem zukünftigen Projekt verwenden können.

Wie immer hoffe ich, dass Sie es geschafft haben, mit jedem einzelnen Schritt Schritt zu halten und dabei etwas Neues und Nützliches zu lernen.

Wenn Sie jedoch Fragen haben, können Sie diese gerne im Kommentarbereich posten und ich werde mich so schnell wie möglich bei Ihnen melden!