Botón para la web

Un breve tutorial de cómo hacer un botón para la web utilizando el Gimp, de tal manera que no nos cueste mucho tiempo crearlo pero que tenga un poquito de gracia.El resultado es este :

Pasos que he seguido:

1. Creamos una nueva imagen con el Gimp, de 400x400px. Sobre el fondo blanco, creamos una nueva capa y en ella una elipse que rellenamos de color azul oscuro. Le aplicamos un desenfoque gaussiano de 3px.



2. Con la herramienta de selección por color, seleccionamos de nuevo la elipse. Vamos a Seleccionar -> Encoger Selección y encogemos 5px. Vamos a Capa -> Nueva capa manteniendo la selección encogida y pintamos toda la selección de negro. Le aplicamos un desenfoque gaussiano de 2px.



3. Hacemos lo mismo con esta capa. Seleccionamos por color la elipse negra, encogemos la selección 3px y creamos una nueva capa. Pintamos la selección de un color azul más claro que el de antes. Le aplicamos un desenfoque gaussiano de 2px. Ya tenemos creados los bordes de nuestro botón.



4. Creamos una nueva capa que llamamos letras. Cogemos la herramienta de texto, elegimos una fuente que nos guste y escribimos con un azul muy oscuro y el tamaño correcto lo que queramos que aparezca en el botón. Cuando esté bien, vamos a Capa -> Combinar hacia abajo para que se quede el texto en una capa normal.



5. Duplicamos la capa letras. A la copia le aplicamos un desenfoque gaussiano de radio 18px. Ponemos esta capa copiada debajo de la original. Seleccionamos la capa letras y la combinamos hacia abajo, de tal manera que quedan las letras con su sombra en una sola capa.



6. Teniendo seleccionada la capa de la elipse interior (la azul más claro), seleccionamos la elipse por color. Creamos una nueva capa que va a ser el reflejo. Encogemos la selección un par de pixels. Con la herramienta de Selección de regiones dibujadas a mano, y con la tecla [CTRL] pulsada (para restarle a la selección actual la que se va a dibujar a mano), dibujamos una curva dentro de la elipse, de lado a lado y volvemos con el mismo trazo al punto del que habíamos partido. Lo que hacemos es seleccionar lo que no queremos que sea parte de la selección.Con la herramienta del degradado, lanzamos un degradado lineal de blanco a transparente sobre la selección modificada. Empezamos el degradado más a la izquierda y lo trazamos diagonalmente hacia abajo y a la derecha. Seleccionamos nada, desenfocamos unos 10px y ajustamos la opacidad de la capa a nuestro gusto. Colocamos esta capa debajo de la de las letras.
7. Selecconamos la capa de la primera elipse que hemos dibujado (la azul más oscuro). Seleccionamos por color y agrandamos la selección un par de pixels. Creamos una nueva capa. Pintamos la selección en la nueva capa de negro, seleccionamos nada y hacemos un desenfoque gaussiano de 30 pixels.

Descarga: imagen en formato xcf (formato del Gimp).