Presentamos una práctica de diseño web con Photoshop en vídeo, en la que realizaremos la plantilla de una página web que vamos a maquetar posteriormente con las clases CSS del framework Blueprint. En este videotutorial nos dedicaremos exclusivamente a la concepción creativa del diseño de la portada. Luego, en futuros vídeos maquetaremos la página utilizando HTML y CSS, ayudados de Blueprint.

Blueprint, entre sus archivos para descarga, proporciona una plantilla con una serie de guías que forman las 24 columnas disponibles para la maquetación, divididas también en una serie de filas, lo que configura una rejilla, que nos viene como anillo al dedo para diseñar atendiendo a los espacios que dispondremos más tarde durante la maquetación. Esa plantilla la entregan en el directorio "templates" y en un archivo PSD (de Photoshop) que podemos abrir para comenzar a diseñar fácilmente.

En este videotutorial utilizaremos Photoshop CS5, la versión más moderna en el momento de escribir estas líneas del afamado programa de diseño. No obstante, las funcionalidades que ponemos en marcha para diseñar esta plantilla son características también de versiones más antiguas del software, por lo que estarán al alcance de la mayoría de las personas.

En el vídeo comenzamos descargando el framework Blueprint CSS y descomprimiendo el archivo. Luego abriremos con Photoshop la mencionada plantilla con la rejilla para el diseño. A partir de ahí, todo el trabajo que realizaremos será encaminado al ingenio de la creatividad gráfica de nuestra página web, creando todos los elementos que compondrán la plantilla.

En el videotutorial, durante el trabajo con Photoshop, mostraremos cómo realizar un sencillo fondo con un degradado y cómo realizar un marco para colocar el cuerpo de la página. Luego trabajaremos sobre los elementos de la cabecera, diseñando un rudimentario logotipo y una minimalista barra de navegación.

Luego trabajaremos sobre el cuerpo de la página, creando una noticia principal, en la que colocaremos tanto una imagen, como un titular y una entradilla. En este punto definiremos una línea de trabajo con tipografías, mezclando fuentes con y sin serifa, lo que hará que el conjunto de tipos case perfectamente, creando un contraste entre ellos. Veremos más adelante en el vídeo cómo se continua con el cuerpo de la página diseñando a tres columnas, colocando diversos elementos de nuestro supuesto web.

Acabaremos trabajando un pie de página con las cosas elementales que se suelen colocar en ellos, como la dirección de la empresa y una serie de logotipos de la redes sociales en las que estamos presentes.

Como decimos, se trata de una videopráctica elemental de diseño web, en la que simplemente hemos hecho una plantilla con Photoshop. Realmente solo hemos utilizado Blueprint para ayudarmos de la rejilla en 24 columnas, pero más adelante realizaremos uso de ese framework CSS para maquetar el diseño que hemos realizado. De momento este videotutorial acaba con el final del diseño, pues ya con ello nos hemos ocupado casi una hora y veinte minutos, que es más que de sobra para comenzar.

Esperamos que este videotutorial de Photoshop os interese y no resulte demasiado pesado para los estudiantes. Ya me contaréis las impresiones comentando el artículo o el vídeo que hemos publicado en Youtube.

Recuerda que la continuación de este vídeo está en la maquetación con CSS y Blueprint de un diseño creado con Photoshop.