Crear Botones Redondos
Tutorial de Botones
Creación de otros Botones
Biselados
En esta ocasión os voy a mostrar como de una manera fácil y sencilla podemos crear diferentes objetos para nuestra web.
Esta vez no me enrollaré, iremos explicando a media que vamos haciendo. Empezamos creando un botón, para ello pulsaremos sobre crear nueva imagen y elegiremos un lienzo de tamaño 150 x 50 y de fondo transparente.
El siguiente paso consistirá en elegir el color de nuestro botón, para ello elegiremos dos colores, el del frente y el del fondo, en principio podéis poner el que más os guste, yo para este ejemplo utilizaré un color azul para el frente y otro un poco más claro para el fondo.
- Color frente: 0a0a7b
- Color fondo: 7bf1f0
- Modo: normal.
- Opacidad: 100%
- Degradado: Frente fondo (El tercero de la lista)
- Forma: Lineal.
Os tiene que quedar algo parecido a esto.
Copiaremos la selección mediante Ctrl + C (Editar → copiar), y todo seguido copiaremos la selección como una imagen nueva pulsando Mayus + Ctrl + V (Editar → Pegar como → Imagen Nueva).
Esto nos ha creado un nuevo lienzo donde tenemos nuestro botón con las esquinas redondeadas, el primer lienzo ya lo podemos cerrar, ahora nos quedará algo así.
Con la capa brillo seleccionada, cogeremos la herramienta de selección rectangular y haremos una selección en la parte superior del lienzo, a la que igual que en el paso anterior le habremos redondeado las esquinas con un radio de 55, quedando tal y como se muestra en la siguiente imagen.
Redondeamos la selección tal como se ha explicado en el paso anterior, ahora vamos al menú Seleccionar y picamos sobre bordes, pondremos a 1 el valor del borde y marcaremos la casilla de difuminar.
Escoger un color (162303), el que más os guste y con la herramienta de relleno (la que hay al lado del gardiente) picáis sobre el borde que tenéis seleccionado.
Creamos una nueva capa (Mayu + Ctrl + N) de nombre borde2, elegimos un color que destaque (b7f65d), y nuevamente aplicamos la herramienta de relleno sobre la selección.
Por que estas dos capas, pues sencillamente, una la utilizaremos como vista normal del botón y la otra cuando el ratón pase por encima, tranquilos seguir leyendo y lo comprender&eactue;is.
Bueno si habeis seguido las indicaciones paso a paso os ha de quedar una cosa parecida a esta.
Las opciones de la caja de herramientas las estableceremos de la siguiente manera:
Escribir el texto que queráis, aseguraos que queda centrado y quitar todas las selecciones para ver mejor el resultado.
Bueno ahora nuestro botón está finalizado, ya tenemos la base de nuestro botón, que guardaremos donde queramos para poder utilizarla siempre que queramos.
Ahora para crear la imagen para nuestra web, aremos lo siguiente, seleccionaremos la capa que contiene el texto y escribiremos lo que queramos.
Pulsaremos Ctrl + Mayu + S (guardar como) y escribiremos el nombre (boton_papirux_sel.png) de nuestro botón más la extensión de la imagen (JPG, PNG, GIF), aceptamos, pulsamos sobre Exportar y de nuevo sobre Guardar.
Bien ahora iremos a las capas y ocultaremos la última que hemos creado Borde#1, y repetiremos el proceso de guardado, en este caso yo como nombre le pongo boton_papirux_nor.png.
Y ya tenemos nuestros dos botones creados.
Hay otras formas de conseguir efectos parecidos a estos, vamos a verlas, pero esta vez fabricaremos otro tipo de botón.
Empezaremos creando un lienzo de 100 x 100 y con el fondo transparente, aumentaremos la vista a 400% para trabajar mejor.
Le aplicaremos una selección circular que cubra todo el lienzo, haremos una aproximación con el ratón y ajustaremos con los campos posicionar y opciones que nos aparecen en la caja de herramientas.
Igual que en el ejemplo anterior aplicaremos un degradado, con estas opciones.
- Modo: normal.
- Opacidad: 100%
- Degradado: Frente fondo (El tercero de la lista)
- Forma: Lineal.
- Color frontal: 0a8807
- Color fondo: 49f845
Ahora crearemos una capa nueva (Mayu + Ctrl + N) que llamaremos centro, elegiremos un color de frente(0a0a7b) y otro de fondo(7bf1f0) y aplicaremos la siguiente configuración.
Modo: normal.
- Opacidad: 100%
- Degradado: Frente fondo (El tercero de la lista)
- Forma: Radial
Iremos al menú capa y pulsaremos sobre escalar capa, pondremos los valores ancho 70, alto 60. Ahora con la herramienta mover desplazamos la capa a la parte superior.
Y ya tenemos nuestro botón finalizado, como no dos en uno, elegir el que mas os guste.
Primero abrimos nuestro gimp y nos vamos a Archivo>nuevo y creamos un documento de 200×75:
Ahora ponemos el color de frente en un verde oscuro (#007800) y el de fondo en verde más claro (#91c100) y seleccionamos la herramienta degradado. Nos ponemos sobre el documento y hacemos un degradado.
Vamos a redondear las esquinas. Picamos en Seleccionar>Seleccionar Todo. Picamos de nuevo en Seleccionar y buscamos la opción Rectángulo redondeado dándole los valores que veis en la imagen:
Os aparecerá la imagen seleccionada con los bordes redondeados pero aún nos queda otro paso. Nos vamos a editar>copiar y ahora editar>pegar como>Imagen nueva. Ya tenemos la base del botón con degradado y esquinas redondeadas en un nuevo documento. Cerramos el anterior.
Seleccionamos la herramienta Selección de rectángulos y hacemos una selección en el documento similar a la que veis en la imagen. Repetimos los pasos que hicimos en el paso 2. Selección>Rectángulo redondeado, le damos un radio de 60pixeles y pulsamos en OK.
Fijamos el color de frente en blanco y el de fondo en negro. Picamos en la herramienta degradados y la configuramos para que el degradado sea de blanco a transparente.
Hacemos un degradado dentro de la selección como veis en la imagen, empezando desde arriba hasta el final de la selección.
Ya tenemos nuestro botón. Ahora deseleccionamos (Seleccionar>nada) y le ponemos un fondo al botón. Pongamos que lo queremos para un blog blanco. Creamos una nueva capa y la ponemos debajo del botón. Seleccionamos la herramienta de relleno, y con el color de frente en blanco, pintamos la capa. Guardamos el botón en archivos>guardar y le pones la extensión con la cual queremos guardarlo (en la parte de abajo picar sobre la flecha del cajón para que se desplieguen las opciones).
El resultado
Fuente original: Creating Shiny Buttons in the GIMP
...necesitan:
• El retocador de imagenes Gimp.
• El pack de 130 Ultimate degradados para Gimp.
• Fuentes llamativas.
Descargar:
No hay comentarios:
Publicar un comentario