Photoshop a Dreamweaver.

DrRow · #1 (**permalink**) 19/01/2008, 12:51

Buenas.
Estoy empezando a diseñar webs en photoshop y pasarlas a HTML, he hecho todo el diseño con el PS, y distribuido cada imagen deshaciendo así la web en distintos sectores.
Ahora vienen los problemas, cuando me voy a dreamweaver, no se como poner imágenes encima de el diseño (porque el diseño es de imágenes), tampoco se como agregar texto al diseño, solo puedo en áreas vacías... no encima de el template, este tipo de cosas que te vuelven loco nada más empezar con esto, si alguien me puede ir explicando, o si sabe de buenos tutoriales...

Se lo agradecería mucho.

Saludos. Row.

hades87 · #2 (**permalink**) 19/01/2008, 15:08

para empezar te aconsejo que te dejes de usar el photoshop para crear webs y aprendas a usar css combinado con html y le darás mas maniobravilidad a tus webs.

Para hacer webs en photoshopp, tu creas 1 nueva imagen haces lo que quieras y luego lo divides en sectores. Luego guardas para web como imágenes & html.

DrRow · #3 (**permalink**) 20/01/2008, 10:18

Cita:

Iniciado por hades87

para empezar te aconsejo que te dejes de usar el photoshop para crear webs y aprendas a usar css combinado con html y le darás mas maniobravilidad a tus webs.

Para hacer webs en photoshopp, tu creas 1 nueva imagen haces lo que quieras y luego lo divides en sectores. Luego guardas para web como imágenes & html.

Eso es lo que hago. Dividir en sectores y guardar como HTML...

jcarrascal · #4 (**permalink**) 20/01/2008, 10:47

Hola DrRow

Cita:

Iniciado por DrRow

Ahora vienen los problemas, cuando me voy a dreamweaver, no se como poner imágenes encima de el diseño (porque el diseño es de imágenes), tampoco se como agregar texto al diseño, solo puedo en áreas vacías... no encima de el template
...

Cuando exportas desde Photoshop normalmente terminas con un diseño de tablas. Entonces tienes dos opciones: Si quieres que solo quede la imágen la insertas desde el toolbar con una etiqueta <IMG>. Si quieres agregar texto SOBRE la imagen colocas la imágen como fondo (abajo, en la venta de propiedades) de la celda.

Suerte.

DrRow · #5 (**permalink**) 20/01/2008, 11:19

Cita:

Iniciado por jcarrascal

Hola DrRow

Cuando exportas desde Photoshop normalmente terminas con un diseño de tablas. Entonces tienes dos opciones: Si quieres que solo quede la imágen la insertas desde el toolbar con una etiqueta <IMG>. Si quieres agregar texto SOBRE la imagen colocas la imágen como fondo (abajo, en la venta de propiedades) de la celda.

Suerte.

No encuentro lo de enviar como fondo. :S

feral · #6 (**permalink**) 20/01/2008, 11:38

El photoshop no es muy bueno con esa tecnica .. eso lo solia hacer el image ready (que venia con el photoshop) , que por cierto como adobe lo ha depreciado en favor de fireworks es gratuito ahora.
Antes de exportar a html hay que asegurarse que cada sector es del tipo adecuado que tu deseas, hay sectores de usuario, automaticos, semiautomaticos...puedes crear sectores de imagen, tabla..., coloreados, con texto... pero una vez exportado tienes que navegar por el codigo si quieers hacer cambios, es decir tienes que saber codificar (o hacer los cambios en el original y volver a exportar).
Y si alguien sabe codificar para que iba a exportar un psd como html perdiendo toda la flexibilidad y el control del codigo?.

Ese sistema no es adecuado para crear webs.

buzu · #7 (**permalink**) 20/01/2008, 16:19

NOOOOOOOOO!!!!!!!! Una web hecha en PS es una pesadilla hecha realidad. No, ni aun jugando, no desarolles web en PS esa es una funcion que nunca devio haver sido agregada al PS.

1.- Mata la usabilidad por completo: Cuando desarollas usando PS terminas con una "web" de imagenes. En otras palabras, un monton de imagenes colocadas en un lugar determinado; esto trae como consecuencia que los lectores no puedan aumentar el tamaño de tu texto como normalmente lo puedes hacer con una pagina desarollada con (X)HTML. Ademas los programas para ciegos no leeran la imagen... Usabilidad = 0.

2.- Aumenta los costos: Una imagen que diga "Esta es la web de Fulanito" siempre va a ser mas pesada que un simpletexto que diga "Esta es la web de Fulanito". Esto aumenta la transferencia de tu web cada vez que un usuario ingresa en ella. Ademas, cada vez que necesites o quieras cambiar el contenido tendras que hacerlo todo otra vez. Sin embargo con una web "normal" no es asi y mucho menos si esa web esta basada en PHP y bases de datos. Ademas, no permite el copiado y pegado del texto lo cual es muy util. Apesar de que muchos @#$@#$ quieren evitar esa funcion en su pagina (no se por que demoni...) esa es una funcion necesaria y util. supon que alguien quiere copiar y pegar la direccion de tu negocio para buscarla en google maps o copiar y pegar el numero de telefono para agregarlo a su libreta de direcciones? Aun hay mas desbentajas en cuanto a suabilidad pero por ahora paso a otro tema (esto iva en el punto numero 1)...

3.- Limita el diseño. Si, muchos diran que al contrario, te permite usar la tipografia que queiras y que los elementos siempre se veran exactamente igual y no se que mas argumentos que no valen en esta dicucion. Supon que quieres hacer un diseño liquido. No se puede! no usando PS. Si no sabes lo que es un diseño liquido dejame aclararte el panorama. Un diseño liquido es aquel que tiene la capacidad de ajustarse al tamaño de la ventana. Intenta haciendo mas grande o mas chica la ventana en tu navegador y veras que la pagina que estas viendo ahora en cierta manera se ajusta a la ventana; eso es diseño liquido y lamentablemente no se pude lograr con PS. Otra limitante en el disenño es cuando tratas de usar algunos efectos al mas puro estilo web 2.0, intenta hacer que un recuadro donde tienes un texto se expanda y se contraiga usando PS... se puede? Ademas, PS es un programa para la edicion de fotografias que puede ser usado tambine como programa para diseño grafico pero, Diseño web NO es diseño grafico.

4.- No hay semantica: Si, soy partidario de la semantica asi como de los estandares. Cuando digo que no hay semantica me refiero a que no hay forma de especificar cuando un texto es un parrafo o un titulo o un abrebiacion o una cita o un elnace... Nada, no hay nada de semantica, todo es imagenes. Y que decir de los estandares.

Triste situacion encontrarse con una web hecha en PS.

Aun hay mas cosas que decir y temas que discutir pero por ahora creo que eso te apmlia el panorama y te alerta de el por que no deverias usar PS para desarollar web.

Muy mala escritura esta vez pero ando de prisa, espero poder volver luego y editar...

hades87 · #8 (**permalink**) 20/01/2008, 17:12

yo ando de acuerdo con buzu, yo antes las hacia con PS por la razón de que quedaban mas "chulas" las webs, y parecían mas profesionales. Pero en realidad es algo contra los estándares y contra la usabilidad.

Ahora ando modificando las webs que tenía en tablas y las paso a formato xhtml+css, de esa forma con solo cambiar el css un poco tienes otra web totalmente distinta.

DrRow · #9 (**permalink**) 21/01/2008, 14:53

Muchas gracias buzu, la verdad que me has aclarado varios puntos.

Ahora necesito algún sito o algo para empezar con esto...

hades87 · #10 (**permalink**) 21/01/2008, 18:30

mírate mi firma, ahí te dejo un tutorial de css, además en este foro hay muchas faqs de css, y si en google pones: maquetar con css te saldrán muchos mas ^^

buzu · #11 (**permalink**) 22/01/2008, 13:14

ve a :
http://w3schools.com/

es un buen lugar para empezar...

Carlmycol · #12 (**permalink**) 27/01/2008, 09:55

xD yo uso Photoshop para las Imagenes de Fonto de resto en Dramwvear Uso layers para el titulo, textos etc... Yo tambien uso css... Las Tres cosas xD y me va bien...Bien ;)

Salu2

demiantriebl · #13 (**permalink**) 05/06/2008, 22:27

hay muchas formas, lynda.com, la hace de otra manera, hace una pagina maquetada en photoshop, lo guarda como jpg, en dreamweaver lo poner como fondo de plantilla (no se coloca dentro del html si no que se ve en el dreamweaver nada mas) y luego coloca divs (los layers del css) de acuerdo donde necesesiten, si es un color plano, va color plano, si es un degrade es una imagen de 1 solo pixel y ponen repeat (con eso se ahorra muchisima memoria), y despues las imagenes (como titulos con muchos efectos q no pueden ser texto plano, o no son de tipografias estandares), hace un slice y lo exporta y lo coloca en el respectivo lugar, asi trabajo yo, mas o menos.

oligc90 · #14 (**permalink**) 09/09/2008, 06:45

Prefiero usar css, antes de usar photoshop.

DragonX · #15 (**permalink**) 09/09/2008, 07:02

Cita:

Iniciado por oligc90

Prefiero usar css, antes de usar photoshop.

Una cosa no tiene nada que ver con la otra!

miguezjose · #16 (**permalink**) 28/04/2011, 23:07

por lo que veo hay muchos comentarios, pero nadie sabe decir la respuesta correcta... yo tengo el mismo problema, hago la plantilla web desde photoshop, pero a la hora de agregar texto y poner los link en los iconos creados no tengo ni la menor idea.
solicito ayuda

nedyer · #17 (**permalink**) 29/04/2011, 21:03

Cita:

Iniciado por miguezjose

por lo que veo hay muchos comentarios, pero nadie sabe decir la respuesta correcta... yo tengo el mismo problema, hago la plantilla web desde photoshop, pero a la hora de agregar texto y poner los link en los iconos creados no tengo ni la menor idea.
solicito ayuda

XD si ,ser novato es un dolor de cabeza cuando quieres hacer algo increíble pero no sabes por donde empezar, XD bueno puedo ayudarte pero tendría que hacer un tutorial Oo, si quieres hacer la web con photoshop y dreamweaver no se si lo podría dejar aquí mismo..