Línea misteriosa junto a la forma después de guardar para web en Illustrator

Así que obtuve el archivo .ai de nuestro diseñador y tengo que guardarlo en un tamaño específico para luego usarlo en un sitio web.

Alineé todas las formas a la trama de píxeles (no estoy seguro de si esto es necesario) y cambié el punto de referencia a la parte superior izquierda (para evitar el desenfoque).
Al guardar para la web, elijo Optimize Art y lo guardo como un PNG-24 transparente.

Ahora, ¿por qué hay una línea misteriosa y vaga al lado de una forma? Cuando lo miro en Illustrator, esa misma línea es visible, pero cuando hago zoom puedes ver que la forma es perfecta sin la línea misteriosa.
En caso de que pueda ayudar, la línea está ahí desde la parte inferior hasta el 50% de la forma (verticalmente), todo lo demás está perfectamente nítido.

¿Qué estoy haciendo mal?
Espero haber usado los términos correctos, ya que mi Illustrator está en un idioma diferente.

En el futuro, ayudaría si publicas la imagen. O, mejor aún, publique un archivo AI (podría ser solo un documento con el área problemática aislada).
Revise todos sus sobres si existe.

Respuestas (7)

Si configura las coordenadas "X e Y" en sus mesas de trabajo para que sean un número entero (un número entero como 10 en lugar de 10.234), noté que esto soluciona el problema. Además, si desactiva la optimización y el suavizado, eso también puede solucionarlo (aunque generalmente no se recomienda, ya que dará una salida más pixelada).

Algunas de las otras sugerencias en este hilo pueden funcionar muy bien, pero he encontrado que la solución XY funciona mejor por tiempo y con la menor cantidad de arreglos... simplemente configura tus mesas de trabajo con números enteros para empezar y deberías tener no hay problemas, de lo contrario, use una de las otras soluciones mencionadas.

¡Quiero decir gracias! Me tiré de los pelos durante horas con este problema. Su sugerencia funciona muy bien y está llena de sentido común.

Desafortunadamente, esto es estándar para Illustrator. Hay bastantes situaciones en las que la precisión de píxeles de la representación de formas, el antialiasing y la representación de gradientes de Illustrator no están a la par con Photoshop, Fireworks y otras aplicaciones.

Recomiendo usar Photoshop o Fireworks. Si es posible, mueva los objetos y exporte desde allí.

He escrito más sobre el tema aquí: Illustrator y diseño de aplicaciones

Así que pensé que lo había arreglado, pero luego apareció otra línea en otro lugar. Ya probé importarlo como objeto inteligente a Photoshop, es lo primero que probé; pero tuvo el mismo efecto. Debo estar haciendo algo mal, o es el sistema en el que estoy trabajando? Gracias por el enlace, no volveré a guardar imágenes usando Illustrator.
Los objetos inteligentes en Photoshop CS5 tienen problemas similares de antialiasing y tramado. Photoshop CS6 tiene algunas correcciones cuando se trata de objetos inteligentes de Illustrator, pero aún no son perfectos. Si puede, será mejor que pegue en Photoshop como una capa de forma y coloree en PS.

He escuchado muchas quejas sobre esto, pero mi equipo y yo hemos tenido muy pocos problemas.

De vez en cuando me encuentro con píxeles de suavizado perdidos. En esos casos, simplemente arrastrando el objeto fuera de la mesa de trabajo y luego reubicándolo se resuelve.

Este enfoque me ha funcionado desde CS3. Aunque no lo he probado personalmente en CS6, un diseñador con el que trabajo usa 6 principalmente y no he notado ningún problema.

Arrastrar el objeto fuera de la mesa de trabajo y luego reposicionarlo es un trabajo terrible para un software de ~ $ 1000. ¿Has enviado comentarios a Adobe?
Sí, he expresado mi preocupación. Uso las aplicaciones de Adobe casi todos los días y soy bastante bueno con ellas. Pero eso no me impide soñar con su desaparición de forma regular. Prefiero que se corrijan los errores que las nuevas funciones sofisticadas, pero no han funcionado de esa manera durante mucho tiempo.

Para evitar esto, cree un nuevo archivo de Illustrator, luego copie su imagen vectorial en este nuevo archivo y guárdelo.

He sufrido este problema muchas veces con CS5, especialmente con gráficos web de 72 ppp.

Por lo general, empujo las formas hacia arriba o hacia abajo un píxel o dos e intento Ctrl+ shift+ alt+ Sobtener una vista previa, luego sigo intentando esto hasta que las líneas ya no están. El problema es que sé que los gráficos web son sensibles a los píxeles, a veces no puedes permitirte mover una sola parte de la ilustración mientras dejas las demás, la alineación de píxeles como sabes es importante, pero a veces tengo que ceder porque se vuelve muy molesto.

También descubrí que delinear el texto resuelve este problema muchas veces.

Haga clic en Nuevo documento... Marque "Alinear nuevos objetos a la cuadrícula de píxeles"... funcionó para mí

Hola Cope, bienvenido a GDSE y gracias por tu respuesta. Si tiene alguna pregunta, consulte el centro de ayuda o comuníquese con uno de nosotros en el chat de diseño gráfico una vez que su reputación sea suficiente (20). ¡Sigue contribuyendo y disfruta del sitio!

He estado usando CS5 durante varios años y no recuerdo haberme encontrado con este problema antes. La parte de mi diseño que está "rayada" con las pequeñas líneas blancas aleatorias es una silueta simple en la que utilicé el trazado en vivo. No estaba ocurriendo en ninguno de los otros objetos en mi diseño. Una simple búsqueda en la web me trajo aquí y probé algunas de las sugerencias sin ningún éxito. Luego pensé en intentar superponer la silueta simplemente copiándola y alineando otra capa idéntica detrás de ella. Esto ha resultado exitoso para mi proyecto, pensé en compartir mi experiencia.