Estás preparando un icono para una web y la estrella queda torcida o demasiado puntiaguda. Para dibujarla con cinco puntas iguales, empieza con la herramienta de estrella de Inkscape, aunque el resultado dependerá de cuánto acerques las puntas al centro.
Una estrella limpia empieza por controlar la simetría y el centro
- Inkscape permite ajustar el número de puntas y la profundidad de las hendiduras.
- Una estrella vectorial conserva bordes nítidos al cambiar de tamaño.
- El redondeo suaviza las puntas, pero en exceso puede hacer que la figura parezca una flor.
- Para una web, comprueba la estrella en el tamaño pequeño donde aparecerá.
En Inkscape, ajusta primero las puntas y después su profundidad
Una estrella puede tener cinco puntas iguales y aun así parecer demasiado agresiva o muy plana. En Inkscape, selecciona la herramienta Estrella y arrastra sobre el lienzo; en la barra de controles, fija el número de esquinas y ajusta la proporción de los radios para acercar o alejar las hendiduras del centro.
El manual de Inkscape describe controles para el número de esquinas, la proporción de radios, el redondeo y la aleatoriedad. Para una forma simétrica, deja la aleatoriedad en cero; si buscas una insignia más amable, añade un redondeo pequeño y mira el resultado a tamaño real. La punta exterior marca el carácter, pero el espacio entre puntas determina si la estrella se lee con claridad.
- Selecciona la herramienta Estrella y arrastra desde el centro hacia fuera.
- Indica 5 esquinas si quieres la estrella clásica de cinco puntas.
- Ajusta la proporción interior hasta que las hendiduras se vean equilibradas.
- Prueba el redondeo con moderación y revisa la forma reducida.
Si al dibujar giras la figura sin querer, mantén pulsada la tecla Ctrl mientras arrastras para restringir la rotación en pasos de 15 grados, según el manual. La ventaja de esta herramienta es que puedes volver a modificar los tiradores después de crear la forma. No hace falta empezar de cero por un pequeño ajuste.
Elige una estrella profunda para destacar y una compacta para acompañar
En una tarjeta promocional, una estrella de hendiduras profundas suele destacar; junto a un título, puede robarle protagonismo. Yo prefiero decidir la profundidad según la función del gráfico: si la estrella debe atraer la mirada, alarga las puntas; si acompaña texto, compacta la figura.
| Situación | Qué puede pasar | Qué probar |
|---|---|---|
| Insignia o sello que debe destacar | Una forma poco profunda se confunde con un polígono decorativo. | Alarga las puntas y conserva las cinco a la misma distancia angular. |
| Icono pequeño junto a texto | Las hendiduras cerradas se apelmazan al reducir la figura. | Acerca el radio interior al exterior y comprueba el icono en su tamaño final. |
| Estrella con aspecto amable | Las puntas redondeadas en exceso hacen que parezca una flor. | Añade poco redondeo y conserva el contorno exterior reconocible. |
Para una insignia de oferta, por ejemplo, empezaría con una estrella más profunda y un color que contraste con el fondo. Para un indicador discreto junto a una etiqueta, elegiría una estrella compacta y un trazo sencillo. La forma debe acompañar la jerarquía visual, no competir con el texto que explica la oferta.
El formato SVG evita bordes dentados al cambiar el tamaño
Si la estrella va a aparecer en varios tamaños de una web, dibujarla como vector ayuda a conservar los bordes nítidos. En SVG, el elemento
Este ejemplo crea una estrella cerrada dentro de un lienzo cuadrado; puedes cambiar el relleno sin rehacer sus vértices:
La proporción del viewBox es cuadrada. Si se muestra en un espacio rectangular, el comportamiento de preserveAspectRatio evita por defecto que el gráfico se estire para llenar el contenedor; MDN indica que el ajuste predeterminado conserva la proporción y deja visible todo el contenido. Así evitas una estrella aplastada cuando la caja de la web no es cuadrada.
Si la estrella se ve rara, busca primero el problema de forma
Una estrella torcida no siempre se arregla cambiando el color o el grosor del trazo. Primero conviene distinguir si falla la simetría, la profundidad o el tamaño al que se va a usar; cada caso pide un ajuste distinto.
| Lo que ves | Causa probable | Qué hacer |
|---|---|---|
| Una punta queda inclinada respecto a las demás | La figura se giró durante el arrastre. | Restringe la rotación con Ctrl o ajusta la orientación después. |
| Las hendiduras casi desaparecen | El radio interior está demasiado cerca del exterior. | Reduce la proporción de radios y vuelve a revisar el tamaño final. |
| La estrella parece una flor | El redondeo suaviza demasiado las puntas y las hendiduras. | Reduce el redondeo hasta recuperar una silueta estrellada. |
| El borde se ve dentado en la web | Se está usando una imagen rasterizada pequeña ampliada. | Exporta en SVG o genera una imagen rasterizada al tamaño necesario. |
Si el icono se verá pequeño, reduce primero el detalle y el redondeo; si se usará grande, puedes permitirte una hendidura más profunda. Comprueba la silueta en el contexto donde aparecerá, porque una estrella atractiva aislada puede perder claridad al lado de texto o dentro de un botón.
Deja que el tamaño de uso decida el último ajuste
La estrella del lienzo es solo una versión de trabajo: en una interfaz, puede terminar como icono diminuto, sello o elemento decorativo. Para una insignia que debe llamar la atención, elegiría cinco puntas profundas; para un icono junto a una etiqueta, escogería una forma más compacta y evitaría el redondeo visible.
Si las puntas se mantienen separadas al reducir la figura y el centro no se convierte en una mancha, la silueta está lista. Haz el ajuste final en el tamaño de destino, y guarda el original vectorial para cambiar el color o la proporción cuando el diseño de la web evolucione.