Design e programação criativa na web.

Subpixel rendering

Anti-Aliasing and Sub-Pixel Hinting

A tipografia na web começa a dar agora os primeiros passos com as chamadas web fonts. Tanto utilizando flash, javascript ou plataformas como Google Font Directory, Cufón ou TypeKit. De repente abriu-se um novo mundo para os utilizadores e criadores web no que diz respeito à liberdade tipográfica.

Mas apesar de termos agora á nossa disposição uma vasta colecção de webfonts criadas a pensar na web e nos monitores de hoje em dia, ainda encontramos vários problemas que não existem, por exemplo, em off-line.

A tipografia impressa desfruta de altas resoluções (DPI) com o qual consegue mostrar todos os detalhes de uma tipografia. Ao contrario, nos ecrãs de hoje em dia sofremos com os pixeis “fora-de-sitio” e curvas quebradas e pixeladas. Em grande parte devido a baixa resolução da maioria dos ecrãs de hoje em dia (PPI).

A adobe tem algumas ferramentas para tentar resolver este assunto. Por exemplo, o Photoshop. O Photoshop usa uma técnica para suavizar o texto que consiste em vários pixeis acrescentados em diversos tons de cinzento mas não fusionando diferentes canais. Aqui entra em acção uma técnica chamada Subpixel Rendering.

O que é o Subpixel Rendering

Cada pixel apresentado no monitor consiste em 3 cores diferentes: o vermelho, o verde e o azul (RGB). A luminosidade destes subpixels controlada independentemente dá-nos a ilusão de um só pixel colorido e sólido.

O Subpixel Rendering explora a individualidade de cada componente de uma só cor para a aumentar a percepção de resolução do monitor. Consiste no alinhamento perfeito de uma grelha de pixeis e dos seus valores de luminosidade e cor independentes.

Subpixel-hinting no Photoshop

Apesar de o photoshop ter uma forma para isto, esta não utiliza os diferentes canais para criar um anti-alias perfeito, mas sim diferentes tons de cinzentos.

Thomas Maier utiliza uma técnica que facilita a utilização do Subpixel-hinting no Photoshop. Basicamente é uma acção que junta todos os passos necessários para recriar esta “ilusão” de uma maior definição do monitor.

–> Podem descarregar aqui
a sua acção para o photoshop, ou bem, visitar o seu site.

Se querem saber mais sobre este assunto, a Smashing Magazine tem um artigo muito completo sobre o Subpixel Rendering.

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

Nuvem de etiquetas

%d bloggers like this: