[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.

Paso a paso

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

Forma básica

1. Abre un nuevo documento (ctrl+n) de 200*200 píxeles. Puedes hacerlo con fondo transparente o en blanco.
2. 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.
3. 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).

Texto

1. Elegimos la herramienta de texto para escribir la frase o palabra que deseamos que lleve el icono.
2. Para lograr un buen contraste, vamos a darle un efecto de gradiente al texto (Doble clic sobre la capa, tilde en Gradient Overlay).
3. Luego le agregamos sombra para darle relieve.
4. Y finalmente le ponemos un efecto de brillo interno (en blanco y al 30%).

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

1. 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º.
2. 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).
3. 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.

Borde y reflejo

Ahora ya tenemos un botón con brillo y degradado. Sólo nos falta el borde y el reflejo:

1. 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.
2. 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.
3. 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.