Ein einheitliches Icon-Set mit KI: ein Master-Icon, elf Geschwister, ein Stil

Bitten Sie ein Bildmodell um ein Glocken-Icon, und Sie bekommen eine schöne Glocke. Bitten Sie danach um ein Vorhängeschloss, und Sie bekommen ein schönes Schloss, gezeichnet von scheinbar einer anderen Hand: dickere Linien, schärfere Ecken, eine leichte Neigung, ein Hauch Schattierung, den die Glocke nie hatte. Nebeneinander in einer Tab-Leiste sieht die App aus wie aus drei Gratis-Paketen zusammengesetzt. Ein Icon-Set wird als Set beurteilt, und der Ausreißer fällt viel früher auf als ein gelungenes Icon.

Diese Anleitung baut zwölf Icons für eine erfundene Notiz-App namens Quillbox: Start, Suche, Benachrichtigungen, Kalender, Nachrichten, Kamera, Favoriten, Filter, Sperre, Mail, Ordner und Löschen. Die Methode funktioniert für jede Liste. Regeln festlegen, ein Master-Icon erstellen, das sie befolgt, jedes weitere Icon von diesem Master ableiten, alles in der Größe prüfen, in der man es wirklich sieht, und zum Schluss als Vektor neu zeichnen.

Die Regeln vor dem ersten Prompt aufschreiben

Einheitlichkeit besteht aus einer Handvoll Zahlen, die jedes Icon teilt. Schreiben Sie sie auf eine Karte und lassen Sie diese die ganze Zeit offen:

1. 01Das Raster. Eine quadratische Fläche, etwa 24 mal 24 Einheiten, mit einem Innenabstand von 2 Einheiten, den nichts überschreitet, außer mit Absicht. Jedes Icon wird auf diesem Raster gestaltet und erst am Ende skaliert.
2. 02Die Linie. Eine Stärke, zum Beispiel 2 Einheiten, mit runden Enden und runden Verbindungen. Kontur-Icons und gefüllte Icons mischen sich nicht in einem Set; entscheiden Sie sich für eine Art.
3. 03Der Eckenradius. Ein Radius für jedes Rechteck, etwa 3 Einheiten an den Außenecken. Ein Kalender mit weichen Ecken neben einem Mail-Icon mit spitzen Ecken ist der häufigste Verräter.
4. 04Die Keyline-Formen. Ein Kreis, ein Quadrat und ein breites Rechteck, die ungefähr dieselbe Fläche füllen, damit ein rundes und ein eckiges Icon für das Auge gleich groß wirken.
5. 05Die Palette. Eine Linienfarbe für das Set, dazu höchstens ein Akzent für den aktiven Zustand. Keine Verläufe, keine Schatten, keine zweite Linienfarbe als Dekoration.
6. 06Die Perspektive. Flach und frontal. Keine Dreiviertelansichten, keine isometrische Neigung.

Ein Master-Icon prompten, und nur eines

Wählen Sie den Master mit Bedacht: ein einfaches Icon, das die meisten Regeln auf einmal nutzt. Ein Haus eignet sich gut, denn es hat eine gerade Linie, eine Ecke, eine Verbindung und eine kleine innere Form. Schreiben Sie die Karte in einfachen Worten in den Prompt und verlangen Sie ein einzelnes Icon auf schlichtem Hintergrund, sonst nichts.

Zwei Arten von Modellen im Katalog passen dazu. Recraft 20B SVG wird so beschrieben, dass es SVG-Vektorbilder für skalierbare Grafiken und Icons erzeugt, und Recraft V4.1 Text to Vector so, dass es bearbeitbare Bilder im Vektorstil aus einem Prompt erstellt. Wenn Sie lieber mit einer Rasterzeichnung auf sauberem Freisteller beginnen, liefert Ideogram V3 Generate Transparent Bilder mit transparentem Hintergrund. Lassen Sie den Prompt viele Male laufen und beurteilen Sie die Ergebnisse an der Karte, nicht am Geschmack. Der Master, den Sie behalten, ist der, der die Regeln am besten befolgt, auch wenn ein anderer Entwurf hübscher ist.

Die Geschwister vom Master ableiten

Hier zerfallen die meisten Sets: Elf neue Prompts ergeben elf neue Interpretationen. Machen Sie stattdessen den Master zur Referenz für alles Weitere. Der Katalog hat dafür einen direkten Weg. Recraft V4 Create Style macht aus Referenzbildern eine wiederverwendbare Stil-ID, und Recraft V4 Style Text to Vector zeichnet eine Vektorgrafik aus einem Prompt plus dieser Stil-ID oder direkt aus den Referenzbildern. Geben Sie ihm Ihren Master, und sobald Sie zwei oder drei gute Geschwister haben, fügen Sie diese ebenfalls als Referenzen hinzu, damit der Stil von einer kleinen Familie gelernt wird statt von einer einzelnen Zeichnung.

Halten Sie jeden Geschwister-Prompt langweilig. Derselbe Satz wie beim Master, nur das Objekt ändert sich: eine Glocke, eine Lupe, ein Vorhängeschloss. Verzichten Sie auf Adjektive, die den Stil wegziehen, etwa niedlich, detailliert oder realistisch. Beschreiben Sie das Objekt über seine einfachsten Formen: Ein Vorhängeschloss ist ein abgerundetes Rechteck unter einem halbkreisförmigen Bügel, mit einer kurzen Linie als Schlüsselloch.

• Schwierige Objekte zuerst. Kamera, Filter und Kalender haben die meisten Teile und driften am stärksten ab. Wenn sie halten, hält der Rest auch.
• Metaphern bleiben schlicht. Benachrichtigungen sind eine Glocke, Favoriten ein Herz, Löschen ein Mülleimer. Eine clevere Metapher ist eine eigene Designentscheidung, kein Prompt-Experiment.
• Ein Objekt pro Icon. Ein Ordner mit Stern sind zwei Icons. Fügen Sie das Abzeichen später im Vektor hinzu, auf dieselbe Weise für jedes Icon, das eines braucht.
• Kleine Korrekturen statt neuer Durchläufe. Hat ein gutes Geschwister ein falsches Detail, etwa eine spitze Ecke an einer sonst richtigen Kamera, nimmt Ideogram V4.5 Edit eine Maske, sodass Sie nur diesen Teil ändern.

Ein festgelegter Stil verringert die Abweichungen; er beseitigt sie nicht. Rechnen Sie mit einigen Runden, bis alle zwölf zusammenpassen, und damit, den Rest in den nächsten Schritten von Hand zu korrigieren.

Aufreihen und klein prüfen

Legen Sie alle zwölf auf ein Blatt in einem Raster von 4 mal 3, auf demselben Hintergrund, in derselben Größe. Verkleinern Sie das Blatt dann, bis jedes Icon etwa so groß ist wie später in der App: 24 Pixel für eine Werkzeugleiste, 16 für ein Menü oder eine dichte Liste. Sehen Sie es auf einem echten Smartphone an, nicht nur auf einem großen Monitor. Gehen Sie die Liste durch:

• Der Blinzeltest. Kneifen Sie die Augen zusammen. Alle zwölf sollten dasselbe Grauwertgewicht haben. Eines, das dunkler wirkt, hat eine dickere Linie oder zu viele Striche.
• Der Größentest. Runde und eckige Icons sollten gleich groß wirken. Wirkt das Such-Icon kleiner als das Mail-Icon, ziehen Sie es bis zur Kreis-Keyline auf.
• Der Detailtest. Bei 16 Pixeln schließt sich jede Lücke, die schmaler als eine Linie ist. Das Schlüsselloch im Schloss und der Objektivring der Kamera sind die üblichen Opfer; lassen Sie sie weg oder öffnen Sie sie.
• Der Ratetest. Zeigen Sie das kleine Blatt jemandem, der es noch nicht gesehen hat, und fragen Sie, was jedes Icon bedeutet. Alles, bei dem gezögert wird, braucht eine einfachere Form oder ein Label daneben in der App.
• Der Zustandstest. Probieren Sie jedes Icon in der Akzentfarbe auf dem aktiven Tab aus. Gehört eine gefüllte Version zu Ihrem System, muss sie bei allen zwölf auf dieselbe Weise gefüllt sein.

Sauber in Vektor überführen

Auch wenn ein Modell ein SVG liefert, öffnen Sie es, bevor Sie ihm vertrauen. Generierte Pfade sind oft holprig: Dutzende Knoten, wo drei genügen würden, Linien als gefüllte Umrisse mit leicht unterschiedlichen Breiten gespeichert, Ecken mit fast, aber nicht ganz demselben Radius. Für ein Set ist der sauberste Weg, jedes Icon auf Ihrem Raster mit echten Linien neu zu zeichnen und die generierte Datei nur als Vorlage darunter zu nutzen. Unsere Anleitung von KI-Logo-Entwürfen zum Vektor behandelt das Nachzeichnen von Hand und das Vereinfachen von Formen, und dieselben Gewohnheiten gelten auch hier.

Speziell bei Icons ist die gemeinsame Konstruktion. Legen Sie Linienstärke und Eckenradius einmal als Stil in Ihrem Editor fest und wenden Sie ihn auf alle zwölf an, damit eine spätere Änderung der Linie das ganze Set ändert. Richten Sie Punkte am Raster aus, damit Linien in der Hauptgröße auf ganzen Pixeln landen. Behalten Sie die Master-Datei mit jedem Icon auf einer eigenen Zeichenfläche, benannt nach seiner Bedeutung, etwa icon-search statt magnifier, und exportieren Sie von dort in den Formaten, die Ihre Entwickler wünschen.

Wenn die Icons neben einer umfassenderen Identität bestehen müssen, können Palette und Stil-ID aus derselben Quelle kommen wie der Rest der Marke, wie beim Markenidentitäts-Board für eine fiktive Rösterei. Die Idee, einen Master festzuschreiben und alles andere darum herum aufzubauen, ist dieselbe, die auch ein Geschäftspapier-Set zusammenhält.

Was Ihre Aufgabe bleibt

Das Modell liefert Entwürfe und eine Richtung. Das fertige Set ist die Neuzeichnung: einheitliche Linien, ein echtes Raster, in echten Größen getestet. Prüfen Sie, dass kein Icon eine nahezu exakte Kopie des bekannten Symbols eines anderen Unternehmens ist, und folgen Sie den Plattformrichtlinien, wo ein Store oder ein Betriebssystem eigene Regeln für App-Icons hat. Wenn die zwölf halten, ist ein dreizehntes leicht hinzugefügt: Karte, Master und Stil-ID sind schon da. Stöbern Sie in den Vektor- und Designmodellen unter /models und beginnen Sie Ihren Master im Studio.