Diseño de botones metálicos en Photoshop.
Escrito por Revista NeoPixel Domingo, 16 de Octubre de 2011 11:49
Vamos a crear en pocos pasos con Photoshop un botón con apariencia metálica, para este ejemplo utilizaremos el logotipo de NeoPixel, pero para seguir este tutorial lo puedes ir haciendo con tus propios iconos o logotipos que desees.
El principio para crear texturas metálicas en Photoshop casi siempre es el mismo, ya que necesitaremos hacer un degradado en grises y aplicar algunos filtros de ruido "Noise" y algunos efectos de Blur, por lo regular Motion Blur, e ir jugando con varios layers, brillos y "blending modes" para obtener el resultado deseado.
Crearemos un documento de 300 x 300 pixeles a 72 DPI´s, por ser un ejemplo, claro que podrás hacerlo al tamaño que lo necesites y a más resolución dependiendo si es que lo vas a utilizar para web o para materiales impresos.
Dentro de este documento creamos una selección circular que abarque casi la totalidad de nuestro canvas. Esta la llenaremos de un color gris con valores RGB de R:69 G:69 B:69.
Bajo el panel de Layer, en la opción Layer Style le aplicaremos la opción Gradient Overlay con los valores que muestra la imagen.
Una vez hecho esto duplicamos este Layer.
A continuación traemos desde ilustrador (Copyt-Paste) nuestro logotipo o ícono. Si ya lo tienes en Photoshop u otro programa es valido, solo tenemos que ponerlo en un layer por encima de nuestra base del botón. En nuestro caso lo copiamos y pegamos como pixeles desde Illustrator.
Seleccionamos nuestro ícono o logotipo de la forma que más te agrade, ya sea con la varita mágica (Magic Wand Tool), seleccionando el rango de color desde el menú Select, o podemos también mantener presionado la tecla Cmd y dar click en el layer donde tengamos nuestro logotipo. Bueno, una vez teniendo nuestra selección vamos a seleccionar nuestra base circular o botón gris que hemos creado.
Damos click en la tecla "Delete" para dejar nuestro botón con la marca de nuestro ícono en blanco (o transparente).
Ahora lo que resta es aplicar la textura metálica a nuestro "layer". Una vez más en Layer Style aplicaremos los valores siguientes a "Outer Glow", "Bebel and Emboss" y a "Gradient Overlay". Con la opción de "Preview" activado podemos ir viendo como nuestra imagen va tomando la textura metálica.
Un vez hecho esto hacemos visible nuestro layer inferior, que es el que tiene el botón original pero sin el suaje o la marca de nuestro ícono. Este layer lo duplicaremos y pondremos hasta arriba de todos los demás. A este layer le agregaremos el filtro "Noise" desde Filter-noise-Add Noise, con un valor de 125, Uniforme y Monocromático.
Una vez más a este mismo layer le aplicamos un filtro "Radial Blur" con los valores de 100, con método "Spin" y en Calidad le ponemos "Good".
A este layer le pondremos una opacidad de 20% y en los Blending Modes elegiremos "Multiply".
Como podrás ver nuestro botón está ya casi terminado con una buena apariencia metálica. Solo restaría agregarle algún brillo. Esto lo podemos hacer creando una selección circular del tamaño de nuestro botón y rellenando de blanco. Quitamos la selección y volvemos a seleccionar con la herramienta de selección circular pero dejando fuera de la selección parte del círculo blanco que hemos creado (como un cuarto de luna), formando, como vemos en la imagen. Damos click en borrar y a este layer le pondremos opacidad de 45 y la opción "Overlay" dentro de los Blending Modes de los Layers.
Los valores que hemos manejado en estos pasos pueden variar dependiendo del resultado específico que desees, solo sería cuestión de jugar un poco con ellos para obtener los resultados deseados.
Ojalá te sea de ayuda este ejemplo, de cualquier manera se aceptan dudas o sugerencias por Twitter, Facebook, comentando aquí mismo o por mail a Esta dirección electrónica esta protegida contra spam bots. Necesita activar JavaScript para visualizarla
RSS feed Comments
