Vídeo del diseño de una web desde cero con Photoshop

  • Por
  • 20 de marzo de 2009
  • Valoración:
  • 22 Comentarios
  • Photoshop
En este vídeo veremos el proceso de diseño de una web, partiendo desde cero, realizado con Photoshop.
Hemos realizado un vídeo en el que queremos mostrar cómo se hace un diseño de plantilla de una web con Photoshop. Para ello, hemos partido desde cero, creando cada uno de los componentes de la plantilla de una página web. En este vídeo sólo se realiza el diseño con el programa de edición gráfica Photoshop, creando una imagen que luego utilizaremos para maquetar la plantilla a utilizar en una página web.

El diseño es una mera prueba, para demostrar los pasos a realizar para la confección del aspecto que va a tener una web. No me considero un gran creativo ni tampoco pienso que sea un excelente dominador de Photoshop. Controlo, eso sí, las funcionalidades básicas necesarias para trabajar con el programa y diseñar páginas web, ya que lo hago bastante en mi trabajo diario. Los colores y los aspectos el diseño resultante los he escogido prácticamente sobre la marcha y a medida que hacía el vídeo. Quizás deba admitir que el resultado no ha quedado mal del todo, según mi criterio, pero lo que es cierto es que yo no elegiría, por ejemplo, fondos negros para un diseño, sino más bien tonos cercanos al blanco, porque me gusta más que las páginas sean claras y limpias.

Quiero puntualizar que para realizar este diseño no he partido exactamente desde cero como había comentado antes. En realidad he partido de una rejilla que tiene una serie de líneas verticales que me permite tener un control sobre la anchura de la página web completa y sobre los elementos de la plantilla, que van a situarse en columnas. La plantilla inicial, que son simplemente unas guías de Photoshop para ajustar el diseño sobre ellas, la he obtenido de un framework CSS llamado 960 Grid System.

El sistema de rejilla 960 grid es de libre uso y distribución y permite no sólo tener una referencia de los espacios que podemos utilizar para hacer una web, sino que también incluye unas hojas de estilo en cascada que nos ayudarán a realizar la maquetación de la página con CSS. Este mismo diseño, cuya creación se ve en el vídeo, lo vamos a utilizar más tarde para explicar el mencionado Framework CSS, de modo que las personas puedan aprender a utilizarlo y obtener una ayuda muy útil a la hora de maquetar sus sitios web. Todo eso explicaremos con detalle en próximos artículos.

También hay que comentar que el vídeo lo hemos acelerado para no aburrir al personal. El vídeo original dura aproximadamente una hora y con su reproducción rápida hemos conseguido reducirlo a poco menos de 10 minutos. Quizás el valor didáctico del vídeo ha sido mermado por causa de la reproducción acelerada, pero seguro que servirá como demostración de las posibilidades y uso de Photoshop para hacer el diseño de una web. Dependiendo del éxito que tenga este vídeo, en el futuro decidiremos si lo distribuimos a su velocidad natural, para que cualquier persona pueda saber perfectamente qué es lo que se está haciendo en cada momento.

Para amenizar este vídeo hemos utilizado la música de un músico español llamado Roger Subirana, que nos ha dado permiso gentilmente para utilizar su música.

Nota: Recomendamos que conozcáis los distintos álbumes del compositor Roger Subirana, que ha publicado su música con licencia copyleft, de modo que la puedes descargar y distribuir entre tus amigos libremente. Para ello accede directamente a su página web: Explora la música de Roger Subirana en http://www.rogersubirana.com/

Así pues, os dejamos con el vídeo del diseño de una web, que esperamos sirva de utilidad a los lectores de DesarrolloWeb.com.

Pero antes quiero comentar un par de cosas:

  1. Si te gusta este vídeo y quieres aprender cómo hacer todas estas cosas, pero con más calma, te informamos que hemos publicado una nueva versión de este trabajo, editado a menor velocidad y con una locución para explicar los pasos que realizamos para la creación de este diseño web: Ver el vídeo a velocidad menor y con locución.
  2. Si quieres aprender a convertir este diseño creado con Photoshop en una página web, con HTML y maquetación CSS, te informamos que hemos publicado otro vídeo interesante, con explicaciones, donde puedes ver paso a paso el proceso: Vídeo de la maquetación web con HTML y CSS utilizando 960 Grid System.

Atención: Insistimos, si el vídeo te ha parecido muy rápido, accede a este otro vídeo del diseño web desde cero con menor velocidad y locución con explicaciones.
Además contamos con un manual que te puede interesar sobre Práctica en vídeo de diseño web con Photoshop avanzado y un artículo sobre cómo realizar el diseño web con Photoshop y la plantilla de Blueprint.

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.

Comentarios

IVO_

22/3/2009
Me ha parecido bastante interesante, pero sobre todo me intriga de que manera se migra a xhtml + css...

fransoni

22/3/2009
Buenos días, he leido este articulo y la presentación me ha parecido de lo más interesante, pero no veo el video.Si es un enlace, no observo donde pinchar para poder visualizarlo. Gracias.

Miguel

22/3/2009
Si dices que no ves el vídeo, prueba a entrar directamente en la página de Youtube donde está publicado: http://www.youtube.com/watch?v=ZUqHkuzHjj0&feature=player_embedded

moisés

22/3/2009
Me encantaria tener el archivo completo para poder apreciar con más detalle el video. Muchisimas gracias por el video, y por su dedicación a enseñar gracias.

fransoni

24/3/2009
Ya pude verlo, me parece muy bueno, pero tantos detalles a esa velocidad es complicado notarlos. Sería muy interesante como comentaste, la posibilidad de ofrecer el video a velocidad normal, siempre que sea posible.

Gracias y un saludo.

Javier

25/3/2009
Me ha parecido genial, mas o menos es lo que estaba buscando ya que no se me da muy bien el diseño y además estoy empezando a hacer páginas web. Deberían poner mas ejemplos, me ha dado bastantes ideas. Gracias

Matias

27/3/2009
Hola soy totalmente novato en crar paginas web.. pero manejo algo el photoshop y quisiera saber como a partir del diseño de la pag en ps creo la web.. porque eso era solo un diseño nomas lo del video..

guadalupe

28/3/2009
asi es como q esta incompleto falta lo más dificil

Quike

30/3/2009
Me parece excelente el video aunque como lo dijiste en poco tiempo pero igual esta bien creo que si pudieras poner el video entero creo q todos te estariamos muy agradecidos ya que es de mucha ayuda para todos los que nos interesa aprender sobre esto o como yo que estoy empezando en esto.

lucas

02/4/2009
hola en vede ser un comentario tengo una pregunta y me gustaria que me orienten un poco yo tengo el programa de adobe photoshop pero como consigo las rejillas para comensar como muestra el video que esta en la pagina. me gustaria que me ayuden un poco. bueno desde ya muchas gracias por su tiempo espero su comentario gracias nuevamente

Carlos Briones

03/4/2009
La verdad es que a esa velocidad ni el correcaminos perseguido por el coyote podría captar algo. Amigos es necesario ponerlo a velocidad normal. Saludos de todos modos.

Pedro

03/4/2009
Me ha parecido muy interesante, lo que seria realmente interesante como comentan por arriba es el paso siguiente, migrar la plantilla creada a HTML+CSS ya que ahi es cuando suelen salir los problemas.
Un saludo!

Amalia

06/4/2009
no conocia como funcionaba Photoshop, y me encanto tu video, pero es muy rápido, como muestra esta bien, pero si puedes darnos las demostraciones de este trabajo en pequeños fragentos en cada una de tus publicaciones estaría super bien!!!

Gracias y saludos!!

Velkil

08/4/2009
Incompleto
Muy bonito todo,pero donde esta la explicacion de a la hora de exportarlo que que funcionene los botones y demas?? por que asi tal y como esta que yo sepa no sirve para nada.

eugim

13/4/2009
Vídeo con explicaciones
Hola!
Ya hemos reeditado el vídeo, para reducir la velocidad y aportar explicaciones sobre los pasos para realizar este diseño.
En el propio texto del artículo se ha colocado el enlace, pero por si no se ha visto, dejo también aquí la URL:
http://www.desarrolloweb.com/articulos/video-explicado-diseno-web-photoshop.html

calzaslargas

12/5/2009
gracias
Muchas gracias, el video es interesantisimo y la musica de Roger Subirana preciosa.

eugim

15/5/2009
Convertir este diseño en una web
Alguna persona había preguntado sobre cómo se convierte este diseño en una imagen a una página web, donde funcionen los enlaces, botones, etc. Pues hemos publicado un nuevo artículo que lo explica, con un vídeo para seguir todo el proceso paso a paso.
http://www.desarrolloweb.com/articulos/maquetacion-css-960-grid-cabecera.html

henry

21/5/2009
SIN SATISFACCION
No sean malos... y ahi que aprendo nada jejeje..... no tiene sentido el video.

percy

24/5/2009
sobre el video
disculpame pero el video esta deamsiado rapido tienes que ser más didactico bueno al menos yo no te entendi nada. espero que sqques el video pero al detalle para que el usuario pueda entender de lo que estas realizando.

haferlin_moreno

30/9/2009
Diseno de una web desde cero con Photoshop
pueden verlo en dailymotion http://www.dailymotion.com/video/xa7smk_diseno-de-una-web-desde-cero-con-ph_tech

Danilo

27/3/2010
Buenisimo
Bueno el video, pero esta muy rapido

zorahaida

13/2/2012
Gracias
Gracias por el video tan completo y bien explicado, me ha servido de mucho, pero si quieres salvarme la vida, me gustaria saber como obtener esa rejilla que has usado al principio, me descargué los archivos tanto de aqui, como los que recomendaste en la web de 960 grid. Pero me he quedado bloqueada en el asunto de obtener o diseñar la rejilla. Agradeceria tu ayuda, o algun consejo.

Compartir