¿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

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

Si me convierto en un programador profesional, diseñador web, desarrollador de aplicaciones Android / iOS y comercializador en línea, ¿cuánto dinero podría ganar en línea?

Si tomo una captura de pantalla de un sitio web y la uso en mi propio sitio web, ¿estoy violando alguna ley de derechos de autor?

Quiero aprender a diseñar. ¿Lynda.com es un buen lugar para comenzar?

Vengo de un entorno no tecnológico y estoy interesado en aprender el desarrollo web. ¿Alguien puede guiarme por dónde empezar?

Conozco diseño y codificación web. ¿Qué cosa creativa debo hacer?

Estoy trabajando en el nuevo sitio web de ofertas y devolución de efectivo dealdhaba.com ¿Necesito ayuda sobre cómo mejorar la presencia en el mercado y mejorar las estadísticas?

¿Estaría en desventaja aprendiendo HTML y CSS como principiante en el desarrollo web?

No sé nada sobre diseño web, etc. ¿Funcionaría comprar un sitio web generador de dinero y externalizar su mantenimiento?

Estoy construyendo un sitio web para mi nueva empresa, que también es el primero. ¿Está bien construir un sitio web en GoDaddy o Wix usando sus herramientas de desarrollo web basadas en plantillas? Si es así, ¿por qué las personas codifican sus propios sitios web?

Los encuentro casi en cada sitio web que visito. ¿Quién los hace y para qué sirven esos anuncios falsos?

Estoy construyendo un sitio web y la empresa que estoy contratando está usando WordPress. Dicen que será una semana de trabajo y me están cobrando $ 3k. Son solo imágenes y videos y proporcioné todo el trabajo gráfico. ¿El precio es justo?

Recientemente he lanzado creativorama.com. ¿Alguien tiene algún consejo sobre qué mejoras deben hacerse para aumentar las conversiones?

Quiero aprender el desarrollo web desde el principio, ya que no tengo experiencia alguna vez. Cual es la mejor manera?

Actualmente estoy trabajando como diseñador web. ¿Cuál puede ser una mejor posición para mi próximo trabajo?

Soy un diseñador de UX / UI de nivel medio (con más experiencia en el lado de UI). ¿Debo unirme a una empresa grande (y especializarme en riesgos, que no quiero hacer), o una empresa más pequeña (y estabilidad de riesgo)?