TUTORIAL-ARTIKEL

Anfänger

5 Min.

Ein Website-Symbol erstellen.

Mit den Formwerkzeugen in Adobe Illustrator kannst du Vektorformen miteinander kombinieren und augenfällige Symbole für dein nächstes digitales Projekt entwerfen.

Tutorial anzeigen in Illustrator
Lerne direkt in der Applikation

Im hier gezeigten Beispielprojekt erstellst du ein Kamerasymbol, das du als Profilbild in sozialen Medien oder als Button verwenden kannst, die zu einem digitalen Lebenslauf führt.

1

Ein Projekt einrichten.

Starte Illustrator, und wähle „Neu erstellen“, oder drücke Strg+N (Windows) bzw. Befehl+N (macOS). Klicke im Fenster „Neues Dokument“ oben auf „Web“, und gib rechts die Größe an. Für dieses Beispiel haben wir eine Breite und Höhe von 400 px festgelegt. Tipp: Für Symbole eignet sich ein quadratisches Format am besten.

Klicke auf „Neu erstellen“.

2

Einfache Formen zeichnen.

Als Erstes zeichnen Sie das Gehäuse der Kamera.

Wählen Sie im Bedienfeld „Werkzeuge“ das Rechteck-Werkzeug. Klicken und ziehen Sie ein Rechteck auf der Zeichenfläche.

Zeichnen Sie ein zweites, kleineres Rechteck, das sich mit dem oberen Bereich des großen Rechtecks überschneidet.

Nutzen Sie die intelligenten Hilfslinien, um die beiden Rechtecke so anzuordnen, dass sich ihre Mittelpunkte auf einer Linie befinden: Drücken Sie die V-Taste, um das Auswahlwerkzeug aufzurufen, und ziehen Sie das kleinere Rechteck längs am größeren entlang, bis eine vertikale magentafarbene Hilfslinie angezeigt wird.

Hier finden Sie weitere Informationen zur Verwendung von Hilfslinien in Illustrator.

Als Nächstes fügst du den Blitz hinzu.

Klicke auf das Rechteck-Werkzeug. Halte die Maustaste gedrückt, bis weitere Werkzeuge angezeigt werden. Wähle dann das Ellipse-Werkzeug. Klicke und ziehe, bis innerhalb der Form ein Fadenkreuz angezeigt wird. Es wird immer eingeblendet, wenn die Form keine Ellipse, sondern ein Kreis ist. Lasse die Maustaste los, sobald der Kreis die richtige Größe hat.

Tipp: Um die Größe des Kreises proportional anzupassen, drückst du die Umschalttaste und ziehst an einem Eckpunkt.

Wenn du die Position des Kreises innerhalb des Rechtecks ändern möchtest, ziehst du die Mitte-Markierung des Kreises bis zur gewünschten Stelle.

Nun erstellst du die Form für das Objektiv.

Wähle das Ellipse-Werkzeug aus. Bewege den Cursor über das große Rechteck, bis das Wort Mitte auf dem Bildschirm erscheint. Drücke die Alt-Taste (Windows) bzw. Wahltaste (macOS), und ziehe einen Kreis aus der Mitte heraus. Auch hier weist ein Fadenkreuz auf die Kreisform hin. Lasse die Maustaste los, sobald der Kreis die richtige Größe hat.

Zeichne an der Seite einen kleineren Kreis. Klicke auf den Mittelpunkt dieses Kreises, und ziehe ihn über den größeren Kreis, bis Schnittmenge bilden oder Mitte angezeigt wird. Lasse die Maustaste los, um den Kreis fertigzustellen.

3

Formen verbinden.

In diesem Schritt fügst du die rechteckigen Formen zusammen.

Drücke die V-Taste, um das Auswahl-Werkzeug zu aktivieren. Klicke auf das große Rechteck, drücke die Umschalttaste, und klicke auf das kleine Rechteck. Jetzt sind beide ausgewählt. Wechsle zum Formerstellung-Werkzeug. Ziehe damit eine Linie, die die beiden Rechtecke verbindet, wie in der Abbildung gezeigt.

4

Farbe hinzufügen.

In diesem Schritt wendest du auf die Formen eine Flächenfarbe und verschiedene Attribute für Konturen an.

Drücke die V-Taste, um das Auswahl-Werkzeug aufzurufen. Wähle das Kameragehäuse aus. Klicke dann im Bedienfeld „Eigenschaften“ unter „Aussehen“ auf das Farbfeld für die Fläche. Klicke auf das Symbol für Farbflächen oben, und wähle das gewünschte Farbfeld aus. Klicke anschließend auf das Farbfeld für die Kontur, und wähle „Ohne“, um die Kontur zu entfernen.

Wiederhole diesen Vorgang für den kreisförmigen Blitz: Weise der Fläche die Farbe Weiß zu, und entferne die Kontur.

Um das Objektiv herauszustellen, wählst du zuerst den äußeren Kreis, hältst die Umschalttaste gedrückt und klickst dann auf den zweiten Kreis. Das Objektiv soll keine Flächenfarbe und eine weiße Kontur erhalten. Gib für die Konturstärke „5 Punkt“ an.

5

Der letzte Schliff.

Mit runden Ecken wirkt die Form harmonischer.

Wähle das Kameragehäuse aus. Drücke die A-Taste, um zum Direktauswahl-Werkzeug zu wechseln, und ziehe an einem der Griffe für abgerundete Ecken. Alle Ecken der ausgewählten Form werden gemeinsam abgerundet.

6

Für das Web speichern.

Wenn du die Größe des Symbols relativ zur Zeichenfläche ändern möchtest, wählst du „Auswahl > Alles auswählen“, um sämtliche Komponenten deiner Symbolgrafik auszuwählen. Drücke die V-Taste, um das Auswahl-Werkzeug aufzurufen. Drücke Alt+Umschalt (Windows) bzw. Wahl+Umschalt (macOS), und ziehe einen Eckgriff, um die Grafik proportional aus der Mitte heraus zu skalieren. Falls du das Symbol neu positionieren möchtest, ziehe die Mitte-Markierung.

Wähle „Datei > Speichern“. Gib deinem Projekt einen Namen, und speichere es im Adobe Illustrator-Format. Diese Datei kannst du jederzeit in Illustrator bearbeiten.

Um die endgültige Version für eine Online-Veröffentlichung zu speichern, wähle „Datei > Exportieren > Für Bildschirme exportieren“. Gib einen Speicherort und das Format „PNG 8“ an.

Tipp: Bei Bedarf kannst du die Größe der Zeichenfläche vor dem Export ändern. Wähle im Dropdown-Menü „Skalieren“ entweder „Breite“ oder „Höhe“ aus, und gib eine neue Größe ein.

Klicke auf das Zahnrad, und wähle im Dropdown-Menü „Glätten“ die Option „Bildmaterial optimiert (Supersampling)“. Wähle „Einstellungen speichern“, und klicke anschließend auf „Zeichenfläche exportieren“.

Unter Inhalte für Web- und Appdesigns exportieren erfährst du mehr über die Ausgabe von Bildmaterial für Web-Projekte.


Bild von:

Jing Wei

20. Dezember 2022

Probiere diese Tutorials mit Illustrator aus

Illustrationen und andere Grafiken mit Vektoren erstellen