O guia do designer para dicas de pixel
Pixel-perfeito ícones e tipografia se destacam entre a multidão online. Obviamente, todos nós queremos nos esforçar para um trabalho tão refinado, mas às vezes, mesmo depois de tentar, ainda terminamos com algo um pouco ... menos. O Pixel Hinting é uma das habilidades que usa um recurso automático e melhora seus resultados. Apesar da resolução extremamente alta dos monitores hoje, como os monitores de retina da Apple, ainda precisamos "fingir" curvas suaves para não acabarmos com uma bagunça pixelada.
Muitos designers e desenvolvedores estão se movendo mais em direção a abordagens baseadas em vetores e SVG agora; com o apoio apenas ficando melhor a cada dia. Mas mesmo assim, as soluções baseadas em vetores têm um longo caminho a percorrer antes de amadurecer o suficiente para serem usadas na produção. O SVG é ótimo para exibir formas vetoriais, mas não tão quente para redimensionar essas formas. Então, como tudo mais lá fora, há um tempo e lugar para cada solução.
O que são vetores?
Vetores são essencialmente renderizados resultados da representação matemática de uma forma. Quando você vê algo na tela, é porque o computador renderizou esses objetos e os vinculou aos pixels da tela. Ao fazer isso, seu computador também tomou decisões sobre o que deve, e não deve, ser exibido como pixels inteiros. Por exemplo, a letra maiúscula “D” tem uma linha perfeitamente reta e uma curva.
Como você pode ver, sem anti-aliasing a linha curva no "D" é bastante pixelizada. Então, para compensar, quando as formas vetoriais são renderizadas, elas geralmente são anti-aliases para fornecer uma aparência mais… robusta. Em vez de exibir apenas pixels que se enquadram totalmente no contorno do vetor, os pixels são gradualmente eliminados. Isso engana seu cérebro para ver uma linha mais suave em formas curvas que não encaixam perfeitamente na grade de pixels.
Acima você pode ver como o “D” renderizado recebe o que é chamado de meio-pixel para ajudar a remover a pixelização irregular. No entanto, esse mesmo recurso também introduz um problema: os computadores são terríveis para descobrir o que é visualmente atraente. Então, ao adicionar esses meios-pixels, os cantos arredondados parecem fantásticos, também faz com que a linha interna superior / inferior pareça borrada. O anti-aliasing automático que ocorre quando uma forma de vetor é renderizada acaba fazendo com que a maioria das formas e tipografia pareça ótima, mas deixa os outros com uma qualidade ainda pior do que começou.
Olá, pixel insinuando.
Agora que você tem um breve histórico sobre formas vetoriais e como elas funcionam, vamos pular para o trabalho real. A dica de pixel envolve mover os pontos de ancoragem do vetor para repousar nas bordas de pixel de uma maneira mais esteticamente agradável. Tornando essas linhas retas mais perfeitas, enquanto ainda deixa os half-pixels para as curvas. Mais comumente, a dica de pixel é usada em tipografia e formas para imagens rasterizadas (logotipos, ícones, marcas, etc.). Agora, mais importante, para ajustar corretamente seu vetor, ele deve estar no tamanho e na forma desejados. Uma vez que o pixel tenha sugerido seu trabalho, girar ou redimensioná-lo poderia - e provavelmente o faria - jogar todo esse trabalho de lado automaticamente com o anti-aliasing novamente. Antes de começarmos, certifique-se de que as seguintes configurações estão ajustadas (eu usarei o Photoshop para essa tarefa):
- Ative sua grade de pixels (Exibir> Mostrar> Grade, também verifique se Extras está marcado acima do menu Mostrar)
- Certifique-se de que sua grade tenha uma linha de grade a cada 10 pixels, com 10 subdivisões. Ou algo semelhante para que haja uma linha entre cada pixel.
- Desativar o encaixe (Exibir> desmarcar o snap). Não queremos pontos de ancoragem em incrementos de 1 px, queremos mover pontos dentro de pixels.
Pixel insinuando tipografia
O processo para fazer formas versus tipografia é um pouco diferente, então eu vou guiá-lo pelos dois. Idealmente com tipografia, você quer kern seu tipo antes ou durante o processo de insinuação. Independentemente disso, as dicas de pixel devem ser uma das últimas coisas que você faz.
Primeiro, selecione a tipografia que você deseja inserir em pixels e faça uma cópia da camada e, em seguida, transforme essa camada em uma forma.
Você pode ver que o texto cai desajeitadamente da grade, tanto no eixo horizontal quanto no vertical. Para corrigir isso, vamos suavemente empurrar os pontos de ancoragem de cada letra até que eles se alinhem mais de perto com a grade de pixels exposta. O objetivo é obter as linhas de forma próximas, se não diretamente, das linhas de grade. Aplique zoom para empurrar os pontos de ancoragem com mais precisão. Ao fazer isso, diminua o zoom com frequência para garantir que seus ajustes estejam corretos.
Você não quer se conformar precisamente à grade, já que isso tira as vantagens do anti-aliasing em primeiro lugar. Em vez disso, tente simplesmente manter as coisas consistentes - permita apenas meio-pixels em um lado de cada eixo. Por exemplo, eu sempre permito metade dos pixels para a direita e para o topo das letras, enquanto forço as bordas esquerda e inferior niveladas com a grade.
Como você pode ver, o “entrar” foi ajustado aproximadamente, enquanto o “toque” permanece como está. Assim como o kerning, o pixel insinuando é muito mais uma arte do que uma ciência. É preciso um olhar atento para discernir se o trabalho parece melhor ou pior após o ajuste. Não desanime se você achar as inscrições tipográficas de pixels aproximadas, iterar e continuar trabalhando com elas. Se o resultado ainda parecer insignificante, você sempre poderá excluir a camada e copiar novamente do original. Demora algum tempo para que a tipografia, em particular, pareça ótima, basta continuar e, mais cedo ou mais tarde, seu trabalho árduo valerá a pena.
Formas de vetor de dicas de pixel
Geralmente, as formas de dicas de pixels são reservadas para ícones ou logotipos. Mais uma vez, você quer ter certeza de que sua forma está no tamanho e rotação que você quer antes de começar, pois ajustá-la mais tarde pode acabar com todo o seu trabalho duro. Ajustar formas é muito mais fácil e requer menos atenção para detalhes intrínsecos. Dito isto, formas mais complexas demoram mais e são mais difíceis de ajustar, por isso é melhor começar com algo simples.
Acima, você pode ver que a nossa seta e círculo ficam um pouco fora de onde gostaríamos. Os half-pixels criados pelo anti-aliasing estão fazendo com que toda a forma pareça borrada como resultado. Então, vamos cutucar tudo para cair na grade um pouco melhor.
Aqui vamos nós! Ao ajustar os pontos de ancoragem para alinhar com a grade, acabamos com um ícone muito mais nítido. É importante mencionar que, como esse ícone é um círculo, qualquer ajuste na largura também precisa ser espelhado para a altura. Além disso, não se esqueça de verificar se o interior da forma também é bom e consistente. Se você observar a imagem anterior, perceberá que os lados internos do círculo não têm o mesmo aliasamento.
Em conclusão
Com o trabalho acima, o resultado é uma imagem que parece mais nítida e mais profissional. Claro, você pode aplicar essas técnicas a coisas muito mais importantes do que um botão.
Enquanto o anti-aliasing automático feito pelo seu computador parece aceitável, pode ser melhor. Então, quando se trata de seu logotipo ou ícones / tipografia importantes em forma de varredura, a dica de pixel é mais do que apenas uma habilidade de nicho; até o dia em que estamos todos usando displays de alta densidade de pixels, é essencial.