¿Cuáles son las mejores prácticas de PSD a HTML con HTML5?

No seguiría intentando aprender a dividir un PSD para HTML. Esta práctica está desactualizada y solo te lastimarás en el futuro. En lo que respecta a los "estándares actuales", la gente suele codificar en un IDE. Una cosa que debe comprender con el corte es que si tiene un sitio web receptivo, pasará mucho tiempo tratando de cortar un segmento y su sitio web será lento con todas las imágenes. Solo debe usar una imagen para su uso previsto, una imagen. Con CSS3, SVG y jQuery de hoy, debería poder codificar todo lo que necesita en lugar de usar una imagen de corte.

Estoy confundido por el flujo de trabajo y necesito algunas guías paso a paso sobre cuál es exactamente el proceso.

Dudo que obtengas un tutorial paso a paso aquí, pero tenemos:

• ¿Cuáles son los pasos para diseñar un sitio web?
• ¿Cuál es la diferencia entre wireframes y maquetas?
• ¿Cuál es tu flujo de trabajo ideal para el desarrollo web?

¿Qué se sigue haciendo exactamente en psd y por qué?

Algunos todavía usan Photoshop para desarrollar una maqueta del sitio y, si tiene capacidad de respuesta, puede diseñar en función de los puntos de interrupción de CSS específicos. Prefiero Illustrator por su función de mesa de trabajo y, por lo general, cuando desarrollo en IA, puedo exportarlo como SVG.

¿Cómo sabemos exactamente dónde colocar las cosas?

Eso dependería del diseño.

Si está atascado en la mentalidad de cuadrícula, siempre puede aprender a usar Foundation o Bootstrap, que es conocido por usar una estructura similar a una cuadrícula:

Fundación :

Arranque :

¿Cuáles son las mejores prácticas de PSD a HTML con HTML5?

No hay uno. Gran parte de la industria no considera que diseñar en Photoshop sea una buena práctica.

Cuando los equipos diseñan en Photoshop, tienden a no diseñar con HTML, que es en última instancia lo que el sitio debe incorporar. Como tal, muchos argumentan (al igual que yo) que su diseño debe comenzar en HTML. Puede alternar entre HTML y Photoshop, pero no intente diseñar todo el sitio o la página en Photoshop antes de tocar HTML.

La conversión de un medio a otro siempre introducirá ineficiencias. Lo mejor es esforzarse por diseñar en el medio en el que finalmente se entregará el producto.

Estoy de acuerdo con RayC: por lo general, "corto" y "exporto para la web", oculto capas y selecciono ciertos cortes cuando los necesito. Siempre uso CSS para la imagen de fondo y/o las imágenes de la tabla, luego confío en HTML para la esencia. Parece que las reglas se usan para la parte de corte. Si vas a Slice > Slice Tool, verás un botón que dice "Segmentos de guías"; esto cortará tu imagen según las ubicaciones de tus reglas. PSD es solo parte del diseño; exportar para la web como HTML e imágenes le dará lo que necesita para Dreamweaver o cualquier otro software HTML.