We hebben de Thumbnail Prompt Builder gebouwd: een klein experiment om met AI gemaakte thumbnails natuurlijk over verschillende kanalen uit te rollen

Voor de uitgelichte afbeelding van een blogartikel kun je tegenwoordig met AI-beeldgeneratoren zoals ChatGPT al behoorlijk goede visuals maken.

In de praktijk loop je echter tegen één probleem aan.

De vereiste afbeeldingsformaten verschillen per kanaal enorm.

In deze tool hebben we bijvoorbeeld het volgende als eindresultaat voorzien.

Gebruik	Formaat
Instagram	1080×1350
Thumbnail	1080×1080
X	1200×675
Cover	1280×560
Cover Retina	2560×1120

Aanvankelijk dachten we: "Zou het niet handig zijn als we één vierkante afbeelding konden maken en die naar alle formaten konden uitrollen?"

Zo zijn we begonnen met de Thumbnail Prompt Builder.

Wat we oorspronkelijk wilden bouwen

Het oorspronkelijke doel was eenvoudig.

Een tool die, op basis van een artikeltitel of samenvatting, een prompt genereert die je in een AI-beeldgenerator kunt plakken.

Daarnaast zouden we een gegenereerd vierkant beeld kunnen uploaden, zodat het automatisch wordt omgezet naar

Instagram
Thumbnail
X
Cover

de verschillende formaten.

Kortom, het ideale verloop zag er zo uit:

Artikelinformatie invoeren
↓
Beeldprompt maken
↓
Vierkant beeld genereren
↓
Automatisch uitrollen naar formaten per kanaal

Het begin was een vrij eenvoudig ontwerp.

"Zet het hoofdonderwerp in het midden en laat genoeg witruimte eromheen, dan past het op elk kanaal."

Dat was ons idee.

Problemen die we ontdekten bij het daadwerkelijk testen

Toen we de afbeeldingen daadwerkelijk weergaven, bleken er echter problemen op te treden.

Vooral de coverafbeelding.

Wanneer een vierkante afbeelding naar een liggend formaat wordt omgezet,

worden de boven- en onderkant sterk afgesneden
wordt het hoofdonderwerp onnatuurlijk klein
valt de rand van de achtergrond op
De compositie die bij een vierkant werkte, valt in de cover uit elkaar

Dat is wat er gebeurde.

In het begin hebben we, in overleg met Codex, verschillende richtingen uitgeprobeerd.

Bijvoorbeeld:

De SAFE ZONE op 60% van het midden houden
Het hoofdonderwerp in het midden plaatsen
Achtergrondobjecten niet toestaan
Links en rechts uitbreiden met alleen een achtergrondkleur
Een verloop toepassen op de randen van de originele afbeelding
Bij X / Cover een beetje verkleinen zodat er minder snel iets wordt afgesneden

enzovoort.

Alle opties hadden een bepaald effect.

Er bleef echter één doorslaggevend probleem over.

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

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

Als je in een vierkante afbeelding een pc, een persoon, een UI-kaart en pictogrammen plaatst, werkt dat misschien goed in een vierkant formaat, maar in de Cover worden de boven- en onderkant sterk afgesneden.

Probeer je alles erin te stoppen, dan wordt het hoofdonderwerp juist te klein.

Daarom hebben we besloten het ontwerp aan te passen.

Uiteindelijke conclusie: de prompt splitsen in 2 sporen

Uiteindelijk hebben we gekozen voor een ontwerp waarin de prompt in 2 delen wordt gesplitst.

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

Dat betekent dat we niet alles met één vierkante afbeelding proberen op te lossen, maar

正方形画像
→ Instagram / Thumbnail 用

横長画像
→ X / Cover 用

is de gedachte.

Dit was een aanzienlijke koerswijziging.

Aanvankelijk streefden we naar een tool die alles uit één afbeelding genereert, maar bij praktisch gebruik bleek het natuurlijker om voor elk medium vanaf het begin een compositie op maat te maken.

In het slechtste geval zou een ontwerper de lay-out aanpassen, maar we wilden dat ook mensen die niet met Figma kunnen werken het konden gebruiken, met een eenvoudig proces dat volledig op AI draait.

Wat de huidige tool kan

In de huidige Thumbnail Prompt Builder worden, wanneer u artikelgegevens invoert, twee soorten prompts gegenereerd.

1. Voor Instagram / thumbnail

Een prompt voor een vierkante uitgelichte afbeelding.

1:1 vierkante afbeelding
Hoofdonderwerp in het midden
Ruimte die ook goed werkt voor verticale Instagram-weergave
Compositie die goed leesbaar is als blogthumbnail

gericht op.

2. Voor X / Cover

Dit is een prompt voor een liggende uitgelichte afbeelding.

Liggende compositie vanaf het begin
Boven- en onderkant worden ook in Cover niet snel afgesneden
Zorgt voor ruimte aan de linker- en rechterkant
Blijft ook op X en in Cover goed overeind

is als instructie opgenomen.

Hierdoor is de kans kleiner dat de Cover-afbeelding eruitziet alsof een vierkante afbeelding geforceerd breed is getrokken.

Ook de afbeeldingsuitvoer is in twee varianten opgesplitst

Ook het uploaden van afbeeldingen is in twee varianten opgesplitst.

Vierkante afbeelding uploaden
Liggende afbeelding uploaden

Van een vierkante afbeelding worden

instagram.png
thumbnail.png

gegenereerd.

Van een liggende afbeelding worden

x.png
cover.png
[email protected]

gegenereerd.

Alleen de Cover wordt ook in een dubbele resolutie voor Retina-schermen uitgevoerd.

Aanvankelijk wilden we alle afbeeldingen in dubbele grootte uitvoeren, maar Instagram en X comprimeren berichtafbeeldingen vaak bij het plaatsen, en de Thumbnail is al groot genoeg. We hebben daarom uiteindelijk besloten om alleen de Cover in dubbele grootte uit te voeren.

Ervoor zorgen dat ingevoerde gegevens niet verloren gaan

Tijdens de ontwikkeling was een lastig punt dat invoervelden leegliepen zodra de pagina werd ververst.

Wanneer Codex aan het werk was en de pagina werd ververst, verdween soms de tekst die al was ingevoerd.

Omdat dit nogal frustrerend was, hebben we ook de opslagfunctie verbeterd.

Momenteel worden de gegevens opgeslagen in

localStorage
Cookie

beide.

De cookie wordt gebruikt als back-up en blijft 7 dagen bewaard.

Hierdoor kunnen ingevoerde gegevens eenvoudiger worden hersteld, ook na een paginaverversing of een herlaadactie tijdens de ontwikkeling.

Wat we hebben geleerd tijdens de implementatie

De belangrijkste les uit deze ontwikkeling was dat

Het is stabieler om AI-afbeeldingen vanaf het begin per gebruik te maken dan ze achteraf om te zetten

dat is wat dit betekent.

Vooral bij uitgelichte afbeeldingen zijn de verschillen in verhouding per kanaal groot.

Een compositie die goed werkt in een vierkant, werkt niet noodzakelijk goed bij Cover.

Als je probeert alles geforceerd gelijk te trekken,

wordt het hoofdonderwerp kleiner,
ontstaat er te veel witruimte,
worden de boven- en onderkant afgesneden,
wordt de achtergrond onnatuurlijk,

en die problemen treden dan op.

Uiteindelijk is

We hebben niet alles over één kam geschoren; we hebben de uitgangspunten voor de generatie per gebruik gescheiden

gekozen voor een ontwerp op die manier.

Wat we deden tijdens het werken samen met Codex

Deze tool had van meet af aan niet meteen zijn definitieve vorm.

Tijdens het samenwerken met Codex

Vierkante afbeeldingen uitrollen naar verschillende kanalen
Fouten bij het uitbreiden van de achtergrond voorkomen
De SAFE ZONE opnieuw bekijken
Het probleem oplossen dat het hoofdonderwerp kleiner wordt bij Cover
Afmetingsdefinities opschonen
Retina-uitvoer toevoegen
Retina wordt echter alleen toegepast op Cover
Prompts splitsen in twee sporen
Invoer opslaan

Zo heb ik het ontwerp stap voor stap steeds verder aangepast.

Het oorspronkelijke idee was om één vierkante afbeelding als universele master te gebruiken.

Tijdens het verbeteren aan de hand van testafbeeldingen bleek die aanpak echter niet werkbaar. Uiteindelijk werd het een realistischer opzet: aparte versies voor vierkante en liggende formaten.

Die ontwikkeling vond ik zelf erg interessant.

Conclusie

Thumbnail Prompt Builder is niet zomaar een tool om afbeeldingsformaten om te zetten.

Eerlijk gezegd,

een hulpmiddel dat door AI gegenereerde uitgelichte afbeeldingen bijschaaft tot een vorm die in de praktijk bruikbaar is

In de huidige vorm

kan het op basis van artikelinformatie twee soorten prompts voor beeldgeneratie opstellen
genereert het een Instagram / Thumbnail uit een vierkante afbeelding
genereert het een X / Cover uit een liggende afbeelding
en voor alleen de Cover wordt ook een Retina-versie uitgevoerd
en het kan invoer gedurende een bepaalde periode bewaren

Het is iets complexer geworden dan ik oorspronkelijk had bedacht, maar daardoor is het in de praktijk een stuk prettiger in gebruik geworden, denk ik.

Als ik het verder wil verbeteren, wil ik