Como desenhar ícones

Introdução

Este guia é baseado nos conteúdos da designer Helena Zhang, uma das criadoras do Phosphor Icons, e nos conteúdos do Vincent Le Moign, criador do Streamline Icons. Todos as fontes utilizadas encontram-se no fim desse guia e são extremamente recomendadas para ampliar seus estudos acerca do tema.

Grid

Um bom grid é composto por pelo menos três elementos: a moldura (frame), responsável por delimitar o espaço em que o ícone será desenhado; a área de segurança, que é um respiro ao redor da moldura; e o pixel grid, que serve para guiar o desenho dos ícones.

1. Moldura

A moldura define o tamanho dos nossos ícones e também o nível de detalhes que eles terão. Quanto maior a moldura, maior o nível de detalhes dos ícones.

Os tamanhos mais comuns são: 16x16, 24x24, 32x32 e 48x48.

Escolher a moldura correta é importante para evitar dores de cabeça no futuro. Se você tentar redimensionar uma moldura para outro tamanho, suas formas chave não encaixarão corretamente e seus ícones também ficarão desalinhados no grid.

Formas chave (key shapes)

Espessura da linha

Onde encaixar as linhas

Cantos, terminações e "joins"

Formas abertas

Ajustes ópticos

Linhas vs Achatamento

Variantes

Dicas extras

Referências