Crear botones 3D con Inkscape
Este artículo muestra cómo crear botones con aspecto tridimensional en Inkscape, un programa de diseño vectorial gratuito y de código abierto que utiliza el formato SVG, basado en XML, para el almacenamiento de los gráficos.
El objetivo es obtener unos botones como estos:
En primer lugar vamos a crear un círculo sencillo con la herramienta correspondiente de la barra de herramientas (número «1» en la imagen de la izquierda). Para ello seleccionamos la herramienta y, manteniendo pulsada la tecla «Control», arrastramos el ratón en dirección de arriba abajo y de izquierda a derecha en un ángulo aproximado de 45º. Esto nos permitirá obtener un círculo perfecto.
Una vez dibujado el círculo elegimos su color, para esto abrimos el diálogo «Relleno y borde» (Mayús+Ctrl+F) si no lo teníamos abierto ya. En este caso he elegido un color más claro para el relleno y uno más oscuro para el borde (trazo). El relleno lo cambiaremos más adelante para dar un efecto más voluminoso.
Duplicamos el objeto con la combinación de teclas «Ctrl+D» (o mediante la opción de menú «Edición/Duplicar»). Ahora es cuando empieza la diversión... Una vez duplicado el objeto lo rellenamos de color blanco y le quitamos el borde (es decir, en la pestaña «Color del trazo» del diálogo «Relleno y borde» pulsamos el botón con la «X»). A continuación vamos a utilizar la herramienta «Bézier» para trazar una curva por encima de nuestro círculo. Seleccionamos la herramienta «Bézier» (marcada con el número «2» en la imagen de la izquierda) y realizamos las operaciones descritas a continuación: un clic más o menos a la altura del centro del círculo pero a su izquierda, otro clic en el centro y desde ahí arrastramos hacia arriba y la derecha hasta salir del círculo, soltamos y hacemos otro clic a la altura del centro del círulo, pero esta vez a su derecha. Habremos creado una onda que atraviesa el círculo, que completaremos con varios clics más, rodeando el círculo por encima y haciendo coincidir la última pulsación con el nodo inicial de la curva.
Nos quedaremos con algo así:
Ahora seleccionamos los dos objetos; la curva que acabamos de crear y el círculo blanco. Por defecto estamos utilizando la herramienta de selección (el primer botón de la barra de herramientas, una flecha). Utilizaremos esta herramienta para seleccionar ambos objeto pulsando primero sobre uno y luego, pulsando la tecla «Mayús», sobre el segundo. Estando los dos objetos seleccionados vamos a obtener su intersección mediante la combinación de teclas «Ctrl+*» (en la opción de menú «Trazo/Intersección»). Lo que nos dejará con lo siguiente:
Para obtener un efecto más redondeado vamos a utilizar el desvío dinámico del trazo. Atención: Pulsamos «Ctrl+J» (menú «Trazo/Desvío dinámico»), con lo que aparecera un solo nodo en la parte superior del objeto. Arrastramos el nodo hasta empequeñecer el objeto como a continuación.
Volvemos a convertir este objeto de desvío dinámico en un trazo con «Mayús+Ctrl+C» (menú «Trazo/Objeto a trazo»).
Y otra vez en desvío dinámico con «Mayús+J» para volver a ampliarlo hasta justo por debajo del borde superior.
Para terminar utilizaremos la herramienta de gradientes (número «3») del siguiente modo: después de seleccionar la herramienta arrastramos en línea recta desde un poco por encima del círulo hasta un poco por encima del borde inferior del objeto blanco. Esto es solo una sugerencia, podemos ajustar este gradiente a nuestro gusto.
En estos momentos ya tenemos un botón aceptable, pero a mi me gusta ir un poquitín más lejos. Esto implica el uso de gradientes lineales para el relleno del círculo inicial. Podéis ver los resultados a continuación.
Descarga aquí el archivo svg creado con este artículo.
buen aporte. Gracias por compartirlo.
Un saludo