Creación de botones

En este ejercicio vamos a crear diversos botones que nos servirán para facilitar la navegación en nuestra página web. Vamos a explicar cómo realizar un botón para ir la página siguiente y dejaremos propuestos el resto. Los pasos que debemos seguir son los siguientes:

1. Abrir Inkscape.

2. Crear un nuevo icono de 64x64 píxeles. Para ello creamos un círculo cualquiera y ajustamos su tamaño y su posición: ancho (W) = 64, alto (H) = 64, X=0, Y=0

3. Establecer el color del círculo. Para ello abrimos la herramienta de "Relleno y borde" a partir del menú "Objeto" o bien pulsando MAYÚSCULAS+CTRL+F. Nos aseguramos también de que el círuco no tenga trazo pinchando en la pestaña "Color de trazo".

4. Dibujamos otro círculo. En esta ocasión de 58x58 píxeles. Le asignamos un borde de 2 píxeles blanco y lo rellenamos también de blanco.Lo posicionamos en X=3 e Y=3.

5. Aplicamos relleno al círculo central con un gradiente radial. Para ello seleccionamos el círculo central, abrimos la herramienta de "Rellenos y bordes" y seleccionamos el gradiente radial. Desplazamos el punto central del gradiente hacia la zona inferior del dibujo.

6. Ahora aplicamos un gradiente al borde o trazo perímetral del círculo central para lo cual pinchamos en la pestaña "Color de trazo", seleccionamos gradiente lineal y lo ajustamos tal y como se aprecia en la siguiente imagen.

7. Un poco más de brillo (opcional). Podemos crear un efecto más vistoso si añadimos un poco de brillo por la parte superior. En esta ocasión lo haremos de la siguiente forma: primero creamos un círculo de 53x53, lo duplicamos y lo separamos un poco superponiéndolo tal y como se ve en la imagen (para verlo mejor le podemos cambiar el color a este segundo círculo). A continuación realizamos la diferencia de los dos círculos (Barra de menú => Trayecto => Diferencia). A continuación cambiamos su color haciéndolo más claro, le asignamos una opacidad del 40% y un desenfoque del 2%. Finalmente superponemos esta figura sobre la principal.

8. Finalmente dibujamos en el centro del círculo un icono significativo. En nuestro caso para ir a la página siguiente puede ser suficiente un triángulo blanco. En mi caso lo he creado con un tamaño de 30x30.

9. Para terminar guardamos el archivo con la extensión propia de Inkscape, .svg, y también lo exportamos como .png para poder utilizarlo en nuestra página web.

10. Para crear otros botones no tenemos más que cambiar el icono central. Opcionalmente también podemos cambiar con facilidad el color del botón.

Tutorial creado a partir del original http://www.starfishwebconsulting.co.uk/articles/inkscape-tastic-icons?/tasty_icons