Crear iconos Web 2.0 en Photoshop

Nota Usuarios
10.0
(1 votos)
¡Puntúa!
VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)
  • Facebook
  • Twitter
  • Meneame
  • Bitacoras.com
  • Email
  • RSS

Tutorial: Iconos Web 2.0 en PhotoshopCon este tutorial aprenderás a realizar iconos al estilo web 2.0 de una forma realmente sencilla, con un atractivo efecto 3D para usar en botones y elementos que necesitan cierta profundidad. Recurso muy útil con la actual tendencia web 2.0 a la hora de diseñar un sitio web.

[ad#dentroposts]

Paso 1

Crea un documento nuevo y selecciona la herramienta Elipse (U). No importa el color que uses porque se cambiará más adelante con los Estilos de Capa.

Tutorial: Iconos Web 2.0 en Photoshop

Paso 2

Doble click en la capa de la elipse para abrir el cuadro de diálogo de Estilo de Capa. Selecciona Superposición de degradado y usa un azul y un azul más claro para los colores degradados. En estilo selecciona Radial. Después añade un Bisel y relieve como se muestra debajo.

Consejo: Mueve el degradado radial a la parte superior del círculo. Para hacer esto, con la ventana de Estilo de capa abierta, asegúrate de que estás en la sección Superposición de degradado, y arrastra con el ratón el degradado en el mismo círculo.

Tutorial: Iconos Web 2.0 en Photoshop

Tutorial: Iconos Web 2.0 en Photoshop

Tutorial: Iconos Web 2.0 en Photoshop

Paso 3

Duplica la capa del círculo y hazla un poco más pequeña, como ves en la imagen.

Consejo: Para cambiar el tamaño usa Ctrl+T y después mantén pulsados ALT y SHIFT a la vez que cambias el tamaño.

Tutorial: Iconos Web 2.0 en Photoshop

Paso 4

Doble click en la capa nueva para abrir el cuadro de diálogo de Estilo de capa. Antes de nada, haz click en Opciones de fusión y en el cuadro de Fusión avanzada baja la Opacidad de relleno hasta 0%.

Después deselecciona todos los efectos (Bisel y relieve y Superposición de degradado). Ahora selecciona Trazo y en Tipo de relleno elige Degradado. Para los colores, elige el blanco para los dos extremos del degradado y cambia opacidad a 0% en el principio y en 100% al final (con la flechita justo arriba de la de color).

Tutorial: Iconos Web 2.0 en Photoshop

Tutorial: Iconos Web 2.0 en Photoshop

Paso 5

Selecciona la Herramienta de Texto horizontal (T) y escribe el texto deseado creando una nueva capa de texto. Asegúrate de que esta capa esta sobre las demás. Ahora abre el cuadro de diálogo Estilo de capa y activa Superposición de colores con color blanco. Selecciona Sombra interior y usa los parámetros de la imagen.

Tutorial: Iconos Web 2.0 en Photoshop

Tutorial: Iconos Web 2.0 en Photoshop

Paso 6

Agrupa las tres capas y llámalas “Círculo azul”.

Conclusión

Puedes crear efectos con todo tipo de formas, como por ejemplo una estrella usando la Herramienta Polígono (U) y ajustando las propiedades (número de lados: 40, Estrella, Sangría lateral: 10%).

Lo único que tienes que hacer es duplicar la capa y redimensionarla como hemos hecho en el paso 3.

En lugar de aplicar los estilos capa a capa, simplemente copia los estilos de las capas que hemos creado y pégalo en las nuevas. Para hacer esto, seleccionamos la capa de la cual queremos copiar el estilo, click derecho del ratón y seleccionamos Copiar estilo de capa. Después seleccionamos la capa a la que queremos añadirle el estilo y con el click derecho del ratón seleccionamos Pegar estilo de capa.

Lo único que tendremos que cambiar es el color de Superposición de degradado de la capa inferior (la más grande).

Y aquí está el resultado.

Tutorial: Iconos Web 2.0 en Photoshop

Este tutorial es una traducción de un tutorial de PSDTuts.com
Tutorial original: Handy Web 2.0 Icons In Photoshop

Crear iconos Web 2.0 en Photoshop, 10.0 out of 10 based on 1 rating
Iván Otero


Artista audiovisual. Titulado Superior en Realización de Audiovisuales y Espectáculos, con más de tres años de experiencia en el sector, amante del arte y la cultura y apasionado del mundo audiovisual.