Mit den Formwerkzeugen in Adobe Illustrator kannst du Vektorformen miteinander kombinieren und augenfällige Symbole für dein nächstes digitales Projekt entwerfen.
Kombinierte Vektorformen bilden eine Collage aus Camping-Symbolen. In der Mitte ist ein Bär, der einem Mann nachjagt.

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.

Eine Twitter-Seite zeigt ein monotones Kamerasymbol, das mit einem digitalen Lebenslauf verknüpft ist.

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 „Erstellen“.

Neues Dokument erstellen, „Web“ wählen und rechts die Größe angeben. Quadrate eignen sich für Symbole am besten.

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.

 

Zwei gezeichnete Rechtecke werden mithilfe der magentafarbenen Hilfslinien ausgerichtet, um das Kameragehäuse zu erstellen.

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.

Mit dem Ellipse-Werkzeug wird ein Kreis für den Blitz hinzugefügt. Magentafarbenes Fadenkreuz zeigt einen exakten Kreis an.

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.

Mit dem Ellipse-Werkzeug Kreise für die Objektivform hinzufügen. Mit Alt- bzw. Wahltaste Kreise aus der Mitte heraus ziehen.

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.

Zwei Rechtecke sind ausgewählt. Das Formerstellung-Werkzeug wird hervorgehoben, die Formen werden mit einer Linie verbunden.

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.

Dem Kamerasymbol werden Farben für Fläche und Kontur hinzugefügt.

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.

Ecken der Kamera abrunden durch Ziehen am Griff für abgerundete Ecken, einem kleinen blauen Kreis mit blauem Mittelpunkt.

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.

Kamerasymbol proportional skalieren durch Drücken von Alt+Umschalt bzw. Wahl+Umschalt und Ziehen der Eckgriffe.

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“.

Kamerasymbol im Adobe Illustrator-Format speichern und für das Web mit „Datei > Exportieren > Für Bildschirme exportieren“.

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

08/26/2021
Jing Wei
War diese Seite hilfreich?