Illustrator alineado con la cuadrícula de píxeles, pero el logotipo sigue siendo borroso

Estoy tratando de crear un logotipo nítido en Illustrator CC, y no importa lo que haga (configuré la configuración del documento web con alineación a la cuadrícula de píxeles), cuando voy a guardar mi logotipo como un documento web PNG-24 y previsualizo en el navegador, el logo aparece borroso!

¿Hay algo que me falta sobre cómo hacer que mi logotipo se exporte para mi sitio web con una apariencia nítida?

Así es como se exporta en formato PNG-24:

Así es como se exporta en formato PNG-24

Aquí está con vista previa de píxeles:

Aquí está con vista previa de píxeles

Para Ben: así es como se ve en Illustrator -> Guardar para Web -> Vista previa (PNG) 100%ingrese la descripción de la imagen aquí

¡Gracias de antemano por cualquier ayuda!

¡Gracias Ben! Ya tenía "anti-alias" sin marcar en Efecto -> Configuración de efectos de trama de documentos.
Noté que el logotipo aparece mucho más borroso en Firefox que en Chrome. Alejar el zoom en Firefox también ayuda. Pensé que era solo una cosa de Firefox, pero luego fui a www.squaredspace.com en Firefox y acerqué su logotipo... ¡es perfecto incluso con un zoom del 300 %! Tan crujiente.
¿Ha intentado jugar con los ajustes "Entrelazado" y "Tipo optimizado" en el indicador Guardar para web? De lo contrario, ¿cómo no se ve en un navegador? Si lo abres al 100% en photoshop o Preview, ¿cómo se ve?
@mseager por su último punto. Podrían haber guardado las imágenes a 2x o 3x para pantallas retina. También podrían haber guardado su logotipo como un SVG que se verá bien en cualquier tamaño.
@BenjaminSmith Interlacing parecía aumentar ligeramente el tamaño del archivo, así que lo desactivé. El tipo optimizado ya estaba configurado. He actualizado mi publicación original con una imagen de cómo se ve en AI Preview (Web) al 100 %, mucho mejor que cómo se ve en Firefox. También noté que alejar el zoom al 80% en Firefox da los mejores resultados... así que podría tener algo que ver con el tamaño de mi logotipo y cómo el navegador está reajustando la imagen.
@AndrewH Ah! Entonces es donde ocurre la magia, en ese caso necesito leer sobre el diseño de pantallas retina y guardar como SVG.
@mseager Vería este tutorial sobre CSS-Tricks usando SVG .
@AndrewH ¡Creo que eso fue todo! No puedo creer que pasé 6 horas en esto, y todo lo que tenía que hacer era guardarlo como .svg :) ¿Por qué no todos hacen esto? ¡El logotipo se ve mucho mejor que un PNG! El logotipo se ve hermoso, nítido y también responde muy bien al diseño receptivo. ¡¡Muchas gracias señor!!
@mseager podría haber un par de razones. 1 razón podría ser la compatibilidad con IE8 e inferior. Algunos gráficos SVG pueden requerir miles de nodos. Si coloca el código SVG en lugar de img src, puede parecer arcaico o confuso. He visto que SVG se ha vuelto mucho más popular en los últimos años.
@Mseager: SVG es excelente, pero la compatibilidad con el navegador aún no es del 100 %, por lo que esa sería una de las razones por las que la gente se resiste.
@BenjaminSmith ¡Gracias por sus respuestas rápidas y útiles! Para imágenes bellas y nítidas, ¡SVG es el futuro! Gracias de nuevo :)
@AndrewH De acuerdo con ese documento de CSS Tricks, hay formas de verificar la compatibilidad del navegador con herramientas como Modernizr. Quiero mantener el SVG, así que eso es lo que haré para brindar alternativas a aquellos que no pueden verlo. Gracias de nuevo :)

Respuestas (3)

Tendrás que ajustar esto manualmente a la perfección de píxeles. Con la 'Herramienta de selección directa' (A), seleccione todos y cada uno de los puntos de anclaje a lo largo de las rutas de la forma y asegúrese de que esté alineado en una coordenada de cuadrícula. Además, asegúrese de tener habilitado Ver > 'Ajustar a píxel'.

Tuvimos algunos problemas en el trabajo con íconos que se veían borrosos. Lo que hicimos fue cambiar el tamaño de todos los íconos en Illustrator al doble del tamaño que deberían tener en el navegador. Cuando el desarrollador estaba codificando, dividió la imagen por 2 o simplemente estableció las dimensiones manualmente divididas por 2.

La exportación se realizó de la misma manera "guardar para web" y con PNG 24.

Después de eso, todos los íconos e imágenes tenían un aspecto nítido. ¡Puedes probar eso y ver si funciona para ti también!

Intente usar el formato de archivo svg para logotipos. No obtendría el efecto anti-alias ya que svg no usa píxeles sino vectores.

A menos que las coordenadas de los puntos caigan en píxeles fraccionarios, razón por la cual las líneas se ven borrosas.
Illustrator alineado con la cuadrícula de píxeles, pero el logotipo sigue siendo borroso
RespuestasAquíPolítica de privacidad1y, 0v