Páginas:
Por: Constanza Villanueva
@
lunes, 05 de mayo de 2008
Nota vista 29164 veces
¿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
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 al cuadro
|
Creamos una nueva forma blanca (óvalo)
|
Agregamos una máscara a la nueva forma
|
Aplicamos un gradiente a la máscara
|
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
|
|
|
|
Duplicamos la capa y la volteamos verticalmente
|
Desplazamos la capa duplicada a la base del cuadro original
|
Aplicamos un gradiente a la imagen girada y bajamos la opacidad al 50%
|
|
|
Ya tenemos nuestro icono 2.0
|

Creando una forma y texto

Nuevos tenis Wi-Fi de Nike

Asus G70: el portátil para los jugones
Prohibida su copia total con o sin fines comerciales. Copias parciales deben citar la fuente.