Designe in Adobe Illustrator eine Gruppe von Icons aus einfachen Vektorformen, z. B. für eine App oder ein anderes digitales Projekt.
Foto einer mürrisch aussehenden Katze auf einem Smartphone mit dem Wort „mood“ unten.

Öffne die Beispieldatei, oder erstelle ein eigenes RGB-Dokument mit der Einheit „Pixel“. Passe die Größe der Zeichenfläche an die gewünschte Größe des Icon-Satzes an.

Für die Beispieldatei haben wir über das Bedienfeld „Eigenschaften“ ein Pixelraster eingeblendet. Außerdem haben wir alle Ausrichten-Optionen aktiviert, um die Vektorgrafiken präziser anpassen zu können. Du kannst diese Einstellungen jederzeit deaktivieren.

Icons sind an einem Raster ausgerichtet. Ausrichten-Optionen sind aktiviert zum präzisen Anpassen der Vektorgrafiken.

Du kannst viele verschiedene Formen erstellen, indem du Grundformen übereinanderlegst und mit Befehlen im Bedienfeld „Pathfinder“ Objekte vereinst, abziehst usw. Wir haben mit dem Pathfinder-Vorgang „Vorderes Objekt abziehen“ ein Seiten-Icon erstellt und anschließend eine Seitenecke gestaltet, indem wir einen Eckpunkt von einem Quadrat gelöscht haben.

Übereinandergelegte Rechtecke werden bearbeitet, um das Icon einer Seite mit umgeknickter Ecke zu erstellen.

Probiere andere Kombinationsmöglichkeiten für Formen aus. Für die Herzform in unserem Beispiel haben wir zuerst die Ecken eines Rechtecks abgerundet. Mit dem Drehen-Werkzeug haben wir dann bei gedrückter Alt- bzw. Wahltaste auf die Mitte geklickt und die Form gedreht. Dann wurde eine Kopie gedreht. Als Nächstes haben wir beide Formen ausgewählt und mit dem Formerstellung-Werkzeug bei gedrückter Alt- bzw. Wahltaste unten auf die überflüssigen Bereiche geklickt, um sie zu löschen. Dann haben wir eine Linie durch die übrig gebliebenen Bereiche gezogen, um sie zu einer Herzform zusammenzufügen.

Aus Rechtecken wird durch Abrunden der Ecken und Entfernen von Bereichen mit dem Formerstellung-Werkzeug ein Herz erstellt.

Um das Erscheinungsbild der Icons zu vereinheitlichen, müssen zuerst alle Icons ausgewählt werden. Da alle unsere Icons dieselbe Flächen- und Konturfarbe hatten, haben wir „Auswahl > Gleich > Aussehen“ ausgewählt. Danach haben wir für den gesamten Icon-Satz die Flächen- und Konturfarbe geändert.

Seiten- und Herz-Icon sind ausgewählt. Fläche und Kontur werden mit „Auswahl > Gleich > Aussehen“ geändert.

Um mehrere Versionen deiner Icons zu exportieren, rufe „Fenster > Export von Element“ auf. Wähle alle Icons aus, die du exportieren möchtest, und ziehe sie auf das Bedienfeld. Gib für jedes Icon einen Namen ein. Wähle unten im Bedienfeld die gewünschten Formate und Größen aus, und klicke auf „Exportieren“.

Alle Icons im Satz werden ausgewählt und mit „Fenster > Export von Element“ in mehrere Formate exportiert, z. B. PNG und SVG.

Wahrscheinlich benötigst du die Icons in mehreren Größen für verschiedene Projekte. Da es sich um Vektorgrafiken handelt, kannst du ganz leicht die Skalierung und andere Attribute passend zum jeweiligen Bildschirm oder Gerät ändern.

03/18/2022
War diese Seite hilfreich?