¿Cómo exportar iconos pequeños en Illustrator a PNG? [duplicar]

Sé que esta pregunta se ha hecho muchas veces, pero todavía no puedo encontrar una solución.

Estoy rediseñando íconos que se van a usar en una aplicación web. Los íconos anteriores se colocaron en una hoja de sprites PNG y los íconos eran de 16x16px.

En Illustrator, rediseñé los íconos con el tamaño de 16x16px pero cuando los exporto, están borrosos.

Ya están borrosos en mi archivo PNG después de la exportación.

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

Realmente no sé qué hacer. Probé el menú de exportación para dispositivos, todo... Incluso intenté hacer una captura de pantalla de mi mesa de trabajo de Illustrator al 100%, pero luego se pierde la transparencia.

¿Exportarlos como SVG es una opción?
Parece que has ampliado los iconos. No puede acercar las imágenes rasterizadas o se verán borrosas.

Respuestas (3)

Si exporta a un formato de píxel pequeño, se verán borrosos cuando los amplíe. Eso es totalmente normal, y no es una buena idea.

Si desea líneas más nítidas, deben estar en la cuadrícula de píxeles. De lo contrario, las líneas aparecerán suavizadas (= borrosas). Las líneas redondas o no ortogonales siempre atravesarán la cuadrícula de píxeles, por lo que no pueden ser tan nítidas como las líneas verticales u horizontales.

Un formato vectorial como SVG solo marcará la diferencia si su pantalla es de alta resolución (como Retina o similar). Recomendaría diseñar los íconos en tamaños más grandes teniendo en cuenta la cuadrícula de píxeles. Lo mejor serían múltiplos de 16px (32, 64, 128). Reducir la escala siempre es más fácil que aumentar la escala.

Estoy de acuerdo con todo aquí, excepto con el comentario de SVG. Exportar como SVG (donde sea viable) puede ofrecer beneficios a largo plazo en términos de revisiones imprevistas. Tuve situaciones en las que necesitábamos cambiar los íconos a tamaños de pantalla más grandes y, sabiendo que ya estábamos usando SVG, simplemente hice una edición de CSS en lugar de tener que generar y reemplazar toda nuestra biblioteca de activos de íconos. También hay otros beneficios, pero creo que algunas personas pasan por alto este.
@biscuitstack Bueno, la pregunta era sobre una hoja de sprites PNG y cómo optimizar la visualización. Así que SVG está un poco fuera de tema aquí. La cuadrícula de píxeles/antialiasing también es un problema para SVG, por lo que se debe realizar un trabajo de limpieza para ambos...
Comprendido. Lo mencioné cuando introdujiste SVG con la declaración de que solo marcará la diferencia si tu pantalla es de alta resolución y desconfiaba de futuras búsquedas de Google que lleguen aquí y descarten SVG en esta situación como solo relevante para pantallas de alto DPI. Se trataba más de una aclaración para otros en el futuro, pero me estaba yendo un poco por la tangente, así que disculpas.

Entonces tu primera imagen de los sprites no es borrosa.

Si ve una salida borrosa, se debe a que está utilizando el escalado de pantalla (retina, etc.) y ese escalado de pantalla está ampliando las imágenes de trama mediante estiramiento o remuestreo. Tu arte de exportación está bien.

Entonces, la verdadera pregunta que debe hacerse es: "¿cómo manejo el arte después de crearlo para evitar un resultado deficiente?". La respuesta es, en general, "exportar vectores", pero si no puede usar vectores, debe exportar varios tamaños de píxeles y configurar el software de destino para que elija el tamaño óptimo más cercano.

o intente dar una resolución alta del archivo después de exportarlo a Illustrator, por cierto, ¿qué versión de Illustrator usa? Porque en Adobe Illustrator CC pueden exportar automáticamente el archivo PNG y puedes decidir qué resolución de la imagen poner

la resolución no importará en este caso ya que OP especificó 16x16px
¿Cómo exportar iconos pequeños en Illustrator a PNG? [duplicar]
RespuestasAquíPolítica de privacidad1y, 0v