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

Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Anunciar en SoloPhotoshop

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

Video Tutorial Photoshop de Interfaces y Diseño Web

Tutorial por Paquo360

Solo 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

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

↑ Tutorial

isita

2007-01-15 12:22

esta buenazo solo espero que me salaga igual de bonita M
alexxxxo

2007-01-16 02:55

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 AlexxM
fgallard

2007-01-17 12:09

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 M
angelito

2007-01-17 13:06

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 luegoM
Ayesha

2007-01-17 20:33

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.M
nacho1320

2007-01-20 09:49

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 ;) M
nokt

2007-01-20 20:01

Muy bueno el tuto, pero me interesaria saber como montar el diseño terminadao en html o php :PM
sudakan

2007-01-21 16:44

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.M
Buchi

2007-01-22 06:30

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. M
fcoesteban

2007-01-24 01:04

¿Que diferencia existe entre la tercera parte y la cuarta del tutorial? son identicas, creo que el enlace no es correctoM
bassluna

2007-01-30 14:50

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 webM
JRODAS

2007-02-02 22:55

para cuando el video 4M
pedrinx

2007-02-07 15:16

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!M
paula_16

2007-02-08 15:33

no entiendo porfavor me podrian enseñar plizzzz lo suplicoo mi msn es paularv_15@hotmail.com de verdad lo agradeceria muxiioM
akaryu

2007-02-09 11:12

hey como asi que el mismo video que el tutorial 3 no era el 4M
ime

2007-02-23 00:46

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.M
mapache

2007-03-11 17:28

Podria descargarme los tutoriales para llebarlos en mi portatil de alguna forma?. Por favor,contestenme en este e-mail.Gracias. gralmapache@gmail.com M
riderarchangel

2007-04-03 17:09

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::. M
riderarchangel

2007-04-03 17:16

ah si.. mi correo x_b_jenet_x@hotmail.com thxM
Mandinga01

2007-04-10 03:35

como linkeas fotos o fonts en photoshop?M
davidbet2

2007-05-21 21:39

increible,como haces para aplicarle el cod html o linkearlo con otras paginas? M
Wallada

2007-06-14 02:23

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.M
william_W

2007-07-07 11:47

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.comM
Aztekero

2007-07-09 01:34

Te equivocaste de link es el mismo que el 3! ¡1ZALU2! M
Aztekero

2007-07-19 17:44

Amigoo cuando vas hacer la parte 4!? M
Arturito1

2007-07-21 02:31

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 graciasM
Aztekero

2007-07-22 02:07

Asi es ARTURITO1 deja tu correo para agregarte para ayudarnos por que no ha puesto el video 4 que onda que dices!?M
Aztekero

2007-07-22 03:08

Algun foro de la pagina donde expongamos nuestras dudas!?M
Aztekero

2007-07-23 18:29

Aztekero@hotmail.com M
Aztekero

2007-07-29 04:16

Shita que pasa con este video!!!!!!!!!!!!!!!!!!!M
gtrevino

2007-08-09 14:21

YA CAMBIENLOOOOOOOOOO ES EL MISMO DEL 3M
Aztekero

2007-08-27 19:19

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! M
pilar79

2007-08-30 09:09

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.M
budiño

2007-09-16 07:09

Hola, podrias Paquo360 enviarme los videos de las esplicaciones a mi correo o alguien que los tenga. El correo es bufre0@hotmail.com gracias.M
ekajacora

2007-10-30 17:05

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.comM
cosh_9

2007-11-30 12:18

como lo paso a pagina web gracias al tuto es buenisimoM
saurinadesign

2007-12-20 14:55

excelente explicacion ;)M
albvega

2008-01-09 23:01

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.comM
MMOYA

2008-04-22 10:26

ESTAN MUY BUENOS ESTOS VIDEOS Y LA PAGINA TAMBIEN, DIGANME COMO PUEDO BAJAR ESTOS VIDEOS.. chau mi mail es fxmoya@hotmail.com M
Mawel

2008-06-24 06:48

Tengo una duda, cuando ya la tengo diseñada en Photoshop... como hago que los botones sean hipervínculos???M
mbr27

2008-07-29 04:18

Alguien puede dejarme el video 4 por favor M
mbr27

2008-07-29 04:26

my correo es lapiel27@hotmail.comM
intak

2008-08-13 00:40

me podrian desir como hacer o crear los hipervinculos desde este diseño... porfavor... mi msn en caso de cualquier cosa es iintaak@live.clM
maku

2008-08-13 13:31

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 M
miki031979

2008-10-23 16:49

Ta muy bueno por darnos estos toques ok M
dark20

2008-11-01 22:53

como hago que los botones sean hipervínculosM
fabian.designs

2008-11-25 09:14

Bueno antes que nada, esta muy bueno el tuto, pero es una lastima que no este la parte 4, eh leido todos los post y muchos piden la parte 4 y como ven desde el 2007 estan con ese problema y no la han subido, asique no la iran a subir mas tampoco... pero les digo como es, con la herramienta "sector" busquenla es tipo un chuchillo, trazan el sector sobre donde quieran hacer click, por ejemplo hacen un sector sobre la palabra galeria etc,, luego de tener todos los sectores, la guardan como web, y la abren con dreamweaver y luego en dreamweaver le ponen los vinculos... espero que les halla servido! M
flp1284

2009-01-16 17:13

muy buen video muchas graciasM
chentearm

2009-05-07 15:58

Esta fenomenal. Se agradece grandemente el aporte! Muy buenas ideas. Mis felicitaciones viejo! Saludos... ChenteARMM