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!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

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

    isita

    2007-01-15 12:22

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

    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
    Alexx
  • fgallard

    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

  • angelito

    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 luego
  • Ayesha

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

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

    nokt

    2007-01-20 20:01

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

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

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

    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 correcto
  • bassluna

    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 web
  • JRODAS

    JRODAS

    2007-02-02 22:55

    para cuando el video 4
  • pedrinx

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

    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 muxiio
  • akaryu

    akaryu

    2007-02-09 11:12

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

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

    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
  • riderarchangel

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

    riderarchangel

    2007-04-03 17:16

    ah si.. mi correo x_b_jenet_x@hotmail.com
    thx
  • Mandinga01

    Mandinga01

    2007-04-10 03:35

    como linkeas fotos o fonts en photoshop?
  • davidbet2

    davidbet2

    2007-05-21 21:39

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

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

    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.com
  • Aztekero

    Aztekero

    2007-07-09 01:34

    Te equivocaste de link es el mismo que el 3!


    ¡1ZALU2!
  • Aztekero

    Aztekero

    2007-07-19 17:44

    Amigoo cuando vas hacer la parte 4!?
  • Arturito1

    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 gracias
  • Aztekero

    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!?
  • Aztekero

    Aztekero

    2007-07-22 03:08

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

    Aztekero

    2007-07-23 18:29

    Aztekero@hotmail.com
  • Aztekero

    Aztekero

    2007-07-29 04:16

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

    gtrevino

    2007-08-09 14:21

    YA CAMBIENLOOOOOOOOOO ES EL MISMO DEL 3
  • Aztekero

    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!


  • pilar79

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

    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.
  • ekajacora

    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.com
  • cosh_9

    cosh_9

    2007-11-30 12:18

    como lo paso a pagina web gracias al tuto es buenisimo
  • saurinadesign

    saurinadesign

    2007-12-20 14:55

    excelente explicacion ;)
  • albvega

    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.com
  • MMOYA

    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
  • Mawel

    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???
  • mbr27

    mbr27

    2008-07-29 04:18

    Alguien puede dejarme el video 4 por favor
  • mbr27

    mbr27

    2008-07-29 04:26

    my correo es lapiel27@hotmail.com
  • intak

    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.cl
  • maku

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

    miki031979

    2008-10-23 16:49

    Ta muy bueno por darnos estos toques ok
  • dark20

    dark20

    2008-11-01 22:53

    como hago que los botones sean hipervínculos
  • fabian.designs

    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!
  • flp1284

    flp1284

    2009-01-16 17:13

    muy buen video muchas gracias
  • chentearm

    chentearm

    2009-05-07 15:58

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

    Saludos...

    ChenteARM

↑ Tutorial