Illustrator: iconos de aspecto borroso al exportar a PNG

Tengo un archivo vectorial que contiene muchos objetos. Uno de ellos se adjunta a continuación. La parte superior es original, clara como el cristal/píxel perfecto. Pero quiero un tamaño más bajo (dimensiones no por tamaño de archivo). Las imágenes originales son de 64x64 y todos los PNG originalmente tienen píxeles perfectos.

Pero cada vez que exporto objetos más pequeños, siempre aparece borroso/borroso/no nítido. Obtengo este resultado con todo tipo de objetos y archivos. ¿Cómo exportan estos vectores con un aspecto cristalino?

Muestra:

Muestra

El primero es del desarrollador original que exportó todos los vectores como 64x64. El segundo es mío y exportado como PNG desde el mismo archivo vectorial alrededor de 20x20/24x24.

Creé 72 ppp @ 24x24 y 72 ppp @ 20x20 incluso 72 ppp @ 16x16. Haga lo que haga, siempre obtengo esa imagen borrosa/borrosa.

Estás exportando a tamaños de píxel pequeños, que combinados con el alias te dan el desenfoque, no hay mucho que puedas hacer al respecto... por lo que generalmente necesitas diseñar íconos pequeños en su tamaño previsto (es decir, por qué verás iconos con diferentes versiones de 16x16 y 32x32)
Vea mi respuesta a Exportar de SVG a PNG con AI
Lo tengo ahora mismo. Intentaré hacer una versión diferente para que encaje. Gracias. También evaluaré la opción SVG.

Respuestas (2)

Un método que podría utilizar es emplear Photoshop para cambiar la escala del icono de 64 x 64 píxeles. Si utiliza el método "bicúbico más nítido" al volver a muestrear, los resultados se verán un poco más nítidos y se conservarán más detalles, especialmente donde hay líneas finas. Por supuesto, la diferencia es leve, pero podría ser suficiente.

Ejemplo de método "bicubic sharper"

Una manera muy educada y asombrosa de hacerlo. Gracias. Voy a intentar con algunos iconos ahora.

Cosas que puedes probar

  • use la versión PNG de 64x64 y redúzcala en su código CSS
  • si genera PNG más pequeños, juegue con la configuración 'Arte/Tipo optimizado' en el cuadro de diálogo 'Guardar para Web'
  • cambie al uso de iconos SVG, que es un formato vectorial y podría mostrarse mejor
Me pregunto si el navegador es compatible con SVG. Profundizaré en esto. SVG tal vez sea la solución o crearé una versión diferente como dijo @Cai.
Sí, es una de estas opciones. O haga que el tamaño del vector sea exactamente igual al tamaño PNG previsto. Vea lo que funciona mejor. Si cree que esto responde a su pregunta, intente hacer clic en el ícono de verificación y en la flecha hacia arriba junto a mi respuesta anterior. ¡Gracias!
Illustrator: iconos de aspecto borroso al exportar a PNG
RespuestasAquíPolítica de privacidad1y, 0v