Continuando con nuestros tutoriales de Diseño Web (Si, lo reconozco, soy un fanático del Diseño Web y los gráficos), hoy les traemos un sencillo tutorial para enseñarles como hacer unos botones al más puro estilo “Web 2.0” para que puedan insertar en sus páginas y hacerlas más atractivas a los visitantes.

Para el desarrollo de este tutorial necesitamos tener algunos conocimientos básicos en Photoshop, aunque si no los tienen no se preocupen, que siguiendo paso a paso el detalle se podrá lograr.

Toda la información, como siempre, después del salto.

Cómo hacer botones estilo 2.0 para tu Web

Como siempre, lo primero:

Implementos necesarios:

1. Adobe Photoshop, CS o superior. (Para este tutorial utilizamos la versión CS3 en Inglés. Pueden descargar una versión de prueba desde este enlace).
2. Opcionalmente unas buenas fuentes que puedan darle más estilo a sus botones. (Pueden encontrar varias en este enlace).

Con todo listo, vamos, manos a la obra:

Procedimiento:

1.- Primero que todo, debemos partir por crear una nueva imagen en Photoshop mediante el menú Archivo > Nuevo o bien presionando CTRL + N en sus teclados. Las propiedades de la nueva imagen son:

Ancho: 300 px.
Alto: 200 px.
Color de Fondo: Transparente.

Nota: El tamaño los dejo a su criterio, principalemente es para trabajar con comodidad sobre nuestro botón. Luego podemos extraerlo y ajustarlo a otros tamaños.

2.- A continuación, usando la Herramienta de Rectángulo Redondeado (la 2da de las formas), creamos un rectángulo de tamaño adecuado para nuestro botón, usando cualquier color, y luego en la ventana de capas, hacemos click con el botón derecho sobre esta y seleccionamos Rasterizar.

Rectángulo redondeado. El color usado fue #393939 pero pueden usar cualquiera.

Rasterizando la capa.

3.- Luego de Rasterizar la capa, debemos ir a las Opciones de Fusión de la misma. Para eso podemos hacer click con el botón derecho sobre la misma capa y seleccionar la opción, o bien ir al menú Capa > Estilo de Capa > Opciones de Fusión y ajustar los siguientes valores en las siguientes opciones:

Resplandor Interior:

El color seleccionado es blanco, o sea, #FFFFFF

Bisel y Relieve

Superposición de degradado

El degradado va de #99b910 a #d1dc42

Nota: Para modificar el color del degradado, debemos hacer click sobre la barra de color (la que se ve verde en la imagen anterior) y se abrirá la siguiente ventana:

Editor de degradado

Ahí, en el cuadradito inferior de la izquierda, ponemos el primer color del degradado (en este caso #99b910) y en el cuadradito inferior de la derechoa el segundo color del degradado (en este caso #d1dc42).

Trazo:

El color utilizado es #d1dc42

Al terminar de aplicar esos efectos, deberíamos tener algo como esto:

Lo cual es un resultado bastante bueno, pero aún así intentaremos darle un poco más de estilo.

4.- A continuación, creamos una nueva capa (Shift + CTRL + N en sus teclados), y hacemos una selección sobre esta nueva capa con la Herramienta de Selección Elíptica, tal como se muestra en la siguiente imagen:

Esta selección es algo compleja. Si no les queda exactamente igual no se preocupen, solo influye en los brillos del botón.

5.- Luego de hacer la selección, vamos al Bote de Pintura y hacemos click con el botón derecho para seleccionar la Herramienta de Degradado. Luego en la parte superior, seleccionamos Degradado Radial y el color lo dejamos de blanco a transparente. (Si tienen problemas en setear el color, pueden seleccionar la opción que dice ‘Color de frente a transparente’ y el color de frente setearlo en blanco). Además, modificamos el modo a Luz Suave y la opacidad a 40%. Luego de setear esas opciones, pintamos, haciendo una raya vertical a lo largo de la imagen (pintará solo la selección), de cualquier forma ahí les recomiendo probar a su gusto.

Al hacerlo, deberíamos tener algo como esto:

6.- Ahora, sobre la capa que tiene el rectángulo original (la 1), hacemos click con el botón izquierdo y CTRL presionado, lo que ocasionará que se seleccione el borde del rectángulo:

7.- Con esa selección hecha, vamos a Selección > Modificar > Contraer y le damos un valor de 2 px. Luego vamos a Selección > Invertir y presionamos Del 1 vez en nuestro teclado. Presionamos ahora CTRL + D en nuestro teclado para deseleccionar.

A esta altura, deberíamos tener algo como esto:

8.- Ahora añadiremos el texto del botón. Aquí tienen absoluta libertad sobre el color del texto y tipografía a usar. Nosotros utilizamos la tipografía Fatboy Slim BLTC a un tamaño de 20 px.

9.- Vamos ahora a las Opciones de Fusión de la capa de texto, y vamos a Sombra paralela, ajustando como sigue:

Y tenemos nuestro resultado final:

Y a nuestra disposición unos estilizados botones tipo 2.0 para que adornemos un poco más nuestras páginas Web.

Antes de finalizar, algunas notas adicionales:

1.- Con en la mayoría de los tutoriales de Photoshop, los valores y colores utilizados en los distintos pasos son de referencia para que se guíen. Pueden usar los mismos o experimentar con nuevos parámetros (recomendamos lo segundo).

2.- El tema de la tipografía a usar lo mismo. No es necesario que usen la que utilizamos ahí.

3.- Dejamos en este enlace el PSD correspondiente al botón completo para que reutilicen según gusten.

Como siempre, este tutorial ha sido desarrollado, probado y documentado por el equipo de Como Lo Hago, por lo que cuenta con nuestro infalible Sello de Garantía. Cualquier duda, sugerencia, comentario o problema que puedan tener, sientanse libres de dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.