Diseño Web

Ξ 6 comentarios

Cómo hacer botones estilo 2.0 para tu Web

por Xabadu
Cómo hacer botones estilo 2.0 para tu Web

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.

Sello de GarantÍa CLH

Esperamos que este tutorial haya sido de utilidad para Uds.

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

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

6 Comentarios

  • esto no se pude hacer con photoshop 7? he intentado busacar rasterizar y nada,tampoco sale fusion de capas

  • @samit: Si, se puede hacer con Photoshop 7.

    La opcion de rasterizar sale como ‘Rasterize Layer’ al hacerle click con el boton derecho a la capa, y la fusion de capas es “Blending Options”.

  • […] botón (para hacer botones, los invitamos a revisar este tutorial donde hemos cubierto el proceso por […]

  • Disculpa pero el enlace del psd está roto.
     
    Gracias.

  • @Antonio:

    Gracias por avisarnos, hemos subido nuevamente el archivo.

    Saludos!

  • NO PUEDES PONER EL TUTORIAL EN ESPAÑOL???
    TIPO QUE LO HAGAS CON UN PHOTOSHOP EN ESPAÑOL??
     
    gRACIAS

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gente linda que nos quiere

Donde mas estamos