Por qué @2x Mockups

Solo por mi propia curiosidad, ¿por qué se está convirtiendo en una tendencia crear maquetas "@2x" en Photoshop? Además de crear tamaños de archivo nativos más grandes, ¿cuál es la diferencia entre un simulacro de 360ppi y un simulacro de 72ppi (aparte de lo obvio)?

Por lo general, usaré formas vectoriales para crear la página y las imágenes rasterizadas de objetos inteligentes en un documento de 72 ppp. A partir de ahí, puedo exportar activos a cualquier tamaño para el desarrollo.

Me dijeron que esta "manera" es una tontería: debería diseñar a 360ppi, pero he notado algunos inconvenientes:

  • Tamaños de archivo muy grandes
  • proporciones poco realistas
  • Inexactitud de la medición de píxeles en el desarrollo
  • Inexactitud del tamaño de fuente
  • Mediciones de "medio píxel" cuando se reduce a 72ppi

¿Me estoy perdiendo una imagen más grande? * juego de palabras *

Este artículo: El mito de DPI debería explicar de alguna manera el error en su forma de pensar. La configuración DPI/PPI no tiene sentido para las imágenes en la web/dispositivos electrónicos.

Respuestas (4)

¿Cuál es la diferencia entre un simulacro de 360ppi y un simulacro de 72ppi?

Cuando se habla de maquetas de pantalla, absolutamente nada.

Lo único que importa son las dimensiones en píxeles.

En cuanto a sus preocupaciones, ninguna de ellas es realmente un gran problema para un equipo de diseñadores y desarrolladores que entienden el proceso.

Tamaños de archivo muy grandes

Los discos duros son baratos. :)

proporciones poco realistas

Las proporciones deben permanecer exactamente iguales. Así que esto no debería ser un problema en absoluto.

Inexactitud de la medición de píxeles en el desarrollo

Desarrollar sitios web al nivel de píxeles perfectos es un ejercicio inútil, por lo que generalmente animo a las personas a que no se preocupen por eso. Dicho esto, no debería ser un gran problema. Exporte la imagen 2x al 50% y tendrá el tamaño de píxel exacto que necesita.

Inexactitud del tamaño de fuente

Al igual que el problema de los píxeles, esto no debería ser un obstáculo importante. Reducir a la mitad los tamaños de fuente en dev.

Mediciones de "medio píxel" cuando se reduce a 72ppi

Si el problema es que los diseñadores están haciendo cosas como líneas de 1px a 2x, estas desaparecerán a la mitad del tamaño. Sin embargo, esto es más un problema con el diseño de sitios en Photoshop en primer lugar. Los diseñadores simplemente deben entender esto y comunicarse con los desarrolladores según sea necesario.

Tenga en cuenta que 2x, aunque popular, no es la única densidad de pantalla que existe.

Este sitio enumera muchos de ellos que están disponibles en este momento:

http://dpi.lv/

Tenga en cuenta que vienen en una variedad de densidades: 1x, 1,33x, 1,66x, 2x, 2,46x y 3x (por ahora).

Parece algo así como "deshacer" sin ningún beneficio real, ¿verdad?
@AaronBenjamin No estoy seguro de lo que quieres decir con 'deshacer'

No entiendo el @2x como una "tendencia". A veces es un requisito en el diseño web.

@2x, @3x, @Nx no es una forma de diseñar todo, es una declaración en una hoja de estilo css para usar una imagen a mayor resolución.

Es un caso específico de los dispositivos de alta resolución. También conocido como Iphone, Ipad.

La resolución es más alta de lo normal. Si esos sistemas declaran la resolución como todos los demás, las imágenes y el texto serían diminutos.

Por lo que el sistema está declarando la mitad de resolución posible (una normal) pero presta especial atención cuando encuentra una imagen marcada como @2x. En este caso particular, toma esta imagen de mayor resolución y no la muestra a la "mitad" sino en su alta resolución real.

Piense en esto como la diferencia entre tener una vista previa (baja resolución) y luego usar una imagen de alta resolución al final.

Entonces eso no es una tendencia, es una necesidad en algunos casos.

Ahora hay algunos dispositivos con el doble de resolución lineal que Full HD.

POR CIERTO. Ahórrese algunos problemas y comience a diseñar en vectores. No en PhotoDontDoAllInItShop.

En dispositivos electrónicos ppi no es un problema

Me dijeron que debería diseñar a 360ppi

No. El PPI no cuenta en absoluto en los dispositivos electrónicos. Necesitas usar píxeles como dimensiones. Luego, tiene la opción, por ejemplo, de usar un ancho máximo de digamos FullHD 1920px.

Aunque sí, un dispositivo puede tener una densidad de píxeles de digamos 360 ppi, esta información no se usa igual que un documento impreso. Solo cuenta el valor absoluto en píxeles.

Aquí hay 2 imágenes. Tienen ppi declarados totalmente diferentes dentro del archivo, pero son exactamente del mismo tamaño. (Solo puede ver la diferencia abriéndolos dentro de un programa de procesamiento de imágenes y leyendo los datos ppi)

Foto: Scott F. Snyder Modelo: Amy Lee Fathbruckne

Estoy 100% de acuerdo... PS no es una herramienta de diseño. Sin embargo, todavía me piden que me burle de las cosas allí arriba... pero sigo usando solo formas vectoriales.
Oh, :o) bien. También recuerde configurar su documento en píxeles. Probablemente 1920 px de ancho.
Edité mi respuesta explicando por qué no deberías usar ppi en absoluto.
Cuando le piden que diseñe a 360ppi, estoy bastante seguro de que le piden que NO mantenga la misma cantidad de píxeles... sino que mantenga las mismas medidas con una resolución más alta, lo que aumenta la cantidad de píxeles. No tendría sentido de otra manera.
Sí. ¿Pero para mantener las mismas medidas de qué modelo de teléfono...? Iphone 6, ok... 4.7" dsagonal... oh, no, 5.5" Diagonal, oh, no, para el 4 s, pero la diagonal no está declarada en el sitio web de Apple, pero también es compatible con teléfonos anteriores y Samsung, y... está bien. Una vez más, pensar en términos de densidad de píxeles ppi es lo que no tiene ningún sentido.

La única diferencia más grande realmente es:

Cuando diseñas en @2x puedes exportar en @1x

Cuando diseñas en @1x no puedes exportar en @2x

Es para pantallas Retina y dispositivos de mayor densidad. Y necesita tener una resolución más alta para estos y dado que es más fácil reducir una imagen que cambiar su tamaño cuando los archivos se crean más grandes desde el principio.

Los archivos que se rasterizan y preparan para Retina generalmente terminan con @2x.jpg, por ejemplo, porque el script que los llama los identifica de esta manera. Habrá una versión no Retina (ej. mypict.jpg) y en la misma carpeta de imágenes una para retina (ej. mypict@2x.jpg). Algunos prefieren usar @2x y cambiar el tamaño en su código.

El @2x suele ser 2x el tamaño de la imagen original. Es por eso que encuentras estas plantillas demasiado grandes.

Y sí, la mayoría de la gente prefiere simplemente trabajar en un solo archivo para su diseño y cambiar su tamaño en lugar de trabajar en 2 archivos diferentes. El @2x ciertamente se convertirá en un estándar ( EDITAR , por ejemplo, los archivos de mayor resolución se convertirán en un estándar).

Técnicamente, no debería cambiar la calidad si el archivo principal tiene una resolución más alta, de hecho, solo obtiene beneficios además de (quizás) el rendimiento de la computadora. También es bastante práctico si los elementos de diseño son más grandes; se pueden volver a utilizar fácilmente para otros carteles que requieran el mismo montaje... ¡incluso para proyectos de letra pequeña! Los proyectos web y retina en alta resolución utilizan el mismo flujo de trabajo que si preparara proyectos de impresión; lo ideal es comenzar con el proyecto de mayor tamaño y luego puede ahorrar tiempo usando los mismos archivos pero más pequeños. ¡De esta manera no necesita hacer el mismo diseño 2-3-4 veces!

De todos modos, tiene sentido crear cualquier diseño con una resolución más alta, de alta densidad o no.

"Tamaño" a menudo es confuso, están las unidades de píxeles y están los otros valores que se pueden usar.

Cuando las personas con las que trabaja le pidieron que creara un 360ppi de alta resolución, ¡obviamente prefieren que mantenga el mismo tamaño y aumente la resolución! De esta manera también aumenta el tamaño del píxel.

no es del mismo tamaño

Misma imagen, mismo "tamaño", diferente resolución:

La de alta resolución, más píxeles.

Sr. T alta resolución

El de baja resolución, menos píxeles.

Señor T baja resolución

Si le resulta más fácil calcular la cantidad de píxeles y multiplicar el total por 2-3-4 para obtener la dimensión correcta, está bien.

A algunas personas les gusta comenzar su lienzo en los 72 ppp normales y luego simplemente volver a muestrearlo a 360 ppp (por ejemplo) antes de comenzar su trabajo.

Tenga en cuenta que si bien 2x es popular, no es un estándar. También hay muchos dispositivos 1.3x y 3x: dpi.lv
Obviamente, me refería a la maqueta a la que se refirió llamada "@2x"... p. los archivos de mayor resolución se convertirán en un estándar. Hagamos que los desarrolladores y los diseñadores ya sean receptivos, móviles y @2x primero. Muchos sitios ni siquiera están allí todavía. Estoy seguro de que conoces a personas que "siempre" lo hacen a la perfección, pero Internet no es tan perfecto... ¡todavía!
Cuando se trabaja principalmente con formas vectoriales, no creo que eso sea cierto... Es mucho más fácil aumentar la escala en múltiplos pares que intentar reducirla a 72 ppp. Las líneas terminan en medio píxel, los trazos se torcen, los tamaños de fuente no se degradan uniformemente... etc.
Entiendo que se está convirtiendo en una tendencia en la industria... lo que desafío es que tenga algún beneficio. Una maqueta es simplemente una imagen de un sitio web, no es el producto final que se mostrará en el dispositivo del usuario final. Es probable que las maquetas nunca dejen una pantalla de 72ppi.
@AaronBenjamin ese es un buen punto y probablemente una discusión diferente. Si estamos hablando de que estos son puramente bocetos para comunicar el diseño visual, estoy totalmente de acuerdo contigo. No hay necesidad de preocuparse por todas estas resoluciones. Sin embargo, muchas veces, los desarrolladores utilizan este tipo de maquetas en algunos flujos de trabajo. En ese momento, puede ser una planificación beneficiosa para los simulacros de alta resolución.
@AaronBenjamin Muy a menudo me preguntan DESPUÉS de que un sitio web está hecho para usar el mismo diseño o patrón de un sitio web en una tarjeta de presentación o postal meses después, por ejemplo. A veces estos gráficos no se pueden hacer en vector o son fotomontajes. Lo mismo puede suceder cuando necesitan un conjunto de anuncios para AdSenses u otros banners; facilita las cosas al poder reutilizar las partes del diseño que necesita si tienen un tamaño grande desde el principio. Para los diseñadores que hacen web e impresión, ¡hay beneficios al trabajar en una resolución más alta! Si solo hace maquetas web y no retina, entonces tal vez no.
Por qué @2x Mockups
RespuestasAquíPolítica de privacidad1y, 0v