[Tutorial] ¿Cómo hacer iconos Web 2.0 en Photoshop?


¿Qué es un icono Web 2.0? Pues es la clase de imagen que se usa para la Web 2.0 y que puedes identificar de inmediato con sólo verla. Pero para expresarnos en términos de imagen, podemos decir que es aquel icono que tiene degradado, borde, brillo y un reflejo. Hoy es casi una moda, y te ofrecemos un pequeño tutorial para hacer tus propios iconos 2.0 en Photoshop CS2



La autoria comenta

Lo primero que debemos hacer es crear una forma básica sobre la cual trabajar. Puede ser una forma prediseñada, un cuadro, rectángulo, círculo. Lo que sea que desees.

Forma básica:
Abre un nuevo documento (ctrl+n) de 200*200 píxeles. Puedes hacerlo con fondo transparente o en blanco.

Pincha el botón de formas en la caja de herramientas. Nosotros vamos a elegir un cuadro redondeado, trazaremos la forma en un 70% del lienzo y le daremos un color de base verde.

Como nuestro logo no es exactamente cuadrado, modificaremos los nodos de la punta inferior izquierda y la punta superior derecha (y agregaremos un nodo en el centro para modificar la curva)



Creamos la forma y le damos color Modificamos los nodos si queremos que tenga un forma
especial

Texto:
Elegimos la herramienta de texto para escribir la frase o palabra que deseamos que lleve el icono.

Para lograr un buen contraste, vamos a darle un efecto de gradiente al texto (Doble clic sobre la capa, tilde en Gradient Overlay).

Luego le agregamos sombra para darle relieve.

Y finalmente le ponemos un efecto de brillo interno (en blanco y al 30%)


Aplicamos un gradiente al texto Agregamos sombra y brillo

Ahora que ya tenemos el texto y la forma como queremos, vamos a trabajar en los gradientes, brillo del icono y su reflejo inferior.

Colores del icono:
Primero aplicaremos un gradiente a la forma. Utilizaremos tres niveles básicos para el mismo (blanco, el verde original y un verde más oscuro) en un ángulo de 128º

Para darle el brillo superior, vamos a crear un óvalo blanco (herramienta de formas) que cubra hasta un poco antes de la mitad de nuestro cuadro del icono. Y vamos a agregarle una máscara a la capa del óvalo (Pinchamos sobre el icono de máscara en la parte inferior de la ventana de capas).

Con la máscara seleccionada, pinchamos el gradiente en la caja de herramientas y trazamos una línea desde abajo del texto hasta la parte superior del cuadro. Finalmente, reduciremos la opacidad de la capa a un 50% para fundirlo con la imagen inferior.




Aplicamos un gradiente Creamos una nueva Agregamos una mascara Aplicamos un gradiente
al cuadro forma Blanca (ovalo) a la nueva forma a la mascara

Ahora ya tenemos un botón con brillo y degradado. Sólo nos falta el borde y el reflejo:
Si aplicamos un borde directamente sobre la capa del cuadro, no podremos verlo por el efecto de gradiente que le hemos puesto. Así que necesitaremos duplicar la capa y fundirla con su copia. Luego podremos ponerle un borde (Edit -> Stroke) de 3 píxeles en verde oscuro.

Para el reflejo, simplemente necesitamos duplicar la capa del cuadro (quitarle el borde) y rotarla verticalmente (Edit -> Transform -> Flip Vertical). Luego desplazamos el cuadro hasta que toque la base del cuadro original y cortamos la parte que no se va a ver.

Aplicamos un gradiente a la forma que nos queda, que vaya de oscuro a transparente para lograr el efecto difuso de la base. Luego bajamos la opacidad de la capa a 50%. Y ya tenemos nuestro botón 2.0


Duplica la capa y la volteamos Desplazamos la capa duplicada Aplicamos un gradiente a la imagen
verticalmente a la base del cuadro original girada y bajamos la opacidad al 50%



fuente: [Tutorial] ¿Cómo hacer iconos Web 2.0 en Photoshop?

http://img169.imageshack.us/img169/6406/clanmex1zn4.png

wow, que interesante tuto, hace bastate que no uso mi PS, esta es una buena razon para volverlo a abrir

Y de paso una pregunta... esto tambien lo puedo usar para crear un icono como en el tuto de "personaliza tu USB" ? o sea, el PS sirve para hacer ese tipo de imagenes?

waaaoo qee bueen tuuto laa verdaadd aaree
unoo assii aaver qeetaaL meeqedaa wwi
saLudoszz (:

HAHAHA!
Ya no te voy a pedir mas cosas como esta sniperskate!
LOL
Gracias por el tuto marko ^^
See Ya

pD: I <3 Markito