Crie ícones com o Icon Composer

Saiba mais sobre o Icon Composer, uma nova ferramenta para a criação de ícones de apps com aparência nativa no iOS, iPadOS, macOS e watchOS.

Com os avanços na resolução da tela e o lançamento dos modos de aparência para os ícones de apps em várias plataformas da Apple, o processo de criação de ícones ficou mais complexo e demorado. O Icon Composer se une à sua ferramenta de design existente para simplificar bastante o processo de design de ícones de apps. Usando uma arte, agora é possível criar um único arquivo de ícone que se adapta a várias plataformas da Apple (iPhone, iPad, Mac e Watch) e modos de aparência, incluindo escuro, colorido e claro/escuro transparente.

Se estiver trabalhando com elementos gráficos planos, use uma ferramenta vetorial capaz de exportar SVGs para alcançar a melhor aparência em qualquer escala. Utilize os modelos de ícones de apps pré-criados para exportar assets com a formatação correta e incluir a nova grade de ícones de apps. Aplique um design em camadas para facilitar o ajuste rápido de cores e outras propriedades para diferentes modos de aparência dos ícones de apps. Mantenha a arte original plana, opaca e simples. Utilize o Icon Composer para agregar efeitos dinâmicos, como desfoque, sombra e realces especulares.

Se você usa o Illustrator, utilize o script incluído no modelo de ícone de app para gerar assets automaticamente. Faça download do script no site Apple Design Resources. Garanta a consistência do tamanho da tela para que a arte exportada mantenha sua posição depois de colocada no Icon Composer, que usa numeração nos nomes de arquivos para controlar a ordem de composição do índice Z. Aplique cores de fundo sólidas e gradientes no Icon Composer. Faça a conversão de texto em contornos antes de exportar. Exporte gradientes personalizados, imagens rasterizadas e elementos não SVG como PNGs com fundos transparentes. Note que as máscaras circulares ou retangulares arredondadas não são incluídas nas exportações porque são aplicadas posteriormente de forma automática.

Para personalizar o plano de fundo dos ícones de apps, selecione a tela na barra lateral e escolha uma cor ou um gradiente no inspetor. A barra lateral organiza as camadas em grupos, que controlam como os elementos se empilham e recebem as propriedades de vidro. Os grupos podem ter até quatro camadas. Na parte inferior da tela, há opções para os modos de plataforma e aparência. O inspetor oferece controles para propriedades de aparência e configurações de documentos. As camadas recebem o Liquid Glass automaticamente, mas você pode desativar essa opção. Os controles de cor e composição são úteis para a criação de variantes para os diferentes modos de aparência. Ao projetar para o modo escuro, preenchimentos e outras propriedades relacionadas a cores podem precisar ser ajustados a fim de garantir a legibilidade. Para aparências mono, é recomendável definir pelo menos um elemento como branco e fazer o mapeamento de outras cores para tons de cinza. O painel de prévia permite a visualização dos ícones em diferentes contextos, testes de legibilidade e sobreposição das grades de ícones.

Para implementar, salve o arquivo .icon, arraste-o para o Xcode e selecione-o no editor de projetos. A ferramenta simplifica o processo de geração de assets, reduzindo o tempo gasto em ferramentas de design para recriar os efeitos de vidro e gerar os assets.