Hemos realizado un vídeo en el que queremos mostrar cómo se hace un diseño de plantilla de una web con Photoshop. Para ello, hemos partido desde cero, creando cada uno de los componentes de la plantilla de una página web. En este vídeo sólo se realiza el diseño con el programa de edición gráfica Photoshop, creando una imagen que luego utilizaremos para maquetar la plantilla a utilizar en una página web.

El diseño es una mera prueba, para demostrar los pasos a realizar para la confección del aspecto que va a tener una web. No me considero un gran creativo ni tampoco pienso que sea un excelente dominador de Photoshop. Controlo, eso sí, las funcionalidades básicas necesarias para trabajar con el programa y diseñar páginas web, ya que lo hago bastante en mi trabajo diario. Los colores y los aspectos el diseño resultante los he escogido prácticamente sobre la marcha y a medida que hacía el vídeo. Quizás deba admitir que el resultado no ha quedado mal del todo, según mi criterio, pero lo que es cierto es que yo no elegiría, por ejemplo, fondos negros para un diseño, sino más bien tonos cercanos al blanco, porque me gusta más que las páginas sean claras y limpias.

Quiero puntualizar que para realizar este diseño no he partido exactamente desde cero como había comentado antes. En realidad he partido de una rejilla que tiene una serie de líneas verticales que me permite tener un control sobre la anchura de la página web completa y sobre los elementos de la plantilla, que van a situarse en columnas. La plantilla inicial, que son simplemente unas guías de Photoshop para ajustar el diseño sobre ellas, la he obtenido de un framework CSS llamado 960 Grid System.

El sistema de rejilla 960 grid es de libre uso y distribución y permite no sólo tener una referencia de los espacios que podemos utilizar para hacer una web, sino que también incluye unas hojas de estilo en cascada que nos ayudarán a realizar la maquetación de la página con CSS. Este mismo diseño, cuya creación se ve en el vídeo, lo vamos a utilizar más tarde para explicar el mencionado Framework CSS, de modo que las personas puedan aprender a utilizarlo y obtener una ayuda muy útil a la hora de maquetar sus sitios web. Todo eso explicaremos con detalle en próximos artículos.

También hay que comentar que el vídeo lo hemos acelerado para no aburrir al personal. El vídeo original dura aproximadamente una hora y con su reproducción rápida hemos conseguido reducirlo a poco menos de 10 minutos. Quizás el valor didáctico del vídeo ha sido mermado por causa de la reproducción acelerada, pero seguro que servirá como demostración de las posibilidades y uso de Photoshop para hacer el diseño de una web. Dependiendo del éxito que tenga este vídeo, en el futuro decidiremos si lo distribuimos a su velocidad natural, para que cualquier persona pueda saber perfectamente qué es lo que se está haciendo en cada momento.

Para amenizar este vídeo hemos utilizado la música de un músico español llamado Roger Subirana, que nos ha dado permiso gentilmente para utilizar su música.

Así pues, os dejamos con el vídeo del diseño de una web, que esperamos sirva de utilidad a los lectores de DesarrolloWeb.com.

Pero antes quiero comentar un par de cosas:

1. Si te gusta este vídeo y quieres aprender cómo hacer todas estas cosas, pero con más calma, te informamos que hemos publicado una nueva versión de este trabajo, editado a menor velocidad y con una locución para explicar los pasos que realizamos para la creación de este diseño web: Ver el vídeo a velocidad menor y con locución.
2. Si quieres aprender a convertir este diseño creado con Photoshop en una página web, con HTML y maquetación CSS, te informamos que hemos publicado otro vídeo interesante, con explicaciones, donde puedes ver paso a paso el proceso: Vídeo de la maquetación web con HTML y CSS utilizando 960 Grid System.