¿Necesito crear mis imágenes al doble de las dimensiones de píxeles en una pantalla retina?

Acabo de recibir una nueva Macbook Pro con Retina y no sé cómo atacar mis PSD.

Si estoy diseñando un sitio que tiene 14pxun tamaño de fuente, ¿debería crearlo 28pxen Photoshop para ver cómo se verá en CSS en una pantalla estándar?

O si mi sitio web debe tener un 60pxencabezado alto, ¿debería hacerlo 120pxen Photoshop?

Supongo que estoy confundido porque el CSS sigue siendo el mismo, pero me pregunto si debería duplicar todo en Photoshop para obtener el aspecto que tendría en CSS en una pantalla que no sea retina.

Respuestas (4)

Si estás preguntando:

"Acabo de adquirir una pantalla retina y me di cuenta de lo borrosos que se ven algunos gráficos web, incluso cuando se guardan en el tamaño real en el que se usan. ¿Se deben guardar imágenes para la web del doble del tamaño porque hay pantallas retina por ahí?"

Entonces esta es mi respuesta:

Estás en lo correcto. Debe hacer que sus imágenes para la web tengan el doble del tamaño que realmente necesita, pero no porque ahora tenga una pantalla retina, sino porque existen dispositivos con pantallas retina como la suya que se usarán para navegar por el sitio web que está creando. Pero debe establecer las dimensiones de sus imágenes en CSS en el tamaño real (no en el tamaño doble). Por ejemplo

  • Necesitas un icono de 20x20
  • diséñelo y guárdelo como una imagen de 40x40
  • cuando lo uses en la pagina web indica mediante CSS que es una imagen de 20x20

La imagen se mostrará como una imagen de 20x20, pero dado que la retina tiene una mayor densidad, utilizará 4 píxeles "físicos" (2x2) para mostrar cada uno de los píxeles "convencionales".

Cuando la página se ve en pantallas con densidad regular, los navegadores bajarán la muestra de la imagen para que puedan mostrar cada píxel "convencional" usando solo un píxel "físico". La imagen seguirá siendo de 20x20. La diferencia será (la mayoría de las veces) imperceptible.

Si la diferencia es notable debido al muestreo descendente que introduce artefactos, sugiero usar consultas de medios en CSS para proporcionar diferentes imágenes según la resolución de la pantalla.

Físico y convencional no son términos estándar. Los inventé.

No creo que el OP esté preguntando cómo crear imágenes para pantallas retina, sino cómo crear imágenes en una pantalla retina para pantallas estándar.
Ah, claro. Sin embargo, mi respuesta todavía se aplica. Al diseñar para la web (ya sea usando una pantalla Retina o no), dado que las pantallas Retina existen, los elementos gráficos deben guardarse el doble del tamaño (que se especificará en CSS) y/o proporcionar dos imágenes diferentes mediante consultas de medios. Uno nunca sabe qué tipo de monitor o dispositivo puede tener el visitante.
Si la pregunta es "tener una pantalla retina en un sistema implica que Photoshop me dice que mi imagen es de 20x20 cuando en realidad es de 40x40", creo que la respuesta es "no".
Creo que esta respuesta es muy engañosa. Independientemente de lo que OP elija diseñar, el hecho de que ahora estén usando una pantalla retina no debería cambiar las dimensiones en las que crean las imágenes. Si desea diseñar para retinas mientras usa una pantalla retina, elija exactamente las mismas dimensiones que si no estuviera usando una pantalla retina. Si solo desea diseñar para no retinas mientras usa una pantalla retina, elija exactamente las mismas dimensiones que si no estuviera usando una pantalla retina
Edité mi respuesta. Sin embargo, es una buena práctica guardar imágenes para la web del doble del tamaño que se usarán (o servir diferentes imágenes para diferentes resoluciones).
Es mejor tener dos conjuntos de imágenes para la web y seleccionar cuál usar en función de un filtro css. Entregar imágenes de tamaño cuádruple (duplicar una imagen en ambas direcciones cuadriplica efectivamente los píxeles de la imagen) es una pérdida de ancho de banda y procesamiento del navegador, especialmente cuando se trata de dispositivos móviles que no tienen pantallas retina.

Creo que está preguntando cómo diseñar mientras usa una pantalla retina, en lugar de preguntar cómo diseñar para pantallas retina. No necesita cambiar nada sobre las dimensiones que elija.

Si crea un encabezado de 120 px en su pantalla retina, aparecerá con una altura de 120 px en una pantalla que no sea retina; no necesita cambiar su comportamiento porque está usando una pantalla retina.

Mac OS X escala todo lo que ves entre bastidores, de modo que cuando creas una imagen de 100 x 100 píxeles en Photoshop, en realidad ocupa 200 x 200 píxeles en tu pantalla. Si duplica los píxeles usted mismo, tendría una imagen de 200x200px que se muestra a 400x400px, que no es su objetivo.

Si desea una prueba de esto, intente crear una imagen de 100x100 en Photoshop, luego use CtrlShiftCmd4para tomar una captura de pantalla. Ahora, CtrlVen una nueva capa, la captura de pantalla tendrá el doble de las dimensiones de la imagen.

Si desea diseñar para pantallas retina, cualquier consejo que se le dé con respecto a las dimensiones no tiene nada que ver con el tipo de pantalla que está utilizando.

Solo para tratar de aclarar mi punto:

Me pregunto si debería duplicar todo en Photoshop para obtener el aspecto que tendría [...] en una pantalla sin retina .

Para producir algo que se vea como si no tuviera retina, se produce exactamente lo que se hacía antes.

Para producir un gráfico de doble resolución, que solo las retinas pueden mostrar completamente (aunque, por supuesto, un navegador puede escalarlo en una no retina), de hecho duplicaría la resolución.

Pero mi punto es que tendrías que hacer eso incluso si no estuvieras usando una pantalla retina en este momento.

Pero, ¿aún no querrías exportar un 16x16ícono 32x32para Mac? Supongo que estoy un poco confundido acerca de cómo funciona esto.
@Johannes Sí, para hacer un uso completo de la resolución de la retina, pero ese es mi punto, dijo "para macs", si elige admitir retinas, querrá exportar a una resolución de 2x si está trabajando en una pantalla de retina, una regular pantalla, o un Osbourne 1 . OP no está preguntando sobre la elección de dimensiones para las retinas, están preguntando si su comportamiento debe cambiar ahora que están diseñando en uno.
@Johannes Sin embargo, cuanto más lo repito, más sospecho que ahora podría querer diseñar para retinas, porque ahora él mismo tiene una. Pero creo que sería fácil confundirse por el hecho de que cuando creas una imagen de 100x100 en Photoshop, tu pantalla la muestra a 200x200, así que supuse que ese era el malentendido. Ah bueno..

Tiene razón: en este momento, no hay una manera fácil de evitar las pantallas retina que no sea duplicar la resolución de sus PSD y trabajar con el doble de píxeles.

En realidad, es mucho más fácil de lo que parece y se presta bien a un proceso de trabajo no destructivo (p. ej., usar polígonos de Photoshop para formas estándar, vectores para iconos sólidos y formas compuestas, implementar efectos de capa y modos de fusión, usar objetos inteligentes para gráficos de trama etc). Soy un gran defensor de evitar la rasterización a menos que no tenga otra opción, solo en casos como este en los que su trabajo necesita ser escalado o redimensionado, ¡siempre es bueno estar preparado para estas cosas!

En términos de implementación de CSS, consulte la respuesta de cockypup para obtener más detalles.

La mejor de las suertes, no hay nada de eso. :)

Tal vez el mismo tamaño con 150 ppp de resolución, estará listo y listo.

¡Hola y bienvenidos a GD! Esta no es realmente una respuesta sustancial, eso ayuda mucho al OP. Por favor, siéntase libre de editar su respuesta para que sea más informativa. De lo contrario, es probable que su respuesta sea eliminada por ser de baja calidad.
Gracias @Isaiaseg. Esto es exactamente para lo que estaba tratando de obtener confirmación y no pude encontrar. Como si fuera totalmente obvio. Agradezco que lo compartas. Lo que dice es que puede duplicar el tamaño de una imagen, ya sea duplicando su tamaño de píxel para que 100 px x 100 px se convierta en 200 px x 200 px o duplicando su resolución para que 72 ppp se convierta en 144 ppp. Espero que esto tenga sentido. ¡Gracias de nuevo!
¿Necesito crear mis imágenes al doble de las dimensiones de píxeles en una pantalla retina?
RespuestasAquíPolítica de privacidad1y, 0v