WYDBLOG

[Tutorial] Boton Profesional

Es increíble como puede cambiar el aspecto de un sitio mejorando aspectos tan pequeños como pueden ser los botones por ejemplo. Para esta entrega les enseñare como hacer en PhotoShop un tipo de botón muy elegante (en los tres estados: Reposo, Hover y Activado) que le dará a tu sitio un estilo asombroso.
Como dije antes el tutorial será para PhotoShop, aunque también puede hacerse con otro software si conocen como funciona.
Comencemos con el paso numero uno, lo primero que debemos hacer es crear un documento nuevo del tamaño deseado (este varia según el tamaño que le demos al boton). Una vez que creamos el documento, crearemos el fondo del botón en nueva capa, para ello utilizaremos la herramienta “Rounded Rectangle Tool” con 15 px de Radio para crear una forma similar a esta:

Una vez que tenemos el Path (así se llama lo que creamos con esta herramienta) hacemos clic derecho en el documento (con la herramienta seleccionada) y tocamos en “Fill Path”, allí seleccionaremos el color (yo utilice gris #cccccc) y le damos OK.

Paso 2, Este es una de las partes más divertidas del proceso, donde el botón comenzara a cobrar vida, en primera instancia vamos a modificar las Blending Options del fondo del botón que creamos en el paso 1, para ello seleccionaremos la capa en donde se ubica el fondo y haremos doble clic, la configuración debería quedar de la siguiente forma:

El resultado debería ser algo como esto:

Paso 3, En esta etapa crearemos el borde exterior negro que recubre todo el botón, para ello crearemos una nueva capa por debajo del botón y haciendo Ctrl. + Clic sobre el sobre la capa en donde se encuentra el botón cargaremos la selección. Una vez que aparece la selección (tiene que tener la forma del botón) nos dirigimos a Select > Modify > Expand y le damos 2 pixels, lo que logramos con esto es agrandar la selección en 2 pixels. En la nueva capa rellenaremos esta selección expandida que acabamos de crear, lo haremos seleccionando el color (en este caso será negro #000000) y presionando Alt. Enter. Por ultimo le daremos un Outer Glow con las Blending Options haciendo doble click en la capa y activando el Outer Glow, debemos especificar que debe ser de color Blanco #ffffff con una transparencia al 10% y un tamaño de 27px. Debemos tener algo así:

Paso 4, este paso es sumamente fácil, crearemos un brillo externo al borde creado en el paso anterior para darle mas volumen. Para ello en una nueva capa por debajo del borde, luego cargaremos la selección del borde (ya vimos como hacerlo en el paso 3) y la expandiremos en 1px (también lo vimos en el paso 3). Con la selección activa nos dirigiremos a Edit > Stroke y definiremos que será de 1px, inside y de color blanco, y damos en OK. Como verán creamos un nuevo borde de color blanco pero que recubre por completo al borde anterior, lo que necesitamos hacer es borrarle la parte superior, para ello seleccionaremos una goma suave y presionando Shift (para que borre en una línea recta) borraremos la parte superior. El resultado de este paso debería ser el siguiente:

Paso 5, Siguiendo la técnica enseñada en el paso anterior crearemos un borde Interno blanco, por lo tanto debemos hacer lo mismo que en el paso 4 pero cargando la selección del botón (es decir de la primer capa que creamos) y en vez de expandirla la contraeremos en 1px (lo contrario a expandir) y en una nueva capa por enseña de todas ir a Edit > Stroke y definiremos que será de 1px, inside y de color blanco. Por ultimo con la goma de borrar borraremos la parte del medio de forma horizontal, lo que dará un efecto muy interesante:

Paso 6, ya nos acercamos al final. En una nueva capa por encima de todas las demás seleccionaremos la herramienta “Rounded Rectangle Tool” y crearemos una especie de burbuja en la parte superior del botón, deberá ocupar solo la mitad superior y ser un poco más angosta que el botón, de color será blanca y le daremos 10% de visibilidad lo que le dará un toque increíble. Si tienes dudas sobre como manejar esta herramienta relee el punto 1 nuevamente. Hasta ahora el botón debe ser similar a este:

Paso 7, el cuerpo del botón ya esta terminado, lo único que hace falta es seleccionar una buena tipografía y ubicar el texto deseado. Yo elegí Tahoma (mi fuente favorita :P):

Botón en estado Hover

Cuando el botón esta en estado Hover significa que el mouse esta posicionado por encima del botón. El mejor efecto que podemos darle es el de hundimiento, es decir que parezca que el botón esta presionado, para lograr este efecto simplemente copiaremos la capa del bg del boton (es decir la que hicimos primero) y la pintaremos de negro, es decir la seleccionaremos (Ctrl. + Clic) y luego Alt. + Enter. Por ultimo le daremos una visibilidad del 25% para obtener un resultado como este:

Botón en estado Active

El estado Active significa que el usuario esta haciendo clic en el botón, es decir que lo esta activando. Para darle una apariencia atractiva continuaremos con el hundimiento pero esta vez mas profundo como si este fuera el límite. Para lograr este efecto copiaremos la capa del bg del botón (al igual que en el otro estado) pero esta vez pondremos el relleno en cero (Fill 0%) esta opción se encuentra debajo de la visibilidad de la capa. Lo que ganamos poniendo el relleno a cero es que no veremos el contenido de la capa, pero si podemos ver las Blending Options, por lo tanto abriremos estas y activaremos el Inner Glow, la configuración debería ser como esta:

El botón debería quedar como este:



Y listo, ya tenemos nuestro botón profesional terminado y en 3 estados distintos. Como dije al principio del tutorial es increíble como estos pequeños detalles pueden convertir una web mediocre en algo llamativo/atractivo. Los invito a realizar el tutorial y verán que realmente es muy fácil de hacer y aprenderán mucho en el proceso.
También me parece de gran ayuda dejar para descargar el archivo fuente del tutorial, así que aquí esta: Pro-Button-PSD.rar