Hola que tal, este es mi primer post, en donde explico como crear un botón con inkscape, la herramienta libre del dibujo vectorial, tratare de explicar paso a paso para que logres diseñar tu propio botón. Yo en especial lo uso para los botones que ocupo en esta página web y bueno manos a la obra…
1.- Abrimos inkscape y por defecto aparecerá una hoja en blanco para poder dibujar, como en este caso sera un botón no importa el tamaño de la hoja.
2.- Ahora elegimos la herramienta de “Crear rectángulos y Cuadrados (F4)” y dibujamos un rectángulo de 180 X 50 px.
3.- Hacemos doble clic sobre el rectángulo dibujado y aparecerá un circulo en la esquina superior izquierda, tal como se muestra a continuación:
Fig. 1
Ahora simplemente sitúa el cursor en el circulo y haz clic y sin soltar mueve el circulo hacia abajo veras que los lados del rectángulo se redondearan, hasta quedar de la siguiente manera:
Fig. 2
4.- Como se muestra en la fig.2 la imagen ya tiene un aspecto de un botón, ahora se le van aplicar algunos efectos extra para mejorar su aspecto, primero apliquemos un gradiente, utilizando la herramienta de “Crear y editar gradientes (ctrl + F1)”, para aplicar el gradiente se hará un clic y sin soltar se arrastrara desde la parte donde empieza el dibujo hasta la parte en donde termina.
Como sugerencia puedes presionar la tecla ctrl para que al momento de crear el gradiente se dibuje lo mas exacto y no tengas el problema de que se dibuje mal.
y el resultado seria el siguiente:
Fig. 3
5.- Ahora que esta dibujado el gradiente, vamos a personalizarlo cambiándole el color, solamente haz clic en el botón editar que aparece en la barra de controles de herramienta y se mostrara un ventana como la siguiente:
Fig. 4
Desde esta pequeña ventana se pueden cambiar los colores, allí se manejan distintas maneras de manejar los colores como son: RGB. HSL, CMYK, RUEDA y CMS, yo en especial uso la rueda, utiliza la manera en que mas te acomodes. Una cosa que debes saber es de que inkscape denomina como parada a cada color que se combina en el gradiente, en este ejemplo maneja dos paradas, pero puedes añadir más paradas o quitarlas.
En la parte en donde esta una A y mas adelante un 255 esa opción permite ajustar la transparencia del color que se esta usando en esa parada.
Ahora muestro mi ejemplo de la combinación de colores que use y como quedaría el botón:
Fig. 6
6.- Ahora simplemente falta ponerle el texto, eso se hace con simplemente utilizar la herramienta de: “Crear y Editar objetos de texto (F8)”, haz clic sobre el dibujo del botón y elige un tamaño y tipo de letra que gustes, teclea el nombre del botón si queda mal posicionado el texto puedes moverlo con la herramienta de: “Seleccionar y transformar objetos (F1)” y el resultado seria algo similar al siguiente:
Fig. 7
Ahora que ya tienes tu botón hecho puedes exportarlo a imagen PNG, con solo seleccionar tu dibujo y después entras al menú archivo -> Exportar mapa de bits, con el botón examinar eliges la ruta en donde se guardara el dibujo como imagen png, una vez hecho haz clic en exportar y listo ya tienes tu diseño de un botón con inkscape.
Technorati Profile
Ultimos Comentarios