Iconos8 min de lectura

Un set de iconos coherente con IA: un icono maestro, once hermanos, un solo estilo

Doce iconos de una misma familia: fija las reglas, genera un icono maestro, deriva de él los demás, pruébalos en pequeño y redibuja el set en vectorial.

Sobre un fondo carbón, un panel de doce baldosas redondeadas, cada una con un icono de línea crema como una casa, una lupa, una campana y un candado, el primero en ámbar sobre una fina retícula de construcción con marcas de esquina ámbar; al lado, la campana a tres tamaños cada vez menores, los doce iconos repetidos en muy pequeño y cuatro muestras de paleta

Pide a un modelo de imagen un icono de campana y tendrás una campana bonita. Pide luego un candado y tendrás un candado bonito, dibujado al parecer por otra mano: líneas más gruesas, esquinas más afiladas, una ligera inclinación, un toque de sombreado que la campana nunca tuvo. Ponlos juntos en una barra de pestañas y la app parece montada con tres packs gratuitos. Un set de iconos se juzga como conjunto, y quien lo mira detecta el que desentona mucho antes de fijarse en uno bueno.

Esta guía crea doce iconos para una app de notas inventada llamada Quillbox: inicio, búsqueda, notificaciones, calendario, mensajes, cámara, favoritos, filtros, bloqueo, correo, carpeta y eliminar. El método sirve para cualquier lista. Decide las reglas, crea un icono maestro que las cumpla, deriva todos los demás de ese maestro, revísalos al tamaño en que la gente los verá de verdad y termina redibujando en vectorial.

Escribe las reglas antes del primer prompt

La coherencia son unos pocos números que comparten todos los iconos. Anótalos en una sola ficha y tenla abierta todo el tiempo:

  1. La retícula. Un lienzo cuadrado, por ejemplo de 24 por 24 unidades, con un margen de 2 unidades que nada cruza salvo a propósito. Cada icono se diseña sobre esta retícula y solo se escala al final.
  2. El trazo. Un solo grosor, por ejemplo 2 unidades, con extremos y uniones redondeados. Los iconos de contorno y los rellenos no se mezclan en un mismo set; elige uno.
  3. El radio de esquina. Un único radio para cada rectángulo, como 3 unidades en las esquinas exteriores. Un calendario de esquinas suaves junto a un icono de correo de esquinas afiladas es el fallo más habitual.
  4. Las formas de referencia. Un círculo, un cuadrado y un rectángulo ancho que ocupen más o menos la misma superficie, para que un icono redondo y uno cuadrado parezcan del mismo tamaño a la vista.
  5. La paleta. Un solo color de línea para el set y, como mucho, un acento para el estado activo. Sin degradados, sin sombras, sin un segundo color de línea para decorar.
  6. La perspectiva. Plana y de frente. Sin vistas de tres cuartos, sin inclinación isométrica.

Genera un icono maestro, y solo uno

Elige el maestro con cuidado: un icono sencillo que aplique la mayoría de las reglas a la vez. Una casa funciona bien, porque tiene un trazo recto, una esquina, una unión y una pequeña forma interior. Pasa la ficha al prompt con palabras sencillas y pide un solo icono sobre un fondo liso, nada más.

prompt
A single flat line icon of a house, outline only, uniform medium stroke with rounded line ends and rounded corners, centred on a plain white square background with generous empty space around it, one colour only, dark charcoal lines, no fill, no shading, no gradient, no shadow, no text, no mock-up
Repite las palabras del trazo, las esquinas y el color exactamente como aparecen en tu ficha. Pegarás esta frase en el prompt de cada icono hermano.

Dos tipos de modelo del catálogo encajan aquí. Recraft 20B SVG se describe como generador de imágenes vectoriales SVG para gráficos e iconos escalables, y Recraft V4.1 Text to Vector como generador de imágenes de estilo vectorial editables a partir de un prompt. Si prefieres partir de un dibujo rasterizado con un recorte limpio, Ideogram V3 Generate Transparent devuelve imágenes con fondo transparente. Lanza el prompt muchas veces y juzga los resultados según la ficha, no según tu gusto. El maestro que te quedas es el que mejor cumple las reglas, aunque otro borrador sea más bonito.

Deriva los hermanos del maestro

Aquí es donde la mayoría de los sets se desmoronan: once prompts nuevos dan once interpretaciones nuevas. En lugar de eso, convierte el maestro en la referencia de todo lo que sigue. El catálogo tiene una vía directa para ello. Recraft V4 Create Style convierte imágenes de referencia en un ID de estilo reutilizable, y Recraft V4 Style Text to Vector dibuja un gráfico vectorial a partir de un prompt más ese ID de estilo o directamente de las imágenes de referencia. Dale tu maestro y, en cuanto tengas dos o tres buenos hermanos, añádelos también como referencias, para que el estilo se aprenda de una pequeña familia y no de un solo dibujo.

Haz que cada prompt de hermano sea aburrido. La misma frase que el maestro, solo cambia el objeto: una campana, una lupa, un candado. Evita adjetivos que arrastren el estilo, como mono, detallado o realista. Describe el objeto con sus formas más simples: un candado es un rectángulo redondeado bajo un asa en semicírculo, con una línea corta para el ojo de la cerradura.

  • Primero los objetos difíciles. Cámara, filtros y calendario tienen más piezas y son los que más se desvían. Si aguantan, el resto también.
  • Metáforas sencillas. Notificaciones es una campana, favoritos un corazón, eliminar una papelera. Una metáfora ingeniosa es otra decisión de diseño, no un experimento de prompt.
  • Un objeto por icono. Una carpeta con una estrella son dos iconos. Añade la insignia después en vectorial, igual en todos los iconos que la necesiten.
  • Pequeños arreglos, no nuevas tiradas. Si un buen hermano tiene un solo detalle mal, como una esquina afilada en una cámara por lo demás correcta, Ideogram V4.5 Edit admite una máscara, así que puedes cambiar solo esa parte.

Fijar el estilo reduce la variación; no la elimina. Cuenta con varias rondas hasta que los doce encajen, y con corregir el resto a mano en los pasos siguientes.

Alinéalos y revísalos en pequeño

Pon los doce en una sola hoja, en una cuadrícula de 4 por 3, sobre el mismo fondo y al mismo tamaño. Después reduce la hoja hasta que cada icono tenga más o menos el tamaño que tendrá en la app: 24 píxeles para una barra de herramientas, 16 para un menú o una lista densa. Míralo en un móvil real, no solo en un monitor grande. Repasa la lista:

  • La prueba de entornar los ojos. Desenfoca la vista. Los doce deben tener el mismo peso de gris. El que parezca más oscuro tiene un trazo más grueso o demasiadas líneas.
  • La prueba del tamaño. Los iconos redondos y los cuadrados deben parecer del mismo tamaño. Si la búsqueda parece más pequeña que el correo, amplíala hasta el círculo de referencia.
  • La prueba del detalle. A 16 píxeles, cualquier hueco más estrecho que un trazo se cierra. El ojo de la cerradura del candado y el anillo del objetivo de la cámara son las víctimas habituales; quítalos o ábrelos.
  • La prueba de adivinar. Enseña la hoja pequeña a alguien que no la haya visto y pregúntale qué significa cada icono. Lo que le haga dudar necesita una forma más simple o una etiqueta al lado en la app.
  • La prueba del estado. Prueba cada icono en el color de acento en la pestaña activa. Si una versión rellena forma parte de tu sistema, debe rellenarse igual en los doce.

Limpia en vectorial

Aunque un modelo devuelva un SVG, ábrelo antes de fiarte. Los trazados generados suelen ser irregulares: decenas de nodos donde bastarían tres, trazos guardados como contornos rellenos de anchos ligeramente distintos, esquinas casi, pero no del todo, del mismo radio. Para un set, lo más limpio es redibujar cada icono sobre tu retícula con trazos reales, usando el archivo generado solo como guía debajo. Nuestra guía de conceptos de logo con IA a vectorial explica el calco a mano y la simplificación de formas, y los mismos hábitos sirven aquí.

Lo específico de los iconos es la construcción compartida. Define una vez el grosor del trazo y el radio de esquina como un estilo en tu editor y aplícalo a los doce, para que un cambio posterior del trazo cambie todo el set. Alinea los puntos a la retícula para que las líneas caigan en píxeles enteros al tamaño principal. Guarda el archivo maestro con cada icono en su propia mesa de trabajo, con un nombre según su significado, como icon-search en lugar de lupa, y exporta desde ahí en los formatos que te pidan tus desarrolladores.

Si los iconos tienen que convivir con una identidad más amplia, la paleta y el ID de estilo pueden salir del mismo sitio que el resto de la marca, como en el tablero de identidad de marca para una tostadora ficticia. La idea de congelar una pieza maestra y construir todo lo demás a su alrededor es la misma que mantiene unido un juego de papelería.

Lo que sigue siendo tu trabajo

El modelo te da borradores y una dirección. El set final es el redibujo: trazos coherentes, una retícula real, probado a tamaños reales. Comprueba que ningún icono sea casi una copia del símbolo conocido de otra empresa, y sigue las directrices de la plataforma cuando una tienda o un sistema operativo tenga sus propias reglas para los iconos de app. Cuando los doce aguanten, añadir un decimotercero es fácil: la ficha, el maestro y el ID de estilo ya están ahí. Explora los modelos vectoriales y de diseño en /models y empieza tu maestro en el estudio.

Preguntas

¿Puede la IA crear un set de iconos completo de una vez?

Puede dibujar los iconos, pero la coherencia viene de las reglas que fijas primero y de derivar cada icono de un único maestro. Usa un estilo creado a partir de ese maestro y luego redibuja el set en vectorial para que los trazos y las esquinas encajen de verdad.

¿Los modelos vectoriales me dan iconos SVG terminados?

Te dan un punto de partida vectorial. Abre el archivo, revisa los trazados y los grosores de trazo, y cuenta con redibujar sobre tu retícula, porque los trazados generados rara vez son tan limpios o uniformes como un icono hecho a mano.

¿A qué tamaño debo probar mis iconos?

Al tamaño en que la gente los verá, normalmente 24 píxeles en una barra de herramientas y 16 en una lista densa, en una pantalla real. Repite la prueba después del redibujo vectorial, ya que esa es la versión que reciben los usuarios.

#Iconos#Diseño de interfaz#Vectorial