Ich habe den Thumbnail Prompt Builder erstellt: Ein kleines Experiment zur natürlichen Verteilung von KI-generierten Miniaturbildern auf verschiedenen Plattformen

Bei der Erstellung von Keyvisuals für Blogartikel ist es heute möglich, mit Bildgenerations-KI wie ChatGPT sehr hochwertige visuelle Inhalte zu erstellen.

Bei der praktischen Umsetzung entsteht jedoch ein Problem.

Die erforderlichen Bildgrößen unterscheiden sich je nach Plattform erheblich.

Bei diesem Tool waren beispielsweise folgende Ausgaben geplant:

Zunächst dachte ich mir: "Wäre es nicht praktisch, ein quadratisches Bild zu erstellen und es auf alle Größen auszuweiten?"

Daraufhin begann ich, den Thumbnail Prompt Builder zu entwickeln.

Was ich zunächst schaffen wollte

Das ursprüngliche Ziel war einfach.

Ein Tool, das automatisch einen Prompt für KI-Bildgeneratoren erstellt, wenn Sie einen Artikeltitel oder eine Zusammenfassung eingeben.

Wenn Sie zusätzlich die generierte quadratische Abbildung hochladen,

• Instagram
• Thumbnail
• X
• Cover

Wir wollten die Möglichkeit haben, automatisch in verschiedene Größen umzuwandeln.

Mit anderen Worten, das Ideal sieht so aus.

Artikelinformationen eingeben
↓
Prompt für Bildgenerierung erstellen
↓
quadratisches Bild generieren
↓
automatische Anpassung an verschiedene Mediengrößen

Anfangs war das Design ziemlich straightforward.

Wenn ich das Hauptmotiv in die Mitte stelle und Weißraum rundum schaffe, sollte es auf allen Medien funktionieren.

Das dachte ich zumindest.

Probleme, die sich in der Praxis gezeigt haben

Allerdings traten Probleme auf, als wir die Bilder tatsächlich ausgegeben haben.

Besonders bei den Cover-Bildern.

Beim Konvertieren von quadratischen Bildern in das Querformat

• wurden oben und unten stark abgeschnitten
• das Hauptmotiv wurde unnatürlich klein
• die Hintergrundgrenzen wurden deutlich sichtbar
• die Komposition, die im quadratischen Format funktioniert hatte, war im Cover-Format zerstört

und dergleichen mehr.

Zunächst haben wir mit Codex zusammengearbeitet und mehrere Richtungen ausprobiert.

Zum Beispiel

• SAFE ZONE auf zentrale 60% setzen
• Hauptmotiv in die Mitte konzentrieren
• Hintergrundobjekte verbieten
• Hintergrundfarbe allein links und rechts erweitern
• Fade an den Kanten des Originalbildes hinzufügen
• Bei X / Cover leicht verkleinern, um Schnitte zu vermeiden

usw.

Alle hatten einen gewissen Effekt.

Allerdings blieb ein entscheidendes Problem bestehen.

Es gibt Grenzen bei der natürlichen Erstellung von Covers aus quadratischen Bildern.

Das Cover hat ein sehr breites Seitenverhältnis von 1280×560.

Wenn man ein quadratisches Bild mit PC, Personen, UI-Karten und Symbolen füllt, kann es im quadratischen Format gut aussehen, aber im Cover wird oben und unten viel abgeschnitten.

Wenn man dagegen versucht, alles einzubeziehen, wird das Hauptmotiv zu klein.

Deshalb haben wir uns entschieden, das Design zu ändern.

Abschließende Schlussfolgerung: Prompts in zwei Systeme unterteilen

Letztendlich haben wir uns für ein Design mit zwei separaten Prompts entschieden.

Instagram / Thumbnail 用プロンプト
X / Cover 用プロンプト

Das heißt, anstatt alles mit einem einzigen quadratischen Bild abzudecken,

正方形画像
→ Instagram / Thumbnail 用

横長画像
→ X / Cover 用

ist die Herangehensweise.

Dies war eine ziemlich große Strategieänderung.

Zunächst strebten wir ein Tool an, das "alles aus einem Bild erstellt", aber bei Betrachtung des praktischen Betriebs stellte sich heraus, dass es natürlicher ist, die Komposition je nach Medium von Anfang an zu unterscheiden.

Im schlimmsten Fall könnte ein Designer das Layout anpassen, aber ich wollte, dass es mit nur KI benutzerfreundlich funktioniert – auch für Personen, die Tools wie Figma nicht bedienen können.

Was das aktuelle Tool leisten kann

Der aktuelle Thumbnail Prompt Builder generiert zwei Arten von Prompts, wenn Artikelinformationen eingegeben werden.

1. Instagram / Thumbnail

Ein Prompt für quadratische Eye-Catcher.

• 1:1 quadratisches Bild
• Hauptmotiv in der Mitte
• Ausreichend Weißraum für einfache Anpassung an vertikale Instagram-Formate
• Leicht lesbare Komposition als Blog-Thumbnail

mit Fokus auf diesen Aspekt erstellt wird.

2. X / Cover-Verwendung

Dies ist eine Anweisung für horizontale Keyvisuals.

• Von Anfang an horizontale Komposition
• Oben und unten werden auch im Cover nicht leicht abgeschnitten
• Platz an den Seiten vorsehen
• Funktioniert sowohl auf X als auch im Cover ohne Bruchstellen

Diese Anweisung haben wir hinzugefügt.

Dadurch entstehen Cover-Bilder weniger häufig mit dem Eindruck, "ein Quadrat wurde erzwungen in ein horizontales Format umgewandelt".

Die Bildverteilung wurde auch auf zwei Systeme umgestellt

Ich habe auch das Bild-Upload in zwei Systeme unterteilt.

• Quadratisches Bild-Upload
• Querformatiges Bild-Upload

Aus quadratischen Bildern werden

• instagram.png
• thumbnail.png

generiert.

Aus querformatigen Bildern werden

• x.png
• cover.png
• cover@2x.png

generiert.

Nur für Cover habe ich auch die doppelte Größe für Retina ausgegeben.

Anfangs wollte ich für alle Bilder die doppelte Größe ausgeben, aber Instagram und X komprimieren Beiträge leicht, und Thumbnail ist bereits groß genug. Am Ende habe ich mich darauf beschränkt, nur Cover in doppelter Größe auszugeben.

Eingaben nicht gelöscht bei Seitenaktualisierung

Während der Entwicklung bin ich auf ein subtiles Problem gestoßen: Das Eingabeformular wurde bei Seitenaktualisierung gelöscht.

Wenn wir bei Codex Änderungen vornahmen und die Seite aktualisierten, gingen teilweise nicht gespeicherte Inhalte verloren.

Da dies etwas frustrierend war, habe ich die Speicherfunktion verbessert.

Jetzt speichere ich

• localStorage
• Cookie

die Eingaben an beiden Orten.

Cookies dienen als 7-Tage-Sicherung.

Dadurch werden die Eingaben auch bei Seitenaktualisierungen oder Neuladen während der Entwicklung zuverlässiger wiederhergestellt.

Erkenntnisse aus der Implementierung

Die größte Erkenntnis aus dieser Entwicklung war:

KI-Bildgenerierung ist stabiler, wenn man von Anfang an für verschiedene Zwecke erstellt, anstatt hinterher zu konvertieren

Das war die wichtigste Erkenntnis.

Besonders bei Teaserbildern gibt es große Unterschiede in den Seitenverhältnissen zwischen den verschiedenen Medien.

Eine gute Komposition im quadratischen Format unterscheidet sich von einer guten Komposition im Cover-Format.

Wenn man versucht, sie auf erzwungene Weise zu vereinheitlichen, entstehen Probleme wie:

• Das Hauptmotiv wird zu klein
• Der Leerraum wird zu groß
• Oben und unten werden abgeschnitten
• Der Hintergrund wirkt unnatürlich

Diese Probleme treten auf.

Deshalb ist am Ende das beste Vorgehen:

Nicht zu stark vereinheitlichen. Die Voraussetzungen für die Generierung nach Anwendungsfall unterschiedlich gestalten.

Zu diesem Design sind wir schließlich übergegangen.

Zusammenarbeit mit Codex

Das diesmalige Tool war von Anfang an nicht in seiner endgültigen Form sichtbar.

Während der Zusammenarbeit mit Codex

• Quadratische Bilder auf verschiedene Medien verteilen
• Fehler bei der Hintergrundvergrößerung beseitigen
• SAFE ZONE überarbeiten
• Problem mit zu kleinem Hauptmotiv im Cover-Format lösen
• Größendefinitionen strukturieren
• Retina-Ausgabe hinzufügen
• Allerdings beschränken wir Retina nur auf Cover
• Prompts in zwei Systeme aufteilen
• Eingabeinhalte speichern

auf diese Weise haben wir das Design schrittweise angepasst.

Die ursprüngliche Idee war, quadratische Bilder als universelles Master-Format zu verwenden.

Aber während wir die Testbilder überarbeiteten, stellte sich heraus, dass ein praktischerer Ansatz besser funktioniert – nämlich separate Versionen für quadratische und horizontale Formate.

Diese Entwicklung war interessant.

Fazit

Thumbnail Prompt Builder ist nicht einfach ein Tool zur Bildgrößenkonvertierung.

Vielmehr ist es

ein Hilfsmittel zur Anpassung von KI-generierten Hero-Bildern in eine produktionsreife Form

ist.

In der aktuellen Form

• Zwei Arten von Bildgenerierungsprompts aus Artikelinformationen erstellen
• Instagram / Thumbnail aus quadratischen Bildern generieren
• X / Cover aus Panoramabildern generieren
• Cover auch in Retina-Auflösung ausgeben
• Eingabeinhalte für einen bestimmten Zeitraum speichern

erreicht.

Das Konzept ist etwas komplexer geworden als ursprünglich geplant, doch dadurch ist es im praktischen Betrieb deutlich benutzerfreundlicher geworden.

Für zukünftige Verbesserungen

• Umschalten von Prompt-Vorlagen
• Farbverwaltung nach Marke
• Speicherung von Generierungsbeispielen
• Ausgabepfade für Notion und WordPress
• Direkte Integration mit KI-Bildgenerierung

Ich möchte auch das ausprobieren.

KI-Bildgenerierung ist praktisch, aber für die tatsächliche Nutzung in Artikeln und auf Social Media ist immer noch ein gewisses Maß an menschlicher Gestaltung erforderlich.

Wir möchten Thumbnail Prompt Builder als Werkzeug weiterentwickeln, um diese "Gestaltungsarbeit" ein wenig zu reduzieren.