Schneller Tipp Erstellen von einfachen Symbolen mit Adobe Illustrator, einem Handbuch für Anfänger

Für Anfänger ist es in Adobe Illustrator schwierig, scharfe Symbole zu erstellen. Mit ein paar einfachen Tricks, dem Appearance Panel und dem Shape Builder Tool, erstellen Sie in kürzester Zeit professionell aussehende Icons. Das ist einfach!


Schritt 1

Erstellen Sie zunächst ein neues Dokument im Maßstab Ihres Symbols. Übliche Größen sind 96px, 48px, 32px, 24px und 16px. Für dieses Tutorial werde ich ein 48 x 48px großes Symbol erstellen. Stellen Sie den Farbmodus auf RGB, die Rastereffekte auf 72 ppi und die Einheiten auf Pixel ein.


Schritt 2

Das Raster wird jetzt auf Pixel gesetzt. Dies erleichtert die Planung des Designs. Gehen Sie zu Voreinstellungen> Hilfslinien und Raster und legen Sie die Rasterlinie auf 10 Pixel mit 10 Unterteilungen fest. Wählen Sie dann Ansicht> Raster anzeigen und dann Ansicht> Am Raster ausrichten.


Schritt 3

Mit all meinen Symbolen (abgesehen von den sehr einfachen) möchte ich eine schnelle Miniaturskizze als Grundlage für mein Design erstellen. Sie können mit Stift und Papier oder in Illustrator oder Photoshop skizzieren. Ich habe meine Skizze in Photoshop erstellt, dann kopiert und in Illustrator auf die Zeichenfläche eingefügt.

Sobald sich die Skizze auf der Zeichenfläche befindet, kann ich sie skalieren, positionieren und dann die Deckkraft auf 50% reduzieren. Wenn Sie eine Skizze verwenden, reduzieren Sie die Deckkraft auf 50% (oder mehr, wenn die Skizze etwas zu dunkel ist), sperren Sie dann die Ebene und erstellen Sie eine neue Ebene unter der Skizzierebene. Dies ist Ihre Bildebene.


Schritt 4

Bei jeder komplexen Form können Sie sie in Grundformen unterteilen. Für dieses Design habe ich den Kopf mit dem Ellipse-Werkzeug (L) nachgeführt und die Formen dann mit dem Auswahl-Werkzeug (V) in Position gebracht und gedreht..

Wenn sich die Grundformen in der ungefähren Position befinden, nehmen Sie das Shape Builder-Werkzeug (Umschalt + M) und fügen Sie sie zusammen, indem Sie den Cursor über die Formen ziehen.


Schritt 5

Wenn Sie subtile Kurven erstellen möchten, nehmen Sie das Stiftwerkzeug (P) und zeichnen Sie die Grundform. Machen Sie einen Punkt in der Mitte jeder Kurve, hier werden die Linien geglättet.

Um glatte Kurven aus Punkten zu erstellen, verwenden Sie das Werkzeug Ankerpunkt konvertieren (Umschalttaste + C), und ziehen Sie den Punkt, während Sie die Umschalttaste gedrückt halten.

Verwenden Sie das Reflektierwerkzeug (O), um die Symmetrie zu erleichtern. Um eine Form wiederzugeben, wählen Sie sie zuerst mit dem Auswahlwerkzeug (V) und dann das Reflexionswerkzeug (O) und die Optionstaste + Klick auf der Zeichenfläche aus, auf der die Form wiedergegeben werden soll. Jetzt sollte ein Einstellungsfeld angezeigt werden.

Legen Sie die Achse so fest, wie Sie die Form widerspiegeln möchten (mein Bild wird vertikal reflektiert), und klicken Sie auf Kopieren. Sie haben jetzt eine Kopie Ihrer Form.

Kombinieren Sie die Formen mit dem Shape Builder-Werkzeug (Umschalttaste + M) und glätten Sie alle Punkte mit dem Werkzeug Ankerpunkt konvertieren (Umschalttaste + C)..


Schritt 6

Hier ist der lustige Teil. Es gibt einen Trick, mit dem Sie eine Vorschau des Symbols anzeigen können, während Sie arbeiten. Gehen Sie zuerst zu Fenster> Neues Fenster. Dadurch wird eine Kopie des Dokuments erstellt, an dem Sie gerade arbeiten.

Sobald Sie das neue Fenster erstellt haben, verbergen Sie das Raster. Stellen Sie im Menü "Ansicht" das Fenster auf "Aktuelle Größe", "Zeichenflächen ausblenden" ein und wählen Sie "Pixelvorschau". Sie haben jetzt eine nahezu perfekte Vorschau Ihres fertigen Symbols.

Das Beste an der Arbeit mit dem zweiten Fenster ist, dass sich alles, was Sie im ersten Fenster ändern, auch im zweiten Fenster ändert.


Schritt 7

Um eine Schaltfläche hinter dem Symbol zu erstellen, wählen Sie das Werkzeug "Abgerundetes Rechteck" und "Wahltaste" + Klicken Sie auf die Zeichenfläche, um ein Einstellungsmenü aufzurufen. Stellen Sie für Breite und Höhe einige Pixel weniger als die endgültige Symbolgröße ein. Dadurch haben Sie Platz, um später Schlagschatten oder Effekte hinzuzufügen. Der Eckenradius hängt von der Größe des von Ihnen erstellten Symbols ab. Ich habe mich für 6px entschieden, da mein Symbol relativ klein ist.

Nachdem Sie das abgerundete Rechteck erstellt haben, wählen Sie es aus und verschieben Sie es hinter dem Symbol, indem Sie die Befehlstaste + die linke eckige Klammer drücken.


Schritt 8

Um einen weichen Farbverlauf für das abgerundete Rechteck zu erstellen, füllen Sie die Form mit dem Verlaufswerkzeug (G) und ändern das untere Farbfeld im Farbverlauf in ein mittleres Grau. Ändern Sie das obere Farbfeld in ein sehr helles Grau und dann direkt unter dem oberen Farbfeld Klicken Sie auf den Farbverlauf, um ein drittes Farbfeld hinzuzufügen. Ändern Sie das dritte Farbfeld in einen etwas dunkleren Farbton des zweiten Graus

Um einen Umriss hinzuzufügen, gehen Sie in den Bereich "Darstellung" ("Fenster"> "Darstellung"). Klicken Sie bei ausgewähltem abgerundeten Rechteck auf die Konturoption, legen Sie die Farbe auf ein mittleres Grau (etwas dunkler als die dunkelste Schattierung) fest und legen Sie das Gewicht auf 1 Pixel fest.


Schritt 9

Jetzt fügen wir der Symbolform eine Verlaufslinie hinzu und speichern die Schaltfläche und die Symbolstile für zukünftige Designs. Erstens ist die einfachste Möglichkeit zum Erstellen einer Verlaufslinie in einer Form das Erstellen eines Versatzpfads. Wählen Sie dazu die Form aus und fügen Sie im Erscheinungsbildbereich (Fenster> Erscheinungsbild) eine neue Füllung über der ersten Füllung hinzu. Machen Sie eine etwas dunklere Version Ihres ersten Farbverlaufs.

Wie Sie im folgenden Beispiel sehen können, habe ich einen dunklen radialen Farbverlauf für die Innenseite der Form (oberer Farbverlauf) und eine hellere Version für den Umriss (unterer Farbverlauf) verwendet. Beide Füllungen können geändert werden, indem Sie die Füllfarbe im Erscheinungsbildfenster auswählen und die Einstellungen mit dem Verlaufsfeld (Fenster> Verlauf) und dem Verlaufswerkzeug (G) ändern..

Wählen Sie den oberen Farbverlauf im Erscheinungsbildfenster aus und gehen Sie zu Fx Taste am unteren Rand des Bedienfelds. Navigieren Sie zu Pfad> Versatzpfad, legen Sie den Versatz mit Round Joins auf -1px fest und klicken Sie auf OK.

Um ein Erscheinungsbild als Farbfeld zu speichern, wechseln Sie in das Darstellungsfeld und ziehen Sie das Symbol oben im Bedienfeld in das Grafikstilfenster (Fenster> Grafikstile)..


Fazit

Sie haben jetzt zwei Grafikstile, die auf viele verschiedene Formen und Schaltflächen angewendet werden können, um einen schnellen Satz grundlegender Symbole zu erstellen. Sehen Sie, was Sie sich vorstellen können, und teilen Sie Ihre Arbeit auf der Vectortuts + Facebook-Seite.

Wenn Ihnen dieses Tutorial gefallen hat, mögen Sie vielleicht "So erstellen Sie einen wiederverwendbaren Symbolstil mit dem Darstellungsfeld"..