Mit den Formwerkzeugen in Adobe Illustrator kannst du Vektorformen miteinander kombinieren und augenfällige Symbole für dein nächstes digitales Projekt entwerfen.
Benötigte Materialien
In der Anwendung üben
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.
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“.
You can control how Adobe websites use cookies and similar technologies by making choices below. But note that if you disable cookies and similar technologies entirely, Adobe websites may not function properly.
Cookies are small text files stored by your web browser when you use websites. There are also other technologies that can be used for similar purposes like HTML5 Local Storage and local shared objects, web beacons, and embedded scripts. These technologies help us do things like remembering you and your preferences when you return to our sites, measure how you use the website, conduct market research, and gather information about the ads you see and interact with.
You can make choices in the menu below about what cookies and other technologies you want us to use on Adobe sites when you visit them from this browser. You can always change those choices later by clicking on the Cookie Preferences link at the bottom of the page.
If enabled:
We can improve your experience by tailoring the site and the content to things we think might be of interest
We can better keep track of your preferences — like what language you prefer to use
We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
We won’t be able to remember you from session to session so the experience may not be tailored to your interests
You’ll still have access to the content of the site but certain features that depend on cookies may not function
You’ll still see ads, they just may not be as relevant to you
General information
You can control how Adobe websites use cookies and similar technologies by making choices below. But note that if you disable cookies and similar technologies entirely, Adobe websites may not function properly.
Cookies are small text files stored by your web browser when you use websites. There are also other technologies that can be used for similar purposes like HTML5 Local Storage, web beacons, and embedded scripts. These technologies help us do things like remembering you and your preferences when you return to our sites, measure how you use the website, conduct market research, and gather information about the ads you see and interact with.
You can make choices in the menu below about what cookies and other technologies you want us to use on Adobe sites when you visit them from this browser. You can always change those choices later by clicking on the Cookie Preferences link at the bottom of the page.
If enabled:
We can improve your experience by tailoring the site and the content to things we think might be of interest
We can better keep track of your preferences — like what language you prefer to use
We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
We won’t be able to remember you from session to session so the experience may not be tailored to your interests
We’ll still count your use of our site and services
You’ll still have access to the content of the site but certain features that depend on cookies may not function
You’ll still see ads, they just may not be as relevant to you
Operate the site and core servicesOperate site and measure engagement
Always active
These cookies are required, and they are used to enable the site and related services core functionality. Without them the site could not operate, so they cannot be disabled.
These cookies enable the site and related services’ core functionality and collect statistics about user engagement, such as counting active use to help us understand trends. These cookies cannot be disabled.
Measure performance
These cookies are used to analyze site usage to measure and improve performance. Without them Adobe cannot know what content is most valued and how often unique visitors return to the site, making it hard to improve information we offer to you.
These cookies are used to analyze site usage to measure and improve performance. Without them Adobe cannot know what content is most valued, making it hard to improve information we offer to you.
Extend functionality
These cookies are used to enhance the functionality of Adobe sites such as remembering your settings and preferences to deliver a personalized experience; for example, your username, your repeated visits, preferred language, your country, or any other saved preference.
Personalize advertising
These cookies are used to enable Adobe and our partners to serve ads more relevant to your interests. Without them you will still see ads, but they might not be as relevant to you.
Personalize advertising
These cookies are used to enable Adobe and our partners to serve ads more relevant to your interests. Without them you will still see ads, but they might not be as relevant to you.