Pasar un psd a html

future · #1 (**permalink**) 23/02/2006, 10:47

supongo q sta pregunta os la abran exo miles y miles d veces.... pro yo la repito xDDD, tngo una pag exa con photoshop como lo puedo pasar a html facilmente, me an comentado k tngo k ir cortando y pegando en el sitio k kiera.... pro no ai una forma mas facil????

daz · #2 (**permalink**) 23/02/2006, 11:08

No creo que exista una forma mas facil.
Cuando tienes un psd tienes una imagen.
Cuando tienes un html es el conjunto de imagnes, texto, tablas entre otros.

Ahora si quieres hacer tu web solo con imagenes lo más aconsejable es que esa gran imagen que es toda tu pagina la cortes en imagenes mas pequeñas y asi la carga será mas rápida

Si lo que quieres hacer es que tu pagina sea solo imagenes (que no es nada recomendable) puedes abrir tu psd en fireworks o en Image Really.
Alli seleccionas los cortes de tu imagen para que se convierta en varias imagenes; luego exportas y el programa que genera las imagenes cortadas y un hmtl, con las imagenes acomodadas en tablas.

matius · #3 (**permalink**) 23/02/2006, 11:40

aprendem html y algo de css.

lo demas viene con el tiempo, primero las bases y luego los adornos

future · #4 (**permalink**) 24/02/2006, 05:52

no si yo se html lo k pasa k me kedan un poco cutres y sosas, y cn photoshop quedan muxo mas curradas sabes?
creo darme cuenta d k no ai manera posible d acerlo, supongo k cn el flash si, pro tmp no lo se, kiero nuevas experiencias y me stan costando xDDD.

mon · #5 (**permalink**) 24/02/2006, 10:38

Hola future, en respuesta a tu consulta te diré que entiendo que tienes una foto grande que es el diseño de una página web, si es así esto te vale, lo que tienes que hacer es dividir esa foto en sectores con la herramienta sector o pulsando la letra k, digamos que el diseño consta de una cabecera un menu cualquiera, un cuerpo y un pie, como suele ser un formato convencional, divide cada cosa en sectores, ten en cuenta que cada sector es una imagen, si la imagen que va a ser la cabecera es grande, dividele en varias partes, así cargaran las partes por separado e irá más rápido. Supongamos que has diseñado unos botones muy chulos, bueno pues cada botón lo tienes que dividir en un sector al cual le puedes poner un vinculo desde el propio PhotoShop, esto ya es parte del manejo de PhotoShop, busca información o ayuda que es muy fácil, una vez que tienes todo dividido en sectores guarda la imagen y después vete a Archivo y a guardar para web, una abierta la ventana de guardar para web escoje .jpg y la calidad que te interese, después dále a guardar, le das un nombre y asegurate de tener seleccionado debajo del Nombre en Tipo, la opción HTML e imágenes (*.html), esto hará que te cree una carpeta con el nombre que acabas de poner y un archivo html comuesto de todas las fotos que no dejan de ser los sectores que antes creaste, haz pruebas hasta que des con lo que buscas. Si dices que sabes html esta es una buena opción para usar solo en el diseño no en la programación, ten en cuenta que no dejas de trabajar con imágenes y las imágenes pesan, prueba a abrir el archivo .html que te genera y mira como está hecho, esto te dará ideas para futuros diseños. Esta creo que es la forma que buscas de hacer la página, otra cosa es que sea la más adecuada, pero yo solo me limito a dar mi opinión de cómo creo que es la solución a tu consulta, venga salu2 y espero que te sirva de ayuda.

future · #6 (**permalink**) 25/02/2006, 11:38

os cuento, lo k e exo a sido abrir el psd cn el fireworks de macromedia y con una d la opciones se lo e pasado al dreamweaver y buala la pagina en html esta creada!!!! todas las imagenes me las a guardado en gif y no pesa nada, solamente 140kb!!! aora me falta centrarla y ponerle animaciones en flash! cuando ste terminada ya pondre enlace de ella. por cierto al pasarlo dl fireworks al dreamweaver se me a cortado la pag en las capas k tenia... asi k a ido d coña.
saludos y merci

donn · #7 (**permalink**) 07/12/2010, 14:09

Future: como le hiciste para pasar el psd de fireworks a dreamweaver con las capas que tenia? he intentado de todas las maneras posibles y no exporta las capas, lo exporta como una sola imagen.

Gracias.

rzkgraphics · #8 (**permalink**) 07/12/2010, 15:26

Cita:

Iniciado por future

no si yo se html lo k pasa k me kedan un poco cutres y sosas, y cn photoshop quedan muxo mas curradas sabes?
creo darme cuenta d k no ai manera posible d acerlo, supongo k cn el flash si, pro tmp no lo se, kiero nuevas experiencias y me stan costando xDDD.

Lo que tu quieres es SECTORIZAR tu diseño, esto te va a ser de gran ayuda. Tan solo ver.

http://www.youtube.com/watch?v=qwaaqVsXINM

ArturoGallegos · #9 (**permalink**) 07/12/2010, 15:42

Cita:

Iniciado por donn

Future: como le hiciste para pasar el psd de fireworks a dreamweaver con las capas que tenia? he intentado de todas las maneras posibles y no exporta las capas, lo exporta como una sola imagen.

Gracias.

Compañero si tiene una duda favor de abrir un nuevo post con su pregunta y con mucho gusto le ayudaremos por favor abstengase en el futuro de revivir temas viejos como este que es de hace 4 años

Cita:

Iniciado por rzkgraphics

Lo que tu quieres es SECTORIZAR tu diseño, esto te va a ser de gran ayuda. Tan solo ver.

http://www.youtube.com/watch?v=qwaaqVsXINM

y para usted creo que tampoco noto la fecha, aunque su aporte quizás le sirva a al compañero donn

ovech · #10 (**permalink**) 12/02/2011, 09:48

Aquí tienes la respuesta: http://www.youtube.com/user/electronicabarrios#p/a/u/0/hkWqSy3dZDo

Son 3 videotutoriales paso a paso. Te los recomiendo. Son de lo mejor que hay en la red.

ovech · #11 (**permalink**) 12/02/2011, 09:49

Aquí tienes la respuesta: http://www.youtube.com/user/electronicabarrios#p/a/u/0/hkWqSy3dZDo

jluisfg · #12 (**permalink**) 22/06/2011, 10:41

Lo ideal sería que existiera un botón que lo hiciera solito no? jajaja pero si lleva su trabajo la verdad. Empieza poco a poco, corta los elementos mas grandes con la herramienta slice y dales nombre a todos para que no te revuelvas. Despues exportas con Save for Web and Devices y te genera una carpeta "images". Ahi tienes todos tus elementos graficos, ahora si tienes que darle un rato al html. Si tienes mas dudas avisame...

florlangosta · #13 (**permalink**) 19/10/2011, 08:43

Seria genial que lo hiciera automatico jeje, pero no es asi.
Para pasar de PSD a HTML, lo mejor es hacerlo manualmente recortando los slices y maquetado de forma tradicional con HTML y CSS.

Asi lograrás los mejores resultados, incluso es lo ideal para la indexacion en buscadores como Google y Yahoo.
Asi se hace de forma profesional.

Saludos!