Práctico Web 2.0 iconos en Photoshop

Cuando estamos trabajando en un proyecto de diseño web, a menudo necesitamos iconos para mostrar comandos como agregar, eliminar o editar. Con la tendencia Web 2.0, el uso de insignias y 3D sutil se ha vuelto muy popular. En este tutorial, te mostraré cómo crear un efecto 3D realmente fácil y muy agradable para usar en botones e íconos o elementos que necesitan algo de profundidad.

Paso 1

Cree un nuevo documento y seleccione la herramienta Elipse (U). No importa qué color usas porque será reemplazado más tarde con los estilos de capa.

Paso 2

Haga doble clic en la capa de elipse para abrir el cuadro de diálogo Estilo de capa. Luego, seleccione la superposición de degradado y use un azul y un tono más claro de azul para los colores degradados. Para el estilo, use Radial. A continuación, agregue un bisel y relieve como se muestra a continuación.

Consejo: mueva el degradado radial más hacia la parte superior del círculo. Para hacer eso con el cuadro de diálogo Estilo de capa aún abierto, asegúrese de estar en la sección Superposición de degradado, haga clic y mantenga presionado el botón y comience a mover el degradado.

Paso 3

Duplique la capa circular y cambie tu tamaño para hacerla un poco más pequeña, como la imagen de abajo.

Paso 4

Haga doble clic en la nueva capa para abrir el cuadro de diálogo Estilos de capa. Anule la selección de todos los efectos anteriores (bisel y relieve y superposición de degradado).  Ahora seleccione Trazo y para el Tipo de relleno seleccione Degradado. Para los colores, seleccione blanco para ambos extremos del degradado y cambie la opacidad a 0% para el principio y 100% para el final.

Paso 5

Selecciona la Herramienta de texto horizontal (T) y crea una capa de texto. Asegúrate de que esta capa esté en la parte superior. Ahora abra el cuadro Estilos de capa y cambie la Superposición de color a blanco, seleccione Sombra interior y use la configuración que se muestra a continuación.

Paso 6

Agrupa las tres capas y llámalo "Círculo azul".

Paso 7

Seleccione la herramienta Polígono (U) y cambie algunas configuraciones como se muestra a continuación para crear una insignia de estrella. Duplique la capa y cambie su tamaño como hicimos en el paso 3.

En lugar de aplicar esos estilos de capa a la capa, simplemente copie el estilo del icono anterior que creamos y péguelo en nuestra nueva capa.  Para hacer eso, seleccione la capa de la que desea copiar el estilo de capa, haga clic con el botón derecho del mouse (Mac: Opción-clic) y elija Copiar estilo de capa. A continuación, seleccione la capa a la que desea agregar el estilo y haga clic derecho nuevamente y elija Pegar estilos de capa.

Lo único que tendrá que cambiar serán los colores degradados debajo de la superposición de degradado.

Conclusión

Esta es una de las formas más fáciles de crear un botón de estilo 3D genial. Incluso puede cambiar algunas configuraciones como el color de degradado del trazo y crear diferentes estilos 3D.