Los PSD (diseños de Photoshop) se crean básicamente solo como una señal visual de cómo deberían verse (no deben) sus páginas web.
Definitivamente puede lograr una conversión de píxeles perfectos [1] de su PSD a HTML, pero eso requerirá mucho trabajo innecesario .
Considero que la conversión de píxeles perfectos es innecesaria e inútil porque:
- ¿Cuál es el conocimiento técnico esencial para obtener un trabajo como desarrollador web o diseñador web?
- Cómo comenzar un diseño de sitio web
- Cómo diseñar un sitio web usando mi computadora
- ¿Cuáles son las mejores prácticas para las páginas de destino (contenido, imágenes, formularios de registro, botones)?
- Muchos dispositivos con una amplia gama de tamaños de pantalla.
Codificar sus páginas web píxel por píxel va en contra de los principios del diseño web receptivo [2], que es el enfoque principal del desarrollo del sitio web en estos días. - Más importante aún, las resoluciones de pantalla varían entre los diferentes dispositivos.
El significado de 1 píxel puede variar para dispositivos con diferentes resoluciones de pantalla.
Para un dispositivo, 1 píxel = 1 punto en la pantalla
Mientras, para otro dispositivo, 1 píxel = 2 puntos en la pantalla
Además, incluso si puede convertir su PSD a HTML con una alineación perfecta, eso solo funcionará en “la pantalla de su computadora” (o solo en las pantallas con el mismo tamaño y resolución), ya que otras pantallas tendrán resoluciones y tamaños diferentes .
Entonces, en cierto modo , es imposible obtener una conversión de píxeles perfectos y eso también para TODOS los tipos de pantallas .
Un consejo :
No se obsesione con codificar todo píxel por píxel, eso no lo llevará a ninguna parte.
En su lugar, trate de adaptarse al enfoque de diseño web receptivo y haga que su contenido se adapte a cualquier pantalla.
Notas al pie
[1] Respuesta de Andrew Williams a ¿Qué significa “píxel perfecto”?
[2] Diseño web receptivo – Wikipedia