Videotutorial: Diseño web con Photoshop y uso de texturas

Comenzamos un videotutorial que esperamos sea interesante para los lectores del sitio y para todo aquel que quiere realizar diseños web atractivos utilizando Photoshop. Las corrientes de diseño siempre están en constante avance y ahora las tendencias apuntan al uso de texturas, por lo que vamos a intentar aplicarlas de una manera más o menos intensiva.

Lo cierto es que las texturas son un poco más difíciles de usar que otros recursos, como por ejemplo los degradados, muy utilizados también en el diseño pero que ya no nos aseguran que los resultados tengan un aspecto moderno. En cambio, las texturas van un paso por delante y aportan un visual actual, divertido y espectacular al diseño.

He de admitir a los lectores de este artículo y las personas que van a ver los vídeos que no tengo mucho dominio de las texturas y apenas estoy empezando a incorporarlas a mis diseños. Todavía ando algo perdido para conseguir juntar diferentes texturas y obtener un resultado armonioso y casual. Muchas veces tengo que ensayar y repetir varias veces lo que estoy intentando hasta que obtengo un diseño satisfactorio. Para haceros una idea, el diseño completo que voy a explicar en estos vídeos tardé unas 10 horas para conseguirlo. Así que, al grabar los vídeos, tengo claro lo que quiero obtener, porque lo que estoy haciendo es repetir todo el trabajo creativo que hice antes. Por eso en el vídeo voy un poco a "mesa puesta" y parece que soy mucho más decidido, pero no quiero engañaros y deciros que esto es una cosa fácil.

Quizás las personas que tienen el don creativo puedan pensar que el uso de texturas es sencillo, pero yo me considero más de perfil programador y en diseño sólo un principiante. No obstante, el esfuerzo y las ganas de hacer las cosas bien, para luego explicar algo útil dan sus frutos, afortunadamente. Modestia aparte, creo que el resultado del diseño que vais a ver en los siguientes vídeos es bastante bonito.

No obstante, quiero que sepáis que grabar los vídeos, editarlos, producirlos y subirlos a YouTube lleva muchas horas de trabajo y por ello vamos a ir ofreciendo este diseño por partes. En esta primera entrega vamos a realizar el fondo del sitio y la cabecera, que es todo lo que he conseguido en un día de trabajo. Además, Youtube no permite subir vídeos de más de 10 minutos, por lo que el trabajo de editar los vídeos por separado también se multiplica. Son 4 vídeos para hacer la cabecera, que he publicado de una sola vez y que podéis ver a continuación.

Vídeo 1: Diseño del fondo del sitio

En este primer vídeo vamos a hacer simplemente el fondo de la página, partiendo de la rejilla del framework CSS 960 Grid System, que nos limita ya en columnas el espacio típico que tendremos disponible al diseñar una web para definiciones de 1024 píxeles de anchura.

Utilizaremos un fondo con un patrón para la página entera y luego para el área del contenido principal una textura de papel, que generaremos a partir de una imagen.

Videotutorial segunda parte: Comenzamos la cabecera

En esta segunda parte comenzaremos el diseño de la cabecera del sitio, que se extenderá también a lo largo de los siguientes vídeos. En la cabecera utilizaremos una textura distinta, pero la haremos a partir de diversos pinceles de Photoshop.

Tercera parte: Vídeo de integración de la cabecera y el cuerpo

Seguimos diseñando la cabecera del sitio web y ahora vamos a hacer un trabajo especial para integrar las distintas texturas que ya tiene nuestro sitio, la de la cabecera y la del cuerpo de la página. Para ello haremos que la cabecera tenga un borde irregular y para reforzar este efecto aplicaremos unos bordes rasgados a la cabecera. Para ello utilizaremos algunos recursos de diseño con Photoshop, como las máscaras de capa, pinceles en la goma de borrar, trazados, etc.

Cuarta parte: Videotutorial de retoques de cabecera con Photoshop

Para acabar esta primera entrega de vídeos del diseño web con texturas vamos a realizar un vídeo en el que realizaremos unos últimos retoques en la cabecera, no muy importantes, pero puede que alguno de ellos haga que mejoren aun más los resultados.

Pues como habéis podido ver, hemos llegado a un punto interesante, pero todavía tenemos mucho trabajo por delante y muchas más prácticas con Photoshop para conseguir este diseño web repleto de texturas. Esperamos que los materiales hasta el momento hayan resultado interesantes y continuaremos con otro artículo, donde construiremos el primer elemento del cuerpo de la página, con nuevas texturas.