Ayuda, Pasar PSD a HTML, pero con texto...

9andres · #1 (**permalink**) 12/09/2006, 11:49

Wenas, bueno esta debe ser la pregunta del millon, ya que la eh realizado año tras año y aun nadie me a dado una solucion... y eso que estoy en este foro desde que estaba en Amarillo usaba asp con sniff, etc, etc...

La pregunta, como paso un template de templateMonster o de donde sea o sea un archivo .psd de Photoshop o Fireoworks, a un hermoso Archivo HTML...

El logo que quiero editar es similar al de la pagina: http://www.programaswarez.com

Respuesta Clasica:

En Adobe Photoshop o Adobe Image Ready, vas a Archivo y pones Guardar para Web y ya esta.............

Exaxto ahora lo que tengo es un Archivo .html una carpeta "Imagenes" en las cuales tengo todas las imagenes del template cortadas..... pero esto no es lo que yo quiero en si........ yo quiero que las partes del template que eran Texto queden como si fueran texto..........

Las soluciones que me dieron fue borra el texto del template dejalo en blanco y pone las imagenes en el html como fondo de imagen.............

La verdad que esa solucion no me convence y no creo que sea asi......

Estoy seguro que Photoshop o Fireworks cuentan con alguna herramienta que haga esto automaticamente.......

A ver si algun alma con conocimientos me puede dar una mano, para que el texto no se me convierta en imagen............

Graciaaaaas

opeth · #2 (**permalink**) 12/09/2006, 12:15

talvez este enlace te ayude.

Saludos

NUCKLEAR · #3 (**permalink**) 12/09/2006, 12:49

TE DIGO LO QUE YO HAGO:
creo la imagen en ps , corto las zonas extactas donde ira el texto, no escribo el texto en la imagen, osea tengo solo la imagen cortada en las zonas donde ira el texto puesto que Iready las convierte en celdas, ahora exporto como html, tengo el html y las imagenes en la carpeta imagenes, abro el htnl en algun editor DW x ejemplo, ahora borro la imagen y la vuelvo a insertar pero ahora como fondo de la celda, asi se puede escribir dentro de la celda, le doy formato con css a la celda y listo.
espero me haya explicado bien.
Saludos

9andres · #4 (**permalink**) 12/09/2006, 13:04

Gracias, por responderme pero aun sigo con mi problema :(

opeth - Es la misma solucion que di en el post, lo que hace te exporta el psd a HTML, pero el texto del PSD tambien es una imagen, y deberia quedar el texto dentro de una celda no una imagen...

NUCKLEAR - No entendi muy bien lo que haces :s

Igualmente sigo pensando que debe a ver alguna forma que haga esto automatico......... mmm

seyacat · #5 (**permalink**) 12/09/2006, 13:47

Yo tambien luche como un mes contra eso, y sabes que conclui??

que html es más basura de lo que pensaba, incluso odiandolo aun...

No hay otra forma que no sea hacer los recortes de los slices y borrar el slice donde va el texto, luego pones esa misma imagen pero como fondo.

Creo que ya te la sabias :) X.

NUCKLEAR · #6 (**permalink**) 12/09/2006, 19:29

vaya si el html es mas basura de lo que..... espero q esto sea una broma, estas blasfemando!!! dios !! donde estas!!

bueno punto aparte: exportas la imagen a html, con las imagenes cortadas, esta te crea una tabla con celdas, en cada celda esta la imagen, simplemente borra la imagen y en la celda donde esta se encontraba ponla de fondo, y luego vas a poder escribir sobre esta imagen sin ningun problema, es facil, no se por que hay tanto lio!

9andres · #7 (**permalink**) 12/09/2006, 20:57

NUCKLEAR, conosco esa forma, es la de poner la imagen como fondo....... como puse arriba, el tema es que si la imagen ya tiene texto en la misma imagen y la pones como fondo......... pues ya me entiendes ?

Me parece muy extraño, muy raro que no halla una opcion o una solucion para esto...... o la unica solucion es editar el psd donde tienes texto dejarlo en blanco y luego poner la imagen como fondo ?.......

mmmmmmmmm tiene que a ver alguna opcion automatica, a ver si alguien sabe............

pichonservis · #8 (**permalink**) 17/09/2006, 12:52

bueno amigos

yo tampoco puedo pasarle de psd a html
bueno aki yo estoy utilizando el Fireworks .... espero me ayuden ...y alli le dejo una imagen...para que me digan que hacer....

Bueno gracias...

RiLaRos · #9 (**permalink**) 31/12/2006, 15:20

Hola, pues hasta donde tengo entendido eso no se puede hacer con ningun editor de imagenes, te sirven para crear el diseño y para eso tiene HTML y CSS para trabajar con el texto a tu gusto.

Si me equivoco, me gustaria que me corrigieran.

Saludos,
Ricardo La Rosa

Microbito · #10 (**permalink**) 31/12/2006, 16:52

Imagen de Ejemplo

No utilizo photoshop para exportar a web, esto lo hago en Fireworks.

Fireworks te da la opcion de exportar un SLICE como contenido HTML, solo cambia esa opcion en las propiedades del SLICE y luego edita el contenido con el boton EDIT que aparece debajo de la opcion que cambiaste. al exportar como HTML todo el documento el texto que agregaste en la edicion aparecerá como texto y no como HTML. ahora solo tienes que aplicarle CSS para darle estilo a tu texto.

no utilizo photoshop ni Iready para esto pero supongo que debe tener una opcion similar. en este mismo foro hay un tema donde tratan como pasar el PSD al fireworks incluyendo los layers intactos.

omegafunky · #11 (**permalink**) 31/12/2006, 17:17

el texto del psd siempre quedara como imagen asi que es tu trabajo copiarlo como texto =p saludos

djwarez · #12 (**permalink**) 04/01/2007, 11:50

Lo mejor es poner el texto con html, ya que al tenerla en la imagen se carga más, con respeto a todos los diseñadores graficos pero no es la mejor forma para esto deberás aprender css, hay manuales muy buenos, dense una vulelta por novedades de foros del web un post que dice concurso...

Esa fue mi pregunta desde cuando entré al foro, me daban soluciones pero nada accesibles, pues con esto estamos usando tablas para maquetar y no es la idea...

Bueno, aquí un tuto de diez entregas para pasar de psd a html, si así lo desean...

Pipeline · #13 (**permalink**) 06/03/2007, 15:03

Refloto esta rama por que estoy en una situacion similar. Tengo un psd con el diseño, y mi intencion es pasarlo a html+css pero en este caso intentando evitar el uso de tablas.
Hay alguna forma ( no tiene por que ser automatica ) de pasar una imagen psd a html+css sin usar tablas?
Si queréis puedo subir la imagen para que me aconsejen mejor, pero para mi es realmente complicado hacerlo sin el uso de tablas.

Un saludo y gracias.

Sette · #14 (**permalink**) 23/07/2008, 08:09

a mi tb me interesa aprender a pasar de psd a html+css, si alguien se anima a enseñar q nos avise

#15 (**permalink**) 23/07/2008, 11:48

hola!
hace unos años tu pregunta no tenia respuesta porque CSS y Photoshop estaban en pañales para lo que pretendes, hoy dia existen soluciones profesionales (contratar el servicio) y un par de soluciones mas personales (que yo conoza)

- psdcssonline.com (que es gratis, funciona online, pero esta en ingles) para que respete los textos tienes que seguir la guia de la web donde explican como conservar tus textos
http://psd2cssonline.com/node/17#text

- http://www.medialab.com/sitegrinder/ (un plugin para photoshop para pasar a html, en ingles y por desgracia de pago)

Charlyfn58 · #16 (**permalink**) 15/01/2010, 15:18

gracias a Ramonjosegn, ke publicó unos sitios muy interesantes... y gracias a las contadas pruebas ke hice... logré hacer lo ke en un principio Preguntas 9andres, akí les va en español:
1. Abrir el psd con el Photoshop.
2. Ctrl + Mayus + M, o vaya a Archivo luego Editar con ImageReady.
3. Presiona K o en la barra de Herramientas izquierda del ImageReady, selecciona, Herramienta Sector. Selecciona los sectores ke desees...
4. Generalmente el del centro es el ke lleva texto, por tanto, luego de crear todos los sectores, seleccionas el sector al ke kieras ponerle texto presionando la letra O, o simplemente seleccionando la Herramienta Seleccionar Sector en la barra lateral izquierda.
5. Vas al menu Ventana y te fijas si tú ImageReady tiene activada la pestaña Sector, si no está seleccionada, pues hazlo... ya la encontraste, ahora fíjate donde dice Tipo, ahí pones Sin imágen... ya está.... bueno, ya casi... si kieres pones un texto en la pekeña cagita de texto ke debe salir...
6. Ahora vas a Archivo, Ajustes de salida, Sectores, le configuras como deseas... en mi caso uso Genrar Tabla... das OK.
7 y último. En Archivo, das Guardar Optimizada... y ya está

florlangosta · #17 (**permalink**) 12/01/2011, 19:00

Hola
Para pasar de psd a html, lo mejor y mas profesional es hacerlo con HTML y CSS.
Asi es como lo hago desde hace muchisimos años y me ha dado excelentes resultados.

Si quieres informacion de maquetacion web, maquetacion css y conversion de psd a html, puedes pasar por el blog que estoy haciendo en:

http://psdahtml.wordpress.com

Saludos y espero les ayude !

Kurozaki · #18 (**permalink**) 12/01/2011, 20:39

Cita:

Iniciado por 9andres

Las soluciones que me dieron fue borra el texto del template dejalo en blanco y pone las imagenes en el html como fondo de imagen.............

Pues yo no veo otra respuesta, mas que esta.
Si, quieres editar el contenido o mejor dicho el texto, como le haras?
Volveras a usar dicha herramienta y luego colocarla nuevamente en la pagina?

Dices que la soolucion esa de borrar el texto, no te convence.
Pues no creo que haya otra. Esta es la que usa todo el mundo o mejor dicho, la mayoria.

galostar · #19 (**permalink**) 13/01/2011, 00:46

El diseño de las imagenes se realizan en photoshop, el texto si quieres que se identifique como tal es necesario realizarlo en html, html no es basura, simplemente hay que saber usarlo, no es por mala onda pero las cosas no son tan faciles como muchos creen, Photoshop = Imagenes Texto=Html, asi se hacen la cosas, si utilizas un css seria mas facil modificar el diseño posteriormente y ademas protegerias un poco tu pagina.

Hay que trabajar un poco amigo, si no quieres trabajar paguele a alguien que haga el trabajo, saludos

Y recalco no estoy peleando ni nada solamente te estoy diciendo que asi se hace sin ningun tipo de ataque personal o minimizando tu trabajo.

jluisfg · #20 (**permalink**) 22/06/2011, 10:07

Photoshpo y Fireworks si lo hacen, aunque es un problema porque cortan las imagenes como el programa "supone", lo mejor que puedes hacer es crear tus slices y exportarlas. Despues hacer tu html normal.