Tomado de:
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.
Para trabajar mejor, aplicaremos un zoom de como poco 400%.
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
Aplicaremos un degradado a nuestro lienzo, el degradado lo configuraremos de la siguiente manera.
- Modo: normal.
- Opacidad: 100%
- Degradado: Frente fondo (El tercero de la lista)
- Forma: Lineal.
El degradado lo aplicaremos empezando por la parte superior central del lienzo y acabando en la parte inferior central. Os puede ayudar mantener la tecla CTRL pulsada mientras arrastráis el ratón y por supuesto si no os gusta el resultado siempre podéis pulsar CRTL-Z para deshacer los cambios.
Os tiene que quedar algo parecido a esto.
Seleccionaremos toda la imagen pulsando Ctrl +A (Seleccionar → Todo), iremos al menú seleccionar y elegiremos la opción Rectangulo redondeado, se nos abrirá una nueva ventana donde nos pide el valor del radio, lo pondremos a 55 y pulsaremos sobre aceptar.
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í.
Añadiremos una nueva capa al lienzo pulsando Mayu + Ctrl + N (Capa → Capa Nueva), que llamaremos brillo.
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.
Ahora pondremos el color de frente a blanco y seleccionaremos la herramienta de degradado en la caja de herramientas. Esta vez cogeremos el tipo de degradado frente a transparente (el cuarto de la lista) y marcaremos la casilla invertido.
Aplicaremos el degradado sobre la selección, igual que antes de manera vertical, y de arriba a abajo.
Ya lo podríamos dejar así, pero para gustos los colores, así que le aplicaremos un borde. Crearemos una nueva capa (Mayu + Ctrl + N) que llamaremos borde, la marcamos como activa y la seleccionamos (Ctrl + A) .
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.
Ahora le aplicaremos el texto, para ello pulsaremos sobre la herramientas de texto que hay en la caja de herramientas (icono con la letra A) y con el ratón dibujaremos una selección en nuestro botón de manera que esta ocupe todo su ancho y quede centrada.
Las opciones de la caja de herramientas las estableceremos de la siguiente manera:
Por supuesto podéis cambiarlas a vuestro antojo.
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.
Tener cuidado con el formato con el que guardáis la imagen, pensar que en exploradores como el IE no reconoce las transparencias del formato png.
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
Aplicamos el degradado de forma vertical y de arriba a abajo. Hecho esto, iremos al menú Seleccionar y pulsaremos sobre, Encoger (shrink) y ponemos un valor de 7, aceptaremos y pulsaremos la tecla borrar, obteniendo un aro.
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
El degradado lo aplicaremos del centro del lienzo hacia abajo, obteniendo algo parecido a esto.
Creamos una nueva capa que llamaremos brillo, y con el color de frente blanco, aplicaremos un degradado del tipo Frente a Transparente.
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.
Ahora le aplicamos un filtro. Menú Filtros → Desenfoque → Desenfoque Gaussiano, con los valores de 10 tanto en horizontal como en vertical.
Y ya tenemos nuestro botón finalizado, como no dos en uno, elegir el que mas os guste.
Vamos a ver como hacer un botón del estilo 2.0 con gimp.
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:
Averigua quien está conectado a tu ordenador
