PSD a HTML y CSS: mis márgenes son incorrectos

Tengo problemas para replicar los márgenes exactos del PSD en CSS. Cada vez que mido un margen con una herramienta de selección obtengo, por ejemplo, 32px. Luego puse esto en mi código CSS:

div {
margin-top:32px;
}

Pero a pesar de que el margen está configurado correctamente (comprobado con Firebug), el aspecto de ese elemento sigue siendo extraño, como si estuviera fuera de lugar. El margen parece demasiado grande, tengo que calcularlo a ojo después de configurar el PSD al 100% de vista en lugar de usar esos números sin procesar.

¿Cómo puedo configurar mi Photoshop para que me dé las medidas correctas que luego puedo aplicar en CSS para que los márgenes de PSD y CSS (y básicamente todas las medidas) coincidan?

¿Hay otras propiedades que alteran su CSS? ¿Estilos heredados, relleno, altura de línea, etc.?
No, estoy seguro de que no. Los números son correctos, todo lo que escribo en CSS funciona perfectamente, pero se ve completamente mal en comparación con el PSD. Tengo que hacer correcciones a los números. Por ejemplo, cuando hago una captura de pantalla del sitio web y la coloco sobre mi PSD, es fácil darse cuenta de que los elementos están apagados.
¿Tu imagen en Photoshop está configurada a 72 ppp?
No, es a 96 ppp. Esto es extraño, nunca lo cambié, podría haber sido un error, porque mi PS falló mucho la semana pasada. Esto debería solucionar el problema, ¿verdad?
72 ppp es la resolución de pantalla estándar de la web, por lo que debería brindarle una relación uno a uno entre su imagen cuando se ve al 100% en Photoshop y su navegador en la PC.
@digijim Deberías publicar eso como respuesta, esa es una muy buena llamada.
@digijim 72 ppp es lo que Photoshop considera 100%, pero no es la resolución de pantalla estándar. (No hay una resolución estándar y la gran mayoría de las resoluciones de pantalla son muy superiores a 72)
Además, creo que Photoshop ahora tiene 'tamaño real' como una de las opciones de zoom, que es completamente independiente de la configuración de dpi, y es lo que probablemente debería usar (a menos que estemos hablando de crear gráficos para pantallas retina, que es un otro problema...)
Finalmente (lo siento, me estoy quedando sin aliento), nada de esto debería importar. Siempre que mida en unidades de píxeles, el zoom en Photoshop no importará en absoluto. Ya sea que haya ampliado el 800% o el 50%, su herramienta de regla contará la misma cantidad de píxeles en la imagen.
Probablemente tenga más que ver con CSS que con PS. Inspeccione el elemento en DevTools (es decir, Firebug o Chrome devtools) y verifique todo el CSS: márgenes, rellenos, bordes. No solo del elemento, sino también de los elementos padre e hijo. Los navegadores a veces agregan rellenos o márgenes donde menos los espera. Un restablecimiento de CSS puede ayudar a eliminar márgenes y rellenos inesperados en su sitio. Además, espero que este no sea tu CSS real. Establecer un margen de 32 px en TODOS los divs es una forma muy mala y automáticamente dará como resultado una apariencia inesperada.
@PieBie: cambiar a 72 ppp solucionó todo. Caso cerrado :).
k. muy extraño de hecho.

Respuestas (2)

No existe necesariamente una correlación directa entre las medidas de píxeles en Photoshop y el funcionamiento de CSS en el navegador. En otras palabras, si necesita 32 px de espacio en su página, es posible que deba elegir algo como 28 px para tener en cuenta el margen o el relleno en otro elemento.

En general, es mejor diseñar cosas 'sueltas' para que las cosas puedan tener algunos píxeles de toma y daca. La perfección de píxeles en el navegador es un poco como inclinarse contra molinos de viento.

Aunque puede haber una causa real detrás de este problema específico, esta respuesta es la mejor en el gran esquema de las cosas. Diseñar para la perfección de píxeles en un medio tan interactivo e intercambiable como la web, especialmente en 2015 con el reinado del diseño receptivo, solo le causará dolor de cabeza.
Lo entiendo, pero algo tan simple como los márgenes medidos en un PSD deberían reflejarse muy de cerca en el CSS, no exactamente, pero ya sabes, al menos cerca. Los míos están muy lejos, a veces 1,5 o 2 veces más grandes. Tendré que ir con la segunda respuesta, porque resuelve directamente mi problema.

Es cierto que la resolución de la imagen no tiene sentido en la web. Lo que determina el tamaño de las imágenes son las dimensiones generales en píxeles de las imágenes en cualquier resolución de pantalla del dispositivo de visualización.

Pero a los efectos de juzgar la distancia de píxeles para el diseño web, si configura su imagen en Photoshop a 72 ppp, debería brindarle una relación uno a uno entre su imagen cuando se ve al 100% en Photoshop y su navegador (en es el nivel de zoom predeterminado) en una computadora de escritorio. Aquí hay un ejemplo. Tomé una pantalla de esta página y abrí la imagen resultante en Vista previa en mi Mac (usaba Photoshop, pero el BIOS de mi PC se rompió hace dos días). Moví la imagen para que esta página se mostrara en el fondo y vi los detalles de las imágenes. Observe la resolución de dicha captura de pantalla:

ejemplo de resolución web de 72dpi

Todos los elementos aparecen del mismo tamaño tanto en la página web en segundo plano como en la imagen de 72 ppp que se muestra al 100 % en Vista previa.

Los dispositivos móviles se mostrarán en resoluciones más altas, por lo que, naturalmente, sus elementos aparecerán más pequeños en esas pantallas. Pero será un cambio proporcional, por lo que la relación entre, digamos, una imagen y su borde/relleno, será proporcionalmente igual.

Esto es incorrecto. No hay una 'resolución de pantalla estándar web'. Es cierto que 72ppi en Photoshop es lo que se asignó al 'tamaño de píxel real', pero realmente no tiene una relación real con los gráficos web. Es correcto decir "suponiendo que no sea una imagen de retina, asegúrese de verla en tamaño real en Photoshop para medirla".
PSD a HTML y CSS: mis márgenes son incorrectos
RespuestasAquíPolítica de privacidad1y, 0v