O que há de novo com ícones HiDPI?

Nós recentemente retornamos do GNOME WestCoast Summit com uma riqueza de informações e um dos avanços que fizemos foi com relação aos ícones HiDPI. Enquanto a atualização deve em breve chegar para os usuários elementary do SO Freya, eu queria tomar o tempo para documentar as mudanças que fizemos. Esperemos que esta informação será útil para outros desktops abertos e eu quero trazer à luz uma pergunta em aberto sobre como desenvolvedores de aplicativos de terceiros devem estar distribuindo ícones compatíveis HiDPI.

O que é um Ícone HiDPI?

Apenas para ser claro, este post é relativamente técnico e destina-se principalmente para outros designers ícone tema. Como usuário, você nunca deve ver ou se preocupar com o que estamos fazendo nos bastidores ;)

Se você não tem certeza do que é HiDPI, para fins de criação de ícones, podemos apenas pensar nisso como pixel dobrando. Se você está desenhando um ícone de 32px, você precisa de um ícone equivalente de 64px para usuários HiDPI. Isso soa muito fácil em seu rosto, mas eu gostaria de tentar ilustrar por que é um pouco mais complexo.

A primeira coisa a deixar claro é que no sistema operacional básico, enviamos ícones de 16, 24, 32, 48, 64 e 128px. Estes são exatamente os tamanhos que usamos em toda a interface. Sem tamanhos extra. Sem tamanhos ausentes. Esperamos projetar cada tamanho especificamente para onde ele será exibido. Em contraste, o GNOME fornece ícones 8, 16, 22, 24, 32, 48 e 256px. Então, no GNOME, o que você vê depois de 48px é o ícone de 256px reduzido. Mas o que isso tem a ver com HiDPI? Lembre-se que, de acordo com o sistema, estamos apenas duplicando pixels. A abordagem do GNOME é exatamente isso. Tomemos por exemplo um ícone do Terminal 64px. Em HiDPI este um ícone de 128px certo? (Apenas uma nota irónica: se você já está em HiDPI as seguintes imagens provavelmente fará pouco sentido para você)

O GNOME não fornece nenhum desses tamanhos. Eles apenas a escala do ícone de 256px. Observe como, em ambos os casos, as bordas e os destaques não são nítidos ou necessariamente visíveis. As coisas não estão inerentemente alinhadas à rede. Isso basicamente significa que você não será capaz de detectar ou reproduzir um problema com ícones do GNOME. Eles sempre se parecem com isso no GNOME. Mas o que esses ícones parecem no SO elementar?

No sistema operacional elementary, fornecemos ícones com esses tamanhos exatos. Tudo está sempre alinhado por grade. É sempre afiado. E aqui é onde entra a parte do HiDPI. Desde um ícone de 64px em HiDPI é realmente apenas um ícone de 128px, que deve olhar grande direito? Já está limpo e afiado na minha tela LoDPI. Mas acontece que isso não é o que você vê. O ícone exibe downscaled. Portanto, a solução é fornecer ícones @ 2x. Estes são ícones que não são apenas o dobro do tamanho da tela, eles são dobrar tudo. Veja como esses ícones de 128px se parecem em uma exibição LoDPI como uma comparação (128px à esquerda, 64px @ 2x à direita):

Observe como o segundo (64px @ 2x) não parece tão agradável em LoDPI. A borda e o destaque são muito grandes. Preenche a tela de forma diferente. Mas aqui está uma aproximação do que HiDPI exibe irá ver (128px à esquerda, 64px @ 2x à direita):

Veja como o ícone downscaled 128px é super embaçado em comparação com o ícone 64px @ 2x? Isso é contra-intuitivo. Nós definitivamente queremos aquele segundo em HiDPI, mesmo que pareça errado em LoDPI. Ele mantém a mesma nitidez que esperamos de ícones elementares.

Se você estava confuso com esta parte, tudo bem! Pode ser difícil envolver a cabeça ao redor disso até que você veja ícones em ação em uma tela HiDPI.

O trabalho ao redor

Se você já usou ícones SVG (ou fonte) na web como uma solução para HiDPI, você deve estar dizendo que desde que enviamos ícones SVG deve ser mágico e apenas trabalhar. No entanto, no momento Gtk parece ser construído em torno de ícones raster de transporte. Seu comportamento padrão é para contornar isso, agarrando um tamanho de tela maior. Mas, como ilustrado acima, este não é o comportamento que queremos. Faz nossos ícones olhar feios. Então o que nós podemos fazer?

Felizmente, a especificação icon.theme tem a capacidade para especificar pastas que contêm @ 2x ícones. No entanto, ele não vai aceitar-nos nomear a mesma pasta como sendo duas escalas diferentes. Então, temos de jogar alguns truques para fazê-lo fazer a coisa certa:

  1. Crie links simbólicos para todas as suas pastas de ícones de nível superior com “@ 2x” seguindo o nome. Para o elementary, isso significa que “categorias @ 2x” é um link simbólico para “categorias”, etc
  2. Agora você precisará adicionar todos os “novos” diretórios à sua lista de diretórios em seu arquivo .theme. No elementary isso significa ter “categorias / 32” e “categorias @ 2x / 32”. Se você tem seus diretórios com tamanhos primeiro, você terá “32 / categorias” e “32 @ 2x / categorias”.
  3. Adicione definições para todas essas novas pastas abaixo e certifique-se de adicionar a propriedade “scale”. Certifique-se também de que as definições de todas as suas pastas contenham tamanhos Min e Max adequados. O tamanho mínimo pode ser qualquer coisa (bom para garantir que os ícones continuem em escala para preencher quaisquer lacunas que você possa ter), mas o MaxSize não deve ser maior do que o próximo tamanho disponível. Isso é importante para fazer este trabalho corretamente
[Categories @ 2x / 32]
Tamanho = 32
Escala = 2
Contexto = Categorias
MinSize = 8
MaxSize = 47
Tipo = Escalável

Isso deve fazer o truque! Seu tema de ícone agora deve suportar HiDPI corretamente, supondo que você esteja usando ícones SVG. Se você estiver usando um formato não escalável como o PNG, você realmente precisará passar por e criar recursos real @ 2x. Este é um bom momento para reconsiderar essa escolha, uma vez que é uma enorme quantidade de trabalho. Imagine quando @ 3x exibe sair, você terá que fazer tudo isso nesse tamanho também.

A questão

Minha grande questão aberta para a comunidade de desktop aberto é: E quanto a desenvolvedores de terceiros? Não tenho certeza o que dizer-lhes para distribuir com seus aplicativos. Como podemos garantir que seus ícones funcionem também? Isso é algo que eu acho que precisamos nos unir e tomar decisões sãs. Decisões que irão funcionar em todos os nossos desktops e nos diversos tamanhos e estilos de ícones que todos nós fornecemos.

Esperar. Esperar. Socorro

Se você está totalmente perdido agora e precisa de ajuda para fazer seus ícones trabalhar em HiDPI, sinta-se livre para deixar um comentário e vamos fazer o nosso melhor para ajuda-lo :)