Ik heb Thumbnail Prompt Builder gemaakt: een klein experiment om AI-gegenereerde thumbnailafbeeldingen natuurlijk uit te breiden naar verschillende platforms

Bij het maken van afbeeldingen voor blogartikelingen kunnen we tegenwoordig behoorlijk mooie visuals creëren met AI-gegenereerders zoals ChatGPT.

Echter, wanneer je dit daadwerkelijk wilt gebruiken, kom je tegen één probleem aan.

Elk platform vereist andere afbeeldingsformaten.

Bijvoorbeeld: voor dit gereedschap hadden we uiteindelijk de volgende outputs in gedachten.

Eerst dacht ik: "Als we een vierkante afbeelding maken en die kunnen aanpassen aan alle formaten, zou dat niet handig zijn?"

Daarom begon ik met het maken van Thumbnail Prompt Builder.

Wat ik eerst wilde maken

Het oorspronkelijke doel was simpel.

Een tool die een prompt genereert voor afbeeldings-AI op basis van ingevoerde artikeltitels en samenvattingen, klaar om te plakken.

Bovendien wilde ik dat gegenereerde vierkante afbeeldingen automatisch konden worden omgezet naar

• Instagram
• Thumbnail
• X
• Cover

verschillende formaten voor elk medium.

Met andere woorden, het ideale proces zou als volgt zijn:

Voer artikelinformatie in
↓
Genereer afbeeldings-AI prompt
↓
Genereer vierkante afbeelding
↓
Automatisch uitbreiden naar formaten voor verschillende media

Het ontwerp was in eerste instantie behoorlijk eenvoudig.

"Als ik het hoofdonderwerp in het midden plaats en ruimte eromheen maak, kan het op elk medium gebruikt worden."

Dat dacht ik.

Problemen ontdekt in de praktijk

Echter, toen we de afbeeldingen daadwerkelijk implementeerden, ontstonden er problemen.

Met name de omslagafbeelding.

Bij het converteren van een vierkante afbeelding naar een liggende indeling,

• worden de boven- en onderkanten sterk afgesneden
• wordt het onderwerp onnatuurlijk klein
• worden de achtergrondgrenzen opvallend
• de compositie die in het vierkante formaat goed werkt, valt uiteen in de omslagweergave

Dit gebeurde allemaal.

In eerste instantie hebben we verschillende richtingen verkend in overleg met Codex.

Bijvoorbeeld,

• Plaats de SAFE ZONE op het midden 60%
• Concentreer het hoofdonderwerp in het midden
• Verbied achtergrondvoorwerpen
• Breid links en rechts uit met alleen achtergrondkleur
• Voeg een vervaging toe aan de randen van de originele afbeelding
• Voor X / Cover: verkleinen iets zodat het niet gemakkelijk wordt afgesneden

enz.

Ze hadden allemaal een zeker effect.

Maar er bleef echter een cruciaal probleem over.

Het is lastig om op een natuurlijke manier een Cover van een vierkante afbeelding te maken.

De Cover heeft een zeer brede verhouding van 1280×560.

Als je een vierkante afbeelding vult met een pc, personen, UI-kaarten, pictogrammen en meer, kan het in het vierkant goed uitkomen, maar in de Cover wordt de boven- en onderkant aanzienlijk afgesneden.

Omgekeerd wordt het hoofdonderwerp veel te klein als je alles probeert in te passen.

Daarom hebben we besloten het ontwerp te veranderen.

Uiteindelijke conclusie: prompts in twee systemen opdelen

Uiteindelijk hebben we besloten de prompts in twee delen op te splitsen.

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

Met andere woorden, in plaats van alles met één vierkante afbeelding af te handelen,

正方形画像
→ Instagram / Thumbnail 用

横長画像
→ X / Cover 用

is dit een benadering waarin:

Dit was een aanzienlijke koerswijziging.

Aanvankelijk streefden we naar een tool die 'alles uit één afbeelding' zou maken, maar toen we dachten aan praktische implementatie, realiseerden we ons dat het natuurlijker is om de compositie van tevoren per medium op te splitsen.

In het ergste geval kunnen designers de lay-out aanpassen, maar we wilden iets maken dat ook voor mensen zonder Figma-ervaring zou werken — iets dat alleen met AI kan worden voltooid.

Wat de huidige tool kan doen

De huidige Thumbnail Prompt Builder genereert twee soorten prompts wanneer je artikelinformatie invoert.

1. Voor Instagram / Thumbnail

Een prompt voor vierkante openingsafbeeldingen.

• Vierkante afbeelding (1:1)
• Hoofdpersonage in het midden
• Witruimte die geschikt is voor verticale Instagram-uitrol
• Compositie die duidelijk zichtbaar is als blogminiatuur

met bewustzijn hiervan.

2. X / Cover-formaat

Dit is een prompt voor brede eye-catch-afbeeldingen.

• Breed formaat vanaf het begin
• Cover wordt niet makkelijk aan boven- en onderkant afgesneden
• Witruimte aan beide zijden
• Minder waarschijnlijk dat het zowel op X als op Cover misgaat

Deze instructies zijn opgenomen.

Dankzij dit voorkomen we dat de Cover-afbeelding 'een vierkante vorm die geforceerd breed is gemaakt' wordt.

We hebben ook de afbeeldingsexpansie gewijzigd in twee systemen

We hebben het afbeeldingsupload ook in twee systemen verdeeld.

• Vierkante afbeeldingsupload
• Liggende afbeeldingsupload

Van vierkante afbeeldingen genereren we

• instagram.png
• thumbnail.png

.

Van liggende afbeeldingen genereren we

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

.

We hebben Cover speciaal ingesteld om ook in dubbele grootte voor Retina uit te voeren.

Aanvankelijk probeerden we alle afbeeldingen in dubbele grootte uit te voeren, maar omdat Instagram en X posten bij upload gemakkelijk comprimeren en Thumbnail al groot genoeg is, hebben we uiteindelijk besloten om alleen Cover in dubbele grootte uit te voeren.

Zorg dat invoerinhoud niet verdwijnt

Een subtiel probleem dat we tegenkwamen tijdens het bouwen was dat het invoerformulier verdween wanneer de pagina werd vernieuwd.

Toen ik Codex wijzigingen liet aanbrengen en de pagina bijwerkte, verdween de inhoud waar ik mee bezig was soms.

Dit was een beetje stressvol, dus ik heb de opslagfunctie ook verbeterd.

Nu sla ik

• localStorage
• Cookie

beide ingevoerde inhoud op.

De Cookie-kant gebruik ik als 7-daagse back-up.

Hierdoor wordt ingevoerde inhoud veel gemakkelijker hersteld, zelfs als de pagina wordt bijgewerkt of opnieuw wordt geladen tijdens ontwikkeling.

Wat ik heb geleerd uit de implementatie

De grootste inzicht uit deze ontwikkeling was dat

AI-afbeeldingsgenerering is stabieler als je deze 'vanaf het begin per use case maakt' in plaats van 'later converteert'

.

Met name hero-afbeeldingen hebben grote verschillen in aspectratio tussen media.

Een goede compositie voor vierkant is anders dan een goede compositie voor Cover.

Als u ze geforceerd uniform maakt,

• wordt het onderwerp kleiner
• neemt de witruimte toe
• worden de bovenkant en onderkant afgesneden
• wordt de achtergrond onnatuurlijk

ontstaan deze problemen.

Daarom is de uiteindelijke aanpak:

niet te veel uniformeren de generatiepremissen per toepassing scheiden

tot dit ontwerp gekomen.

Voortgang in samenwerking met Codex

Dit gereedschap had niet vanaf het begin een duidelijk eindresultaat.

In samenwerking met Codex

• Vierkante afbeeldingen implementeren op alle platforms
• Achtergronduitbreidingsfouten elimineren
• SAFE ZONE opnieuw evalueren
• Probleem oplossen waarbij het hoofdonderwerp klein wordt in Cover
• Groottedefinities ordenen
• Retina-uitvoer toevoegen
• Maar Retina alleen beperken tot Cover
• Het prompt in twee richtingen opdelen
• Invoerinhoud opslaan

Op deze manier hebben we het ontwerp stap voor stap aanpast.

Het eerste idee was om vierkante afbeeldingen als universele masterafbeelding te gebruiken.

Maar naarmate we testafbeeldingen bekeken en verbeteringen aanbrachten, kwam het uiteindelijk neer op een meer praktische aanpak: aparte templates voor vierkant en breedbeeldformaat.

Deze verandering vond ik interessant.

Samenvatting

Thumbnail Prompt Builder is niet zomaar een gereedschap voor het schalen van afbeeldingsgrootten.

Het is meer een geval van:

een ondersteuningstool om AI-gegenereerde thumbnail-afbeeldingen voor te bereiden in een vorm die volhoudt in de praktische toepassing

.

In de huidige vorm,

• twee soorten afbeeldingsgeneratiepromt's maken op basis van artikelinformatie
• Instagram / Thumbnail genereren van vierkante afbeeldingen
• X / Cover genereren van landscape afbeeldingen
• Cover alleen ook voor Retina-uitvoer
• Invoerinhoud gedurende een bepaalde periode opslaan

tot nu toe bereikt.

Het is iets complexer geworden dan oorspronkelijk gepland, maar als gevolg daarvan is het veel gebruiksvriendelijker geworden in praktische toepassingen.

Als we in de toekomst verder willen verbeteren,

• Sjabloonwisseling voor prompts
• Kleurenbeheersing per merk
• Gegenereerde voorbeelden opslaan
• Uitvoertraject voor Notion en WordPress
• Directe integratie met AI-beeldgeneratiesoftware

Ik wil ook die proberen.

AI-beeldgeneratie is handig, maar voor daadwerkelijk gebruik in artikelen en op sociale media is menselijk ontwerp nog steeds noodzakelijk.

Ik wil Thumbnail Prompt Builder verder ontwikkelen als een hulpmiddel om wat van deze 'ontwerpoverhead' te verminderen.