En primer lugar, soy un desarrollador móvil y me arriesgo a desarrollar un diseño para mi aplicación, desde el principio. encontré el siguiente problema, Photoshop usa PX como unidad de medida para los formularios y en desarrollo la aplicación usa DP, sé cómo funciona la conversión De PX a PD

dp = px * (160 / dpi)

Sin embargo, cuando aplico una fórmula y uso los valores en la programación, el diseño se rompe, Me gustaría saber si hay una configuración de archivo PSD, como altura, ancho, densidad de píxeles que pueda usar como base para hacer una maqueta de mi aplicación, así que ¿facilitar el transporte de estas medidas para dispositivos móviles y tabletas?

Respuesta

Photoshop utiliza PX como unidad de medida para los formularios y en el desarrollo de la aplicación. usa DP, sé cómo funciona la conversión De PX a DP

La conversión dependerá de n cómo se construyó el diseño original en Photoshop. Las dp de Android son píxeles independientes de la densidad. 1dp se puede representar como 1 píxel de pantalla, o 2, o 3, o 4, o algún otro valor, según el dispositivo y la configuración de Android.

Aquí hay una lista de las conversiones comunes:

  • 1 dp = 1 píxel, o 1 ×, para mdpi pantallas (~ 160PPI).
  • 1 dp = 1.5 píxeles, o 1.5 × , para hdpi pantallas (~ 240PPI).
  • 1 dp = 2 píxeles, o 2 ×, para xhdpi pantallas (~ 320PPI).
  • 1 dp = 3 píxeles, o 3 ×, para xxhdpi pantallas (~ 480PPI).
  • 1 dp = 4 píxeles, o 4 ×, para xxxhdpi pantallas (~ 640PPI).

Entonces, la gran pregunta es qué densidad desea para construir tus maquetas? Puede elegir cualquiera de las densidades anteriores. Su elección determinará la conversión y otros factores.

Mi preferencia es diseñar a 1 ×, una escala donde 1 dp = 1 px = 1 CSS px = 1 iOS point. Eso significará que sus maquetas tienen una resolución más baja que el dispositivo en sí, pero significa que la conversión no requiere cambios en el valor.

Cuando haya terminado, Photoshop tiene algunas formas de exportar activos para las distintas densidades . Export As y Generator pueden construir las otras escalas, o puedes usar Save for Web y porciones ( como yo ).

Aquí está la ventana Exportar como de Photoshop, con la exportación configurada para densidades 1 ×, 2 × y 3 × ( para iOS, en este caso).

Exportación de Photoshop como

Respuesta

Su fórmula es incorrecta. Como referencia, la Guía de desarrollo de Android dice:

px = dp * (dpi / 160)

por lo que la fórmula real para dp es

dp = px / (dpi / 160)

¡Espero que te ayude!

Para la segunda parte de tu pregunta, Photoshop es bastante tedioso cuando se trata de exportar activos, o incluso empalmes. Si está abierto a usar Sketch, es mucho más fácil. Pero lo siento, como diseñador de dispositivos móviles, casi no uso Photoshop porque la conversión de px a dp no es algo fácil de hacer en ese programa.

Revisado

Creo que ahora entiendo mejor tu pregunta. Busque en este sitio los valores que «está buscando: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Comentarios

  • Lo siento, escribí la fórmula incorrecta en la publicación, así que estaba usando la fórmula correcta para la conversión, mi pregunta es cuál debería ser el tamaño del archivo para que puedo exportar los valores correctamente. Y en Sketch no puedo usarlo, el sistema operativo es Linux, para usar Photoshop era necesario usar una herramienta llamada Wine que permite que Photoshop se ejecute en Linux.

Respuesta

Esto puede estar fuera de tema aquí, pero recomiendo no usar Photoshop para el diseño de pantallas. Utilice una herramienta de vectores como Illustrator, Sketch o similar. La diferencia es que puede ampliar sus diseños más adelante. Si trabaja en Photoshop en tamaño 1x, sus diseños se verán horribles en un teléfono Andriod moderno. Tendría que configurar los diseños al menos en 2x, mejor 4x para que se vean suaves en una pantalla de alta ppi.

Además, todos los activos que cree con una herramienta vectorial, se pueden usar luego como assets para todos los tamaños requeridos. En Photoshop será mucho más trabajo aislar botones, íconos, etc. para una exportación posterior.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *