Photoshop: cómo guardar archivos PNG nítidos y fluidos para el diseño de aplicaciones

Estoy guardando íconos como archivos PNG para usar en una aplicación. Pero al hacer zoom o reducir las imágenes se ven pixeladas. ¿Cómo guardar imágenes en formato PNG para que permanezcan nítidas y fluidas?

¿Puedes agregar más detalles por favor? ¿Cuál es el tamaño de la imagen? ¿Cuánto estás reduciendo la imagen? Muestra un ejemplo también si puedes.

Respuestas (2)

Además de la gran respuesta de Lucian:

Las diferentes plataformas tienen diferentes formatos nativos que pueden usar para el diseño de la interfaz de usuario en las aplicaciones. Los PNG son el formato de recursos de interfaz de usuario más común, y sí, son mapas de bits (haz zoom y verás píxeles). Como dice Lucian, está bien, siempre y cuando se muestren en el tamaño correcto.

iOS, Android y otras plataformas móviles requieren imágenes con las densidades de píxeles utilizadas. Esto significa que cada elemento para el que necesita una imagen, en realidad requerirá un conjunto de imágenes en diferentes escalas.

iOS

iOS puede usar archivos PNG y PDF de forma nativa para las imágenes de la interfaz de usuario. Tenga en cuenta que Xcode simplemente convierte los archivos PDF a PNG (no se procesan en tiempo de ejecución). Si desea utilizar activos vectoriales en iOS, una buena opción es crear un código de ruta de Core Graphics, utilizando PaintCode o similar.

https://www.paintcodeapp.com

Los SVG se pueden usar en iOS, pero no de forma nativa (se requiere una biblioteca de terceros para analizarlos y renderizarlos).

Androide

Android puede usar PNG y WebP para imágenes de mapa de bits, y Android Vector Drawables para imágenes vectoriales. Los Vector Drawables son muy similares a los SVG (un subconjunto de SVG, en un contenedor diferente). Los Vector Drawables son geniales, si puedes usarlos.

https://developer.android.com/training/material/drawables.html

El envío de activos de mapa de bits en su aplicación está totalmente bien y, de hecho, es el método más común utilizado.

En teoria

  • PNG es un formato rasterizado (no vectorial), lo que significa que los píxeles siempre estarán visibles dependiendo de su nivel de zoom. Los archivos PNG solo son nítidos y suaves en su tamaño previsto, no cuando se acercan. Puede guardar un PNG más grande a través del porcentaje de cambio de tamaño en Guardar para Web, luego escalarlo en su código, pero siempre habrá un límite con los formatos de trama.
  • Guardar como SVG (formato vectorial) es una alternativa para una calidad no pixelada completamente fluida.

En la práctica

  • Depende de para qué necesites usar las imágenes. Si planea usarlo para una aplicación, investigue esto buscando en Google "app design svg vs png".
Estoy creando íconos para una aplicación utilizando pautas de diseño de materiales. Diseñé un logo en tamaño 1080*1920. ¿Es obligatorio guardar siempre las imágenes en formato svg?
¿Quieres decir como una aplicación móvil, supongo? ¿Android, iPhone? ¿Por qué no especificas estas cosas al publicar? :) No hago aplicaciones, así que no conozco los requisitos técnicos exactos. Debe verificar si su aplicación puede funcionar con SVG. Si es así, entonces SVG es definitivamente más fluido que PNG.
Gracias Luciano. Lo siento, pero a partir de la próxima me aseguraré de especificar completamente todos los detalles necesarios y disculpe las molestias.
No hay problema. Si cree que esta respuesta le ayudó de alguna manera, intente hacer clic en la flecha hacia arriba y/o en el ícono de verificación junto a mi respuesta anterior. Gracias
Photoshop: cómo guardar archivos PNG nítidos y fluidos para el diseño de aplicaciones
RespuestasAquíPolítica de privacidad1y, 0v