<page xmlns="http://projectmallard.org/1.0/" type="topic" id="icons-and-artwork" xml:lang="pt-BR">

  <info>

    <credit type="author">

      <name>Allan Day</name>

      <email>aday@gnome.org</email>

    </credit>

    <credit type="author">

      <name>Jakub Steiner</name>

    </credit>

    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>

    <desc>Selecionando e criando ícones.</desc>   

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Georges Neto</mal:name>

      <mal:email>georges.stavracas@gmail.com</mal:email>

      <mal:years>2014.</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Rafael Fontenelle</mal:name>

      <mal:email>rafaelff@gnome.org</mal:email>

      <mal:years>2017</mal:years>

    </mal:credit>

  </info>

<title>Ícones e obras de arte</title>

Os ícones desempenham um papel importante nas interfaces do usuário: selecionar o ícone correto é, portanto, vital para garantir que seu aplicativo seja utilizável. Um ícone de identificação também é uma parte essencial de qualquer aplicação, e é uma parte crucial da sua identidade.

<section id="using-icons">

<title>Usando ícones em sua interface de usuário</title>

Há muitas situações em que é necessário decidir entre usar um ícone e um rótulo de texto, particularmente para botões. Os ícones têm a vantagem de serem menores e não exigirem tradução. Ao mesmo tempo, o uso incorreto de um ícone pode tornar sua interface difícil – ou mesmo impossível – de entender.

<list>

<item>
Use apenas ícones cujo significado seja comumente reconhecido. Se um ícone comumente reconhecido não estiver disponível, talvez seja melhor usar um rótulo de texto.

<list>

<item>
A convenção estabelece quais ícones serão reconhecidos. Se você está em dúvida, escolha os ícones que são frequentemente usados em outros aplicativos.
</item>

<item>
Considere quais ícones serão significativos no contexto específico de sua aplicação – os usuários de ferramentas especializadas geralmente estarão familiarizados com símbolos específicos do domínio.
</item>

</list></item>

<item>
Lembre-se de que alguns ícones só são úteis ao lado de outros ícones do mesmo tipo. Por exemplo, um ícone de mídia para “parar” é simplesmente um quadrado e pode não ser identificado como um ícone de parada sem outros controles de mídia (como reproduzir, pausar ou ignorar) sendo visíveis por perto. Da mesma forma, o ícone para remover um item de uma lista é um símbolo de subtração (i.e., uma única linha) e não será reconhecível sem um ícone de “mais” correspondente.
</item>

</list>

</section>

<section id="stock-icons">

<title>Escolhendo ícones padrão do GNOME</title>

O GNOME fornece um conjunto completo de ícones padrão. Estes devem ser usados sempre que apropriado; tente evitar a criação de ícones personalizados, a menos que sejam absolutamente necessários.

Siga a especificação de nomeação de ícone ao selecionar quais ícones usar – o nome do ícone deve refletir o que o ícone pretende comunicar. Isso é importante para quem usa um leitor de tela.

Você pode usar o navegador de ícones do GTK+ para localizar ícones recomendados.

<section id="color-vs-symbolic">

<title>Ícones coloridos vs. simbólicos</title>

O GNOME 3 fornece dois tipos de ícones: ícones simbólicos coloridos e monocromáticos. As diretrizes contidas neste HIG indicam quando usar cada tipo de ícone. Segue abaixo um guia geral.

Ícones coloridos devem ser usados para:

<list>

<item>
dispositivos
</item>

<item>
tipos de arquivo/tipos mime
</item>

<item>
ícones de aplicativo (lançador)
</item>

</list>

Todos os outros ícones devem usar o estilo de ícone simbólico. Além disso, ícones simbólicos devem sempre ser usados dentro de:

<list>

<item>
botões
</item>

<item>
listas
</item>

<item>
campos de entrada
</item>

<item>
quando o fundo é semi-transparente (como a mídia sobreposta ou os controles em tela cheia)
</item>

</list>

</section>

</section>

<section id="application-icons">

<title>Ícones de aplicativo</title>

Cada aplicativo deve ter um ícone de aplicativo único e bonito. É o rosto do aplicativo e o primeiro elemento visual que um usuário vê ao navegar por novas aplicações. A página <link xref="application-basics">noções básicas de aplicativos</link> inclui detalhes sobre o que é um aplicativo e quando fornecer um ícone de aplicativo.

Como os ícones de aplicativos são apresentados em tamanhos maiores, ícones legados estilizados SVG ou 48x48 px do Tango já não são suficientes (falta de detalhes). É essencial que seu aplicativo tenha um ícone de 256x256 px. Com o advento das telas de alta DPI, recomenda-se uma variante de 512x512 px.

<media type="image" mime="image/png" src="figures/icons/sizes.png"/>

Embora não seja tão crítico, ainda existem áreas onde os ícones de aplicativos são apresentados em um tamanho pequeno. Para manter o ícone nítido e bem definido, uma renderização específica é necessária para tamanhos de 48x48 px, 32x32 px, 24x24 px e 16x16 px. Muitos ícones do GNOME também enviam um tamanho px de 22x22 por motivos legados, mas isso não é necessário.

<media type="image" mime="image/png" src="figures/icons/sizes-small-24.png"/>

Para manter a nitidez, muitos detalhes são descartados para as variantes de baixa resolução e um curso de 1px é usado para descrever a silhueta do objeto.

Mais informações sobre como criar um ícone de aplicativo podem ser encontradas abaixo, na seção personalizada de ícones de cores.

</section>

<section id="custom-symbolic-icons">

<title>Ícones simbólicos personalizados</title>

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

<list>

<item>
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).
</item>

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

<item>
As formas preenchidas geralmente são mais rápidas de serem processadas pelo sistema visual humano do que os contornos.
</item>

<item>
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.
</item>

<item>
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.
</item>

</list>

<media type="image" mime="image/svg" src="figures/icons/inverting.svg"/>

<section id="size-and-grid">

<title>Tamanho e grade</title>

Enquanto os ícones são escaláveis e devem funcionar em qualquer tamanho, o tamanho básico da tela é 16x16 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.

</section>

</section>

<section id="custom-full-color-icons">

<title>Ícones coloridos personalizados</title>

Os ícones coloridos são desenhados e renderizados em uma variedade de tamanhos predefinidos.

<section id="perspective">

<title>Perspectiva</title>

A maioria dos ícones pode ser executada melhor usando a perspectiva “na mesa”, como se o observador estivesse de pé na frente do objeto e olhando para baixo sobre ele. Muitos ícones podem ser renderizados com uma simples perspectiva “direta” ou “na prateleira”, com o observador olhando diretamente para o objeto ao nível dos olhos.

</section>

<section id="palette">

<title>Paleta</title>

Use a paleta de cores Tango ao projetar aplicativos ou ícones de dispositivos coloridos.

Manteiga

<media type="image" mime="image/svg" src="figures/icons/palette/butter.svg"/>

Ameixa

<media type="image" mime="image/svg" src="figures/icons/palette/plum.svg"/>

Laranja

<media type="image" mime="image/svg" src="figures/icons/palette/orange.svg"/>

Vermelho escarlate

<media type="image" mime="image/svg" src="figures/icons/palette/scarlet-red.svg"/>

Chocolate

<media type="image" mime="image/svg" src="figures/icons/palette/chocolate.svg"/>

Alumínio

<media type="image" mime="image/svg" src="figures/icons/palette/aluminium1.svg"/>

Camaleão

<media type="image" mime="image/svg" src="figures/icons/palette/chameleon.svg"/>

<media type="image" mime="image/svg" src="figures/icons/palette/aluminium2.svg"/>

Azul-celeste

<media type="image" mime="image/svg" src="figures/icons/palette/sky-blue.svg"/>

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. Todos os principais pacotes gráficos livres vêm com a paleta Tango pré-instalada.

</section>

</section>

<section id="see-also">

<title>Veja mais</title>

<link href="http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines">Diretrizes de ícone Tango</link>

</section>

</page>