Al crear imágenes destacadas para artículos de blog, hoy en día herramientas de generación de imágenes con IA como ChatGPT permiten obtener visuales de muy buena calidad.
Sin embargo, al intentar utilizarlas en la práctica, surge un problema.
Los tamaños de imagen requeridos varían demasiado según el medio.
Por ejemplo, en esta herramienta planteamos las siguientes salidas como resultado final.
Uso | Tamaño |
|---|---|
1080×1350 | |
Thumbnail | 1080×1080 |
X | 1200×675 |
Cover | 1280×560 |
Cover Retina | 2560×1120 |
Al principio pensé: "¿No sería útil crear una sola imagen cuadrada y poder adaptarla automáticamente a todos los tamaños?"
Así empezamos a desarrollar Thumbnail Prompt Builder.
Lo que quería crear al principio
El objetivo inicial era sencillo.
Una herramienta que, al introducir el título o el resumen de un artículo, genera un prompt para pegar en una IA generadora de imágenes.
Además, quería que al subir una imagen cuadrada generada se convirtiera automáticamente
- Thumbnail
- X
- Cover
a cada tamaño de los distintos medios.
En resumen, el resultado ideal era este.
Introducir la información del artículo
↓
Crear el prompt para la imagen
↓
Generar la imagen cuadrada
↓
Expansión automática a los tamaños de cada medio
Al principio, el diseño era bastante directo.
"Si colocamos el protagonista en el centro y dejamos un margen alrededor, podrá usarse en cualquier medio."
Eso era lo que pensaba.
Problemas que descubrimos al probarlo en la práctica
Sin embargo, al mostrar las imágenes en la práctica, surgieron problemas.
Sobre todo con las imágenes de Cover.
Al convertir una imagen cuadrada a formato horizontal,
- la parte superior e inferior quedan muy recortadas
- el sujeto principal se reduce de forma poco natural
- el borde del fondo se vuelve muy visible
- la composición que funcionaba en formato cuadrado se rompe en Cover
y eso fue lo que ocurrió.
Al principio probé varias direcciones mientras consultaba con Codex.
Por ejemplo:
- Ajustar la SAFE ZONE al 60 % central
- Concentrar el protagonista en el centro
- Prohibir los objetos de fondo
- Extender los laterales solo con el color de fondo
- Aplicar un desvanecido en los bordes de la imagen original
- En X / Cover, reducir ligeramente la imagen para evitar que se recorte
etc.
Todas ellas tuvieron cierto efecto.
Sin embargo, quedó un problema decisivo.
Crear un Cover de forma natural a partir de una imagen cuadrada tiene sus límites.
El Cover tiene una proporción bastante apaisada, de 1280×560.
Si en una imagen cuadrada se incluyen un PC, personas, tarjetas de UI, iconos y demás elementos, puede que en formato cuadrado se vea bien, pero en Cover se recortarán bastante la parte superior e inferior.
Por el contrario, si se intenta incluir todo, el elemento principal queda demasiado pequeño.
Por eso decidimos cambiar el diseño en este punto.
Conclusión final: dividir los prompts en dos sistemas
Finalmente, optamos por un diseño que divide los prompts en dos.
Instagram / Thumbnail 用プロンプト
X / Cover 用プロンプト
Es decir, en lugar de cubrir todo con una sola imagen cuadrada,
正方形画像
→ Instagram / Thumbnail 用
横長画像
→ X / Cover 用
es la idea.
Fue un cambio de rumbo bastante importante.
Al principio apuntábamos a una herramienta que generara todo a partir de una sola imagen, pero al pensar en el uso real nos dimos cuenta de que lo más natural es separar desde el principio las composiciones que funcionan para cada formato.
En el peor de los casos, un diseñador podría ajustar el diseño, pero queríamos que también pudieran usarla personas que no manejan Figma u otras herramientas, así que buscamos que todo se resolviera de forma sencilla solo con IA.
Lo que puede hacer la herramienta actual
En la versión actual de Thumbnail Prompt Builder, al introducir la información del artículo se generan dos tipos de prompts.
1. Para Instagram / miniatura
Prompt para imágenes destacadas cuadradas.
- Imagen cuadrada 1:1
- Sujeto principal en el centro
- Margen adecuado también para formatos verticales largos de Instagram
- Composición fácil de ver como miniatura de blog
con el contenido pensado para ello.
2. Para X / Cover
Este es el prompt para imágenes destacadas horizontales.
- Composición horizontal desde el inicio
- Que no se corte fácilmente en la parte superior e inferior también en Cover
- Dejando margen a ambos lados
- Que no se rompa fácilmente tanto en X como en Cover
son las instrucciones que se incluyen.
Como resultado, es menos probable que la imagen de Cover parezca un cuadrado forzado a ser horizontal.
La expansión de imágenes también cambió a dos variantes
También separé la carga de imágenes en dos variantes.
- Carga de imagen cuadrada
- Carga de imagen horizontal
A partir de una imagen cuadrada,
instagram.pngthumbnail.png
se generan.
A partir de una imagen horizontal,
x.pngcover.png[email protected]
se generan.
Solo Cover también genera una versión de doble tamaño para pantallas Retina.
Al principio intenté generar versiones de doble tamaño para todas las imágenes, pero Instagram y X tienden a comprimir las imágenes al publicarlas, y Thumbnail ya es lo bastante grande, así que finalmente limité la salida de doble tamaño solo a Cover.
Se evitó que el contenido introducido se perdiera
Durante el desarrollo, un problema que resultó bastante molesto fue que los formularios se vaciaban al actualizar la página.
Al pedir a Codex que realizara el trabajo, el contenido que se estaba escribiendo a veces desaparecía al actualizar la página.
Como esto resultaba un poco frustrante, también reforcé la función de guardado.
Actualmente, el contenido introducido se guarda en
- localStorage
- Cookie
en ambos.
La cookie se utiliza como copia de seguridad durante 7 días.
Gracias a esto, aunque la página se actualice o se recargue durante el desarrollo, el contenido introducido se recupera con más facilidad.
Lo que aprendí al implementarlo
La principal conclusión de este desarrollo fue la siguiente:
La generación de imágenes con IA resulta más estable si se crea desde el principio según el uso, en lugar de convertirla después
.
En particular, las imágenes destacadas varían mucho en proporción según el medio.
Una composición que funciona bien en un formato cuadrado no siempre funciona con Cover.
Si se intenta unificarlas a la fuerza,
- el sujeto principal se vuelve más pequeño
- el espacio en blanco aumenta demasiado
- la parte superior o inferior se corta
- el fondo se ve poco natural
y surgen problemas de este tipo.
Así que, al final,
no lo generalizamos en exceso: separamos las premisas de generación según el uso
y nos decidimos por ese diseño.
Lo que hicimos trabajando con Codex
Esta herramienta no tenía una forma final definida desde el principio.
Trabajando con Codex, fuimos
- expandiendo imágenes cuadradas a cada medio
- eliminando los fallos de la extensión del fondo
- revisando la SAFE ZONE
- resolviendo el problema de que el sujeto principal se achicaba con Cover
- Organizar las definiciones de tamaño
- Añadir salida Retina
- Pero Retina solo se limita a Cover
- Dividir los prompts en dos sistemas
- Guardar el contenido introducido
Así fui cambiando el diseño poco a poco.
La idea inicial era "convertir una imagen cuadrada en un máster universal".
Sin embargo, mientras revisaba las imágenes de prueba y las mejoraba, terminé con una forma más realista: "separar las versiones cuadradas y las apaisadas".
Este cambio fue interesante.
Conclusión
Thumbnail Prompt Builder no es simplemente una herramienta para convertir tamaños de imagen.
Más bien,
es una herramienta de apoyo que permite ajustar imágenes destacadas creadas con IA para que resulten utilizables en la práctica
.
En su forma actual,
- genera dos tipos de prompts para imágenes a partir de la información del artículo
- genera Instagram / Thumbnail a partir de una imagen cuadrada
- genera X / Cover a partir de una imagen horizontal
- también exporta una versión Retina solo para Cover
- guarda la información introducida durante un periodo determinado
hasta el punto en que ya es posible hacerlo.
Resultó algo más complejo de lo que tenía pensado al principio, pero creo que, a cambio, en la práctica se ha convertido en una forma bastante cómoda de usarlo.
Si quisiera seguir mejorándolo en el futuro,
- cambio de plantillas de prompts
- gestión de paletas de colores por marca
- guardado de ejemplos generados
- salidas compatibles con Notion y WordPress
- integración directa con generadores de imágenes por IA
son funciones que me gustaría probar.
La generación de imágenes con IA es útil, pero para usarla en artículos o redes sociales todavía se necesita diseño humano.
Con la idea de reducir un poco ese trabajo de diseño, quiero seguir desarrollando Thumbnail Prompt Builder como herramienta.
¡El diseño de UI evoluciona cada día! Estoy pensando cómo integrar la accesibilidad en el diseño de landing pages. Hace poco me alejé del maquetado y me pregunto si debería también evolucionar con JS. ¡Me encanta Takumi Kitamura!
Hasshi
Diseñador web / Se unió en 2018 / En el corazón, sigo siendo un diseñador novato