Estamos realizando un diseño web con Photoshop, paso a paso, en vídeo y con explicaciones detalladas para que todos los lectores de DesarrolloWeb.com puedan conocer algunas de las técnicas más utilizadas para realizar los diseños modernos. La primera entrega de estos vídeos ya la presentamos la semana pasada y se puede ver accediendo al artículo Videotutorial: Diseño web con Photoshop y uso de texturas .

En el primer artículo creamos el fondo de la web y realizamos el diseño de lo que será la cabecera de la página. Ahora nos dedicaremos a avanzar un poco ya en los elementos del cuerpo, diseñando un elemento central que contendrá una especie de reclamo comercial para adornar la portada y comunicar un poco las intenciones del sitio a los visitantes.

En el elemento que vamos a ver crear en los próximos vídeos utilizamos de nuevo las texturas, como no podría ser de otra manera. Además, como ya se ha comentado, lo más difícil es utilizar diversas texturas de manera que combinen bien y queden perfectamente integradas en el diseño, por lo que muchos de los esfuerzos que realizaremos irán enfocados justamente a hacer que todo quede conjuntado. No sé si lo habremos conseguido, vosotros juzgaréis. No obstante, cabe decir que todavía tenemos mucho trabajo por delante y sólo al final podremos determinar si nuestro trabajo ha quedado perfectamente. Esperamos que sea así.

Estamos subiendo los vídeos a medida que los vamos produciendo. En la pasada entrega vimos hasta 4 vídeos y en esta entrega podremos ver 3 nuevos vídeos, las partes 5, 6 y 7 de este diseño web texturizado:

Vídeotutorial parte 5: Comenzamos la parte central del cuerpo

Vamos a hacer un elemento central para la portada del sitio, que aparecerá justo debajo de la cabecera. Comenzamos creando el espacio y aplicando una textura como con manchas de pintura de acuarela.

Videotutorial parte 6: Composición con fotografía

Ahora haremos una serie de retoques en la parte central del cuerpo e integraremos una fotografía dentro de la textura, creando una composición que aporte un poco más de vistosidad a este elemento del cuerpo. Además mostraremos como igualar el color de la fotografía con el color del fondo donde la hemos colocado, lo que hará que se integre mejor con nuestro diseño.

Videotutorial parte 7: Retoques finales en la parte central

Para acabar con la parte central del diseño hemos creado un retoque que oscurecerá los bordes de la textura, lo que dará un aspecto más acabado y de integración con otras partes del diseño.

Con estos tres vídeos tenemos ya creado casi el 50% de nuestro diseño. Todavía quedan las partes donde colocaremos el contenido de la web, que trataremos en el próximo videotutorial, donde continuaremos aplicando texturas.