Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home Photoshop Recursos

Tutorial crear efecto metálico en un botón

30 enero, 2012
en Recursos
0
Tutorial crear efecto metálico en un botón
Share on FacebookShare on Twitter

En este tutorial aprenderemos cómo crear un botón metálico en Photoshop basado principalmente en estilos de capa. Es muy fácil y es un efecto que queda realmente bien en ciertos botones.

Resumen del Contenido

  • Paso 1
  • Paso 2
  • Paso 3
  • Paso 4
  • Paso 5
  • Paso 7
  • Paso 8
  • Paso 9
  • Paso 10
  • Paso 11
  • Paso 12
  • Paso 13

Paso 1

Abrir Photoshop y crear un nuevo documento, el tamaño que estoy utilizando es 2560×1440 píxeles, podríamos usarlo como fondo de pantalla una vez creado. Después con la herramienta Elipse (U), crear un círculo. Después rellénelo de color negro.
[singlepic id=98 w=320 h=240 ]

Paso 2

Crear otro círculo más pequeño y alinear al centro del documento. Para ello, basta con mantener la tecla Mayúscula para que sea proporcionado y la tecla Alt para crearlo desde el centro y haga clic y arrastrar para crear el círculo. Después ocultamos la selección, más adelante la usaremos.
[singlepic id=99 w=320 h=240]

Paso 3

Seleccione el círculo grande haz click en Capa>Máscara de capa>Ocultar selección y rellénelo de color del fondo. Ya tienes un anillo listo para añadir algunos efectos cromados.
[singlepic id=100 w=320 h=240]

Paso 4

Sitúate en la capa del circulo grande y con el botón derecho pulsa «efectos» y añade el efecto «superposición de colores» y pon un gris muy oscuro. No salgas de la herramienta de efectos que hay que añadir unos más
[singlepic id=101 w=320 h=240]

Paso 5

Añade el efecto «Bisel y relieve» y poneos bisel interior con los parámetros que vemos en la fotografía: un estilo de 550% de profundidad, 32 pixeles tamaño y sólo 2 de suavizado, 100º para el ángulo y 30º para la altitud. También bajamos la opacidad del efecto.
[singlepic id=102 w=320 h=240]

Paso 6

Seleccionamos sombra interna en modo Sobreexponer y 75% de opacidad y color blanco.
[singlepic id=103 w=320 h=240]

Paso 7

Añadimos el último efecto a esta capa «sombra» con los valores de 90º
[singlepic id=105 w=320 h=240]

Paso 8

Visualizamos la selección que hicimos en el paso 2 y después lo rellenamos de negro. Ya tenemos la parte de dentro del anillo.
[singlepic id=104 w=320 h=240]

Paso 9

Añadimos un estilo a la nueva capa creada con el botón derecho. Le aplicamos degradado lineal como efecto de capa al 100% de opacidad y 90º y le ponemos un degradado de negro a gris.
[singlepic id=93 w=320 h=240]

Paso 10

Añadimos el efecto bisel y relieve con técnica redondeada con 80% de profundidad, 3 pixeles de profundidad y 0 de suavizado
[singlepic id=94 w=320 h=240]

Paso 11

Añadimos encima de todos un dibujo de un círculo (u) y editamos el trazo como vemos en la ilustración con la herramienta de cursor negro (A). Si necesitamos añadir nodos al trazo puedes hacerlo pulsando sobre el trazo con la tecla (P). Después seleccionamos y rellenamos la capa de un color cualquiera, ahora mediante efectos la cambiaremos.
[singlepic id=95 w=320 h=240]

Paso 12

Añade a esta capa recién creada un estilo de capa de superposición de colores y con un degradado de blanco y negro.
[singlepic id=96 w=320 h=240]

Paso 13

Listo!! ya tenemos nuestro botón metálico. Puedes convertirlo en un objeto inteligente y usarlo en cualquier documento.
[singlepic id=97 w=320 h=240]

Descargar ejemplo

Etiquetas: efecto metálicoIconosphotoshoppsdtutorial
ANUNCIO
Post anterior

Robots.txt perfecto para WordPress

Próximo Post

Traducción al español de todos los menús de photoshop

Otros Posts

Métodos abreviados de la herramienta Zoom en Photoshop

Métodos abreviados de la herramienta Zoom en Photoshop

17 abril, 2015
0

Cuando estamos modificando una imagen  necesitamos  aumentar o disminuir su nivel de ampliación para ver los efectos de los cambios en su contexto. Veamos algunos de los métodos abreviados en photoshop que podemos utilizar y...

350 iconos pixel-perfect en PSD para descargar. Glyphs Icons

350 iconos pixel-perfect en PSD para descargar. Glyphs Icons

27 mayo, 2012
0

Un equipo de diseño y desarrollo en WordPress llamado Brankic1979, ha creado un conjunto de 350 iconos pixel-perfect en formato PSD llamados Glyphs Icons para descargar líbremente. El conjunto está compuesto por 350 iconos en PSD que puede ser redimensionado a cualquier tamaño...

Recomendados

wp speed

5 pasos para mejorar la velocidad de tu web

17 mayo, 2020
Infografía: Como afecta el scrolling en la conversión de los eCommerce

Infografía: Como afecta el scrolling en la conversión de los eCommerce

7 marzo, 2015
Como acceder a la administración de WordPress

Como personalizar en menú de navegación en WordPress

16 febrero, 2016
Algunas herramientas SEO muy útiles

Herramientas SEO hechas por Google

20 agosto, 2011

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .