Se você cria padrões e estampas com Illustrator você já deve ter reparado que, às vezes, aparecem umas linhas finas irritantes nas emendas do padrão. Depois de quebrar muito a cabeça eu entendi porque isso acontece e nesse artigo eu vou explicar a origem do problema e, claro, apresentar a solução!

Origem do problema

No Illustrator, uma Amostra de Padrão (Pattern Swatch) é um módulo quadrado ou retangular contendo um desenho, que pode ser usado para preencher um objeto.

Ao preencher um objeto com um padrão, o Illustrator repete a amostra (módulo), lado a lado, na horizontal e na vertical, sem nenhum espaço entre os módulos. No entanto, podem aparecer linhas finas introduzidas pelo recurso Anti-aliasing do Illustrator.

Anti-aliasing

A maioria dos monitores tem uma resolução baixa variando entre 72 ppi e 150 ppi. Isto significa que os pixels da tela são muito grandes e por isso uma curva, por exemplo um círculo, seria exibido com a borda serrilhada. Para contornar essa limitação o Anti-aliasing suaviza as bordas, introduzindo pixels com cores mais claras, para que o desenho seja apresentado com uma aparência suave.

Anti-aliasing
Figura 1
O Illustrator, claro, também usa o recurso Anti-aliasing. Sem ele nossos desenhos apareceriam todos serrilhadas, como na figura acima. No entanto, no Illustrator em particular, o Anti-aliasing também é aplicado em linhas verticais e horizontais, quando:

  1. O retângulo não casa com o Grid de Pixel e/ou
  2. Estamos visualizando com um fator de Zoom que não seja múltiplo de 100

E como o padrão é uma repetição de um módulo quadrado ou retangular, pode acontecer este efeito colateral, indesejável, com o aparecimento de linhas no encontro entre os módulos.

O que é o Grid de Pixel?

O Grid de Pixel é um recurso do Illustrator, que funciona por "trás dos panos", para definir quando o Anti-aliasing deve ou não entrar em ação e suavizar as linhas horizontais e verticais. Ele é fundamental principalmente para o design de interfaces de sites e aplicativos onde a arte tem sempre que casar com os pixels da tela.

Dica: para visualizar o Grid de Pixel, escolha Menu View > Pixel Preview e aproxime bastante a prancheta.

Grid de Pixels
Figura 2
O quadrado da esquerda NÃO está alinhado ao Grid de Pixel e por isso as bordas são suavizadas, automaticamente, o Anti-aliasing cria linhas de pixels com uma cor mais clara. Já o quadrado da direita está alinhado ao Grid de Pixel e por isso o Anti-aliasing não entra em ação, e as bordas não são suavizadas.

Como alinhar um objeto ao Grid de Pixel?

Align to Pixel Grid
Figura 3
Para alinhar um objeto ao Grid de Pixel, selecione o objeto e no Painel Transform escolha a opção Align to Pixel Grid.

Align to Pixel Grid Medidas
Figura 4
Ao ativar a opção Align to Pixel Grid, o Illustrator modifica, minimamente, a posição e a dimensão do objeto para que tudo case com o Grid de Pixel. Esta modificação é imperceptível mas suficiente para que o Anti-aliasing não seja necessário.

Ao mudar a unidade de medida para pixels ou pontos você vai ver que todas as medidas são redondas, ou seja não existem décimos ou centésimos nos valores. Pronto ai está a solução do problema!

Como resolver o problema?

Para evitar que apareçam as linhas finas quando criamos uma Amostra de Padrão, a amostra tem que ter medidas inteiras e de preferência pares, usando Pixels ou Pontos como unidade de medida. (No Illustrator 1 pt = 1 px)

Então se você criou um padrão e está vendo as linhas finas, a solução é redimensionar a Amostra de Padrão como explicado na sequência abaixo: Mudar unidade de medida
Figura 5
1. No Painel Swatches dê um clique duplo na amostra de padrão, para entrar no Modo de Edição de Padrão (Pattern Editing Mode)
2. Exibir as Réguas. Menu View > Rulers > Show Rulers (CMD+R / CTRL+R)
3. Posicione o cursor em cima da Régua, clique com o botão direito do mouse e escolha a unidade de medida Pixels ou Pontos.

Arredondar valores em pixel
Figura 6
4. No Painel Pattern Options "arredonde" o tamanho para valores inteiros e pares
5. Na barra cinza, no topo da janela, clique na palavra "Done" para confirmar a edição

Dicas e observações importantes

Fator de Zoom
Talvez você também já tenha reparado que as linhas finas às vezes aparecem e somem dependendo do "Fator de Zoom", isto é quando aproximamos ou afastamos o desenho na tela.

Isto acontece porque o Anti-aliasing também pode entrar em ação, quando estamos visualizando com um fator de Zoom que não seja múltiplo de 100, um fator de Zoom que não tenha uma relação "redonda" entre o tamanho do desenho e os pixels da tela.

Por exemplo, quando visualizamos em 150% a relação é de 1 para 1,5 (relação "quebrada"). Isto significa que estamos pedindo para que 1 pixel da arte seja exibido numa área de 1,5 por 1,5 pixels da tela, mas como o pixel não pode ser dividido o Anti-aliasing entra em ação exibindo pixels com "meia cor", ou seja, com uma cor mais clara, originando a linha fina.

Por outro lado, quando visualizamos em 200% a relação é de 1 para 2. Isto significa que 1 pixel da arte será exibido numa área de 2 por 2 pixels da tela e como esta é uma relação "redonda" o Anti-aliasing não entra em ação e as linhas finas não aparecem.

Então a dica para saber se o problema é realmente com o desenho é aproximar seguidamente (CMD+/CTRL+), se as linhas finas aparecerem e sumirem é só uma questão de visualização, mas se elas aumentarem de espessura então o desenho está com um problema e precisa ser refeito.

Fator de Zoom quebrado
Figura 7
Quando repetidos lado a lado, mesmo que os quadrados estejam alinhados ao Grid de Pixel, as linhas finas aparecem porque estamos visualizando com um fator de Zoom "quebrado", neste exemplo o fator é de 1587%.

Fator de Zoom redondo
Figura 8
Os mesmos quadrados sendo visualizados com um fator de Zoom "redondo" (múltiplo de 100), neste exemplo o fator é de 1600%, e por isso o Anti-aliasing não entra em ação e a linha fina desaparece.

Outras técnicas
Lembre que você também pode fazer a repetição e criar o padrão usando outras técnicas como por exemplo "Movendo Cópias" e repetindo com o comando Transform Again ou com a técnica "Padrão Dinâmico" que faz a repetição com o Efeito Transform.

Posição
Não é muito comum mas pode acontecer de, mesmo depois de redimensionar a amostra, as linhas continuarem aparecendo por causa da posição X,Y. A posição do objeto/amostra pode não estar casando com o Grid de Pixel. Neste caso, experimente remover o padrão do preenchimento, aplicando uma outra cor qualquer e depois aplique novamente o padrão. Dependendo da situação você também pode usar o Painel Transform para "arredondar" os valores X,Y lembrando de ancorar o ponto de referência em qualquer um dos 4 cantos do objeto.

Redimensionamento do objeto
Se você redimensionar o padrão junto com o objeto no qual ele foi aplicado ou apenas o padrão dentro do objeto é recomendado também usar um fator de redimensionamento "redondo".

Impressão
Mesmo que as linhas finas estejam aparecendo na tela elas não devem aparecer na impressão. Lembre, as linhas finas são apenas um "fenômeno" causado pelo Anti-aliasing na hora de apresentar a arte na tela. Isto significa que se elas aparecerem na impressão é bem provável que a arte vetorial tenha sido convertida em uma imagem bitmap de baixa resolução durante o processo de impressão. Neste caso você deve checar as configurações de impressão (procure pelas opções "Output", "Graphics" ou equivalente e certifique-se de que a arte não está sendo convertida para imagem bitmap).

Exportando a arte como imagem bitmap
Se você for exportar a sua arte vetorial como imagem, usando algum formato bitmap, por exemplo JPG ou PNG, mais uma vez, você também tem que tomar cuidado com o Anti-aliasing principalmente se você exportar com baixa resolução (72ppi).

Exportando
Figura 9
Ao exportar (Menu File > Export), na caixa de diálogo do formato escolhido, escolha a opção Anti-aliasing e escolha ART OPTIMIZED (Supersampling). Para que as linhas finas não apareçam na imagem exportada. Mais detalhes sobre como exportar imagens do Illustrator. (Dica: no comando "Save for Web" você também tem a opção Art Optimized).

É isso, espero ter ajudado, e só para ficar registrado, todo este estudo para entender, de uma vez por todas, a origem do problema e poder oferecer uma solução definitiva é porque eu também não gosto nada dessas linhas finas :)

Lula Rocha
Rio de Janeiro, maio de 2013
(revisado em novembro de 2015)