Diseño web con texturas en Photoshop - Parte 3

  • Por
Tercera entrega del videotutorial del diseño web con Photoshop y uso intensivo de texturas, en el que realizaremos la barra de navegación y el recuadro "foto del día".
Para empezar quiero agradecer a todas las personas que están leyendo estas líneas y siguiendo los vídeos del diseño web con texturas en Photoshop. Son videotutoriales que nos están llevando mucho tiempo y esfuerzos, por lo que nuestra mayor ilusión es que nos estés leyendo. A la vez, te pedimos disculpas si opinas que estamos alargando mucho la publicación de estos materiales, pero esperamos tu comprensión, porque la edición de vídeo no es una tarea rápida, a la que hay que añadir la propia creación del diseño, etc.

Esta es la tercera entrega de los vídeos del diseño con Photoshop, por lo que las personas que llegan aquí sin haber pasado por las anteriores, les recomendamos encarecidamente comenzar el material por el principio, en los siguientes artículos:

En esta entrega vamos a avanzar un poquito más en el diseño, con otros 30 minutos de videotutorial, divididos en tres vídeos, en los que realizaremos la barra de navegación y el recuadro de la foto del día que habrá en la portada del sitio.

Vídeo 8: Diseño de la barra de navegación

En el vídeo anterior diseñamos un elemento para la portada, que llamase la atención, con una composición con texturas e imágenes. Pero se nos había olvidado crear la barra de navegación, que iría justo debajo de la cabecera. Así que hemos retomado el diseño creando ese navegador, que lo hemos mantenido sencillo, aunque le hemos incluido algún motivo que tiene a ver con la temática del sitio que estamos desarrollando.

Vídeo 9: Diseño del recuadro de "Foto del día"

Comenzamos el cuerpo de la página con el diseño de un recuadro con una foto. Es el primero que nos encontraremos en el cuerpo del sitio y que teóricamente tendría un contenido actualizado frecuentemente. En el recuadro utilizaremos un formato iregular, ya repetido en otros elementos del diseño, con una textura sobre blanco bastante sutil creada por un pincel de Photoshop. Luego, la propia foto del día será la que decore principalmente el recuadro.

Vídeo 9.2: Fin del recuadro de "Foto del día"

El diseño del recuadro foto del día se nos ha alargado más de lo esperado, con otros 10 minutos de vídeo en los que incorporamos nuevos elementos gráficos, un enlace para votar la foto con un icono y realizamos otros retoques para integrar el diseño con otros elementos del resto del sitio.

Puedes continuar viendo vídeos sobre esta práctica de diseño web con texturas en Photoshop.

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

leonardo_bisaro-474249

21/4/2010
Esta es la ultima parte ?
Hola Miguel, ante todo te agradezco por compartir esta valiosa y tan bien orientada información, ya que a mi humilde entender se trata de una guia muy práctica para aprender a utilizar photoshop.

Yl motivo de mi comentario era conocer si luego de haber creado la página en photoshop, hay alguna tecnica en particular para recortar la imagen y transformarla en HTML. A mi se me ocurre tomar las lineas de guia de grid, y con esto recortar y ubicar las imagenes utilizando por ejemplo DreamWeaver, pero quizas hay algo mas que desconozco.

Nuevamente muchas gracias

Desde argentina,

Leonardo

midesweb

28/4/2010
convertir el diseño en HTML
Hola Leonardo,

Gracias por tu comentario. Por supuesto que existe una técnica para convertir un diseño con Photoshop (o cualquier otro programa de diseño gráfico) en un modelo en HTML y CSS que puedas utilizar para generar una web normal.

El diseño que estamos haciendo en este caso aun no está convertido a HTML y CSS, pero en el futuro es una tarea que pensamos desarrollar en nuevos vídeos.

De momento, te recomiendo que leas un manual que explica justamente el paso que deseas realizar, pero con otro diseño, un tanto más simple, pero también bastante atractivo en mi opinión.

http://www.desarrolloweb.com/manuales/maquetacion-css-960-grid-system.html

Saludos,

Miguel

leonardo_bisaro-474249

30/4/2010
Muchas gracias
Miguel, Muchas gracias por tu respuesta y tu gran aporte para quienes estamos aprendiendo sobre el diseño web

midesweb

30/4/2010
Publicada la continuación de este diseño!
Hola,

Comento para informar a los lectores que ya hemos publicado la siguiente parte de esta práctica en vídeo de diseño web.
http://www.desarrolloweb.com/articulos/video-photoshop-texturas.html