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

Crear un botón metálico

Publicado por Luch el Martes, 9 Diciembre 2008Sin Comentarios

Fantástico botón metálico que pueden utilizar como recurso web. Utilizaremos una gran variedad de ((Layer Styles)): ((Inner Shadow)), ((Inner Glow)), ((Gradient Overlay)), ((Stroke)), ((Outer Glow)) y para crear su trazado y formas vamos a usar ((Ellitical Marquee Tool)).

Abran un nuevo documento de 450×450px con fondo blanco.

Crean una ((New Layer)).

Seleccionen ((Elliptical Marquee Tool)) con Alt + Shift apretados (aumenta proporcionalmente desde el centro) y dibujen una selección como la que ven abajo.

Hagan doble clic sobre esta capa para abrir la ventana de ((Layer Styles)).

((Inner Shadow)).

((Inner Glow)).

((Gradient Overlay)). Para este degradado usen los colores: #000000, #88a4bd y #ffffff.

((Stroke)). Y para este degradado usen los colores: #bcd5ee y #35424d.

Acepten los cambios y vean el resultado.

Crean una ((New Layer)).

Seleccionen ((Elliptical Marquee Tool)) para dibujar una selección circular como la que ven abajo.

Luego la rellenan de negro.

Hagan doble clic sobre esta capa para abrir la ventana de ((Layer Styles)) y aplicarle ((Gradient Overlay)). Para este degradado van a usar los colores: #000000, #000000, #ffffff, #5298d8 y #000000.

Acepten los cambios.

Ahora vamos a rasterizar los dos circulos. Para ello hagan clic derecho sobre el nombre de la capa del primer círculo y en el menu que se despliega elijan ((Convert To Smart Object)). Vuelvan a hacer clic derecho y esta vez elijan ((Rasterize Layer)).

Repitan el paso anterior para el otro círculo.

Luego mantengan presionada la tecla Alt y hagan clic izquierdo del mouse entre medio de las dos capas. Esta zona aparece marcada en la siguiente imagen con una línea roja.

Crean otra ((New Layer)).

Con ((Elliptical Marquee Tool)) dibujen una selección circular como la que ven abajo.

La rellenan de blanco.

Hagan doble clic sobre esta capa para abrir ((Layer Styles)) y aplicarle ((Gradient Overlay)).

Acepten y vean el resultado.

Crean una ((New Layer)).

Dibujen una selección ovalada en la parte superior del botón.

La rellenan de color blanco.

Vuelvan a crear una ((New Layer)).

Seleccionen ((Elliptical Marquee Tool)) y dibujen la siguiente selección circular en el centro del botón.

La rellenan con el color #212530.

Hagan doble clic sobre la capa para abrir ((Layer Styles)).

((Outer Glow)).

((Inner Glow)).

((Stroke)).

Acepten los cambios.

Nuevamente crean una ((New Layer)).

Seleccionen ((Elliptical Marquee Tool)) y dibujen otra selección circular en el centro del documento.

La rellenan de blanco.

Hagan doble clic para entrar a ((Layer Styles)).

((Inner Glow)).

((Gradient Overlay)). Para este degradado usen los colores: #babcbd y #ffffff.

((Stroke)).

Acepten los cambios.

Escribimos un texto sobre el botón.

Se paran sobre la capa de texto y vayan al menu ((Layer))-((Layer Style))-((Inner Shadow)).

Acepten los cambios para obtener este fantástico botón.