Presentamos la cuarta parte de este ejercicio de diseño con Photoshop, que avanza un poco más en el desarrollo creativo de una plantilla de prueba, que estamos realizando para mostrar a los lectores de DesarrolloWeb.com las técnicas habituales de diseño de páginas web. Estas técnicas comienzan con el trabajo con un programa como Photoshop, que permite generar una imagen con el aspecto que querremos para nuestra página web. Este es el paso que estamos grabando en estos vídeos con explicaciones detalladas para los interesados.

Hasta ahora hemos diseñado diversos elementos de la página, como la cabecera, la barra de navegación, un banner gigante para definir el objetivo del sitio y ahora estamos con lo que sería el cuerpo de la página, que está compuesto por varios recuadros. En los vídeos anteriores vimos cómo se hacía el recuadro de la "foto del día" y ahora vamos a mostrar los avances para realizar un recuadro con una noticia destacada y otro con diversas opciones de suscripción al sitio web.

Para las personas que quieran seguir la línea de videotutoriales sobre diseño web con uso de texturas, enlazamos aquí con la primera entrega de estos vídeos.

En esta ocasión también presentamos varios vídeos, pues tenemos que partirlos en porciones de menos de 10 minutos para subirlos a YouTube. Son los siguientes:

Vídeo 10.1: Diseño de recuadro noticia destacada

La décima parte de este vídeo muestra cómo realizar el diseño de un recuadro donde colocaremos la noticia destacada. Este recuadro incluye un titular de la noticia y un texto de entrada, junto con alguna foto para decorarlo. Trabajaremos con nuevas texturas de papel e integraremos el titular al resto del recuadro con el efecto de bordes rasgados que ya hemos utilizado en la cabecera de este diseño.

Videotutorial 10.2: Segunda parte del diseño del recuadro de noticia destacada

Todavía en el punto 10 de este diseño, vamos a seguir aplicando diversos retoques en el recuadro de la noticia destacada. Veremos cómo colocar el típico enlace de "ver más" con un iconito para mejorar el aspecto final y cómo colocar una forma con el número de comentarios que supuestamente tendría ese artículo. Con esto terminamos este recuadro del cuerpo de la página.

Vídeo 11: Diseño del recuadro de suscripción

En el lateral derecho del cuerpo de la página vamos a colocar un recuadro para sugerir a los visitantes que se suscriban a los contenidos de esta supuesta página, por medio de varias opciones. Cada una de las posibilidades para suscripción las colocaremos con un icono, que adornará la página a la vez que reforzará visualmente la oferta.

Con esto terminamos el cuerpo de la página, por lo que respecta al diseño de esta web de prueba. Con lo que en los siguientes vídeos comenzaremos ya el trabajo creativo para generar el pie de la página web.