Crie ícones com o Icon Composer

Olá! Esta é a sessão Criar ícones com o Icon Composer. Sou Lyam e faço parte da equipe de design. Nesta sessão, vou mostrar como usar a nova ferramenta Icon Composer para preparar os próprios ícones de seus apps para o iPhone, iPad, Mac e Apple Watch.

Caso ainda não tenha assistido a "Dar as boas vindas ao novo visual dos ícones de apps", essa sessão aborda todas as atualizações da nossa linguagem de design de ícones nas plataformas Apple, além de alguns outros modos bem legais no iOS e no macOS que facilitam mais a personalização. Recomendo que você a assista primeiro e depois descubra aqui como fazer tudo isso por conta própria. Antes de começar, gostaria de falar um pouco sobre como os ícones mudaram ao longo do tempo. Você deve se lembrar que, por anos, os ícones dos apps para Mac tinham vários tamanhos para que cada arte fosse otimizada para o local de exibição. Isso foi antes das telas Retina, quando era importante que os elementos se encaixassem na grade de pixels para maximizar o contraste e a legibilidade.

Depois vieram o iOS e o watchOS, as telas 2X, com o dobro da densidade de pixels, e então as telas 3X. Isso resultou na criação de muitos ícones. Há alguns anos, em resposta aos avanços em resolução de tela e dimensionamento automático, adicionamos a opção de entregar só uma imagem por plataforma e deixar o sistema fazer o resto, o que simplificou as coisas. Finalmente, 2025.

Com os modos escuro e colorido se expandindo ainda mais este ano no iOS, o macOS adotando essas aparências e o Apple Watch ganhando um novo visual, estamos diante de um momento decisivo semelhante. Já que estamos trazendo consistência para nossa linguagem de ícones de apps, aproveitamos essa oportunidade para simplificar novamente o processo.

Agora é possível fazer tudo isso em um só arquivo usando o Icon Composer.

Se o ícone for muito complexo ou ilustrativo, talvez você ainda prefira fazer o upload de imagens individuais no Xcode. E você não precisa fazer nada para eles terem o novo e belo tratamento de borda no dispositivo. O termo técnico para isso é um realce especular. No entanto, se sua arte puder ser traduzida para a linguagem de design, como esta versão mais gráfica, leve-a para o Icon Composer, Ela poderá ganhar vida com todas as novas possibilidades do Liquid Glass.

O Icon Composer se integra às suas ferramentas de design existentes, oferecendo controle total sobre nossos materiais. E simplifica a criação de ícones de apps em nossas diferentes plataformas e aparências. É a mesma ferramenta que usamos este ano para atualizar todos os nossos próprios ícones e que nos poupou tempo. Com uma só arte, a partir de hoje, você pode criar designs para iPhone, iPad, Mac e Apple Watch, dando ao app uma identidade consistente nas plataformas. Aproveite ao máximo todas as propriedades dinâmicas e exclusivas do vidro, visualizando sua aparência em tempo real e testando as seis novas aparências: padrão, escuro, claro transparente, escuro transparente, claro colorido e escuro colorido.

Quando estiver contente com sua arte, você poderá exportar as imagens para usar no marketing ou em outro lugar. E você não precisa mais se preocupar em criar todos aqueles tamanhos diferentes. Criamos os materiais para se adaptarem e se ajustarem ao seu ícone.

Vamos descobrir como é o novo fluxo de trabalho com o Icon Composer. Em sua ferramenta de design preferida, exporte as camadas e importe-as no Icon Composer, onde você pode começar a fazer ajustes de vidro, modos de aparência e plataformas. Você já pode salvar e enviar o arquivo para o Xcode. Vamos nos aprofundar um pouco mais. Primeiro, o processo de design. Caso os elementos gráficos sejam planos, use uma ferramenta que desenhe vetores. A capacidade de exportar SVGs oferecerá mais escalabilidade posteriormente. Depois de abrir o arquivo, vamos configurar o tamanho certo da tela. Para mim, o jeito mais fácil de fazer isso é usando um dos nossos modelos de ícones de apps. Eles estão disponíveis para Figma, Sketch, Photoshop e Illustrator, todos encontrados no site Apple Design Resources. Se o design for para iPhone, iPad ou Mac, eles agora usam a mesma tela de 1.024 pixels, o que facilita. Também têm uma nova grade e o formato de retângulo arredondado. E agora o Apple Watch tem 1.088 pixels, que é superior à quantidade de pixels do retângulo arredondado, e usa a mesma grade. Isso facilita a adaptação dos designs nas plataformas. Em seguida, você já pode começar a criar seu ícone com camadas. Se você já sabe criar ícones de apps para tvOS ou visionOS, isso significa que já tem uma boa compreensão de camadas. Basicamente, cada camada representa um passo na profundidade Z, em que a parte inferior é o fundo e a outra se sobrepõe. Em muitos casos, isso é algo simples, como um primeiro e segundo planos, por exemplo, no app Mensagens. Em outros, a arte pode parecer ter um pouco mais de camadas, como no app Casa.

Além de organizar camadas por Z, separar as cores em camadas proporcionará muito mais controle posteriormente no Icon Composer. Veja este exemplo do app Traduzir. Os balões de fala usam duas camadas separadas, o que é um bom começo. Separar o texto dos balões vai me dar ainda mais controle. Dessa forma, quando eu criar minha variante no modo escuro no Icon Composer, vou precisar apenas mudar um preenchimento.

Durante o design, também temos de considerar quais decisões criativas podem ser tomadas ao usar o Icon Composer. Vamos voltar ao app Traduzir. Eu acho que ficaria bem legal adicionar um pouco de desfoque na sobreposição, talvez até uma sombra sutil para dar um pouco de elevação.

Como vou criar essas camadas com Liquid Glass, essas sobreposições são propriedades dinâmicas que poderiam ser adicionadas ao Icon Composer, assim como brilho especular, opacidade e transparência.

Em vez de tentar incorporar esses elementos no arquivo, o ideal é reduzir minha arte original à sua essência gráfica, para que fique plana, opaca e fácil de controlar.

Quando a arte estiver definida, vamos exportar as camadas como SVGs. Essa ação pode ser um pouco diferente para cada ferramenta. Para quem usa o Illustrator, criamos uma camada para script SVG que automatiza esse processo, e você pode baixá-lo. Exportar o tamanho da tela garante que tudo fique na posição correta no Icon Composer. Numere-as na ordem Z. Essa ordem será automaticamente seguida. No entanto, é possível reordená-las mais tarde.

As cores de fundo e os gradientes simples são adicionados no Icon Composer, por isso, não precisam ser exportados.

Caso também queira exportar texto, será necessário converter o texto em contornos, pois o formato SVG não preserva fontes. Quando usamos gradientes personalizados, imagens rasterizadas, elementos ou softwares que não possam ser expressos em SVG, exportamos essas camadas como PNG, um formato sem perdas que mantém um fundo transparente. Uma última dica: nunca incluímos o retângulo arredondado nem a máscara circular nas exportações. Neste exemplo da Siri, não queremos fazer a exportação assim, pois essa máscara será aplicada automaticamente depois, garantindo o corte perfeito. Bem melhor.

Depois de exportar as camadas, você já pode abrir o Icon Composer. Vamos explorar um projeto existente.

À esquerda, está a barra lateral com a tela, os grupos e as camadas. No centro, o painel de prévia com todas as diferentes artes e controles de prévias. À direita, o inspetor, onde encontramos as propriedades de aparência e opções de documento.

Quando você abre o Icon Composer pela primeira vez, sua aparência é semelhante a esta. Apenas a tela é exibida. Mas você provavelmente não vai querer usar esse tom exato de azul. Para definir a cor de fundo, basta acessar a barra lateral, selecionar a tela, acessar o inspetor e escolher uma cor ou um gradiente. Vou usar um destes estilos predefinidos do sistema, que são fundos claros e escuros otimizados para os novos materiais, e notar em tempo real a atualização na prévia.

Você percebe como as seções mesclam umas nas outras. Vamos analisar cada área, começando pela barra lateral. Arraste e solte as camadas. Elas serão organizadas em ordem alfabética em um grupo.

No Icon Composer, os grupos controlam como os elementos se sobrepõem e recebem propriedades de vidro. O padrão é sempre uma, mas você pode ter até quatro. Descobrimos que esse número fornece os limites ideais de complexidade visual que um ícone deve ter. No app Casa, usei as quatro, assim posso fazer de cada camada um pedaço único de vidro.

Na parte inferior, estão as plataformas e os modos de aparência, ou os três estilos visuais já conhecidos no design: claro, escuro e colorido.

Neste ano, esses modos passaram a se chamar padrão, escuro e mono. E a arte agora gera automaticamente as versões claras e coloridas.

E tudo isso pode ser visualizado com um clique na miniatura.

No inspetor, encontramos todos os controles de aparência e ajustes do documento. Isso é útil para escolher para quais plataformas criar o design. Estes são os controles de aparência. Ao arrastar uma camada para o Icon Composer, você perceberá que ela recebe automaticamente o Liquid Glass.

Na camada, você pode escolher se quer desativar ou ativar esse recurso. Além disso, há vários outros controles úteis e conhecidos nas ferramentas de design. Os controles de cor são úteis ao criar variantes para os modos escuro e mono. Os controles de composição são ótimos para adaptar uma arte para diferentes plataformas. No nível de grupo, notaremos que os controles têm uma aparência um pouco diferente. Aqui você encontra todas as opções de Liquid Glass. Algumas são definidas automaticamente, mas recomendamos continuar ajustando para obter a aparência desejada.

Ao personalizar essas propriedades, saiba que algumas estão pré-configuradas para serem usadas de acordo com a aparência, como opacidade, modo de mesclagem e preenchimento. Outras são usadas em tudo, pois os atributos são consistentes entre os modos. Se quiser ainda mais controle, clique no sinal de adição no cursor para criar uma variante individual de uma propriedade.

Aqui estão algumas dicas ao usar as propriedades, algumas coisas que eu geralmente gosto de observar.

Repare o dia no ícone do Calendário. Para mim, está muito complexo e estufado nas áreas estreitas. Podemos resolver isso desativando o brilho especular no grupo ou desativando totalmente o Liquid Glass na camada.

Sombras. Sombras neutras são as sombras predefinidas. Elas têm nuances, são versáteis e ficam lindas em qualquer fundo. Porém, ao usar cor em um fundo branco, essa é uma ótima oportunidade para testar sombras cromáticas. A cor da arte transborda para o fundo, criando um visual agradável que enfatiza a iluminação e a fisicalidade do material.

E ainda podemos manter as sombras neutras para escuro e mono criando uma variante.

Falando em aparência escura, também há alguns pontos importantes a considerar. Por exemplo, preenchimentos. Sempre uso preenchimentos para ajudar a otimizar as artes. Considere o Dicionário. Se eu não fizesse nenhum ajuste de escuro, ficaria assim, o que é um ótimo exemplo porque destaca duas coisas. Uma é que o marcador marrom desaparece no fundo preto. A outra é que estou sentindo falta daquele vermelho coral característico. Por isso, vamos mudar o preenchimento. Essa lógica também pode se aplicar a outras propriedades relacionadas à cor, como opacidade e modo de fusão.

Digamos que importei um PNG e não posso usar um preenchimento. Bem, o mesmo princípio pode ser alcançado criando outra imagem em nosso software de design e importando-a como uma variante.

A legibilidade também é essencial para aparências mono. Ao definir que pelo menos um elemento do ícone seja branco, geralmente a parte mais proeminente ou reconhecível, garanta que ele se destaque bem. E as demais cores podem ser mapeadas para tons de cinza. O Icon Composer fará uma conversão automática, mas é importante fazer o ajuste para obter o melhor contraste. Ao projetar entre plataformas circulares e de retângulo arredondado, em muitos casos, você não precisa fazer nada, pois a nova tela do relógio é visualmente maior e baseada na mesma grade. Porém, é necessário prestar atenção na composição. Considere fazer ajustes ópticos na forma circular. Se houver elementos tocando a borda da tela, aumente o tamanho deles para que voltem a tocar as bordas no Apple Watch. Outra opção é aplicar o conceito de sangria na arte original, caso você já conheça esse conceito. Vamos dar uma última revisada no painel de visualização.

Os controles no canto superior direito permitem que você altere o fundo enquanto exibem o ícone. É ótimo para exibi-lo em um contexto diferente. E testar imagens de fundo ou imagens por trás dos novos modos, para verificar a legibilidade.

Você também pode sobrepor a grade de ícones, descobrir como a luz se movimenta e observar bem de perto e em escala reduzida.

Depois de terminar no Icon Composer, para entregar, você só precisa salvar o arquivo .icon, arrastá-lo para o Xcode e escolher o ícone no editor de projetos. Ao compilar e executar seu app, você poderá perceber como ele se ajusta às plataformas e aparências.

Para concluir, o processo de design costumava começar e terminar em ferramentas de design tradicionais. O Icon Composer é um ponto de contato adicional no qual é possível dar vida aos designs de maneiras novas e dinâmicas em todos os nossos produtos, além de gastar menos tempo gerando ativos e tentando recriar efeitos de vidro no Photoshop. Todos nós já tivemos de fazer isso. O design de ícones está mudando de imagens estáticas para artes expressivas em várias camadas que respondem ao comando do usuário e se adaptam às aparências. Passou a ser uma experiência mais avançada e integrada ao dispositivo.

Se quiser explorar mais, o Icon Composer está disponível em versão beta e vai continuar apresentando novos recursos e melhorando com base no seu feedback. Recomendamos que você baixe, use o Assistente de Feedback para solicitar melhorias e explore os recursos disponíveis para essa nova ferramenta. Agradeço sua participação.