Juan Manuel 16 de Abril de 2008 a las 18.15
   Imprimir artículo
elWebmaster.com

Taller de Adobe Photoshop: Elementos de la interfaz de una web


Taller Adobe Photoshop: Elementos de la interfaz de una web¡Hola, bienvenidos al Taller de Adobe Photoshop! La clase pasada comenzamos a ver cómo maquetar un sitio web, usando las guías y teniendo en cuenta las medidas necesarias para cada elemento de la interfaz.

Hoy aprenderemos a generar un logotipo rápidamente, pero lo más importante es que veremos cómo usar formas vectorizadas en Photoshop para usar como fondo o paneles que contendrán los textos, imágenes y demás elementos de nuestro sitio.

Bueno, vamos por partes. Podemos empezar con el logo de nuestra web. Para hacerlo tenemos varias opciones:

Supongamos que el nombre de dominio de nuestra web sea: “www.elmejorsitio.com” (Qu√© creativo que estoy ¬Ņno? :P ).

Imaginemos también que lo creamos con Photoshop.

  1. Hacemos Ctrl+N o vamos a Archivo->Nuevo
  2. Elegimos un tama√Īo cualquiera, como 800 x 600 p√≠xeles a 72 dpi y especificamos que el color de fondo sea transparente.
  3. Hacemos clic en la herramienta Texto [T] y hacemos clic dentro de la imagen (los cuadraditos ^_^).
  4. Escribimos en nombre de nuestro sitio web, eligiendo en la barra de opciones la tipograf√≠a, tama√Īo, etc.
  5. Debería quedar algo así:

Taller Adobe Photoshop: Elementos de la interfaz de una web

Hay miles de opciones a partir de aquí, sólo vamos a ver una de ellas:

  1. Hacemos clic en la herramienta mover [V] para indicar a Photoshop que ya hemos terminado de usar la caja de texo (se puede volver a usar infinitas veces).
  2. Vamos a Ventana->Estilos. Aqu√≠ podemos ir probando el que m√°s nos guste… (podemos hacer clic en la flechita negra a la derecha del panel flotante para elegir m√°s estilos).
    Taller Adobe Photoshop: Elementos de la interfaz de una web
  3. Una vez que tenemos el “logo” guardamos la imagen como PSD, para que nos mantenga las capas separadas y podamos usarlo en nuestro sitio.

Quiero que les quede bien en claro que esta no es la forma correcta de hacer un logo, s√≥lo pretendo que aquellos que no tengan idea puedan “salir del paso” y aprendan el tema de la interfase.

Para el banner, podemos elegir una foto que nos guste, por ejemplo de Creative Commons. La barra de navegaci√≥n estar√° compuesta por “botones” y tipograf√≠a. Esto lo veremos m√°s adelante. Ahora me interesa centrarme en los “paneles” que formar√°n nuestro sitio web.

Formas vectoriales en Photoshop

Por medio de las herramientas de formas (rect√°ngulo, elipse, etc.) podemos generar “paneles” que servir√°n para ubicar elementos en nuestro sitio web.

Así podemos elegir rectángulo redondeado, por ejemplo, y hacer clic y arrastrar para formar un panel que esté dentro de los límites que pusimos la clase pasada (por medio de las guías).Haciendo doble clic en el ícono que vemos a continuación, accederemos a una ventana de opciones donde le podremos agregar sombra, relieve y muchísimos efectos más, que iremos viendo con más detenimiento a lo largo de este curso.

Este proceso lo podemos repetir cuantas veces queramos para generar los paneles donde ir√° la botonera, el banner, el contenido y el footer.

Un boceto muy precario, pero funcional, usando lo que hicimos esta clase sería:

Taller Adobe Photoshop: Elementos de la interfaz de una web

Bueno, como se habrán dado cuenta, gran parte de la práctica es practicar mucho ^_^. Así que ¡practiquen!

La clase que viene veremos cómo usar las herramientas para manipular los elementos.

¡Hasta la próxima!

<< CLASE ANTERIOR
 

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Alex Sparrow dice:

    Quedo chido el logo nuevo con eso de la tierra y todo..felicidades

  2. miguel dice:

    felicidades por este curso de photoshop, la verdad que ahora si aprendi , me gusta la fotografia pero nunca vi un curso tan didactico como este.
    muchas gracias

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión