Las líneas están pixeladas y de baja calidad cuando se exportan a .PNG en baja resolución con Adobe Illustrator

Estoy tratando de hacer íconos de 16x16 en estilo de línea con Adobe Illustrator y cuando exporto a .PNG, las líneas son de muy baja calidad y están pixeladas. Aquí hay ejemplos:

Icono de bandeja de entrada

Icono del tablero

Búsqueda

Así es como se ve en Illustrator:

Captura de pantalla de Adobe Illustrator

Estoy tratando de averiguar qué estoy haciendo mal. ¿Hay algo que deba saber? ¡Gracias!

Respuestas (3)

Creo que tienes que diseñar estos íconos usando una cuadrícula de captura de píxeles. Debe establecer la cuadrícula (y las unidades) y la configuración del documento. Intenta seguir este -antiguo- artículo: http://petshopboxstudio.com/blog/articles/how-to-prepare-illustrator-for-pixel-perfection/

Eso es lo que hice, ajustar a píxel está activado. La configuración del documento está en unidades de píxeles.
Antes de la exportación, intente ir a VER > VISTA PREVIA DE PÍXELES y debería poder ver la vista previa de la exportación de píxeles y luego "corregir" las formas y las líneas antes de exportar.
Muchas gracias por la sugerencia, sin embargo, no estoy seguro de qué se supone que debo hacer con la vista previa de píxeles y cómo mejorar la salida.
Mmmm, he intentado exportar dos png de 16x16. Él ! el primero tiene una línea interna de 1,721 píxeles , ¡el! el segundo tiene una línea interna de 1px . ¿Ha intentado establecer en "interior" y 1px la pista?
@dmxt La imagen en su pregunta muestra que el modo de vista previa no está activado. Si aún tiene el archivo, puede ampliarlo al menos un 600 % y luego compartir una captura de pantalla. En ese punto, verá píxeles en lugar de las curvas engañosamente suaves. En ese momento, verá los efectos de seleccionar todo y marcar "Alinear con la cuadrícula de píxeles" en la herramienta Transformar, y podrá ajustar el grosor de las líneas, etc.

en serio :) si es 16x16 solo usa la herramienta lápiz y dibujalo en photoshop! Con este tamaño, estás diseñando píxeles.

¡Incluso el ajuste de píxeles y el cambio de tamaño no te ayudarán con esto! Si necesita el logotipo tan pequeño, debe cambiar el diseño y dibujarlo a mano de todos modos, esto no debería llevar tanto tiempo :)

Estoy en desacuerdo. Es muy difícil simular manualmente un buen anti-aliasing (es decir, modificar/difuminar los ángulos de las líneas sombreando los colores). Si hace zoom con la vista previa de píxeles activada, puede ver lo que se generará y ajustar las posiciones de línea y el grosor en consecuencia, dejando que Illustrator haga la parte difícil.
eso es, por supuesto, un gran consejo en general, ¡pero no en este tamaño! Este es un tamaño en el que tienes que contar los píxeles tú mismo. Incluso la V en su diseño no se pudo centrar porque tienes 8 píxeles a tu izquierda y 8 píxeles a tu derecha. Si no confía en mi juicio, vaya y pruébelo usted mismo. Estoy de acuerdo contigo al 100%, aunque el antialiasing manual no es divertido ;)

Una técnica alternativa es simplemente dibujar, luego exportar a un archivo de resolución decentemente alta que sea un múltiplo de la resolución de píxeles deseada (288 o 576 ppp), luego reducir el archivo de píxeles a la resolución adecuada en PhotoShop usando Bicubic Sharper (Mejor para Reducción).

Esto no es ideal (es mejor directamente desde el vector cada vez), pero usar un múltiplo de la resolución deseada definitivamente es útil si va a usar este enfoque.
Las líneas están pixeladas y de baja calidad cuando se exportan a .PNG en baja resolución con Adobe Illustrator
RespuestasAquíPolítica de privacidad1y, 1v