Autor Tema: [TUTORIAL] Web con Photoshop  (Leído 3234 veces)

Desconectado Keon

  • PHPer@ Fijo
  • ***
  • Mensajes: 105
  • Karma: 0
    • Ver Perfil
[TUTORIAL] Web con Photoshop
« en: 01 de Noviembre de 2006, 10:21:57 am »
Lo primero que tenemos que tener es el diseño de la web pensado, luego lo pasamos al PS con un diseño bastante bueno.

1ºAbrimos un archivo del tamaño que queramos que sea nuestra web, despues ponemos todos los bloques y terminamos de diseñarlo. Al final del diseño damos a Acoplar Imagen.Quedara algo asi:



2ºDespues con la herramienta Slice Tool () vamos recuadrando todas las secciones que queramos que tengan hipervinculo, de esta manera:



Y quedara mas o menos asi:



Estos recuadros son lo que despues en el editor web llevaran los hipervinculos.

3ºDespues vamos a Archivo>Guardar para Web:



Y lo guardamos como Solo HTML, si usais FrontPage guardarlo como HTML e Imagenes:



4ºVamos al Dreamweaver y damos a insertar archivo HTML y ya la tenemos hecha, ahora lo unico que tienes que hacer es poner los hipervinculos, algunas funciones PHP o lo que quieras, es tu web.

Este es un tutorial muy sencillo, pero si teneis dudas postearlas a continuación

Un saludo, Keon




Respeta las normas ;)

Comunidad PHPeros

[TUTORIAL] Web con Photoshop
« en: 01 de Noviembre de 2006, 10:21:57 am »

Desconectado Drek

  • PHPer@ Fijo
  • ***
  • Mensajes: 193
  • Karma: 0
  • Sexo: Masculino
    • Ver Perfil
    • radiogoods
Re: [TUTORIAL] Web con Photoshop
« Respuesta #1 en: 01 de Noviembre de 2006, 10:27:52 am »
esta:
Lo primero que tenemos que tener es el diseño de la web pensado, luego lo pasamos al PS con un diseño bastante bueno.

1ºAbrimos un archivo del tamaño que queramos que sea nuestra web, despues ponemos todos los bloques y terminamos de diseñarlo. Al final del diseño damos a Acoplar Imagen.Quedara algo asi:
 -no e entendido bien :S

Desconectado sagitari

  • PHPer@
  • **
  • Mensajes: 86
  • Karma: 10
  • Sexo: Femenino
  • "A&X&me...4ever"
    • Ver Perfil
    • http://freewebtown.com/sagitari
Re: [TUTORIAL] Web con Photoshop
« Respuesta #2 en: 01 de Noviembre de 2006, 13:36:22 pm »
No sabía que era... así...

Yo que me pensaba que se hacía el template en el photoshop, se guardaba como img.
la "troceabas" y luego ya, ibas colocando las imágenes... y tal...

básico pero muy buen tuto!

estoy pensando de bajarme de nuevo el PS  :P

http://www.pixel2life.com/tutorials/adobe_photoshop/website_layouts/

tutoriales para hacer diseños web; layouts

yo hice este una vez; (se muestra pequeño):

« Última modificación: 01 de Noviembre de 2006, 13:47:47 pm por sagitari »


http://freewebtown.com/sagitari

Web para aprender a hacer una web desde cero ^^

Videotutoriales y demás.

Desconectado JuAnCHO

  • PHPero Avanzado
  • ****
  • Mensajes: 327
  • Karma: 1
  • Sexo: Masculino
  • 33 Y Truco xD
    • Ver Perfil
Re: [TUTORIAL] Web con Photoshop
« Respuesta #3 en: 02 de Noviembre de 2006, 19:38:35 pm »
No sabía que era... así...

Yo que me pensaba que se hacía el template en el photoshop, se guardaba como img.
la "troceabas" y luego ya, ibas colocando las imágenes... y tal...
Si, es que a esto de hacer una web con photoshop ... no se le puede llamar hacer web !
Es como si te la dibujo a paint y te la cuelgo en un index (html o php, depende de la sangre ke llegue a la cabeza ... xDxDxD)
No hay mas palabras ... xD

-----------------------------------------------------------------
" A un gran corazón ninguna ingratitud lo cierra,
   ninguna indeferencia lo cansa ".

Desconectado Keon

  • PHPer@ Fijo
  • ***
  • Mensajes: 105
  • Karma: 0
    • Ver Perfil
Re: [TUTORIAL] Web con Photoshop
« Respuesta #4 en: 07 de Noviembre de 2006, 20:20:42 pm »
esta:
Lo primero que tenemos que tener es el diseño de la web pensado, luego lo pasamos al PS con un diseño bastante bueno.

1ºAbrimos un archivo del tamaño que queramos que sea nuestra web, despues ponemos todos los bloques y terminamos de diseñarlo. Al final del diseño damos a Acoplar Imagen.Quedara algo asi:
 -no e entendido bien :S

Para poder hacer el tutorial me tenia que inventar algo sobre la marcha, lo de que teneis que tenerlo pensado es para aplicar lo que yo hos estoy diciendo ahi. Es como tu sigues un tutorial, no sigues exactamente la firma (imagenes, fondos, etc) si no que la haces a tu estilo y lo que tenias pensado hacer.




Respeta las normas ;)

Desconectado WarezD@rK

  • PHPer@ Fijo
  • ***
  • Mensajes: 162
  • Karma: 8
  • Sexo: Masculino
  • Pasaba por aquí...
    • Ver Perfil
    • Ninguno
Re: [TUTORIAL] Web con Photoshop
« Respuesta #5 en: 04 de Febrero de 2007, 07:14:33 am »
Eso que dice Sagi de "procesar" la imágen para el diseño es lo que hago yo ^^ Aunque ya conocia esa opción, me gusta más no dejar que PhotoShop haga eso. Si el diseño es complicado yo lo dejo mucho mejor colocado todo.  :P



Ese diseño lo hice apartir de una imágen plana que creé en PhotoShop. Lo corté a mano y todas esas cosas. Es más divertido también xD

Saludos.
Trabajando en mi actual proyecto.

Desconectado Wold

  • PHPer@ Fijo
  • ***
  • Mensajes: 139
  • Karma: 2
  • Sexo: Masculino
    • Ver Perfil
Re: [TUTORIAL] Web con Photoshop
« Respuesta #6 en: 04 de Febrero de 2007, 16:36:31 pm »
yo lo hago como dice w@rez es mejor para editar el diseño si lo haces con photoshop i quieres poner otro bloque ? xD
:)

Desconectado JuAnCHO

  • PHPero Avanzado
  • ****
  • Mensajes: 327
  • Karma: 1
  • Sexo: Masculino
  • 33 Y Truco xD
    • Ver Perfil
Re: [TUTORIAL] Web con Photoshop
« Respuesta #7 en: 04 de Febrero de 2007, 18:32:03 pm »
Pues si lo haces con Photoshop, lo lógico sería que lo guardases en .pds con todas las capas. Asi es 100 % editable y le pueds añadir y quitar lo que quieras xD
Saludos^^

-----------------------------------------------------------------
" A un gran corazón ninguna ingratitud lo cierra,
   ninguna indeferencia lo cansa ".

Desconectado Wold

  • PHPer@ Fijo
  • ***
  • Mensajes: 139
  • Karma: 2
  • Sexo: Masculino
    • Ver Perfil
Re: [TUTORIAL] Web con Photoshop
« Respuesta #8 en: 04 de Febrero de 2007, 19:25:23 pm »
mas comodo como lo hago yo i w@rez
:)

Desconectado JuAnCHO

  • PHPero Avanzado
  • ****
  • Mensajes: 327
  • Karma: 1
  • Sexo: Masculino
  • 33 Y Truco xD
    • Ver Perfil
Re: [TUTORIAL] Web con Photoshop
« Respuesta #9 en: 04 de Febrero de 2007, 23:04:45 pm »
Un 90 % de los webmasters usan ese metodo. No es nada nuevo xD

-----------------------------------------------------------------
" A un gran corazón ninguna ingratitud lo cierra,
   ninguna indeferencia lo cansa ".

Desconectado mOrK

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 1.503
  • Karma: 43
  • :)
    • Ver Perfil
    • Sígueme en Twitter!
Re: [TUTORIAL] Web con Photoshop
« Respuesta #10 en: 04 de Febrero de 2007, 23:34:55 pm »
tanto? no creo....

Desconectado JuAnCHO

  • PHPero Avanzado
  • ****
  • Mensajes: 327
  • Karma: 1
  • Sexo: Masculino
  • 33 Y Truco xD
    • Ver Perfil
Re: [TUTORIAL] Web con Photoshop
« Respuesta #11 en: 04 de Febrero de 2007, 23:43:45 pm »
Yo hasta hace unos 3 meses no me habia enterao de que se podian hacer webs con Photoshop. El diseño claro, pero no darle links a los menús. Siempre habia diseñado la pagina y luego recortarla para pasarla a las tablas. Que esl o que hace todo el mundo, o casi. xD
Saludos !

-----------------------------------------------------------------
" A un gran corazón ninguna ingratitud lo cierra,
   ninguna indeferencia lo cansa ".

Desconectado mOrK

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 1.503
  • Karma: 43
  • :)
    • Ver Perfil
    • Sígueme en Twitter!
Re: [TUTORIAL] Web con Photoshop
« Respuesta #12 en: 05 de Febrero de 2007, 18:46:09 pm »
Un 90 % de los webmasters usan ese metodo. No es nada nuevo xD
Que esl o que hace todo el mundo, o casi. xD
Saludos !

Como quedamos? xDDD

Desconectado JuAnCHO

  • PHPero Avanzado
  • ****
  • Mensajes: 327
  • Karma: 1
  • Sexo: Masculino
  • 33 Y Truco xD
    • Ver Perfil
Re: [TUTORIAL] Web con Photoshop
« Respuesta #13 en: 05 de Febrero de 2007, 19:38:03 pm »
Lo del primer post, que el 90 % de los webmasters usaban ese metodo ... Me referia al metodo que nombró W@rez ... xD

-----------------------------------------------------------------
" A un gran corazón ninguna ingratitud lo cierra,
   ninguna indeferencia lo cansa ".

Desconectado WarezD@rK

  • PHPer@ Fijo
  • ***
  • Mensajes: 162
  • Karma: 8
  • Sexo: Masculino
  • Pasaba por aquí...
    • Ver Perfil
    • Ninguno
Re: [TUTORIAL] Web con Photoshop
« Respuesta #14 en: 09 de Febrero de 2007, 06:19:12 am »
Juancho fuiste preguntando uno por uno para sacar ese 90%? xD Pues sí, un 91% más o menos xD
Trabajando en mi actual proyecto.