Como resolver o problema das linhas finas nas emendas do padrão?

Gente, o post de hoje é especial! Vocês se lembram de um post que eu tinha feito sobre aquelas linhas brancas fininhas no Illustrator, que inclusive eu cheguei a divulgar pra vocês, mas depois acabei apagando?

Pois é… Eu tirei do ar porque a referência que eu tinha colocado de um site que explicava o porque dessas linhas e dava dicas de como resolver o problema, não estava 100% correta. E, para que eu pudesse “me redimir” com vocês (rs.), com um post ainda melhor, o Estampaholic ganhou um colaborador, que não é ninguém menos do que o Lula Rocha, do site Metapix. Tá bom pra vocês? :D

O Lula escreveu esse artigo que todos vocês precisam ler para nunca mais terem esse problema que tira qualquer designer de estampas do sério!

Sem mais delongas, vamos ao artigo. Sugiro que vocês leiam todo, do início ao fim, porque para evitarmos essas linhas precisamos ter cuidado desde o momento em que criamos o padrão até o finalzinho, onde exportamos o arquivo! Espero que vocês gostem desse post colaborativo, eu estou super feliz com a novidade!

……………………………………………………………………………………………………….

Como resolver o problema das linhas finas nas emendas do padrão?

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

Ao preencher um objeto, o Illustrator repete a amostra (módulo), lado a lado, na horizontal e na vertical, sem nenhum espaço entre os módulos.

Ao fazer esta repetição podem aparecer linhas finas (claras) nas emendas entre os módulos. Estas linhas finas constituem um problema, uma vez que atrapalham a visualização do padrão.

Sendo assim, o objetivo deste artigo é:

  1. Esclarecer a origem do problema
  2. Apresentar uma solução definitiva

Origem do problema
As linhas finas nas emendas do padrão são causadas pelo recurso Anti-aliasing do Illustrator.

O recurso Anti-aliasing suaviza, automaticamente, as 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

Anti-aliasing
Com exceção do novo monitor Retina display da Apple, que tem uma resolução bem alta de 326 ppi (pixels por polegada), a maioria dos monitores tem uma resolução muito 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 toda “serrilhada”. Mas não vemos a borda serrilhada graças ao Anti-aliasing. O Anti-aliasing suaviza (“desfoca”) as bordas, introduzindo pixels com cores mais claras, para que a arte seja apresentada na tela com esta aparência suave.

Figura 1
image
Anti-aliasing no Illustrator
O Illustrator, claro, também usa o recurso Anti-aliasing. Sem ele, as nossas artes apareceriam todas serrilhadas. O problema é que ele também é aplicado em linhas verticais e horizontais, e, quando criamos padrões, é gerado este efeito colateral indesejável, com o aparecimento de linhas finas (pixels com cores mais claras) nas bordas dos retângulos.

Grid de Pixel
O Grid de Pixel é outro recurso do Illustrator, que funciona por “trás dos panos”, para definir quando o Anti-aliasing deve ou não, suavizar as linhas verticais e horizontais. 

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

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 cores claras.

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.

image

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.

image

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. Experimente trocar a unidade de medida do documento para Pixels e você verá que todos os valores são inteiros e pares.

image

Pronto, aqui está a resposta para 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 pares, usando Pixels como unidade de medida.

Dica: você também pode usar a unidade de medida Pontos (pt) porque 1pt = 1px.

Solução: Redimensionar a Amostra de Padrão

Antes de começar certifique-se de que a amostra foi feita corretamente, aproximando bastante para ver se as linhas finas aumentam de espessura. Se a espessura da linha aumentar é porque existe um problema com o desenho.

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 no Mac ou CTRL+R no PC)
  • 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.

image

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

image

Para mais detalhes sobre a solução, assista o vídeo abaixo no site Metapix:
http://metapix.com.br/curso/illustrator-superficie/amostra-de-padrao/como-resolver-o-problema-das-linhas-nas-emendas-do-padrao/

Observações e dicas

Fator de Zoom
O Anti-aliasing também entra em ação, quando estamos visualizando com um fator de Zoom que não seja múltiplo de 100, isto é, que não tenha uma relação “redonda”.

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.

Agora 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.

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%.

image

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.

image

Dica: Esta é a razão pela qual as linhas às vezes aparecem e às vezes somem quando aproximamos ou afastamos a prancheta. Dependendo do fator de Zoom, o Anti-aliasing entra ou não em ação.

Evite o problema na origem
Para evitar o problema na origem, crie suas Amostras de Padrão sempre com medidas inteiras e pares usando Pixels ou Pontos como unidade de medida.

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 (CMD+D no Mac ou CTRL+D no PC) ou com a técnica “Padrão Dinâmico” fazendo a repetição com o Efeito Transform.

Para mais detalhes sobre estas técnicas visite os links abaixo:
http://metapix.com.br/curso/illustrator-superficie/movendo-copias/
http://metapix.com.br/curso/illustrator-superficie/padrao-dinamico/

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.

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 é porque a arte vetorial foi convertida para imagem bitmap durante o processo de impressão. E 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ê tem que tomar cuidado com o Anti-aliasing.

Figura 9
Ao exportar (Menu File > Export) na caixa de diálogo do formato escolhido, procure pela opção Anti-aliasing e escolha ART OPTIMIZED (Supersampling).

image

Para mais detalhes sobre como exportar assista o vídeo abaixo no site Metapix:
http://metapix.com.br/curso/illustrator-superficie/saida/exportando-imagens-em-formato-jpeg/

Muito bem pessoal, é 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 odeio estas linhas finas :)

Lula Rocha
Rio de Janeiro, maio de 2013

imageLula Rocha é professor dos cursos de Design da PUC do Rio de Janeiro, do curso de Pós-graduação em Design de Estamparia do SENAI/CETIQT-Rio e autor do curso Illustrator para Design de Superfície e Estamparia do Site Metapix.

 

Deixe uma mensagem!

*

5 comments

  1. Fernando

    Gostei, muito bem explicado, Obrigado :D

  2. Heloiza Melo

    MEUDEUSDOCEU!
    Obrigada! Já estava LOCA do kissuki sem saber como dar fim nestas malditas linhas! <3

    • estampaholic

      hahahaha que bom, Heloiza!
      Abraços!!!

  3. Jéssica

    adorei! sanei minha dúvida hahaha :3

    • Aline Britto

      Que ótimo, jéssica!!! Essa semana teremos outros posts bacanas, não deixe de acompanhar! :)

Próximo postEstampa Flamingos