Allan Day
aday@gnome.org
Jakub Steiner

This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.

Selecionando e criando ícones.
Georges Neto
georges.stavracas@gmail.com 2014,
Rafael Fontenelle
rafaelff@gnome.org 2017-2021

# Criando ícones

Esta página fornece diretrizes para aqueles que criam seus próprios ícones, incluindo ícones coloridos (normalmente usados para ícones de aplicativos) e ícones simbólicos (normalmente usados para controles de interface do usuário). Para obter uma visão mais geral sobre estilos e uso de ícones, incluindo os ícones de ações disponíveis, consulte Ícones e obras de arte.

# Ícones coloridos

O estilo de ícone colorido é mais comumente usado para ícones de aplicativos. O tamanho nominal dos ícones coloridos é 128×128px. No entanto, como os ícones de aplicativos às vezes são apresentados em resoluções mais baixas, eles devem apresentar apenas detalhes que podem ser apresentados em resolução de 64×64px: qualquer coisa mais detalhada se perderia ao filtrar/reduzir a escala.

O modelo de ícone colorido inclui uma grade de 2px que deve ajudá-lo a evitar a adição de detalhes mais finos do que o limite desejado.

## Perspectiva & forma

Os ícones coloridos devem ser renderizados com uma visão ortogonal simples e sem perspectiva real ou isométrica. Para fornecer profundidade, um efeito elevado pode ser aplicado para imitar o eixo Z. Mas, por favor, mantenha o efeito sutil! Aumentar o objeto em mais de 2 unidades de detalhe (4 pixels nominais) não é recomendado.

Para ajudar no reconhecimento, cada ícone de aplicativo deve ter uma silhueta exclusiva. No entanto, para garantir o equilíbrio visual com outros ícones de aplicativos, a proporção não deve ser extrema. Formas muito estreitas ou muito largas devem ser evitadas.

Um modelo de grade está disponível para auxiliar na colocação do contorno do seu ícone. Não tente cobrir uma área máxima da tela: a margem externa deve ficar vazia. Em algumas circunstâncias, um pequeno detalhe pode ser estendido para esse espaço de margem.

## Sombras

As sombras podem ser desenhadas internamente, dentro de um ícone colorido, com a fonte de luz apontando diretamente de cima. No entanto, as sombras não devem ser desenhadas fora da silhueta principal do ícone, pois elas são geradas programaticamente com base no contexto. Quando ícones de aplicativos são apresentados em um plano de fundo branco, por exemplo, uma sombra forte é renderizada para ajudar a definir os contornos.

Versões de ícones de aplicativos também podem ser programaticamente geradas para desenvolvimento ou construções noturnas.

## Paleta

Abaixo está a paleta de cores do ícone de aplicativo do GNOME de linha de base.

Azul |
Verde |
Amarelo |
Laranja |
Vermelho |
Roxo |
Marrom |
Neutro |

Você é livre para usar tons diferentes dessas cores, dependendo do efeito material desejado. No entanto, essas cores primárias são uma boa linha de base para começar. Uma paleta no formato do GIMP/Inkscape está disponível.

Recomenda-se manter as superfícies planas sem sombra, mas é permitido usar gradientes para indicar superfícies tortas.

# Ícones simbólicos

Os ícones simbólicos têm uma forma simples e são desenhados dentro de uma grade de 16×16 pixels. Eles são dimensionados e coloridos de forma programada dentro da própria interface do usuário.

Identifique uma única propriedade ao procurar uma metáfora apropriada para um ícone e se concentre no que distingue a ideia que deseja comunicar. Por exemplo, ao descrever uma ação a ser executada em uma imagem, não é necessário repetir a ideia de uma imagem em cada ícone. Em vez disso, concentre-se no que é distinto sobre cada ação (por exemplo: girar, marcar, alinhar).

Evite usar qualquer perspectiva em ícones simbólicos, mantendo uma visão ortogonal simples.

Ao usar traços não preenchidos para uma estrutura de tópicos, tente evitar linha fina (1px) e faça pelo menos um traçado de 2px para o recurso principal do ícone.

Os ícones simbólicos são coloridos novamente em tempo de execução para coincidir com o contexto, muito parecido com um texto. Embora existam maneiras de “sombrear” partes de um ícone usando a opacidade ou criando duotone/dithering de padrão, tente evitá-las o máximo possível.

Quando uma metáfora depende do espaço negativo, certifique-se de que funcionará com as cores invertidas. Por exemplo, uma lente de câmera especifica/destaque só funciona se mais claro que a própria lente.

## Tamanho e grade

Enquanto ícones simbólicos são escaláveis e devem funcionar em qualquer tamanho, o tamanho básico da tela é 16×16 unidades da grade. Você tem toda a tela para preencher, mas observe que um objeto retangular preenchido aparecerá mais forte ou maior quando colocado ao lado de itens que apenas usam traços mais finos. Tente manter o contraste de todo o seu conjunto.