¿Cómo exportar iconos nítidos de Android en Photoshop/Illustrator?

Tanto Photoshop (formas de capa) como Illustrator (vectores) son terribles para crear activos de Android nítidos cuando guardo. ¿Alguien puede ayudar a hacer artículos crujientes en varios tamaños sin hacerlo a mano? Estos son los métodos que he probado:

  1. Usando XXXHDPI en Illustrator, Save for Webhasta todos los demás tamaños pequeños. (muchos píxeles borrosos)
  2. Usando XXXHDPI en Photoshop, imágenes de cambio de tamaño de efecto por lotes (todavía menos borrosas)
  3. Usando XXXHDPI en Photoshop, guardando manualmente para la web con nitidez bicúbica seleccionada (el mejor método, pero no funciona en un efecto por lotes).

Respuestas (2)

Cualquier método que use una escala basada en mapas de bits generalmente se verá terrible para diseños basados ​​en formas vectoriales, especialmente para glifos pequeños. La buena noticia es que Android realmente solo requiere activos de 2×, 3× y 4× en estos días (quizás 1,5×, si desea apuntar a dispositivos más antiguos. iOS es similar, requiere 1× (iPad Mini y dispositivos más antiguos), 2× y 3× (iPhone 6 Plus).

  • 1× = Android mdpi = iOS no Retina
  • 1,5 × = HDPI de Android
  • 2× = Android xhdpi = iOS Retina
  • 3× = Android xxhdpi = iOS Retina HD (solo iPhone 6 Plus)
  • 4 × = Android xxxhdpi

Notará que iOS y Android tienen una complejidad similar en estos días, en términos de escalas de activos.

Recomiendo usar Photoshop y la nueva función Generador o cortes. El generador puede guardar activos en varias escalas, y se escala utilizando la escala vectorial, en lugar de la escala de mapa de bits.

Si trabaja en el tamaño 1×, la ampliación por múltiplos enteros exactos será perfecta. Eso significa que su obra de arte de 2×, 3× y 4× se verá genial.

Introducción al generador:

Aquí está mi flujo de trabajo, que incluye mucha información sobre el uso de hojas de sectores y la exportación para Android e iOS.

Otra opción, si los activos son lo suficientemente simples, es usar los nuevos elementos de diseño vectorial de Android:

Si está utilizando elementos de diseño vectoriales, deberá crear SVG, por lo que Illustrator podría ser la mejor opción (tenga en cuenta que el Generador de Photoshop también puede crear activos SVG).

También di una charla en Adobe MAX que abarcó el tema:

Y, por último, si realmente necesita recursos de 1,5 aumentos, le recomiendo ajustarlos a mano. Si hace mucho del trabajo a una escala de 1 aumento, los recursos de 1,5 aumentos terminarán con bordes borrosos debido a la escala. factores involucrados. No hay mucho que puedas hacer al respecto.

Esta publicación puede recibir respuestas de “¡¿Trabajas en 1×?! ¿Estas loco?". Hago la mayor parte de mi trabajo en 1×, sí. Pero es muy fácil cambiar entre escalas si necesita ver los detalles, o simplemente desplazar medio píxel cuando corresponda.

Permítanme comenzar diciendo que este método es solo una solución: el lado oscuro de Android es, desafortunadamente, la multitud de tamaños y densidades de pantalla con los que los diseñadores y desarrolladores necesitamos trabajar, y la única forma de crear activos perfectos en píxeles en Photoshop es haciéndolo manualmente.

La siguiente solución solo funciona en Photoshop, que yo sepa:

Si entendí correctamente, mencionó que el mejor método es usar el enfoque bicúbico, pero le gustaría usarlo en la función Lote. Bueno, lo que puede hacer es crear una Acción que cambie el tamaño de su imagen y seleccione el método de nitidez bicúbica; de esta manera, se guardará en la Acción y podrá Procesar por lotes varias imágenes con ella, con la esperanza de lograr el efecto deseado.

Si quieres más información sobre acciones y procesamiento por lotes, prueba este tutorial (te juro que no es una autopromoción desvergonzada, este es el único enlace del que conozco).

(O, si desea formas e íconos simples, intente convertirlos en una fuente, como Font Awesome : aquí hay uno de los muchos tutoriales sobre cómo hacerlo (nuevamente, el único que conozco). De esta manera no tendrá que cambie su tamaño para todas las densidades, y siempre serán bastante nítidos sin importar en qué dispositivo los muestre).