Diseño de una Pagina Web con Photoshop CS parte 4

Video Tutorial Photoshop de Interfaces y Diseño Web

Tutorial por Paquo360 de Sólo Photoshop

Diseño de una Pagina Web con Photoshop CS. En esta cuarta y última entrega terminamos con el menú, el logo, las texturas y sombras del fondo y detalles finales.

---------
Este video no pretende ser un detallado tutorial de como se dibuja una pagina web, simplemente es un ejemplo de como desarrolle este diseño, por lo que esta dirigido a usuarios con un nivel de Medio a Avanzado en el manejo de Photoshop quienes dominen a la perfección las Herramientas Básicas del programa. Es algo extenso, así que lo hemos dividido en 4 partes de 5 mins. cada uno. La canción es "Nothing Else Matters" de Metallica.
---------
Desarrollo
- En esta última etapa solo se agregan los detalles del diseño, como la textura del fondo, los textos e imágenes de contenido.

Espera un momento mientras carga el video.

Esta es la última parte de 4. Al final quedó así:

Diseño de una pagina web

Muchos agradezco los comentarios recibidos en esta serie de tutoriales y respecto a las dudas que surgieron quiero comentar los siguientes puntos:
- Este es un diseño Photoshop que luego se procesó en Flash, difícilmente funcionaría en otro formato.
- Conozco poco de Animación y Programación Flash por esa razón es que no me atrevo desarrollar un tutorial que continúe con este diseño hasta su publicación final como pagina web.
- Luego agregaré uno o dos ejemplos como el actual en video y si hay tiempo un tutorial desarrollado de la manera tradicional, con imágenes y texto, explicado paso a paso.

- Diseño de una Pagina Web con Photoshop CS 1

- Diseño de una Pagina Web con Photoshop CS 2

- Diseño de una Pagina Web con Photoshop CS 3

- Diseño de una Pagina Web con Photoshop CS 4

Hemos creado el correo electrónico tutoriales @ solophotoshop.com para recibir tus tutoriales y artículos.
Registrate aquí para consultar, comentar, recibir novedades y valorar los Tutoriales y Artículos

 Fecha: 15/01/2007  ISITA escribió:
esta buenazo solo espero que me salaga igual de bonita

 Fecha: 16/01/2007  ALEXXXXO escribió:
O sea que lo que esperabamos con tanto anhelo, ¿núnca llego, como ponemos los hiervinculos a los botones? Ojal que alguien pueda decirnos como se agregarian los enlaces Gracias Saludos Alexx

 Fecha: 17/01/2007  FGALLARD escribió:
mi hermano muy bien, te quedo muy bien el diseño de la pagina web de shakira, pero podrias hacer un tutorial incluido animaciones en flash te lo agradeceria mucho atte Fg fgallard23@yahoo.es

 Fecha: 17/01/2007  ANGELITO escribió:
Chale... nunca que pude ver el vidio... solo vi un recuadro grande... quiero imaginar que es donde se ve el vidio pero no la veo :( y se ve que esta bueno... espero me manden alguna solucion para poder verlo ya que se ve interesante espero soluciones en tiburonchiva@hotmail.com gracias... hasta luego

 Fecha: 17/01/2007  AYESHA escribió:
La verdad es que está bastante bien hasta donde llegó. Gracias por compartirlo con los demás. Angelito, si no puedes verlo quizaa te falte alguna actualización de flash , active X o algo similar porque al menos a mi me lo muestra sin problemas... Suerte. Y gracias nuevamente.

 Fecha: 20/01/2007  NACHO1320 escribió:
Esta buenisimo este tuto...pero al igual que ALEXXXXO necesito mas informacion de como enlazar los link ... botones ... etc. A donde me puedo dirigir para aprender lo demas? de antemano gracias. nacho1320 ;)

 Fecha: 20/01/2007  NOKT escribió:
Muy bueno el tuto, pero me interesaria saber como montar el diseño terminadao en html o php :P

 Fecha: 21/01/2007  SUDAKAN escribió:
Si ya tengo mi pagina terminada sigueindo este muy buen tutorial...ahora mi gran problema (y como veo del de varios otros) es que cuando la guardo con la opcion "guardar para web" lo que hace es guradar como una gran imagen que sale en el sitio web...o sea cmo sea hace esa parte, como se la guarda.

 Fecha: 22/01/2007  BUCHI escribió:
Hola a todos pero tengo una duda: el tutorial que estamos viendo no pertenece a la tercera parte? Lo digo porque en el inicio del video pone diseño de una pagina web 3.

 Fecha: 24/01/2007  FCOESTEBAN escribió:
¿Que diferencia existe entre la tercera parte y la cuarta del tutorial? son identicas, creo que el enlace no es correcto

 Fecha: 30/01/2007  BASSLUNA escribió:
Falta el video de la parte 4 porque este pertenece al 3, ojala que se pueda corregir para ver el acabado final y saber como se publica para web

 Fecha: 02/02/2007  JRODAS escribió:
para cuando el video 4

 Fecha: 07/02/2007  PEDRINX escribió:
Buenas a todo@s! Soy un pobre aficionado en el diseño web, pero creo que quizá se podrían incluir los links en la imagen en Dreamweaver, utilizando un "Mapa de imágenes". Esto nos permite vincular distintas zonas de una imagen como si fueran botones. Por cierto (y a tenor de hacerme repetitivo): el vídeo de la cuarta parte es, en efecto, el de la tercera. Hasta pronto!

 Fecha: 08/02/2007  PAULA_16 escribió:
no entiendo porfavor me podrian enseñar plizzzz lo suplicoo mi msn es paularv_15@hotmail.com de verdad lo agradeceria muxiio

 Fecha: 09/02/2007  AKARYU escribió:
hey como asi que el mismo video que el tutorial 3 no era el 4

 Fecha: 23/02/2007  IME escribió:
me gustaría saber como se hace para clickera la parte dond dice anterior y eso.. pero la verdad está muy bueno este tutorial y queda muy bien.

 Fecha: 11/03/2007  MAPACHE escribió:
Podria descargarme los tutoriales para llebarlos en mi portatil de alguna forma?. Por favor,contestenme en este e-mail.Gracias. gralmapache@gmail.com

 Fecha: 03/04/2007  RIDERARCHANGEL escribió:
como hago los links he? o O??? podrian explicarme, no lo necesito como imagen si no como html, si no, para que hacer tanto en FS? xD la idea es subirlo, porfavor, necesitamos respuestas, gracias. Me::.

 Fecha: 03/04/2007  RIDERARCHANGEL escribió:
ah si.. mi correo x_b_jenet_x@hotmail.com thx

 Fecha: 10/04/2007  MANDINGA01 escribió:
como linkeas fotos o fonts en photoshop?

 Fecha: 21/05/2007  DAVIDBET2 escribió:
increible,como haces para aplicarle el cod html o linkearlo con otras paginas?

 Fecha: 14/06/2007  WALLADA escribió:
Bien todo el tutorial hecho, mas o menos, pero ahora mi duda, el siguiente paso, poner los enlaces a las secciones, a la galerias de fotos, como colgarla en internet, en fin... un saludo y gracias.

 Fecha: 07/07/2007  WILLIAM_W escribió:
hola soy nuevo estuve observando los tutoriales y son muy interesantes, me gustaria si alguien tuviera un tutorial completo de crear web en drenweaver con photoshop por favor envie a mi correo salmistawill.com@hotmail.com

 Fecha: 09/07/2007  AZTEKERO escribió:
Te equivocaste de link es el mismo que el 3! ¡1ZALU2!

 Fecha: 19/07/2007  AZTEKERO escribió:
Amigoo cuando vas hacer la parte 4!?

 Fecha: 21/07/2007  ARTURITO1 escribió:
PAQUO360!!! este video ya lo tengo... Por favor pon el 4 ... sino me voy a quedar a medias.... no seas malito o me dejas como estaba... jejeje perdon por la bromita espero no te enojes... ahhhhh si no es mucho pedirte... podrias poner como hacer el link a otra pagina ... gracias muchas gracias por compartir tu experiencia.... Saludos y nuevamante gracias

 Fecha: 22/07/2007  AZTEKERO escribió:
Asi es ARTURITO1 deja tu correo para agregarte para ayudarnos por que no ha puesto el video 4 que onda que dices!?

 Fecha: 22/07/2007  AZTEKERO escribió:
Algun foro de la pagina donde expongamos nuestras dudas!?

 Fecha: 23/07/2007  AZTEKERO escribió:
Aztekero@hotmail.com

 Fecha: 29/07/2007  AZTEKERO escribió:
Shita que pasa con este video!!!!!!!!!!!!!!!!!!!

 Fecha: 09/08/2007  GTREVINO escribió:
YA CAMBIENLOOOOOOOOOO ES EL MISMO DEL 3

 Fecha: 27/08/2007  AZTEKERO escribió:
Amigos aqui les triago el Video numero 4, bajendo esta en Gigasize y lo reproducen con el FLV PLAYER si no lo tienen bajelo asi ponga en el GOOGLE. http://www.gigasize.com/get.php/3195427752/PaginaWeb04_.flv Bueno me despido, adios!

 Fecha: 30/08/2007  PILAR79 escribió:
muy bueno el tutorial. yo estoy haciendo algo parecido pero me encuentro en el dilema que nos e continuar, ya que me gustaria saber como puedo hacer para que cuando salga una imagen, se vaya cambiando por otras, sin que se cambie las paginas. A ver si alguien se anima a continuar este tutorial.

 Fecha: 16/09/2007  BUDIñO escribió:
Hola, podrias Paquo360 enviarme los videos de las esplicaciones a mi correo o alguien que los tenga. El correo es bufre0@hotmail.com gracias.

 Fecha: 30/10/2007  EKAJACORA escribió:
al igual q todos necesito el tuto 4 haber si porfavor me lo envian a mi correo y bueno ps cuanto es el costo y si no gracial mil.... y el tuto esta buanazo felicitaciones...mi correo ekajacora@hotmail.com

 Fecha: 30/11/2007  COSH_9 escribió:
como lo paso a pagina web gracias al tuto es buenisimo

 Fecha: 20/12/2007  SAURINADESIGN escribió:
excelente explicacion ;)

 Fecha: 09/01/2008  ALBVEGA escribió:
Si alguien Sabe como colocar los links con el dreamweaver que me pueda enviar la respuesta a mi mail se los agradeceria chau mi mail: albvega@hotmail.com

 Fecha: 22/04/2008  MMOYA escribió:
ESTAN MUY BUENOS ESTOS VIDEOS Y LA PAGINA TAMBIEN, DIGANME COMO PUEDO BAJAR ESTOS VIDEOS.. chau mi mail es fxmoya@hotmail.com

 Fecha: 24/06/2008  MAWEL escribió:
Tengo una duda, cuando ya la tengo diseñada en Photoshop... como hago que los botones sean hipervínculos???

 Fecha: 29/07/2008  MBR27 escribió:
Alguien puede dejarme el video 4 por favor

 Fecha: 29/07/2008  MBR27 escribió:
my correo es lapiel27@hotmail.com

 Fecha: 13/08/2008  INTAK escribió:
me podrian desir como hacer o crear los hipervinculos desde este diseño... porfavor... mi msn en caso de cualquier cosa es iintaak@live.cl

 Fecha: 13/08/2008  MAKU escribió:
Hola no puedo ver la parte cuatro alguien sabe decirme que problema tengo?? ami me gusto mucho aunque hay algunas cosas q no las entiendo!! GRACIAS

 Fecha: 23/10/2008  MIKI031979 escribió:
Ta muy bueno por darnos estos toques ok

 Fecha: 01/11/2008  DARK20 escribió:
como hago que los botones sean hipervínculos

 
© Copyright 2001 - 2008
Solo Photoshop, Tutoriales, VideoTutoriales, Artículos y Recursos de Photoshop y Flash.