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