Um conjunto de ícones coerente com IA: um ícone mestre, onze irmãos, um só estilo

Peça a um modelo de imagem um ícone de sino e você terá um sino bonito. Peça depois um cadeado e terá um cadeado bonito, desenhado pelo que parece outra mão: linhas mais grossas, cantos mais vivos, uma leve inclinação, um toque de sombreado que o sino nunca teve. Coloque os dois lado a lado numa barra de abas e o app parece montado a partir de três pacotes gratuitos. Um conjunto de ícones é julgado como conjunto, e quem olha nota o que destoa muito antes de notar um ícone bom.

Este guia cria doze ícones para um app de notas inventado chamado Quillbox: início, busca, notificações, calendário, mensagens, câmera, favoritos, filtros, bloqueio, e-mail, pasta e excluir. O método vale para qualquer lista. Defina as regras, crie um ícone mestre que as cumpra, derive todos os outros desse mestre, confira-os no tamanho em que as pessoas vão realmente vê-los e termine redesenhando em vetor.

Escreva as regras antes do primeiro prompt

Coerência são alguns números que todos os ícones compartilham. Anote-os num único cartão e deixe-o aberto o tempo todo:

1. 01A grade. Uma tela quadrada, por exemplo de 24 por 24 unidades, com uma margem de 2 unidades que nada atravessa, a não ser de propósito. Cada ícone é desenhado nessa grade e só é redimensionado no final.
2. 02O traço. Uma única espessura, por exemplo 2 unidades, com pontas e junções arredondadas. Ícones de contorno e ícones preenchidos não se misturam num mesmo conjunto; escolha um.
3. 03O raio do canto. Um único raio para cada retângulo, como 3 unidades nos cantos externos. Um calendário de cantos suaves ao lado de um ícone de e-mail de cantos vivos é o deslize mais comum.
4. 04As formas de referência. Um círculo, um quadrado e um retângulo largo que ocupem mais ou menos a mesma área, para que um ícone redondo e um quadrado pareçam do mesmo tamanho aos olhos.
5. 05A paleta. Uma única cor de linha para o conjunto e, no máximo, um destaque para o estado ativo. Sem degradês, sem sombras, sem uma segunda cor de linha para enfeitar.
6. 06A perspectiva. Plana e de frente. Sem vistas de três quartos, sem inclinação isométrica.

Gere um ícone mestre, e só um

Escolha o mestre com cuidado: um ícone simples que use a maioria das regras de uma vez. Uma casa funciona bem, porque tem um traço reto, um canto, uma junção e uma pequena forma interna. Passe o cartão para o prompt em palavras simples e peça um único ícone sobre um fundo liso, nada mais.

Dois tipos de modelo do catálogo servem para isso. Recraft 20B SVG é descrito como criador de imagens vetoriais SVG para gráficos e ícones escaláveis, e Recraft V4.1 Text to Vector como criador de imagens em estilo vetorial editáveis a partir de um prompt. Se preferir partir de um desenho rasterizado com recorte limpo, Ideogram V3 Generate Transparent devolve imagens com fundo transparente. Rode o prompt muitas vezes e julgue os resultados pelo cartão, não pelo gosto. O mestre que você mantém é o que melhor cumpre as regras, mesmo que outro rascunho seja mais bonito.

Derive os irmãos do mestre

É aqui que a maioria dos conjuntos desmorona: onze prompts novos dão onze interpretações novas. Em vez disso, faça do mestre a referência de tudo o que vem depois. O catálogo tem um caminho direto para isso. Recraft V4 Create Style transforma imagens de referência num ID de estilo reutilizável, e Recraft V4 Style Text to Vector desenha um gráfico vetorial a partir de um prompt mais esse ID de estilo, ou diretamente das imagens de referência. Entregue o seu mestre e, assim que tiver dois ou três bons irmãos, adicione-os também como referências, para que o estilo seja aprendido de uma pequena família e não de um único desenho.

Deixe cada prompt de irmão sem graça. A mesma frase do mestre, só o objeto muda: um sino, uma lupa, um cadeado. Evite adjetivos que puxem o estilo para longe, como fofo, detalhado ou realista. Descreva o objeto pelas formas mais simples: um cadeado é um retângulo arredondado sob uma alça em semicírculo, com uma linha curta para o buraco da fechadura.

• Objetos difíceis primeiro. Câmera, filtros e calendário têm mais partes e são os que mais se desviam. Se eles se mantiverem, o resto também se mantém.
• Metáforas simples. Notificações é um sino, favoritos um coração, excluir uma lixeira. Uma metáfora engenhosa é outra decisão de design, não um experimento de prompt.
• Um objeto por ícone. Uma pasta com uma estrela são dois ícones. Adicione o selo depois, em vetor, do mesmo jeito em todo ícone que precisar dele.
• Pequenos ajustes, não novas gerações. Se um bom irmão tem um único detalhe errado, como um canto vivo numa câmera de resto certa, Ideogram V4.5 Edit aceita uma máscara, então você pode mudar só essa parte.

Travar o estilo reduz a variação; não a elimina. Conte com algumas rodadas até os doze ficarem bem juntos, e com corrigir o resto à mão nas próximas etapas.

Alinhe-os e confira em tamanho pequeno

Coloque os doze numa única folha, numa grade de 4 por 3, sobre o mesmo fundo e no mesmo tamanho. Depois reduza a folha até cada ícone ficar mais ou menos do tamanho que terá no app: 24 pixels para uma barra de ferramentas, 16 para um menu ou uma lista densa. Olhe num celular de verdade, não só num monitor grande. Percorra a lista:

• O teste de apertar os olhos. Desfoque a vista. Os doze devem ter o mesmo peso de cinza. O que parecer mais escuro tem um traço mais grosso ou linhas demais.
• O teste de tamanho. Ícones redondos e quadrados devem parecer do mesmo tamanho. Se a busca parecer menor que o e-mail, amplie-a até o círculo de referência.
• O teste de detalhe. Em 16 pixels, qualquer vão mais estreito que um traço se fecha. O buraco da fechadura do cadeado e o anel da lente da câmera são as vítimas de sempre; tire-os ou abra-os.
• O teste de adivinhar. Mostre a folha pequena a alguém que ainda não a viu e pergunte o que cada ícone significa. O que fizer a pessoa hesitar precisa de uma forma mais simples ou de um rótulo ao lado no app.
• O teste de estado. Experimente cada ícone na cor de destaque na aba ativa. Se uma versão preenchida faz parte do seu sistema, ela deve ser preenchida do mesmo jeito nos doze.

Finalize em vetor

Mesmo quando um modelo devolve um SVG, abra-o antes de confiar nele. Caminhos gerados costumam ser irregulares: dezenas de nós onde três bastariam, traços salvos como contornos preenchidos de larguras um pouco diferentes, cantos quase, mas não exatamente, do mesmo raio. Para um conjunto, o caminho mais limpo é redesenhar cada ícone na sua grade com traços reais, usando o arquivo gerado só como guia por baixo. Nosso guia de conceitos de logo com IA para vetor cobre o traçado à mão e a simplificação de formas, e os mesmos hábitos valem aqui.

O que é específico dos ícones é a construção compartilhada. Defina uma vez a espessura do traço e o raio do canto como um estilo no seu editor e aplique-o aos doze, para que uma mudança posterior no traço altere o conjunto inteiro. Alinhe os pontos à grade para que as linhas caiam em pixels inteiros no tamanho principal. Mantenha o arquivo mestre com cada ícone na sua própria prancheta, nomeado pelo que significa, como icon-search em vez de lupa, e exporte de lá nos formatos que os seus desenvolvedores pedirem.

Se os ícones precisam conviver com uma identidade mais ampla, a paleta e o ID de estilo podem vir do mesmo lugar que o resto da marca, como no painel de identidade de marca para uma torrefação fictícia. A ideia de congelar uma peça mestre e construir todo o resto em volta dela é a mesma que mantém um conjunto de papelaria coeso.

O que continua sendo trabalho seu

O modelo entrega rascunhos e uma direção. O conjunto final é o redesenho: traços coerentes, uma grade de verdade, testado em tamanhos reais. Confira se nenhum ícone é quase uma cópia do símbolo conhecido de outra empresa, e siga as diretrizes da plataforma quando uma loja ou um sistema operacional tiver regras próprias para ícones de app. Quando os doze se sustentarem, acrescentar um décimo terceiro é fácil: o cartão, o mestre e o ID de estilo já estão lá. Explore os modelos vetoriais e de design em /models e comece o seu mestre no estúdio.