lunes, 23 de noviembre de 2009
Ayúdanos a crecer, haz NeoTeo tu página de inicio RegistrarseIniciar sesión

Páginas:

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

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 

¿te interesa?
63 -10
73 votos

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

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

Anterior
Creando una forma y texto
Artículo Siguiente
Nuevos tenis Wi-Fi de Nike
Artículo Anterior
Asus G70: el portátil para los jugones
CopyRight
Prohibida su copia total con o sin fines comerciales. Copias parciales deben citar la fuente.

 

URL Trackback para esta noticia:
Votos: 0 de 0
Laurinha
Laurinha
Laurinha
17/07/2008
12:27:17
#1   interesantísimo.Felicitaciones
     Responder 
Votos: 1 de 1
Sergio
Sergio
Sergio
26/07/2008
12:43:20
#3   Este tutorial me ha encantado. Gracias a vosotros he podido hacer el logo que necesitaba hacer para una empresa ficticia que nos obligan a crear en el colegio... Hace unas semanas hice lo que pude con photoshop para crear el logo, y no me salió más que algo que se podía hacer con Paint... Sin embargo, gracias a vosotros he podido mejorarlo notablemente. Dejo un link desde el cual veréis la imagen (por cierto, la más nueva es la de la izquierda):
http://img73.imageshack.us/img73/8791/mitj2.jpg
     Responder 
Votos: 0 de 0
Fe7
Fe7
Fe7
21/08/2008
16:01:22
#1   Muy buen día Sergio,

Gracias por mostrar lo mucho que lograste mejorar tu logo, ahora bien yo te tengo una pregunta, cómo le hiciste para subir la imagen a la web?
     Responder 
Votos: 0 de 0
nas
nas
nas
04/09/2009
18:29:37
#6   no entiendo bien, puedes poenr paso a paso con menu y herramientas? es ke es un poco complejo para los ke no sabemos usar bien el photoshop...gracias?
     Responder 
 
 
Datos  Login Registrarse
Usuario
   
Email
Website
 
Nuevo comentario:


Tags HTML permitidos: br
 

Síguenos en TwitterAgréganos a tu RSS

 

Autores