Blog

El blog de CaminoCreativo.com con lo ultimo y mas destacdo sobre el diseño.

Efectos

Los mejores tutoriales para Photoshop enfocado sobretodo a crear efectos especiales.

Noticias

Importantes noticias para diseñadores. Tambien algunas novedades de nuestra area.

Recursos

Todos los recursos para poder hacer de tus diseños algo completamente profesional.

Varios

No solo de Photoshop vive el diseñador. Dreamweaver, Illustrator, incluso otros recursos!

Home » Avanzados, Web

Botón brillante estilo Web 2.0

Publicado por Luch el Lunes, 6 Octubre 2008Sin Comentarios

Este es un botón con un estilo Web 2.0 muy profesional. La verdad que el resultado es fabuloso para que lo apliquen en su pagina web.

Abrimos un nuevo documento de 300×150px con fondo blanco.
Seleccionamos ((Rounded Rectangle Tool)) con un ((radio)) de 6 y relleno de negro.

Ahora le aplicaremos unos ((estilos)). ((Layer))-((Layer Style))-((Blending Options)).

Observen la imagen de abajo. Luego de aplicado estos estilos les debería haber quedado así.

Ahora vamos a escribirle el texto al botón. Seleccionen la fuente Arial Rounded MT Bold con un tamaño de 31px.

Volvemos a ((Blending Options)) pero esta vez le aplicaremos unos ((estilos)) al texto.

Luego de aplicados los estilos el texto les habrá quedado así.

Lo que debemos hacer ahora es duplicar la capa donde se encuentra el recuadro del botón azul y lo colocan hacia abajo. Luego con ((Rectangular Marquee Tool)) eliminan 1/4 del botón empezando de abajo. Observen la imagen que sigue a continuación.

Apreten Ctrl + Click sobre la capa recién duplicada para activar la selección y hagan una nueva capa. Seleccionen la ((herramienta degradado)) de Blanco a Transparente y trazen la línea de degradado de abajo hacia arriba hasta lograr algo como veremos en la imagen que sigue.

Vamos a aplicarle el brillo al botón. Apretamos Ctrl + Clic sobre la capa donde se encuentra el recuadro del botón para activar la selección. Ahora seleccionen ((Polygonal Lazzo Tool)) y mantendiendo la tecla Alt apretada (resta selección) eliminamos 3/4 del botón en sentido diagonal. Observen la imagen de abajo para que entiendan lo que les estoy diciendo. Seleccionen la ((herramienta degradado)) de Blanco a Transparente y trazen la línea en manera diagonal para lograr un efecto de reflejo (la selección debe estar activada).

Como vemos el botón nos ha quedado vacío en la parte derecha. Lo que pueden hacer es acomodar el texto al centro o sino agregar un ícono como hice yo. Inserté el logo de DesignOwners.

Ahora si damos por concluído el tutorial. ¿Qué les parece el resultado?