[Fuente: http://psd.tutsplus.com/tutorials/interface-tutorials/handy-web-20-icons-in-photoshop/]
Cuando estamos trabajando en el diseño de un proyecto Web, muy a menudo necesitamos iconos para referenciar comandos como add, delete o edit. Con la moda del Web 2.0, el uso de botones con efecto 3D se han hecho muy populares. En este tuto, mostraremos cómo crear ese efecto en los botones o iconos que deseemos que tengan profundidad.
Paso 1
Creamos un nuevo documento y seleccionamos la Herram. Elipse (U). No importa que color utilices porque será reemplazado más tarde con los estilos de capa.
Paso 2:
Hacemos doble click en la capa de la elipse y abrimos la caja de dialogo del Layer Style . Seleccionamos el Gradient Overlay y utilizamos un azul y un sombra ligera de azul para los colores del gradiente. Para el estilo utiliza radial. También añadimos un Bevel and Emboss como mostramos a continuacion:
Truco : mueve el radial gradient más a la parte superior del circulo.
Paso 3
Duplicamos la capa del circulo y la cambiamos de tamaño para hacerla ligeramente más pequeña, como muestra la imagen de abajo.
Paso 4
Hacemos doble click sobre la nueva caoa para abrir la caja de dialigo Layer Styles. Quitamos la selección de todos los efectos que teniamos de la capa anterior. Ahora seleccionamos Stroke pra el Fill Type select Gradient. Para los colores seleccionamos blanco por ambos extremos del gradiente y cambiamos la opacidad a 0% para el comienzo y 100% para el final.
Paso 5
Seleccionamos la Horizontal Type Tool (T) y creamos una capa de texto. Nos aeguramos que esta capa este en el top. Abrimos el Layer styles y cambiamos el color overlay a white, y seleccionamos Inner Shadow u tilizamos los settings mostrados a continuación:
Paso 6
Agrupamos las tres capas y las llamamos Blue Circle.
Paso 7
Seleccionamos la Herram. Poligono y cambiamos algunos settings como mostramos a continuación para crear una Star Badge.Duplicamos la capa y le cambiamos el size como hicimos en el paso 3.
Instead of applying those layer styles to the layer, just copy the style from the previous icon we created and paste it to our new layer. To do that, select the layer you want to copy the layer style of, right-click on the mouse (Macs: Option-Click) and choose Copy Layer Style. Next select the layer you want to add the style to and right-click again and choose Paste Layer Styles.
The only thing you will have to change will be the gradient colors under the Gradient Overlay.
Conclusion
This is one of the easiest ways to create a cool 3D style button. You can eve change some settings like the stroke’s gradient color and create different 3D styles.
