Avisar de contenido inadecuado

Crear Botones con GIMP

{
}

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.

new lienzo

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

Caja Herramientas

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.

Degradado

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í.

Degradado

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.

Degradado

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.

Degradado

Aplicaremos el degradado sobre la selección, igual que antes de manera vertical, y de arriba a abajo.

Degradado

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.

Degradado

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:

Degradado

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.

Degradado      Degradado

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.

Degradado

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.

Degradado

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.

Degradado

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.

Degradado        Degradado

 

{
}
{
}

Comentarios Crear Botones con GIMP

Muchas gracias por este instructivo, que me viene barbaro para mejorar mi web
Saludos
Pablo
http://www.juegostotal.com.ar
Pablo Pablo 11/02/2009 a las 13:28
estoy aprendiendo aún ,gracias por este instructivo para realizar mis botones..de venezuela
soraima soraima 23/03/2009 a las 17:40
holaaaaaaaaaa
anomeis anomeis 01/07/2009 a las 17:16
Genial, me quedaros igualitos, muchas gracias.
Hansem Hansem 03/04/2010 a las 12:34
Muy buen tuto, muchas gracias.
No sabes como hacer botones normales, con el mousehover y presionados, es que estoy haciendo una aplicacion y necesito tener esos tres estados.
te agradeceria mucho una respuesta mi correo cris_torres15@yahoo.com.mx
Cris-Jake Cris-Jake 19/07/2010 a las 05:57
Buenisimo tutorial, me gusta mucho como queda el boton redondo.
Jugar Juegos Gratis Jugar Juegos Gratis 19/07/2010 a las 18:16
Hay alguna forma de mejorar el aro que les queda a los botones redondos?
Los Mejores Juegos Los Mejores Juegos 19/07/2010 a las 18:17
Les dejo mi web para que opinen sobre mis progresos con gimp. gracias !
edgar edgar 10/08/2010 a las 12:32
Muy buen profesor soy novato en gimp y he podido seguir sin problemas el tuto
mil gracias
norberto norberto 07/01/2011 a las 19:53
Excelente, Gracias
merry merry 14/02/2012 a las 21:07
Muy buen efecto...
un buen ejemplo de boton...
te invito a visitar mi sitio de diseño grafico!
lo encuentras aca :
http://aztecalinux.blogspot.com/
salu2
don.chelios don.chelios 09/05/2012 a las 00:18
Es un excelente trabajo.
toner
http://www.konver.com
Isabel Isabel 02/08/2013 a las 13:20

Deja tu comentario Crear Botones con GIMP

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

Avatar Tu nombre