O que se entende por 'projetar um ícone em escala 100%'?


13

No guia Material Design do Android ,

Os ícones do sistema são exibidos em 24dp. Ao criar ícones, é importante projetar em escala 100% para precisão de pixels.

O que se entende por projetar em escala 100%? Isso significa que o ícone deve ter dimensões de 24 * 24 dp? Ou significa que eles devem estar em um formato de arquivo no qual o dimensionamento não resulte em perda ou distorção de dados, etc., como o formato de arquivo SVG?


1
Há uma excelente redação escrita sobre isso no Stack Overflow - Diferença entre px, dp, dip e sp no Android?
AndrewH

1
@AndrewH Eu sei a diferença! A questão é sobre o que se entende por "projetar algo em 100% de escala"!
Solace

Respostas:


23

Projetar em escala de 100% significa apenas projetar no tamanho (em pixels) em que você exibirá / exibirá seu ícone.

Se você estiver criando um ícone de 24px × 24px, configure sua prancheta no Illustrator ou documento no Photoshop ou o que mais estiver usando para 24px × 24px.

Conforme citado no guia Design de materiais, isso é para precisão de pixels. Se você trabalha em uma escala maior ou trabalha em um formato vetorial sem levar em consideração os pixels, reduza posteriormente o tamanho para 24 pixels - suas formas, caminhos, pontos ou pixels não serão alinhados à grade de pixels e você obterá efeitos conforme ilustrado neste exemplo:

insira a descrição da imagem aqui

Vale a pena notar, já que o dp não é uma unidade de medida absoluta e se traduz em vários tamanhos reais de pixels diferentes - projetar em uma escala de 100% também implica projetar para cada tamanho de pixel independentemente. (Obrigado Yorik!)


Muito obrigado por uma resposta muito precisa e clara. =)
Solace

É importante perceber também que "24 dp", sendo uma "medida de escala deslizante" derivada, significa que "design para 100% de escala" no contexto citado realmente implica que você precisa de um ícone diferente para cada densidade possível, no ideal.
Yorik

1
@Yorik Muito bom ponto. Atualizei minha resposta.
Cai

Você não precisa necessariamente trabalhar em todas as resoluções de forma independente: 48 pode ter exatamente o mesmo design que 24, enquanto 126, 128, 64, 32 também podem compartilhar. Pixels de mão 16px provavelmente serão necessários. Consulte este post para obter as resoluções mais comuns.
precisa saber é o seguinte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.