domingo, 08 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 28619 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?
61 -10
71 votos
Logo 2.0

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. 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)
Creamos la forma y le damos color
Modificamos los nodos si queremos que tenga una forma especial

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%)
     
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.

Continúa en la página siguiente...

Siguiente
Modificando el color del icono y su reflejo

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