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 » Basicos, Dibuja, Web

Botones elegantes metalizados

Publicado por Luch el Jueves, 13 Noviembre 2008Sin Comentarios

Interesantes botones elegantes metalizados. Crearemos dos estilos de estos botones: dos con estado activo y los otros dos en estado simple. Esto quiere decir que los botones con estado activo son aquellos que cuando por ejemplo pasamos la flecha del mouse por encima de este, pueden cambiar de color, forma etc, y en estado simple es cuando la flecha del mouse no pasa por encima de ellos.

Abrimos un nuevo documento de 600×300px con fondo transparente.
Rellenen el fonfo con ((Gradient Tool)) de tipo ((Lineal Gradient)) aplicando los colores #dfdfdf y #f6f6f6.

Crean una ((New Layer))

Con ((Elliptical Marquee Tool)) crean una selección como la que ven abajo, luego la rellenan de negro.

Hagan doble clic sobre esta capa para aplicar ((Layer Styles)).

((Drop Shadow)).

((Gradient Overlay)). Para este degradado apliquen los colores: #ffffff, #d2d1d6 y #9d9da5.

((Stroke)) Y para este degradado usamos los colores: #e0e0e0, #ffffff, #999999, #e7e5e5, #999999 y #e7e5e5.

Luego de aplicar estos Layer Styles llegaremos a este resultado.

Creamos otra ((New Layer)).

Volvemos a crear otra selección circular, pero esta vez, menor a la anterior, luego la rellenan de negro.

Ahora le aplicamos ((Layer Styles)) a esta capa.

((Inner Shadow)).

((Bevel and Emboss)).

((Color Overlay)).

Acepten los cambios para lograr este resultado.

Antes de seguir con el próximo paso descarguen estos ICONOS PNG.

Vamos a crear estado simple que les hablé al principio del tutorial.

Abren uno de los íconos. Lo pegan en este documento, lo adaptan al botón y luego de cambian el modo de la capa a ((Luminosity)).

Y ahora creamos la zona activa.

Para duplicar el botón simplemente seleccionen todas las capas y luego apreten Ctrl + J para duplicarlas.
Repetimos el paso anterior con un ícono diferente pero el modo de la capa será ((Lighten)).

Este es mi resultado final. Espero que les halla gustado. Saludos!