Creé Thumbnail Prompt Builder: un pequeño experimento para distribuir naturalmente imágenes de miniaturas generadas por IA en varios medios

Al crear imágenes destacadas para artículos de blog, ahora es posible generar visuales de muy buena calidad utilizando IA generativa de imágenes como ChatGPT.

Sin embargo, cuando se trata de implementarlo realmente en operaciones, surge un problema.

Los tamaños de imagen requeridos varían demasiado según la plataforma.

Por ejemplo, en esta herramienta, finalmente se consideró el siguiente resultado.

Al principio pensé: "¿No sería conveniente crear una imagen cuadrada y poder desplegarla en todos los tamaños?"

Entonces comencé a crear Thumbnail Prompt Builder.

Lo que originalmente quería crear

El propósito inicial era simple.

Una herramienta que toma títulos de artículos y descripciones como entrada y genera indicaciones para pegarse en herramientas de generación de imágenes por IA.

Además, cuando cargamos la imagen cuadrada generada,

• Instagram
• Thumbnail
• X
• Cover

queríamos poder convertirla automáticamente a cada tamaño de.

En otras palabras, el ideal era así.

Ingresar información del artículo
↓
Generar indicación para imagen
↓
Generar imagen cuadrada
↓
Desplegar automáticamente a cada tamaño de medio

Al principio, el diseño era bastante directo.

"Si colocamos el protagonista en el centro y creamos espacios en blanco alrededor, debería funcionar en cualquier medio"

es lo que pensaba.

Problemas descubiertos al probar en la práctica

Sin embargo, cuando intentamos mostrar las imágenes reales, surgieron problemas.

Especialmente con las imágenes de portada.

Cuando convertimos imágenes cuadradas a formato horizontal,

• se recortan significativamente la parte superior e inferior
• el elemento principal se vuelve inapropiadamente pequeño
• los bordes del fondo se hacen demasiado evidentes
• la composición que funcionaba en formato cuadrado se desmorona en la portada

Esto fue lo que sucedió.

Inicialmente, mientras consultábamos con Codex, probamos varios enfoques.

Por ejemplo,

• Establecer SAFE ZONE en el 60% central
• Concentrar el sujeto principal en el centro
• Prohibir objetos de fondo
• Expandir solo con color de fondo hacia los lados
• Añadir desvanecimiento en los bordes de la imagen original
• Reducir ligeramente en X / Cover para evitar recortes

Etc.

Todos tenían cierta efectividad.

Sin embargo, quedó un problema fundamental.

Existen límites para crear naturalmente un Cover a partir de una imagen cuadrada.

La portada tiene una proporción bastante panorámica de 1280×560.

Si colocas una imagen cuadrada con PC, personas, tarjetas de UI e iconos dentro, aunque se vea bien en formato cuadrado, en la portada se recorta significativamente la parte superior e inferior.

Por otro lado, si intentas incluirlo todo, el elemento principal se vuelve demasiado pequeño.

Decidimos cambiar el diseño en este punto.

Conclusión final: dividir el prompt en dos sistemas

Finalmente, decidimos diseñar dividiendo el prompt en dos.

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

Es decir, en lugar de cubrir todo con una sola imagen cuadrada,

正方形画像
→ Instagram / Thumbnail 用

横長画像
→ X / Cover 用

ese fue nuestro enfoque.

Este fue un cambio de dirección bastante significativo.

Al principio apuntábamos a crear una herramienta que hiciera "todo a partir de una sola imagen", pero al considerar la implementación real, nos dimos cuenta de que era más natural dividir la composición según cada medio desde el inicio.

En el peor de los casos, un diseñador podría ajustar el diseño, pero queríamos que fuera utilizable incluso por personas que no pueden usar Figma y similar, así que buscamos que funcionara completamente con IA.

Lo que la herramienta actual puede hacer

En el Thumbnail Prompt Builder actual, cuando ingresas información del artículo, se generan dos tipos de prompts.

1. Para Instagram / Miniatura

Es un prompt para imágenes destacadas cuadradas.

• Imagen cuadrada 1:1
• Sujeto principal en el centro
• Espacio en blanco que facilita la adaptación a formato vertical de Instagram
• Composición clara para verse bien como miniatura de blog

con esa intención en mente.

2. X / Para portada

Es un prompt para una imagen de portada en formato horizontal.

• Composición horizontal desde el principio
• Difícil que se corten los bordes superior e inferior incluso en la portada
• Dejar márgenes a izquierda y derecha
• Menos probable que se desmorone en X ni en la portada

es una instrucción que hemos añadido.

Con esto, la imagen de portada es menos propensa a verse como "un cuadrado forzado en formato horizontal".

También hemos cambiado el despliegue de imágenes a dos sistemas

También dividimos la carga de imágenes en dos sistemas.

• Carga de imágenes cuadradas
• Carga de imágenes horizontales

A partir de imágenes cuadradas,

• instagram.png
• thumbnail.png

generamos.

A partir de imágenes horizontales,

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

generamos.

Solo para Cover configuramos la salida en tamaño doble para Retina.

Al principio intentamos generar el tamaño doble para todas las imágenes, pero como Instagram y X comprimen las imágenes al publicar, y Thumbnail ya es lo suficientemente grande, finalmente decidimos limitarnos a solo la salida doble de Cover.

Evitar que el contenido ingresado desaparezca

Lo que nos causó problemas de manera silenciosa durante el desarrollo fue que el formulario de entrada desaparecía al actualizar la página.

Cuando Codex actualizaba la página, el contenido que estaba siendo editado a veces desaparecía.

Como esto causaba algo de estrés, también reforcé la funcionalidad de guardado.

Ahora

• localStorage
• Cookie

para guardar el contenido en ambos lugares.

El lado de Cookie se utiliza como copia de seguridad de 7 días.

Con esto, incluso si hay actualizaciones de página o recargas durante el desarrollo, el contenido ingresado se restaura más fácilmente.

Lo que aprendí de la implementación

La lección más importante de este desarrollo fue

la generación de imágenes con IA es más estable cuando se crea para cada uso desde el inicio que cuando se convierte después

eso.

Las imágenes destacadas, en particular, tienen grandes diferencias de proporción según el medio.

Una buena composición en formato cuadrado y una buena composición en Cover son diferentes.

Si intentas estandarizar demasiado,

• el sujeto se vuelve más pequeño
• el espacio en blanco aumenta demasiado
• la parte superior e inferior se corta
• el fondo se ve antinatural

surgen estos problemas.

Por lo tanto, al final,

no estandarices demasiado separa las premisas de generación según el uso

Nos decidimos por este enfoque.

Progreso a través del intercambio con Codex

Esta herramienta no tenía una forma final clara desde el principio.

A través del intercambio con Codex,

• Distribuir imágenes cuadradas en cada medio
• Eliminar fallos en la extensión de fondo
• Revisar la SAFE ZONE
• Resolver el problema del protagonista pequeño en Cover
• Organizar las definiciones de tamaño
• Añadir salida Retina
• Sin embargo, Retina se limita solo a Cover
• Dividir los prompts en dos sistemas
• Guardar el contenido ingresado

De esta forma, fuimos cambiando gradualmente el diseño.

La idea inicial era «usar una imagen cuadrada como patrón maestro universal».

Pero mientras mejorábamos viendo imágenes de prueba, finalmente terminamos con una forma más realista: «separar las de formato cuadrado y las de formato apaisado».

Este cambio fue interesante.

Conclusión

Thumbnail Prompt Builder no es simplemente una herramienta para cambiar el tamaño de las imágenes.

Dicho de otro modo,

una herramienta auxiliar para ajustar imágenes de portada creadas con IA a un formato operativo real

.

En su forma actual,

• Generar dos tipos de indicaciones para la creación de imágenes a partir de la información del artículo
• Generar Instagram / Miniatura a partir de imágenes cuadradas
• Generar X / Portada a partir de imágenes horizontales
• Generar también versión Retina solo para Portada
• Guardar el contenido introducido durante un período determinado

hasta ese punto.

Aunque es un poco más complejo de lo que imaginé inicialmente, creo que en la operación real se ha convertido en una forma mucho más fácil de usar.

Si queremos mejorar aún más en el futuro,

• Cambio de plantilla de indicaciones
• Gestión de esquema de colores por marca
• Guardado de ejemplos generados
• Flujo de salida para Notion y WordPress
• Integración directa con IA de generación de imágenes

También me gustaría probar eso.

La generación de imágenes con IA es conveniente, pero para usarlas realmente en artículos y redes sociales, todavía se requiere diseño por parte de los humanos.

Queremos desarrollar Thumbnail Prompt Builder como una herramienta para reducir un poco ese "esfuerzo de diseño".