¿Hay alguna forma de asegurarme de que mis diseños PSD y HTML estén perfectamente alineados?

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:

  • 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

Related Content

Bueno, en primer lugar, intenta crear PSD Acc. a marcos como: Bootstrap, Foundation, MaterialiseCSS, etc. Tenga en cuenta la estructura y cree una.

Ahora si ya has creado PSD. Te sugiero que uses un editor de código moderno y de código abierto que comprenda el editor de texto de “Brackets” de diseño web, puedes importar PSD allí y crear CSS Acc. necesitar. Creo que también genera CSS para ti. No lo he usado mucho, pero pruébalo.

Gracias, todo lo mejor

Esta es una forma de pensar obsoleta sobre las composiciones de Photoshop, debido al diseño receptivo.

Es mejor diseñar cómo debería verse el sitio en diferentes puntos de interrupción (dónde deberían estar los elementos de nivel de bloque, dónde deberían ajustarse, etc.), y obtener un tamaño de fuente básico / cara de fuente y el otro conjunto de reglas básicas, y luego permitir el contenido para expandir o contraer con el tamaño de la ventana gráfica.

La elección de diseños perfectos de píxel por píxel ya no es cómo se hacen las cosas.

More Interesting