<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="icon-design" 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-2021</mal:years>
    </mal:credit>
  </info>

<title>Criando ícones</title>

<p>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 <link xref="icons-and-artwork">Ícones e obras de arte</link>.</p>

<section id="full-color-icons">
<title>Ícones coloridos</title>

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

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

<p>O <link href="https://gitlab.gnome.org/Community/Design/HIG-app-icons/blob/master/template.svg">modelo de ícone colorido</link> inclui uma grade de 2px que deve ajudá-lo a evitar a adição de detalhes mais finos do que o limite desejado.</p>

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

<section id="perspective">
<title>Perspectiva &amp; forma</title>

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

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

<media type="image" mime="image/png" src="figures/icons/aspect-ratio.svg"/>

<p>Um <link href="https://gitlab.gnome.org/Community/Design/HIG-app-icons/raw/master/template.svg">modelo de grade</link> 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.</p>

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

</section>

<section id="shadows">
<title>Sombras</title>

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

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

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

<section id="palette">
<title>Paleta</title>

<p>Abaixo está a paleta de cores do ícone de aplicativo do GNOME de linha de base.</p>

<!-- will chop up into named sections once the colors stabilize -->


<table>
<tr>
<td><p>Azul</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/blue.png"/></td>
</tr>
<tr>
<td><p>Verde</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/green.png"/></td>
</tr>
<tr>
<td><p>Amarelo</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/yellow.png"/></td>
</tr>
<tr>
<td><p>Laranja</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/orange.png"/></td>
</tr>
<tr>
<td><p>Vermelho</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/red.png"/></td>
</tr>
<tr>
<td><p>Roxo</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/purple.png"/></td>
</tr>
<tr>
<td><p>Marrom</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/brown.png"/></td>
</tr>
<tr>
<td><p>Neutro</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/neutral.png"/></td>
</tr>
</table>


<p>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 <link href="https://gitlab.gnome.org/Teams/Design/HIG-app-icons/raw/master/GNOME%20HIG.gpl?inline=false">está disponível</link>.</p>

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

</section>
</section>


<section id="custom-symbolic-icons">
<title>Ícones simbólicos</title>

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

<list>
<item><p>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).</p></item>
<item><p>Evite usar qualquer perspectiva em ícones simbólicos, mantendo uma visão ortogonal simples.</p></item>
<item><p>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.</p></item>
<item><p>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.</p></item>
<item><p>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.</p></item>
</list>

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

<section id="size-and-grid">
<title>Tamanho e grade</title>

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

</section>

</section>


<!-- graphic assets TODO
<section id="stock-icons">
<title>GNOME Icon Pack</title>

<p>To avoid starting from scratch, we prepared a selection of commonly used icons you can include in your application, or create derivatives of. The set is licensed CC0, so they can be used regardless of your project's license.</p>

</section>
-->

</page>
