Taller de Adobe Photoshop: la interfaz de tu sitio en XHTML y CSS (1)

¡Bienvenidos a una nueva clase del Taller de Adobe Photoshop! ¿Lograron crear su botonera? ¡Apuesto a que sí, dado que es muy sencillo! Hoy seguiremos con la interfaz de nuestro sitio web. Primero haremos un breve repaso de lo que vimos en las prácticas en lo que va de este taller y luego conoceremos la forma de llevarlo al mundo de la web, generando un archivo XHTML con sus estilos CSS.

Para ello debemos conocer una función de Photoshop que se llama “Guardar para la web”. Básicamente nos permite guardar la imagen “recortada” en sectores que luego conformarán nuestro sitio. ¡Comencemos!

De Photoshop a la web

Primero hagamos un breve repaso de lo que vinimos viendo en las prácticas hasta ahora. Pero ¡ojo! Les recomiendo volver a hacer todos los pasos nuevamente para fijar bien los conocimientos. Nada de abrir de nuevo los archivos que ya habían creado (¡no hagan trampa ^_^! jejeje).

El PSD de tu sitio web

La plantilla de nuestro sitio la crearemos en un archivo de imagen de Photoshop que soporte capas y canales alpha, por lo que el formato .psd nos será óptimo.

Comencemos creando un archivo nuevo del tamaño que queramos (teniendo en cuenta que la página se deberá ver correctamente en las resoluciones más comunes de pantalla de los usuarios). Recuerden que Thor, en su Taller de Adobe Dreamweaver analizó que una buena opción era 950 píxeles de ancho.

Vamos a Archivo->Nuevo y seteamos las opciones que más nos convengan (el sitio que queramos puede ser un blog con mucho scroll o simplemente un sitio de venta de artículos que entre en una sola pantalla). Lo importante es que la resolución sea de 72 dpi (píxeles/pulgada) porque la finalidad de nuestro archivo es que se vea en la web (pantalla).

Ahora podemos tirar unas guías de ayuda que delimiten los sectores de la interfaz (logo, cabecera, botonera, área de contenido, footer, etc, etc, etc).

Apoyándonos en ellas y según lo visto en las clases de práctica anteriores, vamos creando los sectores que sean formas vectorizadas.

Podemos agregar texto y aplicarle estilos para conseguir un logo, agregar una botonera como la de la clase pasada y descargar de sitios web llenos de recursos gratuitos (como SmashingMagazine.com) infinidad de íconos, patterns de fondo, wallpapers, imágenes y mil cosas más para completar la interfaz.

A mí me ha quedado así:

Recuerda ir guardando cada tanto tu archivo (con extensión .psd) por razones de seguridad.

Puedes ver que el ejemplo que hice es bastante sencillo, el logo es texto pleno, la botonera no tiene estilos, lo más “elaborado” son las placas de fondo del contenido, que son sólo una forma vectorizada (rectángulo redondeado) con un degradado de color.

El resto es texto plano, un ícono de la web y un pattern de fondo.

El “buscador” son dos rectángulos redondeados, con estilos y texto, nada más.

Recuerden crear dos estados para todo lo que sean botones (como vimos la clase pasada).

¡Ya tenemos nuestra interfaz!

Comprendiendo cómo se presenta un sitio web: XHTML y estilos CSS

Bueno, la idea ahora es convertir esta imagen en un sitio web hecho y derecho. Para ello debemos pensar en términos del código (HTML y CSS). A cada elemento de la imagen le corresponderá otro en el código y viceversa.

¿Qué significa esto? Lisa y llanamente que si en el HTML de nuestro sitio hay una palabra como “carrito de compras” que enlaza a la sección correspondiente, en nuestra imagen psd tendremos un sector (puede ser texto o imagen o ambos) que actuará como botón.

Por esto deberíamos pensar también que nuestro sitio estará conformado por sectores que “flotarán” sobre el fondo de la página, donde se organizará el contenido.

Lo correcto en la web hoy día es generar un archivo XHTML semántico, o sea, escribir en HTML la estructura y contenido de nuestro sitio, para finalmente darle la apariencia perfecta por medio de estilos CSS.

La idea de este taller (si bien estaría bueno que lean el de mi amigo Thor ) es que no necesiten saber estilos CSS ni mucho de HTML para lograr su sitio, por lo que nos basaremos en Photoshop exclusivamente para generar nuestro sitio web completo.

La próxima clase continuaremos con este tema (es muy largo, jeje), viendo cómo recortar y acomodar los sectores de la imagen y cómo crear un sitio web entero en XHTML y CSS. ¡No se la pierdan!