Bordes irregulares en un logotipo

Siento tu dolor. Esas cosas también me molestan y he pasado incontables horas tratando de controlarlas. Sin embargo, en este caso, creo que es posible que deba dejarse llevar y aceptar que a veces será confuso. He aquí por qué:

Como probablemente sepa, las curvas se simulan en la pantalla mediante suavizado o lo que usted llama fuzz.

La pantalla es (simplificando) una matriz de puntos. No hay forma de dibujar una curva real con una matriz de puntos porque tendrías que colocar los puntos entre los píxeles para tener una precisión del 100 %. Lo único que se puede hacer es crear la ilusión de una curva usando puntos más claros y más oscuros, también conocido como suavizado.

El software de vectores también utiliza el suavizado para simular formas con dimensiones fraccionarias de píxeles (ancho = 0,5 px) o colocadas en ubicaciones fraccionarias de píxeles (x = 0,5 px). Los píxeles más claros hacen que su ojo piense que la forma está ligeramente desplazada.

Si combina ambos (curvas y dimensiones/ubicación de píxeles fraccionarios), obtendrá una gran cantidad de suavizado.

Fíjate, por ejemplo, en esta imagen. El círculo y el cuadrado son ambos de 20 px x 20 px delineados con un trazo negro de 1 px. La esquina izquierda de las formas en la primera columna se encuentra en un píxel exacto. Las segundas formas están ubicadas en un cuarto de píxel (x=0.25px). Los terceros a medio píxel (x=0.5). La parte superior (y) de todas las formas está en un píxel exacto.

Esta es la misma imagen pero ampliada, por lo que podemos ver el suavizado en funcionamiento.

Puede ver que el primer cuadrado no necesitaba suavizado ya que está colocado en un píxel exacto y tiene dimensiones de píxel exactas. Se ve bastante nítido en la imagen original (la pequeña). Cuando comenzamos a moverlo, la IA comienza a agregar suavizado para simular los píxeles fraccionarios. El segundo se ve casi nítido. Los trazos verticales del tercero se ven borrosos o más gruesos.

Los círculos son aún más complejos. Dado que son curvos, la IA tiene que usar antialiasing en todos los casos, incluso en el que se encuentra en píxeles exactos.

Mi preferencia personal es colocar círculos a 1/2 píxeles, tanto x como y, para que la borrosidad se distribuya uniformemente. En mi opinión, hace que las curvas se vean más suaves. Sin embargo, todavía puedes ver algunos de los artefactos.

Cuando rasteriza una curva o una imagen vectorial que usa píxeles fraccionarios, está "perpetuando" el suavizado. Los puntos más claros y más oscuros que el software agregaba para imitar curvas y píxeles fraccionarios se guardan como un píxel de ese color en la imagen de trama final.

Identificar y controlar estos artefactos es doloroso y, a veces, imposible. Si solo está dibujando un montón de formas, entonces es fácil porque puede ir y verificar los tamaños y ubicaciones de todos los elementos en su obra de arte. Escribí un conjunto obsesivo compulsivo de pautas en este comentario sobre ese tema.

Sin embargo, la copia hace que estos artefactos sean casi imposibles de controlar. No puede ir y verificar los tamaños y ubicaciones de cada carácter en su copia. Las computadoras quedarán obsoletas antes de que termine su primer intento de configurar cada carácter manualmente. Y terminará con un texto que no fluye tan bien como debería hacerlo.

Tiendo a pasar por toda esta confusión solo si se trata de una imagen muy pequeña (un icono, por ejemplo) que sé que siempre se colocará en una ubicación de píxel exacta y con dimensiones de píxel exactas (una aplicación web o software). O si los artefactos son tan evidentes que no puedo dormir por la noche porque escucho su voz llamándome.

Si es un activo que otros utilizarán de formas que ni siquiera puedo adivinar, entonces no me molesto, porque su elección de ubicación y dimensiones agregará más suavizado al resultado final de todos modos.

Entonces, mi sugerencia sería: si la O realmente te molesta, conviértela en una forma y ve y verifica y modifica su ubicación y dimensiones antes de exportarla o guardarla para la web. Tenga en cuenta, sin embargo, que no podrá hacer esto para todas las aplicaciones del logotipo, que se usarán en varias ubicaciones y dimensiones.

También tenga en cuenta que si lo imprime, entonces entra en juego otro conjunto de artefactos. Este es un comentario interesante sobre eso (y dejaré de presionar mis propios comentarios).

Así es como es. Es probable que las líneas curvas muy finas en una pantalla de trama tengan un alias más notorio que las líneas más gruesas.

Creo que se ve bien ahora. Pero si desea modificar las cosas un poco más, puede intentar configurar el tipo en Photoshop y jugar con la configuración de suavizado dentro de la herramienta de tipo (creo que Photoshop llama a esto 'suavizado de fuente'). Hay una media docena de opciones y algunas pueden producir una apariencia que prefieras sobre las demás.

La otra opción es hacer versiones retina del logo y solo mostrar al cliente su página web en un iPad o Macbook con pantalla retina. :)

Es una situación muy específica sobre cómo Illustrator maneja el alias.

Intente exportarlo, digamos 3-4 veces su resultado final y vuelva a muestrearlo.

También puede intentar aplicar una nitidez, ya sea antes del remuestreo o después del remuestreo.