convertir PSD a la página web

Question

estoy aprendiendo web dev y ya estoy stucked en algún momento ..

¿Cómo se convierte una plantilla PSD a un sitio web HTML/CSS?

He recortado toda la parte de la imagen y las guardé en .gif por separado, ¿pero luego? ¿Tengo que colocarlos manualmente en una plantilla vacía de Dreamweaver? Pensé que había una forma automática de hacerlo ...

Además, he intentado "Guardar para web y dispositivos ..." pero al guardar, ¿crea un archivo .html y una imagen única que contiene cada elemento? ! Esperaba varias imágenes para poder reorganizarlas en dreamweaver.

Answer 1

1. Mientras que ciertas aplicaciones anuncian/proporcionar la automatización del proceso de "conversión" de gráfica compuesta de diseño web que desea evitar el uso de esas características. Le causarán más problemas de los que valen. Especialmente si va a usar CSS para el diseño (que recomiendo mucho). Eso no quiere decir que esas características no tienen algunos usos válidos limitados (más sobre esto en el punto 2) simplemente que no van a generar mágicamente su sitio a partir de un gráfico.
2. Para usar "Guardar para Web ..." debe usar la herramienta de Corte para cortar la imagen en las diferentes imágenes que necesita para el diseño. Luego, cuando guarde para web y deices con html, exportará el html/css y las imágenes. De nuevo, esto no es magia y es probable que tengas que volver a hacer la mayor parte de lo que se hizo por ti, por lo que es inútil para algo más que cortar un área determinada del diseño (por ejemplo, un solo menú).

No hay una forma totalmente automatizada de hacerlo, en términos generales porque dependiendo de lo que necesita el diseño para hacer tiene que hacer las cosas de diferentes maneras y mientras es teóricamente posible dar cuenta de todo lo posible los requisitos potenciales en una bonita GUI de exportación no son realmente factibles.

Lo importante es hacer esto, tienes que aprender HTML/CSS. Y cuanto más aprenda, más odiará Dreamweaver (al menos en "vista de diseño"). Garaunteed.

Answer 2

Sí, el diseño web no funciona por arte de magia. La forma correcta de hacerlo es escribir manualmente el código real que coloca los elementos, no simplemente colocarlos en su lugar en Dreamweaver. Hay un montón de buenos tutoriales por ahí, consulta los siguientes, por ejemplo:

• http://net.tutsplus.com/videos/screencasts/how-to-convert-a-psd-to-xhtml/
• http://www.devwebpro.com/creating-css-layouts-the-best-tutorials-on-converting-psd-to-xhtml/

Answer 3

Bienvenido a la realidad.

Tendrá que cortar y cortar en ti mismo (bueno, cortar y cortar la imagen usted mismo, pero no cortar por sí mismo no importa cuánto desee), y luego coloque cada parte individual en su HTML o plantilla.

Answer 4

This puede ayudarlo, lo guiará en el proceso.

Answer 5

Hay una serie de servicios automatizados que convierten PSD para usted:

• http://converxy.com
• http://psd2htmlconverter.com/en/
• http://www.psdtoweb.de/
• http://csshat.com/

Sin embargo, es posible que también desee considerar un enfoque basado en los servicios también. Existe una comunidad próspera de cortadoras profesionales (solo google "psd to html" y verás a qué me refiero).

También puede intentar volver a diseñar a partir de un programa o marco como:

• http://html.adobe.com/edge/reflow/
• https://webflow.com/
• http://www.ekomobi.com/en/home.html
• http://macaw.co/
• http://foundation.zurb.com/
• http://getbootstrap.com/
• http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html

Realmente depende de su presupuesto, los plazos de entrega y su conjunto de habilidades.

Soy un gran defensor de entender algo realmente bien antes de tratar de automatizarlo. Entonces, como han dicho los otros carteles, rebanar por cero (codificación manual) es muy valioso, especialmente si aún no lo entiendes bien. Sin embargo, es posible que no le interese invertir el tiempo necesario para lograr una buena comprensión del tema. Y, eso está perfectamente bien también.

Creo que, al final del día, no hay una solución "correcta". Diferentes personas tienen diferentes requisitos que cambiarán la elección.