Vídeo explicado del diseño web con Photoshop

  • Por
Vídeo con explicaciones y a una velocidad adecuada para aprender a diseñar una web utilizando Photoshop.
Hace un par de semanas publicamos un vídeo del diseño de una web desde cero con Photoshop . El anterior vídeo estaba a cámara rápida, por lo que no era muy didáctico.

Por solicitud de los usuarios, y por sentido común para seguir nuestra línea editorial, de ayudar en lo posible al aprendizaje de las personas que leen DesarrolloWeb.com, hemos editado y republicado un vídeo en el que mostramos el proceso de diseño de una web con Photoshop.

Ahora lo hemos publicado en Dailymotion, que permite subir vídeos en alta definición y de cualquier duración. En esta ocasión el vídeo tiene 31 minutos, todavía un poco acelerado, porque así se hace más ameno y sigue siendo igual de didáctico. Hemos agregado una locución para explicar cada cosa que vamos realizando en el diseño de la web.

Así pues, esperamos que de este vídeo podáis aprender todavía un poco más los procesos creativos para crear una plantilla de una web con Photoshop.

Debido a que muchas personas tienen problemas para ver estos vídeos publicados en DailyMotion (por lo menos eso nos comentan usuarios que acceden a esta página desde fuera de España), hemos publicado este vídeo en el sitio de YouTube. Lo podéis ver a continuación:

Podemos descargarnos esta plantilla en el articulo "Descargas de la plantilla Photoshop del manual Diseño desde cero"

Ahora , si os ha interesado, quizás queráis pasar al siguiente paso, que es crear una página web a partir de esta imagen, con HTML y CSS. Lo hemos explicado en el artículo: Maquetación CSS con 960 Grid System, caso real.

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

devalver

17/4/2009
¿y ahora qué?
¿qué diablos se hace con un archivo de imagen, tan pesado, para que sea ''colgable'', interactivo...
Gracias

huspy

17/4/2009
Pasar a css
Buenas!!

Antes de nada muy bueno el video, hay poco por del estilo en español. Pero quizás se podría sacar otro video enseando como se podría maquetar ese diseño con xhtml y css 960, que es el que utilizas no??. A mi me vendría muy saber esto que desconozco como hacerlo completamente.

Bueno, Muchas Gracias!!

Saludos!

Myriam

20/4/2009
El video buenisimo
Hola:

Me ha gustado mucho el video, me encantaria que hubiera una segunda parte diciendo como se maqueta, ya que de apariencia esta muy bien, pero seria interesante saber como poder poner el buscar de google y las partes que tiene interactivas. Gracias por molestarte en enseñarnos.

jhony andres mira

21/4/2009
exelente video
cordial saludo te escribo desde medellin colombia, me inicio en el tema de desarrollo web con photoshop ando buscando material al respecto, tu video es buenisimo.

muchas gracias por compartir tus conocimientos.

dimar1939

22/4/2009
AGRADECIMIENTOS
Miguel, muy bueno el vídeo pero demasiado rápido para alguien que no sabe nada de nada de páginas web... Espero que se pueda hacer otro con más calma para poder seguirlo paso a paso... También desconozco sobre que Photoshop se está trabajando...

Un saludo afectuoso agradeciéndole de antemano su atención constante por superarnos...

Ing. Diego Navarro

midesweb

22/4/2009
Buscador de Google
Para Myriam, decirle que ese buscador de Google es muy fácil de hacer y ya explicamos en su día como integrarlo en un artículo de DesarrolloWeb.com: http://www.desarrolloweb.com/articulos/google-co-op.html

Sergio

19/5/2009
Una pasada
Muchas gracias por dejarnos este vídeo y poder aprender a diseñar con Photoshop

midesweb

20/5/2009
Acabo de empezar a publicar nuevos vídeos sobre este tema
Si os ha interesado este vídeo quiero presentaros otro sobre cómo, partiendo de esta imagen, se puede crear una página web real, en HTML y maquetada con CSS.

Lo podréis encontrar en:
http://www.desarrolloweb.com/articulos/maquetacion-css-960-grid-cabecera.html

Elizabeth

21/6/2009
Soy Argentina, pero mas agradecida
Hola, soy argentina y como expresabas en el video "los argentinos se vas a reir de la expresion "coger".." Mira no he reido, porque honestamente estaba muy atenta a todo lo que explicabas y te agardezco por todo lo exlicado... porque desde que me he suscripto a desarrolloweb y me llegan los boletines, no es mas que un ahorro de tiempo ya que estoy comenzando con todo esto. Gracias porque para muchos esto significa ganar dinero. Saludos desde Buenos Aires, Argentina.. pero muy cerca a traves de internet. Elizabeth

Jesús Ángel

06/8/2009
Ya no están los videos
Hola, primeramente gracias por este tutorial me ha gustado mucho y lo estoy siguiendo muy bien. He estado viendo los videos hasta ahora, pero ayer me quedé sorprendido porque ya no estaban en Vimeo :( , donde se pueden ver o descargar los videos de CSS 960 Grid?.

Ojala me puedas ayudar con ésto, porque la verdad que los videos están geniales y ayudan bastante, si fueses tan amable.

Un cordial saludo
Jesús Ángel

rené

21/8/2009
resubir video
hola al parecer el video ya no esta en vimeo..alguna posiblidad de resubirlo? avisenme si se puede por favor....vi el otro donde ya comienzan a armar con css y me parecio increibleee como metodologia para armar sitios..saludos desde chile

JoZeg

23/8/2009
video no encontrado de diseño web con photoshop explicado
hola desearia q volvieran a subir este video xq ya no esta disponible.

salu2, gracias.

angelo

08/9/2009
cuelgen el video
me interesa porf cuelgen denuevo el Vídeo explicado del diseño web con Photoshop

waldir__ticona-619053

18/9/2009
Video de photoshop
Bueno un saludo muy cordial, disculpa el video que esta a menor velocidad para la creación de Diseño web desde cero, donde puedo verlo con calma ya no esta disponible, porfavor quisiera que me mandes un linq donde pueda verlo o si es mejor donde pueda descargarlo

elneo

27/9/2009
Video No disponible
Buenas tardes queridos amigos de DesarrolloWeb, primero que nada quería comentarles que el video no está funcionando y deseo aprovechar la oportunidad para agradecerlesa todos ustedes que día a día nos brindan respaldo y herramientas para que novatos como yo aprendamos a diseñar nuestras web.

Un abrazo
Saludos cordiales
Marcelo Pírez
Montevideo - Uruguay

midesweb

16/11/2009
Vídeos "re-subidos" a DailyMotion
Hola,

Hace tiempo ya restauramos los vídeos del diseño web desde cero con Photoshop. Lo hicimos en el sitio web DailyMotion, que nos permite subir vídeos de cualquier duración. Espero que los podáis seguir aprovechando.

Un saludo!

margueta

17/11/2009
Donde puedo obtener los videos
Hola muy buen tutorial, lamentablemente no lo puedo ver completo porque el ancho de banda en mi pais no es tan veloz, quisiera saber como puedo obtener los videos desde el de la creacion de la pagina con photoshop hasta la maquetacion con 960 grid y css, si fueran tan amable el creador del tema de colocar los videos en algun servidor de descargas, estaria eternamente agradecido, por supuesto comentar que son para uso personal, nada mas.

Aitor

11/12/2009
Gracias
Están muy bien estos tutoriales. Muchas gracias por el empeño que poneis. Son de mucha ayuda.

Un saludo

javi

22/12/2009
Como integrar imágenes
como cortamos las imágenes y las metemos en el html?

zerohot

23/12/2009
Exelente Video Felicidades Eugin
Hola soy de republica dominicana y hace mucho e buscado algo como esto, esta buenisimo el video, exelente explicacion de veras te felicito, apenas me estoy iniciando en esto de la web, y dejame decirte que me has dejado muy motivado...

OROCHI00

15/1/2010
Gravcias, Gracias
Exelente video!!.. pero seria mejor si pusieran el video! en la velocidad normal.. ya que avecez se me escapan algunas partes. en algunos momentos del videos haces capas sin avisar y me pierdo despues pero hay le voy cojiendo el ritmo.. muchas gracias...

michelitoo

29/1/2010
serie bueno subirlo por VIMEO
En vimedo se puede descargar el video a los quye no tiene mucha ancho d banda

IMValle

13/5/2010
Muy bueno!
Un tutorial extraordinario, claro y sencillo. Muchísimas gracias!

mailo286

27/5/2010
Problema con los videos
Buenas noches soy un fiel seguidor de tus excelentes tutriales. Pero seria bueno que subas este video a otro servidor como youtube ya que he intentado visualizarlo varias veces y el ancho de banda no me lo permite. Atte. Muy agradecido desde Venezuela Emilio.

Oscar

06/7/2010
Excelente la enseñanza
Me parece muy bueno todo el material y la forma de explicarlo

AndresJVB

07/8/2010
¡Excelente video.!
Hola muchas gracias por este video tan bueno, estoy comenzando en esto del desarrollo web tando la página como el video estan super buenos...

Saludos desde Venezuela
Andres

Albertho

24/8/2010
Ayuda
Como trabajo en Photoshop CS3 CS4?? pues la version que manejas en el video no es esa. Gracias y espero me puedas ayudar

midesweb

06/9/2010
Hemos subido el vídeo a Youtube
Gracias a Youtube, que nos a hecho "Partner" de su sitio web y que ahora nos permite subir vídeos de más de 10 minutos, está disponible este vídeo para las personas que tenían problemas en verlo desde Dailymotion.
En fin, hemos puesto el vídeo tutorial en Youtube, que espero que sirva para que todas las personas puedan seguirlo perfectamente.
En el propio cuerpo del artículo está publicado el vídeo.

Ross

21/10/2010
Excelente todo!
Explican muy bien , mil gracias por compartir tantos conocimientos. Queria saber, como coloco en css un recuadro que tenga las esquinas redondeadas, me gustaria ver un ejemplo/video de una seccion que tenga borde con esquinas redondeadas y sus alrededores tengan algun diseno como sombra. Basicamente quiero saber como lo pasan de photoshop a cc. mil gracias

USUARIO

23/12/2010
Pregunta
En los primeros segundos, cuando habres el pds de las 12 columnas, como creas la nueva capa y como le poner color.
Gracias

klaudersen

21/4/2011
que rápido!!!!!
me falta un año luz nada más para hacer eso...
yo quiero comentar sobre Dailymotion, estos videos se ven muy bien desde aquí en mi trabajo (con firewals y demás) y eso que soy de argentina!. Sigan con dailyMotion. me reí sobre lo de "coger" jaja es cierto aca es mala palabra (mal empleada) suerte!!!!!

Jesica

02/12/2011
Que grande
jajajajajaja me gustó el comentario de lo de cojer ajajajaja xD un saludo desdde acá y se agradecen siempre infinitamente todos estos tutos!

zorahaida

13/2/2012
Asunto solucionado
Muchas gracias de nuevo. He conseguido todo lo que me hacia falta. Tu explicación es infalible ;) Gracias.