Einheitlicher Stil von Midjourney-Bildern für ein Website-Redesign

Generative KI-Tools wie ChatGPT oder Google’s Bard helfen mir dabei, lästige Aufgaben bei der Entwicklung von WordPress-Sites und -plugins oder beim Schreiben von Texten zu beschleunigen. Diese Aufgaben mache ich seit Jahren persönlich und weiß, wie ein gutes Ergebnis aussehen sollte. Generative KI hilft mir nun, schneller dorthin zu gelangen und sogar nebenbei etwas zu lernen. Aber wie ist es mit den Dingen, in denen ich nie gut und von Anfang an auf Kollegen angewiesen war, wie Layout und Design?

Seitdem ich zum ersten Mal generative KI-Tools zum Erstellen von Bildern getestet habe, wie Midjourney, Stable Diffusion oder DALL-E, hatte ich die Idee, diese zu nutzen, um eine meiner Websites (neu) zu gestalten.

Dieser Artikel zeigt die Ansätze, die ich für ein komplettes Redesign meiner deutschen Reiseseite slowakei-reise.de getestet habe. Du wirst die Tools und Vorgaben sehen, die ich verwendet habe, sowie die Herausforderungen, auf die ich gestoßen bin und die das Projekt zu einem vorübergehenden Stillstand gebracht haben.

Frontend-Designer und Hobbyisten werden eine Menge wertvoller Ideen daraus ziehen können. Wenn du ein Unternehmen hast, ist es wohl schneller und günstiger, wenn du für Hilfe einen Profi beauftragst, so wie ich es bei vielen meiner kommerziellen Projekte tue.

Die Herausforderung

Ich weiß, wenn mir ein Bild und ein Design gefallen. Aber das ist immer noch einen großen Schritt vom Erschaffen derselben entfernt. Ich weiß auch, dass eine Reihe schöner Bilder oder ein Farbschema nicht automatisch ein exzellentes Gesamtdesign ergeben.

Trotzdem bin ich neugierig und mutig genug, es jetzt zu versuchen, wo die Bilderstellung mit KI-Tools wie Midjourney viel einfacher zu sein scheint.

Mehr als zehn Jahre Entwicklung und Pflege von Websites haben mir ein Verständnis dafür gegeben, was ich brauche. Ich beabsichtige, an den folgenden Aufgaben zu arbeiten und zu sehen, ob und wie sie zusammenpassen:

1. Ein Basisbild bzw. Logo erstellen.
2. Neue Beitragsbilder mit einem konsistenten Stil für verschiedene Themen erstellen.
3. Das Farbschema aus den Bildern extrahieren und auf den Rest der Website anwenden.

Spoiler: Es ist einfach, einen schnellen Erfolg zu erzielen, wenn man beispielsweise einen eher schlichten Beitrag oder eine Seite hat, die plötzlich ein schönes Logo und Beitragsbild bekommt. Vergleich unten eine der Landingpages zur Anreise in die Slowakei vor und nach dem Hinzufügen eines mit Midjourney generierten Logos und Beitragsbilds.

Die eigentliche Herausforderung liegt in komplexeren Seiten mit mehreren Bildern und funktionalen Elementen in unterschiedlichen Stilen, wie der Startseite, die im folgenden Screenshot zu sehen ist. Es gibt kein Logo, kein Favicon und einige grob gestaltete Elemente.

Schauen wir uns jetzt an, welche Tools ich verwendet habe, um dieses Layout zu ändern, und welche Tools und Tutorials mir dabei geholfen haben.

Tools und Tutorials

Die Tools, die ich hier verwende:

• Das WP Staging Plugin erstellt eine Kopie der Live-Site, damit ich frei experimentieren kann.
• Midjourney, um Bilder zu generieren.
• Coolors, um die Farbpalette aus einem bestimmten Bild zu extrahieren.

Die Tutorials und Dokumentationen, die mir am meisten geholfen haben:

• Liste der Parameter für Midjourney
• CONSISTENT Styles for Storytelling in Midjourney (YouTube) hat mir den ersten Ansatz für konsistente Stile in Midjourney gegeben

Ich versuche, so wenige Änderungen wie möglich an der Website vorzunehmen, um dieses Projekt nicht größer zu machen, als es ist. Das bedeutet auch, das Pocono Theme von ThemeZee beizubehalten, obwohl es seit einer Weile nicht mehr aktualisiert wurde und sie mittlerweile viel bessere Themes mit Block-Unterstützung haben.

Erstellen eines Logos mit Midjourney

Ich begann im März 2023 mit Midjourney zu experimentieren. Damals war Version 5 ganz neu. Jetzt, im September 2023, ist Version 5.2 die aktuellste.

Das Logo, auf dem ich mein neues Design aufbaue, wurde im März erstellt. Es gefiel mir, aber ich hatte keine Zeit, am gesamten Designprozess zu arbeiten.

Dies sind zwei Prompts, die ich immer wieder benutzt habe:

create a favicon for a website about traveling to and within Slovakia

a very simple favicon for a website about traveling in Slovakia, iconic, --q 2

Der zweite kam schnell mit den folgenden Entwürfen.

Mir gefielen die warmen Farben der ersten Idee oben links. Dann bat ich Midjourney, Variationen davon zu generieren.

Schließlich entschied ich mich für das folgende Bild als Grundlage für das zukünftige Logo und den allgemeinen Stil der Website.

Konsistente Stile in Midjourney

Ich habe vier Methoden gefunden, um Bilder mit Midjourney basierend auf einem bestimmten Stil zu generieren.

• Varianten bereits generierter Bilder erstellen.
• Alle relevanten Stilinformationen zum Prompt hinzufügen.
• Varianten und Prompts in einem Schritt kombinieren.
• Basisbild hochladen und --seed Parameter für neue Varianten verwenden.

Als nächstes verwende ich Midjourney, um Beitragsbilder auf der Grundlage meines ausgewählten Logos zu generieren. Schauen wir mal, wie das funktioniert.

Erstellen von Varianten desselben Bildes

Ich habe die grundsätzlichen Schritte zur Erstellung von Varianten eines bereits generierten Bildes in Midjourney aus diesem Video auf YouTube entnommen.

Um loszulegen, gebe ich /settings im Midjourney Chat-Feld ein. Dann stelle ich sicher, dass „Remix mode“ aktiviert ist.

Der Remix-Modus ermöglicht es mir, den Prompt zu ändern, wann immer ich eine Variation erstellen will. Andernfalls würde Midjourney den alten Prompt wiederverwenden, was den Inhalt des Bildes nicht ändern würde.

Jetzt gehe ich zum Originalbild und suche nach der Schaltfläche „Make Variations“.

Sobald ich darauf klicke, kann ich den Prompt für das neue Bild eingeben.

Low vs. High Variation Mode

In dem oben verlinkten Video wird empfohlen, den „High Variation Mode“ zu verwenden. Dies gibt Midjourney mehr Freiheit, vom vorherigen Stil und der Form abzuweichen. Sieh dir die Ergebnisse aus dem „Low Variation Mode“ im Vergleich zum „High Variation Mode“ an. Der erste war nicht mutig genug, den Kreis zu entfernen.

a train going through the mountains in Slovakia, iconic --ar 8:5

Wenn du Lust hast, experimentier auch mit den verschiedenen Optionen für “Stylize”. Ich habe das für meinen Zweck hier nicht weiter ausgeführt.

Tipp: Midjourney ist ein einzelner Thread in Discord. Wenn du, wie ich, das gleiche Bild immer wieder als Grundlage verwendest, kannst du entweder die Option „Pin Message“ hinter den drei Punkten oben rechts verwenden und dann über „Pinned Messages“ auf die angehefteten Bilder zugreifen oder zu deinem Midjourney-Profil gehen und das Bild als Favorit markieren.

Obwohl die generierten Bilder schön aussahen, fand ich sie zu weit vom von mir anvisierten Stil entfernt. Ich weiß, dass der Prompt hier der Schlüssel ist. Also konzentrierte ich mich als Nächstes auf diesen, um konsistente Ergebnisse zu erzielen, bevor ich schließlich beide Methoden kombinierte.

Wiederverwendbare Prompts erstellen

Um konsistente Ergebnisse zu erzielen, habe ich letztendlich Farben und Stilbeschreibungen zum Prompt hinzugefügt. Schauen wir, wie wir diese aus unserem Originalbild bekommen können.

Die Farbpalette extrahieren

Da Midjourney die Hex-Werte von Farben, mit denen wir Webentwickler vertraut sind, nicht kennt, muss ich Wörter für diese finden.

Das habe ich mit dem kostenlosen Service von Coolors getan. Nach dem Hochladen des Logos gab es mir die Farbpalette zurück. In der zweiten, kleingedruckten Zeile findest du die Namen der Farben.

Wie du später sehen wirst, werde ich die Farbnamen in meinen Midjourney-Prompts und die Hex-Werte im Layout der Website verwenden.

Verwenden von /describe in Midjourney

Einige Zeit nach meinen ersten Tests von Midjourney haben sie den /describe-Befehl eingeführt.

Wenn ich /describe eingebe, bittet mich Midjourney, ein Bild hochzuladen. Es wird dann vier Beschreibungen dieses Bildes generieren.

Ich tat dies mit dem Originallogo und Midjourney gab mir einen Einblick in seinen Wortschatz und mögliche Stile.

Nutzen wir nun die Informationen aus beiden Tools, um unsere Prompts zu erstellen.

Einen wiederverwendbaren Prompt schreiben

Ich habe die Informationen von oben verwendet, um einen wiederverwendbaren Prompt zu schreiben, der Bilder mit einem konsistenten Stil und variierendem Inhalt generiert.

Die grundlegende Struktur lautet

[Elemente auf dem Bild] [Stil] [Farben] [Optionen]

Ein konkretes Beispiel für meinen Anwendungsfall sieht dann etwa so aus:

a train going through the mountains in Slovakia, in the style of vintage graphic design, naturalistic colour palette, ash grey, white, russian blue, brown sugar, iconic --ar 8:5

Hinweis: --ar 8:5 ist das Seitenverhältnis.

Die Beschreibung des Inhalts auf dem Bild ist dieselbe, die ich oben verwendet habe, als ich Variationen vom Logo erstellt habe. Dieser Prompt verwendet jedoch kein Referenzbild.

Schauen wir uns das Originalbild noch einmal an. Denk daran, ich habe keinen Verweis darauf gemacht. Alles auf den neuen Bildern basiert auf dem Prompt.

Nicht übel, aber ich habe nicht das Gefühl, dass der Stil des Logos und der generierten Bilder sehr konsistent ist. Das Feintuning der Vorgabe könnte helfen, aber ich bin im nächsten Schritt lieber zur Kombination eines Basisbildes und eines geeigneten Prompts übergegangen.

Variationen und Prompts kombinieren

Nachdem ich mit Variationen oder Prompts recht ordentliche Ergebnisse gesehen habe, kombiniere ich jetzt beide Ansätze.

Wenn ich also jetzt „Make Variation“ für das Originalbild verwende, gebe ich den Prompt aus dem vorherigen Schritt an.

a train going through the mountains in Slovakia, in the style of vintage graphic design, naturalistic colour palette, ash grey, white, russian blue, brown sugar, iconic --ar 8:5

Ich habe diese Variation+Prompt Eingabe drei Mal wiederholt. Wie du siehst, sehen die Bilder sehr konsistent aus.

Ich glaube, ich habe hiermit meinen zukünftigen Arbeitsablauf gefunden.

1. Wähle und verwende das gleiche Bild als Basislinie.
2. Farben und Stilbeschreibung aus dem Bild extrahieren.
3. Einen wiederverwendbaren Prompt schreiben.
4. Variationen aus dem Basisbild mit Hilfe des Prompts erstellen.

Ich habe hier nicht alle Experimente und getesteten Prompts aufgeführt. So habe ich etwa die Begriffe „vintage“ oder „iconic“ aus der Stilbeschreibung in einigen der Bilder entfernt.

Den Stil bei externen Bildern mit –seed beibehalten

Im März versuchte ich, einheitliche Beitragsbilder mit Hilfe des --seed-Parameters zu generieren. Dafür lud ich ein Bild hoch, das nicht von Midjourney kommen musste, und fügte dann meinen Prompt hinzu.

Das erste Ergebnis, das ich basierend auf dem Bild-Seed für das obige Logo und dem folgenden Prompt erhielt:

traveling to Slovakia by train, ash grey, white, russian blue, brown sugar, sunset, iconic --seed 123 --ar 8:5

Wie du siehst, ist der Schwachpunkt hier, dass sich Midjourney zu sehr von der Kreisform des Logos inspirieren ließ und, wie im oberen rechten Bild, versucht auf seltsame Weise zu berücksichtigen.

Jetzt, im September 2023, habe ich Seeds noch einmal ausprobiert. Mit aktiviertem „High Variante Mode“, Midjourney Version 5.2, dem gleichen Prompt wie oben und meinem Logo als Seed sah das Ergebnis ganz anders aus.

Wow, das ist ein großer Qualitätsunterschied innerhalb nur weniger Monate.

Funktioniert dies genauso wie das Erstellen von Varianten mit Remix-Modus, wie ich es oben getan habe? Ich war neugierig genug, es auszuprobieren.

a train going through the mountains in Slovakia, in the style of vintage graphic design, naturalistic colour palette, ash grey, white, russian blue, brown sugar, iconic --seed 123 --ar 8:5

Ich führte diesen Prompt dreimal aus. Interessanterweise erstellt Midjourney immer die gleichen Bilder.

Um basierend auf dem geseedten Bild Variationen zu erstellen, habe ich das Ergebnis von oben verwendet um daraus, ohne Verwendung von --seed Variationen zu erstellen. Dies ergab auch gute Alternativen, obwohl es sich langsam vom Stil entfernte, den ich ursprünglich im Sinn hatte.

Variationen oder Seeds?

Ich hatte den Eindruck, dass Variationen eines Bildes leicht unterschiedliche Stile erzeugten als die Verwendung des Seed-Parameters. Beide waren aber gut.

Für mein Beispiel fand ich die Variationen ansprechender und einfacher zu verwenden als ein Bild hochzuladen und zuerst dessen Seed-Nummer zu bekommen.

Solange du bei einer Routine bleibst, sollte es in Ordnung sein.

Jetzt schauen wir mal, wie die neuen Bilder auf meiner Website aussehen.

Den neuen Stil auf die Website anwenden

Meine Erfahrung sagte mir, dass mir die neuen Logos und Bilder zwar gefallen, dies aber nicht bedeutet, dass sie auf der Website gut aussehen würden. Zur Implementierung benötige ich noch einige Schritte.

• Kopie meiner Website zum Testen erstellen.
• Das neue Logo zur Kopfzeile hinzufügen.
• Testen der neuen Beitragsbilder auf Archivseiten.
• Testen eines allgemeinen Blocks mit Beitragsbildern.
• Testen der Duoton-Option für vorhandene Bilder.

Ich erstellte also mit dem WP Staging Plugin eine Kopie der Website. Ich habe WP Staging Pro, aber deren kostenlose Version funktioniert für diesen Zweck auch.

Neues Logo und Artikellisten

Meine Website hatte kein Logo. Viele Seiten und Beiträge verwendeten zudem ein Standard-Beitragsbild. Allein das Hochladen neuer Versionen von beidem hatte daher einen deutlichen Einfluss auf das Look and Feel.

Das war ein recht einfach erreichbarer Erfolg.

Ich habe eine eigene Seite für jedes Verkehrsmittel, auf die ich nun von dieser Landingpage verlinke. Dafür verwendete ich den Query Loop Block mit dem Cover Block, um die Beitragsbilder anzuzeigen, die ich für jede Seite hochgeladen habe.

Leider konnte der Cover-Block nicht angepasst werden – ist das eine Themen-Sache? Auch die Farbe des Links ist nicht ideal, könnte aber leicht geändert werden, wenn ich mich für diesen neuen Bildstil entscheiden würde. Wahrscheinlich würde ich, da die Liste statisch ist, eh ein Spaltenlayout anlegen und die Bilder einzeln platzieren.

Mein Ziel hier war zu sehen, wie die verschiedenen Bilder, die ich für jedes Verkehrsmittel generiert habe, zusammen funktionieren. Trotz des unglücklichen Bildformats und der automatischen Zuschneidung finde ich den Stil konsistent und diesen Teil des Experiments gelungen.

Verwenden von Duoton für vorhandene Beitragsbilder

Teil des Redesigns war es, dieses in kleinen Schritten zu implementieren und nicht alle Bilder gleichzeitig zu ersetzen. Dabei erschien mir die Duoton-Option ein Kompromiss. Diese Funktion ist bei allen bildbezogenen Blöcken vorhanden und ermöglicht es, Bilder nur mit zwei Farben einzufärben.

Hier verwendete ich die Hex-Werte der Primärfarben des Logos.

Mein Versuch war nicht erfolgreich, daher gehe ich hier nicht tiefer auf die Duoton-Funktion ein. Sieh dir den folgenden Entwurf mit den in zwei der Primärfarben eingefärbten Beitragsbildern an.

Ich habe mit weiteren Farbkombinationen gespielt, aber keine davon sah ansprechend aus. Ich werde also wahrscheinlich die Zeit investieren und zumindest die Beitragsbilder der aktuellsten Artikel durch neue ersetzen um einen einheitlichen Stil zu erhalten.

Und jetzt?

Das war’s. Während des Prozesses wurde mir klar, dass der neue Stil nicht der richtige für meine Website ist.

Viele der erstellten Beitragsbilder sahen zu „vintage“ im Stil der 1950er Jahre in den USA aus. Das Schlüsselwort „sunset“ in der Beschreibung verringerte den Spielraum ebenfalls unnötig.

Ebenfalls bestätigte sich ein sehr oberflächliches Verständnis von Nischenthemen, das ich bei vielen generativen KI-Tools – für Bilder, Texte oder Videos – gesehen habe. Es ist daher zu erwarten, dass ein Thema wie das Reisen in die Slowakei, auf ein paar stereotypische Elemente wie Berge und Burgen zurückfällt.

Trotzdem bin ich sehr zufrieden damit, dass ich mit diesem Experiment mehr über die genutzten Tools lernen konnte. Meine Reiseseite war nur der Spielplatz und Anlass dafür. Ohne einen solchen Zweck hätte ich nicht gewusst, was ich ausprobieren soll und schnell das Interesse verloren.

Kann ich mit Midjourney eine Website neu gestalten?

Ich komme zurück zur ursprünglichen Frage. Kann ich mit Midjourney oder anderen generativen KI-Tools für Bilder eine Website neu gestalten?

Ja, das kann ich, aber es braucht immer noch Zeit und Fähigkeiten. Diese Tools können nützlich sein, um eine Vielzahl von Bildern in einem konsistenten Stil zu generieren. Allerdings erfordert das Zusammenfügen zu einem einheitlichen Look weiterhin ein gutes Auge und Gespür für einheitliche Designs. Wenn das – wie bei mir – nicht deine Stärke ist und du eine ernsthafte Webpräsenz hast, dann ist ein talentierter Designer immer noch eine gute Investition.

Weitere Erkenntnisse

Einige allgemeine Erkenntnisse zum Erstellen konsistenter Stile:

• Nimm dir die Zeit, ein geeignetes Basisbild zu erstellen und die Prompts zu verfeinern.
• Bleib bei einer konstanten Midjourney-Version. Wenn ich z.B. jetzt Bilder mit Version 5.2 generiert habe, sollte ich diese Version auch verwenden, wenn ich neue Bilder erstelle.
• Spiele mit allen Elementen des Prompts. Spätere Änderungen können große Auswirkungen haben, wie in meinem Beispiel die Schlüsselwörter „vintage“ und „sunset“.
• Bleibe entweder bei Seeds oder Variationen, aber mische sie später nicht.

Bilder mit enthaltenem Text generieren

Während ich diesen Text fertigstellte, stolperte ich über ideogram.ai, einen Bildgenerator, der Text auf dem Bild einfügen kann.

Ich versuchte, den folgenden Prompt zu verwenden, um zu sehen, ob er ein allgemeines Header-Bild für die Website generieren könnte:

Website header image, TEXT at the bottom saying "Slowakei-Reise", travel, slovakia, in the style of vintage graphic design, naturalistic colour palette, ash grey, white, russian blue, brown sugar, iconic

Ich brauchte ein paar Versuche, aber schließlich kam es mit dem richtigen Text auf dem Bild heraus.

Ich überlasse es jetzt dir, weiter zu spielen…