Comunidad PHPeros

Imagen y Diseño => Diseño General => Tutoriales y Manuales => Mensaje iniciado por: Keon en 01 de Noviembre de 2006, 10:21:57 am

Título: [TUTORIAL] Web con Photoshop
Publicado por: Keon 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:

(http://img214.imageshack.us/img214/7641/tutoriall1tw6.jpg)

2ºDespues con la herramienta Slice Tool ((http://img204.imageshack.us/img204/4922/tutorial2rq7.jpg)) vamos recuadrando todas las secciones que queramos que tengan hipervinculo, de esta manera:

(http://img206.imageshack.us/img206/1967/tutorial3bo7.jpg)

Y quedara mas o menos asi:

(http://img218.imageshack.us/img218/9149/tutorial4ge1.jpg)

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

3ºDespues vamos a Archivo>Guardar para Web:

(http://img88.imageshack.us/img88/3103/tutorial5dv1.jpg)

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

(http://img174.imageshack.us/img174/518/tutorial6fj9.jpg)

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
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: Drek 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
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: sagitari 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):

(http://i72.photobucket.com/albums/i195/sagitari/layout.jpg)
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: JuAnCHO 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
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: Keon 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.
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: WarezD@rK 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

(http://img160.imageshack.us/img160/9426/webgllsc2.th.png) (http://img160.imageshack.us/my.php?image=webgllsc2.png)

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.
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: Wold 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
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: JuAnCHO 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^^
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: Wold en 04 de Febrero de 2007, 19:25:23 pm
mas comodo como lo hago yo i w@rez
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: JuAnCHO en 04 de Febrero de 2007, 23:04:45 pm
Un 90 % de los webmasters usan ese metodo. No es nada nuevo xD
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: mOrK en 04 de Febrero de 2007, 23:34:55 pm
tanto? no creo....
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: JuAnCHO 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 !
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: mOrK 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
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: JuAnCHO 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
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: WarezD@rK 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
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: JuAnCHO en 09 de Febrero de 2007, 08:55:59 am
Juancho fuiste preguntando uno por uno para sacar ese 90%? xD Pues sí, un 91% más o menos xD
jajajajajaja, Solo sé, que todo mis contactos de msn, amigos del pueblo, amigos de fuera ... etc, usan ese método.
Y por todas las webs que he visto, siempre lo hacen así.
Por eso he puesto un '90%' imaginario xD.
Dime tu cuantas webs son una 'imagen' con links. xD
Saludos
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: mOrK en 09 de Febrero de 2007, 14:00:19 pm
Pues no sé en que web entraras tu xDD

Yo he visto bien pocas... :S
Título: Re: [TUTORIAL] Web con Photoshop
Publicado por: JuAnCHO en 09 de Febrero de 2007, 16:48:24 pm
Pues no sé en que web entraras tu xDD

Yo he visto bien pocas... :S
Por eso mismo ...
Por ahora, no he visto ninguna web hecha con "photoshop" que tenga un número de visitas considerado.