Taller de 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:

• Generarlo nosotros con algún programa de ilustración vectorial, como Adobe Illustrator.
• Descargar un template o logotipo libre de copyright de algún sitio web.
• Usar directamente tipografía o una imagen.

Supongamos que el nombre de dominio de nuestra web sea: “www.elmejorsitio.com” (Qué creativo que estoy ¿no? ).

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

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

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!