Mit den Formwerkzeugen in Adobe Illustrator CC können Sie Vektorformen miteinander kombinieren und augenfällige Symbole für Ihr nächstes digitales Projekt entwerfen.
icon-design-main

Im hier gezeigten Beispielprojekt erstellen Sie ein Kamerasymbol, das als Profilbild in sozialen Medien oder als Schaltfläche verwendet werden kann, die zu einer digitalen Fotogalerie führt.

icon-design-intro

Projekt einrichten

Starten Sie Illustrator, und wählen Sie „Neu erstellen“, oder drücken Sie Strg+N (Windows) bzw. Befehl+N (macOS). Klicken Sie im Fenster „Neues Dokument“ oben auf „Web“, und geben Sie 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.

Klicken Sie auf „Erstellen“.

icon-design-fig1

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.

 

icon-design-fig2a

Als Nächstes fügen Sie den Blitz hinzu.

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

Tipp: Um die Größe des Kreises proportional anzupassen, drücken Sie die Umschalttaste und ziehen an einem Eckpunkt.

Wenn Sie die Position des Kreises innerhalb des Rechtecks ändern möchten, ziehen Sie die Mitte-Markierung des Kreises bis zur gewünschten Stelle.

icon-design-fig2b

Nun erstellen Sie die Form für das Objektiv.

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

Zeichnen Sie an der Seite einen kleineren Kreis. Klicken Sie auf den Mittelpunkt dieses Kreises, und ziehen Sie ihn über den größeren Kreis, bis Schnittmenge bilden oder Mitte angezeigt wird. Lassen Sie die Maustaste los, um den Kreis fertigzustellen.

icon-design-fig2c

Formen verbinden

In diesem Schritt fügen Sie die rechteckigen Formen zusammen.

Drücken Sie die V-Taste, um das Auswahlwerkzeug zu aktivieren. Klicken Sie auf das große Rechteck, drücken Sie die Umschalttaste, und klicken Sie auf das kleine Rechteck. Jetzt sind beide ausgewählt. Wählen Sie das Formerstellungs-Werkzeug. Ziehen Sie damit eine Linie, die die beiden Rechtecke verbindet, wie in der Abbildung gezeigt.

icon-design-fig3

Farbe hinzufügen  

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

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

Wiederholen Sie diesen Vorgang für den kreisförmigen Blitz: Weisen Sie der Fläche die Farbe Weiß zu, und entfernen Sie die Kontur.

Um das Objektiv herauszustellen, wählen Sie zuerst den äußeren Kreis, halten die Umschalttaste gedrückt und klicken dann auf den zweiten Kreis. Das Objektiv soll keine Flächenfarbe und eine weiße Kontur erhalten. Geben Sie für die Konturstärke „5 Punkt“ an.

icon-design-fig4

Der letzte Schliff

Mit runden Ecken wirkt die Form harmonischer.

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

icon-design-fig5

Für das Web speichern

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

icon-design-fig6a

Wählen Sie „Datei > Speichern“. Geben Sie Ihrem Projekt einen Namen, und speichern Sie es im Adobe Illustrator-Format. Diese Datei können Sie jederzeit in Illustrator bearbeiten.

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

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

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

icon-design-fig6b

Unter Inhalte für Web- und Appdesigns exportieren erfahren Sie mehr über die Ausgabe von Bildmaterial für Web-Projekte.

01/10/2018
Jing Wei
War diese Seite hilfreich?