Anfangs war ich skeptisch, KI für das Verändern meiner selbst und ohne KI erstellten Illustrationen und Logos zu verwenden. Doch schließlich siegte die Neugier. Als Input diente eine PNG-Datei meines Logos. Das Besondere an dieser Logovariante: Sie bestand nur aus Outlines, ohne Füllung. (Siehe Bild unterhalb)

Mein erster Prompt zum Bild lautete dann

"Du bist ein erfahrender Designer und Frontend-Developer. Du kennst dich mit Logo-Design, Javascript und Animation aus.

Ich hätte gerne ein sehr kurzes Video, das die als png Datei beigefügte Fuchs Illustration animiert. Die Idee ist, dass die Illustration beibehalten wird, aber eine Form von Animation stattfindet.

Zum Beispiel könnte sich der Schweif mit schwarzer Farbe füllen, wenn man den Mauszeiger bewegt. Da es sich um ein Logo handelt ist der Widererkennungswert sehr wichtig. Auch neue Farben sollen nicht dazukommen. Die Animation soll dieselben Farben verwenden wie sie schon vorhanden sind. Auch kein Hintergrund. Der Hintergrund soll einfach eine transparente Fläche sein!

Gestalte eine Animation mit Hilfe von Javascript, welche durch Bewegung des Mauszeigers ausgelöst wird. Es handelt sich um das Heroimage einer Website und es ist egal, ob man den Fuchs, der in der Herosection rechts platziert ist, gerade hovered oder aber die Headline links daneben. Sobald man die Maus bewegt, ändert sich die Animation. Setze bitte SVG Animation plus modernes Javascript ein um den gewünschten Effekt zu erzielen. Die beiden Augen sollen zusätzlich schwarz gefüllt sein. Verwende überall denselben Farbton. Es soll insgesamt nur eine Farbe zum Einsatz kommen!"

Das Ergebnis dieses Prompts war jedoch sehr ernüchternd — nämlich das Cover Bild dieses Blog Posts.

Ich wollte schon enttäuscht aufgeben, überlegte mir dann aber, dass ein besseres Ergebnis zustande kommen könnte, wenn ich der KI keine Pixeldatei liefere, sondern den SVG-Quellcode. Da ich die Illustration des Logos selbst gestaltet und erstellt hatte, war das kein Problem.

Das war das Zünglein an der Waage: Das Ergebnis war auf Anhieb sehr gut. Zu sehen auf der Startseite meiner Website.

Meine Aufgabe war es dann eigentlich nur noch, den Prompt zu verfeinern und am Schluss kleine Änderungen selbst an HTML, CSS und JS vorzunehmen.

Fazit

Je besser die Daten sind, die man der KI übergibt, und je mehr Kontext sie hat, desto besser ist das Ergebnis. Einen guten Prompt als Grundlage vorausgesetzt!

Bezüglich dieses Versuchs ist hervorzuheben, dass die KI anscheinend besser mit einem Codeschnipsel umgehen kann als mit einer Pixeldatei, wenn es um Transformation und Animation geht.