Criar ícones de produtos não é tão difícil quanto pode parecer à primeira vista. Saiba mais sobre como criar seu primeiro ícone de aplicativo Android do zero!
Não importa em qual mercado ou serviço um aplicativo seja distribuído, o ícone do aplicativo é a primeira coisa que um usuário em potencial notaria. As primeiras impressões são de suma importância ao tentar atrair novos usuários, o que significa que os ícones são componentes essenciais de qualquer aplicativo. E, independentemente da intenção do aplicativo, criar um belo ícone de aplicativo deve ser uma parte importante da fase de desenvolvimento de cada aplicativo. Embora muitos desenvolvedores de aplicações técnicas deixem os gráficos para designers dedicados, compreender o fundamentos do design e aplicá-los é algo que qualquer um pode fazer, desde que tenha talento para experimentação e análise. Os ícones de aplicativos não são exceção!
Este guia aborda a criação de um ícone adaptável para um exemplo de aplicativo Android usando software de código aberto. Embora o resultado final possa não estar no formato que você precisa, muitas das dicas de design discutidas aqui serão válidas em várias plataformas.
Após o lançamento dos “ícones adaptativos” com o Android Oreo, um ícone de aplicativo pode consistir em três camadas fundamentais: uma camada de fundo opaca, uma camada de primeiro plano com suporte à transparência, e um mascarar que define a forma do ícone. Todas essas camadas têm tamanho de 108 x 108 dp, embora apenas a camada interna de 72 x 72 dp possa ser visível para o usuário; a outra região, cortada pela máscara na parte superior, é usada para efeitos especiais na interface do usuário para fazer o ícone parecer dinâmico. Para os não iniciados, DP ou pixel independente de exibição representa uma unidade de medida para toda a interface do Android e é definido como igual ao tamanho de um pixel em uma tela de 160 pontos por polegada.)
Nick Butcher, do Google, fala sobre um círculo de 66 dp no centro do ícone que nenhuma máscara pode cortar, chamada de “zona segura”. É aqui que os elementos principais do design do nosso ícone ficarão mais tarde, quando chegarmos ao design real. Qualquer coisa além desse raio de 33 dp pode não ser visível no ícone enquanto ele estiver com uma máscara de forma ativada.
Como é melhor que os ícones sejam imagens vetoriais devido ao dimensionamento da IU, precisaremos de um editor de gráficos vetoriais para criar nosso ícone. Inkscape é de código aberto e uma ótima alternativa para softwares mais caros, por isso será nossa escolha para os fins deste tutorial. Eu também criei um arquivo de projeto disponivel aqui que tem a zona segura e a linha principal de design do próprio Google marcadas, e uma máscara de camada bacana que nos permite visualizar a forma do ícone.
Com o arquivo do projeto aberto no Inkscape e o Preencher e traçar (Shift+Ctrl+F), Exportar imagem PNG (Shift+Ctrl+E) e Camadas (Shift+Ctrl+L) abertos, estamos prontos para começar. O painel Camadas é onde reside a essência do projeto, com o Primeiro plano e Fundo camadas destinadas a abrigar seus componentes titulares, e Diretrizes e mascarar deve ser ativado e desativado (clicando no pequeno ícone de olho ao lado deles) para referência.
Um ícone é uma expressão da identidade de um aplicativo. Como tal, deve incorporar tanto o caráter da personalidade do aplicativo quanto as diretrizes de design específicas da plataforma, como as do Android. A linguagem do material design tem a oferecer. Para fins de demonstração, vamos supor que estamos trabalhando em um aplicativo de clima que usa elementos Material. Poderíamos usar o motivo clássico do sol e das nuvens para informar o usuário sobre o propósito do aplicativo e colocar um pouco gire neste design básico usando sombras projetadas e geometria para fazê-lo combinar bem em seu ambiente Android.
Fundo
Vamos começar montando o fundo, que consistirá em um céu azul e um sol amarelo no centro. Girando mascarar invisível, seleciono e torno visível o Camada de fundo, preencha toda a tela com o Crie retângulos e quadrados ferramenta (F4) e defina a cor de preenchimento do retângulo em Preencher e traçar para 64B5F6FF (azul claro) de acordo com o Paleta de cores de materiais. Eu então seleciono o Crie círculos, reticências e arcos (F5), e segurando Shift e Ctrl, desenhe um círculo do centro da linha principal até o segundo maior círculo e defina sua cor para FFEE58FF, o que nos dá um pequeno sol quente. É sempre bom manter a geometria básica em qualquer tipo de design, e a linguagem de design do Android, em particular, incentiva a simplicidade. Para cumprir as diretrizes de materiais, também dou ao sol uma sombra sutil através Filtros → Sombras e brilhos → Sombra projetada.
Primeiro plano
Vindo para Primeiro plano, Eu desenho um grupo de nuvens ao redor do sol desenhando círculos a partir das circunferências de outros círculos e dou a todos eles uma cor de preenchimento EEEEEEFF. Em seguida, agrupo os círculos apropriadamente clicando com o botão direito em vários objetos e selecionando Grupoe execute o gerador de sombra projetada nas duas formas finais que obtive no final. Girando Diretrizes invisível e alternando Primeiro plano e Fundo alternativamente, as camadas constituintes do ícone do nosso aplicativo meteorológico podem ser vistas. Se o ícone do aplicativo for arrastado pela tela inicial, as nuvens cairão em cascata contra um sol parado!
Resultado
mascarar agora pode ser tornado visível e ajustado com Editar caminhos por nós (F2) para tentar simular máscaras de diferentes formatos. Além disso, as duas camadas podem ser exportadas separadamente usando o Exportar imagem PNG painel para uso no Android Studio, e juntos por um Ícone do Google Play.
Ao construir um ícone de produto, é sempre uma boa prática tentar pegar o propósito de um aplicativo, destilá-lo em sua forma visual mais abstrata e representá-lo usando uma geometria simples. Quanto mais simples for qualquer componente do design, melhor e mais confiável ele geralmente funciona, e isso também vale para o design gráfico. Para a maioria dos propósitos, uma forma de objeto em primeiro plano e uma cor sólida ou um padrão em segundo plano (ou vice-versa) funciona muito bem, mas como no nosso caso de exemplo, outra camada de objetos pode ser usada se for sentida necessário; muito empilhamento ou uso de sombras só complicará o design do ícone.
Você pode ler mais sobre o design de ícones nas interfaces do Material no site oficial Site de materiaise obtenha ícones de sistema gratuitos para usar no design de ícones em o mesmo site.