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

  • Por
Primera parte de los vídeos sobre el diseño web con Photoshop y uso de texturas, en el que diseñaremos el fondo del sitio entero y la cabecera.
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.

Nota: Si te interesa este tema, tenemos en DesarrolloWeb.com un vídeo de un diseño web con Photoshop completo. El diseño he de admitir que no es tan espectacular como el que vamos a ver ahora, pero es aun así es bastante aparente. Lo mejor es que encontréis el diseño vosotros mismos aquí: Vídeo explicado del diseño web con Photoshop.

Otras referencias, también en vídeo que merece la pena nombrar son:

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

angelicashak

25/3/2010
Excelente!
Gracias por compartir tu trabajo con nosotros! lo voy a poner en practica

midesweb

26/3/2010
Publicada la segunda parte
De nada Angélica, disfrutamos realizando estos tutoriales... sólo esperamos que sean de utilidad a las personas que visitan esta web.

Por cierto, acabamos de lanzar la segunda parte de este diseño... así que los que deseen avanzar un poco más en este diseño pueden seguir viendo otros vídeos.

Nery_Nicolas

29/3/2010
OK
Esta muy bueno tuturial.

Guillermo

02/4/2010
Videos Photoshop
Gracias Miguel por los videos. Como siempre, de alta calidad y muy claros. Fáciles de seguir.

misael

03/4/2010
dar gracias
Excelente tutorial, se demuestra la experiencia.

pedro_toledo

11/4/2010
video psd textura
Miguel como siempre excelente...de la mas Alta Calidad....
muchas gracias por tu ayuda..

Pedro.

israel

24/4/2010
gracias
bueno tengo en mente un projecto el cual tengo q realisarlo poniendo una pagina wed, gracias x ayudar a personas como yo

victor

30/6/2010
Saludos
Muy bueno el promer tutorial, pero tengo la duda de donde sacaste la rejilla de 12 columnas, de In design?
Por tu tiempo gracias.

Perikovk

03/7/2010
Estupendo Manual
Yo ya lo estoy poniendo en parctica, muchas gracias por la aportacion.

Vicente Reynoso

24/8/2010
Felicitaciones
Excelente aporte!
Muy claro todo. Muchisimas gracias por publicar esos frutos.

Felicitaciones

midesweb

26/8/2010
rejilla de 12 columnas para comenzar el diseño
Hola Victor,

Esa rejilla está en el framework css 960 grid system, creo que lo comento en el vídeo y además en el primer capítulo del manual está explicado de dónde se saca este y otros recursos.

jwester

24/9/2010
video
hola, me ha parecido estupendo tus videos lo estoy realizando desde html y ya termine css, ahora estoy comenzando con photoshop para diseño web pero tengo una duda en el primer video. Es cuando pasas la textura de papel a la textura de flores ya que son dos ventanas independiente. Ya que cuando yo lo hago que selecciono la zona de la textura del papel y luego le doy a la ventana de la textura de las flores no logro pegar esa seleccion, he repetido ese video muchas veces pero no se como lo haces. Te agradezco si me puedes aclarar la duda.
Por cierto te felicito como tutor ya que lo haces excelente ;-)

moises

15/5/2011
necesito
hey buen tutorial pero me gustar saber como conseguir las rejillas e imagenes que utilizas en los videos

morpheus55

09/7/2012
Videotutorial: Diseño web con Photoshop y uso de texturas - DUDA
Me gustaría saber si tenéis alguna descarga para tener las mismas texturas que usáis en el tuto, estoy haciéndola al pie de la letra para aprender.
Saludos y enhorabuena por el tutorial!