Cómo crear iconos PNG de Android a partir de un SVG usando GIMP

Soy prácticamente un novato en el diseño de gráficos, como puede ver por esta pregunta muy básica. Lo que estoy tratando de lograr es crear un conjunto de íconos de Android a partir de un archivo SVG que tengo. En caso de que no lo supiera, para admitir los diferentes tamaños de dispositivos, se supone que debo crear un icono para las pantallas MDPI, HDPI y XHDPI. Puede encontrar información más detallada aquí

Aquí están las dimensiones recomendadas para cada tamaño:

  • MDPI - 160 ppp, 48x48px
  • HDPI: 240 ppp, 72 x 72 px (1,5 x MDPI)
  • XHDPI: 320 ppp, 96x96 px (2x MDPI)

Como dije antes, estoy comenzando con un archivo SVG que tengo. Lo primero que estoy haciendo es abrir el archivo SVG usando GIMP. Aquí es donde empiezo a confundirme. ¿Qué valor debo poner para los píxeles/in? El valor predeterminado es 90.

Después de pasar esa pantalla, prácticamente la exporto de inmediato a un PNG. Cuando hago eso, aparece otra pantalla con un montón de opciones diferentes. Por lo general, lo dejo como predeterminado, pero no estoy seguro de si esa es la mejor idea. De todos modos, cuando paso por este proceso, mis íconos todavía se ven muy borrosos en mi Nexus 4.

Cualquier ayuda es muy apreciada.

Respuestas (1)

El enlace para desarrolladores de Android es un poco confuso porque menciona DPI, pero no debería preocuparse por eso. El DPI es importante para los dispositivos, pero no es necesario para diseñar los íconos (normalmente no uso Gimp, así que no sé si tiene una forma automática de preparar archivos para diferentes resoluciones, pero asumo que quieres hacerlo manualmente y creará copias para cada tamaño).

La parte importante es la siguiente:

Para crear un ícono para diferentes densidades, debe seguir la relación de escala 2:3:4:6 entre las cuatro densidades principales (media, alta, x-alta y xx-alta, respectivamente). Por ejemplo, considere que el tamaño de un ícono de iniciador se especifica en 48x48 dp. Esto significa que el recurso de línea base (MDPI) es de 48x48 px , y el recurso de alta densidad (HDPI) debe ser 1,5 veces la línea base a 72x72 px , y el recurso de alta densidad x (XHDPI) debe ser 2x la línea base a 96x96 px , y pronto.

ingrese la descripción de la imagen aquí

Ahora a tu problema:

Tienes un archivo SVG con un conjunto de iconos. La documentación dice que el tamaño recomendado para la mayor densidad es 96x96px. Esto se debe a que los teléfonos inteligentes tienen el doble de densidad de píxeles que los monitores de escritorio.

Es por eso que un ícono de 48x48px se verá bien en tu computadora pero borroso en tu nexus, porque tu nexus necesita más calidad para llenar el mismo espacio. Necesita exactamente una calidad de 2x, porque es una pantalla de 2x MDPI (tiene el doble de píxeles por "espacio de píxeles", mientras que 1,5 MDPI tiene una densidad de 1,5x).

En resumen: necesitarás 3 iconos. Los tamaños son 48x48px, 72x72px y 96x96px . En los dispositivos, todos sus íconos se verán del mismo tamaño, porque se están escalando para mantener una buena calidad cuando la pantalla tiene más resolución.

El problema de píxeles que menciona es para impresión, y no para digital, por lo que no debe preocuparse por eso. Solo haz los íconos de esos tamaños y verás que se ve bien en el Nexus.

Estas son algunas otras preguntas que tratan sobre el trabajo con íconos de aplicaciones:

Cómo crear iconos PNG de Android a partir de un SVG usando GIMP
RespuestasAquíPolítica de privacidad1y, 0v