Videotutorial de Diseño web con Photoshop y uso de texturas. Parte 5, Fin.

  • Por
Última parte de la práctica de diseño web con Photoshop y uso de texturas, en la que haremos el pie de página de nuestro sitio web.
Ha sido un proceso largo, pero hemos llegado al fin de nuestra práctica de diseño web y uso de texturas en Photoshop, o por lo menos aquí tienes la última entrega de este videotutorial, que hemos realizado con nuestro mejor empeño.

En esta quinta y última parte vamos a mostrar en vídeo cómo realizar el pie de página de nuestro sitio web, creando uno de esos "pies" típicos de las webs actuales, con un listado largo de las secciones del sitio, datos de contacto, etc.

Para el que le interese, hemos creado un manual que sirve de índice a todas las partes anteriores de este diseño con texturas. Por supuesto, puedes ver la creación del pie de página no tendrá tanta gracia si no has visto antes las entregas anteriores.

A lo largo del diseño del pie, como venimos haciendo a lo largo de toda esta práctica de diseño web en vídeo, vamos a utilizar nuevas texturas, para seguir en la misma línea creativa. Además, utilizaremos varios motivos gráficos relacionados con la naturaleza, que harán también una buena combinación con todo el trabajo realizado hasta el momento.

Vídeo 12: Inicio del pie

En esta parte comenzamos a hacer el pie de página. Utilizamos unas formas de nubes para separar el cuerpo de la página y el pie y una textura de papel con un color azul cielo.

Videotutorial 13: Navegadores en pie de página

Creamos unas cajas en el pie de página con una serie de enlaces. A estas cajas las llamamos navegadores del pie de página y para que combinen con el resto utilizamos algunos de los colores que ya habíamos usado en otras partes del diseño. Utilizamos también un formato de titular inclinado, que se utilizó en el recuadro de foto del día.

Videotutorial 13B: Navegadores en pie de página (2)

Tenemos un segundo vídeo para acabar los dos navegadores del pie de página. En esta ocasión, en lugar de colocar una texturas para el fondo de la caja de los navegadores del pie, hemos decidido colocar varias formas de hojas ligeramente transformadas.

Vídeo 14: Fin del pie

Acabamos la práctica con este último vídeo, donde realizamos los retoques finales del pie de página y colocamos unas formas de árboles para decorar un poco más el pie. Además, colocamos un listón en abajo del todo donde colocar información de contacto.

Hasta aquí llega nuestro videotutorial de diseño web con Photoshop y uso de texturas. Esperamos que os haya gustado el diseño que hemos producido a lo largo de la práctica. Han resultado más de dos horas y media de vídeo (contando los 39 minutos en los cuatro vídeos de esta parte y todos los vídeos de las anteriores entregas). Deseo también que os haya parecido entretenido y agradezco a todas las personas que han seguido todos los videotutoriales desde el primero hasta el último.

En el futuro nos pondremos a componer este diseño en HTML + CSS, que seguro que le interesará a más de uno!!

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

Galas

13/7/2010
gran guía
Muy bueno todo el tutorial, lo he visto entero y para gente que no conoce demasiado de photoshop es una gran puerta de entrada.
Sabrás para cuando tendrás el videotutorial con el pasaje de este diseño a html y css?

miguel angel

23/7/2010
SALUDOS
QUITO - ECUADOR
TENGAN TODOS USTEDES MUY BUENAS TARDES, LE FECILITO POR ESTA APORTACION A NOSOTROS COMO DISEÑADORES ,ES MUY IMPORTANTE CONOCER LOS AVANCES REASLIZADOS POR NUESTROS COLEGAS CON MAS EXPERIENCIA EL CAMPO DEL DISEÑO WEB.

RECIBAN MUCHAS FELICITACIONES Y SIGAN SIEMPRE ADELNATE , ESPERAMOS NUEVAS Y MAS NOTICAS , GRACIAS.

ATT,

MIGUEL ANGEL
DISEÑADOR WEB

Tranze

11/3/2011
gracias por la entrega, pero falta el HTML y CSS para la publicación
excelente aporte, deja muy claro el paso a paso del diseño, pero falta saber como darle con HTML y CSS para poder subirlo a la web.

Jaime Blanc

03/4/2011
IM PRE SIO NANTE !!!
No tengo más palabras para definir este genial trabajo. Gracias por facilitarnos la vida en el diseño web con Photoshop!
Un grande abrazo y felicidades a Desarrollo Web.

cacm_ve

07/8/2011
Gracias
Buen dia Migue Angel, les agradezco mucho por este tutorial, soy nuevo en diseño web y esta practica me ha abierto muchas puertas e ideas para incursionar por por el area del diseño web, espero q pronto salga el tutorial de maquetado html+css. Gracias, saludos.

Lidia Gutiérrez

30/7/2012
Vídeos útiles
Hola, Miguel Ángel
Desde hace unos cuantos años sigo tus vídeo tutoriales en DesarrolloWeb. En estos momentos me he alimentado con tu serie de Uso de texturas en Web. Son muy útiles porque aunque comentas que son largos, quiero decirte que para mí están muy bien en el tiempo y en su contenido. Van al detalle de lo que vas haciendo y me entero sin mucha dificultad, por lo tanto prospero en aprender rápidamente. También al estar separado en varios vídeos, me da oportunidad de ir siguiéndolos poco a poco, asimilar mejor las técnicas y de verdad no se me hace pesado el camino.
Así que me he animado, voy a diseñar un MockUp propio siguiendo tus técnicas y te lo enviaré (tardaré unas semanas porque partiré desde cero y lo haré a ratos).
Estoy a la espera de tu vídeo de llevar el PSD a HTML+CSS, tal como están otros usuarios de tu web. Ya seguí uno que presentaste sobre Grid960, y ahora me gustaría reforzar lo aprendido en aquel entonces. Seguramente incluirás en esta versión nuevas técnicas. Así que ánimo y que sea pronto, vale?
Un saludo y hasta siempre,
Lidia