ZaRQuN – Diseño Gráfico, Web y Programación Blog sobre diseño grafico en general y curiosidades

¿Alguna vez has exportado un icono perfecto desde Figma, pero al ponerlo en tu web parece que tiene vida propia y no se alinea con el texto? No es un error de tu código, es un problema de Bounding Box (caja contenedora).

El Problema: El icono «flota» o no se centra

En Figma, los diseñadores suelen crear iconos dentro de marcos cuadrados (por ejemplo, 24x24px). Si el dibujo del icono no ocupa todo ese espacio o no está centrado dentro de su marco, al exportarlo como SVG e insertarlo en tu HTML, heredará esos espacios vacíos asimétricos.

La Solución en Figma (Antes de exportar)

Antes de pasar el diseño a desarrollo, asegúrate de:

1. Flatten Shapes: Selecciona el icono y pulsa Cmd + E (Mac) o Ctrl + E (Windows) para simplificar los vectores.
2. Constraints: Asegúrate de que el vector esté centrado horizontal y verticalmente dentro de su frame.
3. Outline Stroke: Si el icono usa bordes (strokes), conviértelos a esquemas (Shift + Cmd + O) para que el tamaño de exportación sea exacto.

La Solución en CSS (Si ya está en el código)

Si no puedes volver a Figma, puedes corregir la alineación visual usando este «truco» de alineación flexible:

.icon-container {
  display: inline-flex;
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  vertical-align: middle; /* Alineación respecto al texto contiguo */
}

svg {
  display: block; /* Elimina el espacio reservado para descendentes de texto */
  width: 1em; /* Escala el icono proporcionalmente al texto */
  height: 1em;
}

Tip Pro: Si el icono sigue viéndose «caído», usa transform: translateY(-1px); para un ajuste óptico fino. A veces, la geometría no coincide con la percepción del ojo humano.

¿No sería genial que tus ideas comenzaran como bocetos realizados con un bolígrafo «real» y se convirtieran inmediatamente en gráficos vectoriales?
Pues gracias a Inkling de Wacom ya no será un sueño y será realidad, que podrás disfrutar por 169.90€
Espero que los reyes magos hayan visto que he sido un niño muyyy muyyy bueno y se deje caer una maravilla como esta 🙂

Más información sobre Inkling
Fuente Ateneu Popular

Comente hace unos días que tenía algo abandonado otros software de diseño y que por ello iba a centrarme en buscar más recursos sobre ellos.
Hoy le toca el turno a GIMP y os voy a dejar una completísima recopilación de 10 sitios especializados en GIMP, la alternativa libre a Photoshop.
Fuente: diariothc.com

La comunidad de Gimp va creciendo a un ritmo frenético, ya no se bastan con el desarrollo la aplicación sino que cada vez disponemos de más pinceles, plugins, estilos y tutoriales. Para muestra un botón a través de Techzilo encontramos un recopilatorio de 35 set de pinceles (brushes) para sumar entre todos más de 1400 pinceles para el gran Gimp.
Visto en DiariTHC

El titulo lo dice todo, no queríais recursos para Gimp pues aquí tenéis para dar y regalar, en esta galería de DeviantART encontrareis mas de 300 set de pinceles y como es de esperar de todo tipos, florales, árboles, animales, abstractos, tatuajes, texturas, cabellos, deportivos y un largo etcétera.
Agradecer los comentarios y propuestas que recibo tanto por el blog como por correo, así que si tenéis más sugerencias bienvenidas serán.

Normalmente traemos recursos para Adobe Photoshop, pero como me han tirado de la oreja (con razón) porque tengo otros buenos programas olvidados como Gimp o Paint Shop Pro.
Vamos a intentar arreglarlo aportando esta completa colección de pinceles para Paint Shop Pro, donde el tema floral es el que reina y para descárgalos solo tendréis que pulsar sobre las imágenes.
Que lo disfrutéis 🙂

Vista el perfil de su creador, Illyera

Vía tecnocracia he encontrado este sublime pluging para The Gimp llamado Liquid Rescale el cual posee una revolucionaria técnica de redimensionamiento para las imágenes.

Ahora mismo no tengo Linux instalado así que poco más os puedo comentar sobre él. Pero que yo no pueda no significa que el estupendo Youtube no pueda echarnos un cablecito y en su inagotable fuente de videos encontramos esta genial demostración de lo que es capaz este maravilloso pluging.

Descargar Liquid Rescale para GIMP