Erstellen Sie ein pixelgenaue Vektor-Symbol in Illustrator, Kreatives Bloq

Entwerfen Sie eine pixelgenaue Vektor-Icon-Effekte mit einzigartigen Formen zu erzielen. Jory Raphael bietet die Grundlagen und stellt einige Kern Illustrator-Tools.

Symbole und Ikonen sind unglaublich leistungsfähige Werkzeuge und werden von Menschen für mehr als 100.000 Jahre verwendet, Geschichten zu erzählen und Ideen zu kommunizieren. Computergestützte Darstellung Werkzeuge haben die Schaffung dieser Symbole auf eine neue Ebene gebracht. Aber manchmal einfache Konzepte, wie zum Beispiel einer Wellenlinie können härter sein, oder zumindest nicht so einfach, auf einem Computer zu replizieren, als sie mit der Hand sein würde. Zum Glück ist Adobe Illustrator mit zeitsparenden Techniken verpackt und einzigartigen Möglichkeiten, um Ideen umzusetzen.

Dieses Tutorial zeigt Ihnen, wie Illustrator integrierten Effekten und Kern-Tools verwenden, um den Prozess der Erstellung komplexer Formen zu vereinfachen. Illustrator hat zwei Arten von Effekten: Illustrator Effects und Photoshop-Effekte. Beide sind große Möglichkeiten, Stile zu sehen, bevor vollständig auf sich zu begehen. Aber Photoshop-Effekte, einmal in vollem Umfang angewendet, erfordern Objekte und Formen Raster Umwandlung, während die meisten Illustrator Effekte der Vektordaten halten.

Bitmap-Welt

Während viele Symbole gezeichnet werden unter Verwendung von Vektoren, sind sie am häufigsten in der Bitmap-Welt von Computer-Monitoren betrachtet. Aufmerksamkeit auf Pixel-Ebene Detail ist immer noch wichtig. Durch die Einhaltung eines Gitters und die Angabe der genauen Platzierung von Elementen, wie wir sie ziehen, können wir sicherstellen, dass unsere Vektor-Icons sowohl knackig sind und pixelgenau.

Nach den Schritten in diesem Tutorial werden Sie Ihr eigenes gerahmtes Porträt Symbol erstellen. Lass uns gehen!

01. Neues Dokument

Erstellen Sie ein neues Illustrator-Dokument. Stellen Sie die Breite / Höhe Felder 28px. Stellen Sie Einheiten auf Pixel. OK klicken. Öffnen Sie Illustrator-Menü. Wählen Sie Einstellungen und Guides - Grid ... Set Rasterlinie alle: und Untergliederungen: bis 10px. OK klicken. Öffnen Sie im Menü Ansicht. Wählen Sie Raster anzeigen.

Zeichnen Sie eine Linie 02.

Wählen Sie das Liniensegment-Werkzeug (\ auf der Tastatur). Zeichnen Sie eine Linie, während die Umschalttaste gedrückt. In der Palette Trans Wählen unteren Punkt Zentrum Referenz (kleine Gitter in der Palette), und stellen X und Y zu 14px bis 15 Pixel. Setzen Sie Breite 22px. Öffnen Sie die Kontur-Palette. Auf 1 Punkt.

03. Verwenden Zickzacke

Wählen Sie das Auswahl-Werkzeug (V). Wählen Sie die Zeile, indem Sie auf sie (oder auf eine beliebige Stelle und ziehen Sie den Cursor über die Linie). Öffnen Sie das Menü Effekte wählen Verzerren - Transformation, und wählen Sie dann Zig Zag .... Set ‚Größe:‘ auf 1px und Ridges pro Segment: bis 5px. Set-Points zu glätten.

04. Echt Kurven

Mit der Wirkung Zig Zag angewandt, haben wir noch technisch eine gerade Linie Vektor mit einer überlagerten Aussehen kurvige zu sein. Für die Zwecke dieser Übung wollen wir die Vektorlinie der Kurve kartieren wir erstellt haben. Öffnen Sie das Menü Objekt und wählen Sie Aussehen erweitern.

Zeichnen 05. einen Kreis

Wählen Sie das Ellipse-Werkzeug (L auf der Tastatur). Klicken Sie auf eine beliebige Stelle auf der Zeichenfläche. Im Pop-up, stellen Sie die Breite und Höhe Felder 5px. Wählen Sie den resultierenden Kreis und wählen Sie dann das Schere-Werkzeug (C auf der Tastatur). Klicken Sie auf den oberen und linken Ankerpunkte auf dem Kreis.

06. Richten Sie Endpunkte

Wählen Sie das Auswahl-Werkzeug (V auf der Tastatur). Wählen Sie den größeren Teil des Kreises. Drücken Sie löschen. Wählen verbleibende Bogen und mit der Transformieren-Palette, wählen Sie den rechten oberen Bezugspunkt. X eingestellt, um 3px und Y 14px die Endpunkte in dem Bogen auszurichten.

07. Machen Sie eine einzelne Zeile

Mit dem Auswahlwerkzeug, wählen Sie den Bogen und die Linie (auf eine beliebige Stelle und den Cursor über beide Stücke ziehen oder Verschiebung halten, während auf beiden Stücke klicken). Öffnen Sie das Menü Objekt, wählen Sie Pfad, und dann wählen Sie Teilnehmen. Dies schaltet den zwei getrennten Pfaden zu einer einzigen Zeile.

08. Doppelte Linien

Wählen Sie die neue Linie, die Sie gerade erstellt haben. Dann wird die Palette Transformation verwenden, wählen den oberen linken Referenzpunkt und stellen X und Y 0.5px. Mit der Linie ausgewählt noch, halten Sie Option auf Ihrer Tastatur und die Linie verschieben sie zu duplizieren.

09. Drehen Sie die Zeile

Wählen Sie die neue Linie, die Sie gerade erstellt haben und R drücken Drehen aufzurufen, und klicken Sie dann auf Eingabe. In dem Pop-up, den Winkel auf 180 # 730 ;. die Palette-Transformation, die rechte untere Bezugspunkt auswählen und sowohl X und Y 27.5px.

10. Verbinden Sie die Linien

Um den vollen Rahmen zu erstellen, wählen Sie beide Linien, kopieren Sie sie (Bearbeiten> Kopieren), dann fügen Sie sie in Position (Bearbeiten> Einfügen in Place). Drücken Sie R, Drehen und Eingang 90 # 730 aufzurufen ;. Wählen Sie alle vier Linien, öffnen Sie das Menü Objekt, wählen Sie Pfad, und dann wählen Sie Teilnehmen.

11. Füllen Sie die Farbe

Wir haben nun die Grundzüge des Rahmens Symbol gemacht. Wählen Sie die neue Form, öffnen Sie das Menü Objekt und wählen erweitern. Lassen Sie die Standardeinstellung in dem Pop-up und klicken Sie auf OK. Wählen Sie das Direktauswahl-Werkzeug (A auf der Tastatur), klicken Sie auf die Innenkante des Umrisses und drücken löschen.

12. Erstellen Sie eine quadratische Rahmen

Wählen Sie das Rechteck-Werkzeug (M auf der Tastatur) und auf eine beliebige Stelle auf der Zeichenfläche. Im Pop-up, setzt Breite und Höhe auf 18px. OK klicken. In der Palette Transformation wählt den Mittelbezugspunkt und stellt sowohl X als auch Y um 14px.

13. Machen Sie es einzigartig

Wählen Sie den äußeren Rahmen und den Platz. In der Pathfinder-Palette (Fenster> Pathfinder), unter Formmodi, wählen Sie das Minus Front. Dadurch wird das am weitesten vorne liegenden Objekt (das Quadrat) von dem Objekt subtrahieren dahinter (der Rahmen), um eine neue, einzigartige Form zu erstellen.

Zeichnen 14 einen Kopf

Um den Kopf einer Figur in unserem Bilderrahmen zu zeichnen, ein 6px durch 8px Rechteck (M auf der Tastatur und dann auf eine beliebige Stelle) ziehen in der Mitte der Rahmenöffnung. In der Palette Transformation, wählen Sie die obere Mitte Referenzpunkt und stellen X und Y zu 14px 7px.

15. Geben Sie ihm Form

Um es aussehen wie ein Kopf, wählen Sie das neue Rechteck und öffnen Sie das Menü Effekte. Dann Stylize wählen und Ecken abrunden wählen. Im Pop-up, einen Radius von 3px zu wählen, dann wählen Aussehen erweitern aus dem Menü Objekte es sich um ein einzelnes Objekt zu machen.

16. Bauen Sie die Schultern

Zeichnen Sie ein Oval mit dem Ellipse-Werkzeug (L drücken und dann auf eine beliebige Stelle). Im Popup, die Breite auf 12 Pixel und die Höhe auf 6px. Wählen Sie den oberen Mitte Referenzpunkt in der Transformations-Palette und eingestellt X zu Y zu 14px und 16px.

17. Erstellen Sie den Körper

Was ist ein Satz von Schultern ohne Körper? Verwenden Sie das Rechteck-Werkzeug (M drücken und auf eine beliebige Stelle) und ein 12px durch 3px Rechteck zeichnen. In der Palette Transformation, wählen Sie die obere Mitte Referenzpunkt und stellen X und Y zu 14px 19px zu.

18. Führen Sie die Formen

Wählen Sie alle Objekte auf der Zeichenfläche (auf eine beliebige Stelle und ziehen Sie den Cursor über alle Stücke, oder halten Sie verschieben, während auf jedem Klick), und in der Pathfinder-Palette, wählen Sie Unite (die erste Form-Modus). Was einmal war vier Formen ist jetzt eine einzige Form.