Como criar ícones para seu aplicativo mobile

Como criar ícones para seu aplicativo mobile

Nem sempre encontramos na web os ícones que mais nos agradam. Para resolver esta questão precisamos criar nossos próprios ícones usando um editor de imagens. Eu não sou designer e provavelmente você também não é. Mas mesmo assim precisamos de ícones para deixar nossos apps com uma aparência mais profissional. Qual a solução? Um pouco de esforço, criatividade e as ferramentas certas.

Fiz esse passo a passo para você que não tem um editor de imagens instalado no computador, nunca usou Photoshop, Illustrator ou Corel Draw. Para quem sabe mexer nestes programas, o que está esperando? Vai logo fazer seus apps! Para quem não sabe, vem comigo!

1. Escolha o assunto do seu aplicativo

Antes de começar a criar ícones você precisa planejar quais serão as abas do seu app. Se você não faz ideia o que seja uma aba, leia este post e seja feliz: Como criar um app . Neste passo a passo vou mostrar como você pode criar um ícone parecido com o que uso na aba “Destaque”  do app Guia Berrini – um guia de lojas e serviços da região da Av. Berrini, em São Paulo. Antes disso, vamos ao planejamento. Pensando nas necessidades do meu público, escolhi e criei 5 abas:

– Destaque: onde posso divulgar promoções, eventos e notícias importantes da região
– Onde comer: lista de restaurantes, lanchonetes e pizzarias
– Conveniência: serviços importantes como taxi, chaveiro, gráficas, motoboy e eletricista
– Moda e bem estar: cabeleireiros, clínicas de estética, lojas de roupas, sapatos e acessórios
– Para meu carro: postos de gasolina, lava-rápido, oficinas mecânicas e concessionárias

A partir disso pensei nos ícones que melhor representariam cada uma dessas abas. Pense um pouco: que ícones você usaria? Lembre-se que não há só uma opção. Você deve escolher ícones que façam sentido para o usuário do seu app. Confira minha escolha para cada aba e o que me levou a ela:

Destaque: escolhi um desenho de “ticado”, dessas que a gente faz numa lista quando conferimos um item e está tudo ok. As vezes é difícil escolher um ícone para um conceito abstrato mas esta opção me pareceu interessante.

Onde comer: selecionei um garfo e uma faca. Essa foi uma escolha fácil. Nada mais direto que usar talheres para representar comida.

Conveniência: um relógio estilizado para representar economia de tempo. É muito chato precisar de um taxista, um encanador ou gráfica e perder tempo procurando o telefone certo.

Moda e bem estar: acredito que as mulheres e a moda estão intimamente ligadas, por isso a escolha de um sapato de salto alto para compor este ícone.

Para meu carro: A silhueta de um automóvel me pareceu bem direta para esta aba.

Compartilhe: Essa aba é criado automaticamente pela Fábrica de Aplicativos. Seu ícone pode ser modificado na tela em que você gera o app. Para a aba “Compartilhe” escolhi o desenho de um megafone porque quero que todo mundo tenha a ideia de que é legal compartilhar meu aplicativo.

Agora pense no seu app e nos ícones que melhor se encaixam em cada aba. Lembre-se dos ícones que você conhece – esses que você tem no seu computador ou vê na internet.  O que mais gosta neles? O que não gosta? Para ficar bom em qualquer coisa é preciso praticar e neste post você vai dar seus primeiros passos na criação de ícones. Depois de planejar, vamos à parte prática.

2. Desenhando a base do ícone

1- Acesse o site https://www.photoshoponline.com.br/editor/

2 – Clique em Criar uma nova imagem
Criar uma nova imagem

3 – Na tela que apareceu digite o nome do seu ícone e defina as medidas de largura para 114 e altura 114. Só para lembrar, esta medida está em pixels. Marque a opção “Transparente” e dê Ok.
Nome e tamanho

4 – Agora vamos criar uma imagem que será a base do nosso ícone. Na aba Ferramentas, à  esquerda da sua tela, selecione a Ferramenta Letreiro, clicando em cima desse quadradinho pontilhado ou apertando a tecla “M” no seu teclado.

Ferramenta letreiro

Vamos criar uma seleção em forma de bolinha, então mude a configuração da ferramenta de Letreiro regular para Letreiro elíptico, clicando na forma arredondada logo abaixo da palavra Editar, no menu. Veja a imagem abaixo para encontrar a ferramenta.

Eliptica

5 – Com a ferramenta Letreiro elíptico selecionada, clique no canto da imagem transparente de 114 x 114 pixels que você criou e desenhe uma bolinha. Depois pinte de azul usando a ferramenta Degradê, como na imagem:

Bolinha azul

6 – Este será o fundo do nosso ícone. Agora precisamos criar a moldura para este fundo. Para fazer isso você deve selecionar novamente a ferramenta Letreiro elíptico ( tecla de atalho M ) e desenhar uma nova bolinha dentro da bolinha azul. Vai ficar assim:

Nova bolinha

7 – Feito isso você vai copiar e colar esta seleção com as teclas de atalho Ctrl + c e depois Crtl + v. Isso vai dar origem à Camada 1 com uma bolinha azul um pouco menor que a nossa bolinha original.

8 – Na aba Camadas selecione a Camada 0, onde está a primeira bolinha azul que criamos.  Basta clicar em cima dela. Agora vá em Ajuste>Tonalidade&Saturação… ( ou use o atalho Ctrl + u ) e altere os valores conforme a imagem:

Matiz Saturação

9 – Agora você vai criar um efeito de transparência para nosso ícone. Clique novamente na ferramenta Letreiro elíptico ( M ) e crie uma nova bolinha selecionando a parte azul de nossa imagem. Vai ficar assim:

Seleção bolinha

Feito isso, o próximo passo é apertar e segurar a tecla Ctlr. Você vai perceber que aparece um sinal de menos ( – ) ao lado da ferramenta Letreiro. Ainda sem soltar a tecla  Ctrl, clique e arraste a ferramenta Letreiro dentro da atual seleção, criando uma bolinha um pouco menor. Isso diminui sua seleção anterior, criando uma meia lua .  Agora pode soltar o mouse e a tecla Ctrl. Pronto! Você deve ter uma imagem parecida com esta abaixo. Se não tiver, refaça os passos até conseguir:

Seleção meia lua

10 – Agora você vai pintar de branco essa área selecionada. Para fazer isso você deve criar uma nova camada. Você vai até a aba Camadas e vai clicar no ícone “Nova Camada” – o quadradinho indicado pela seta vermelha. Então você terá 3 camadas na sua tela de trabalho:

3 camadas

11 – Com a Camada 3 selecionada você vai clicar na ferramenta de Seleção de cor e escolher a cor branca. É este retângulo preto que fica na aba Ferramentas, indicado pela seta vermelha da imagem abaixo:

Retangulo-de-cor

Ao clicar neste retângulo a tela Color Selector será mostrada. Para escolher uma cor basta clicar nas bolinhas de seleção e arrastá-las para a cor que quiser. Depois é só clicar em Ok para confirmar. Arraste a bolinha para a cor branca, dê ok e o retângulo que mostra a cor escolhida vai ficar branco. Ok até aqui?

Selecionar cor branca

12 – Depois de escolher a cor você vai até a aba Ferramentas e seleciona a Lata de tinta ( tecla de atalho G ) e clica dentro da seleção em forma de meia lua. Deu certo? A seleção ficou branca? Espero que sim. Para desfazer a seleção ( esse pontilhado em volta da meia lua ) aperte as teclas Crtl + D. Você deve ficar com uma imagem parecida com esta:

Meia lua

13 – Olhando para esta imagem não parece que deu muito certo, não é? Você ainda precisa alterar a transparência da nossa meia lua. Para fazer isso você vai até a aba Camadas e clica no ícone indicado pela seta vermelha:

propriedades

14 – Altere a Opacidade da camada para 20. Com isso terminamos a base do nosso ícone. A imagem ficará assim:

Base pronta

3. Desenhando a base do ícone

Já temos a base do nosso ícone. A partir dela você pode criar quantos ícones quiser, mudando a cor e formato. Como o ícone que estamos criando hoje  é para a aba Destaque e eu sou péssimo em desenhar, procurei uma imagem pronta na internet que vai servir muito bem. Veja:

Ticado

1 – Salve a imagem acima no seu computador. Depois abra essa imagem no Photoshop Online através  do caminho: Arquivo>Abrir imagem… Aponte para  o local onde você a salvou e clique em abrir.

Feito isso, vamos mudar a cor desta imagem de verde para branca. Clique em Ajuste>Brilho&Contraste… e acerte a luminosidade para 100, como na imagem abaixo:

Ticado branco

2 – Clique em OK para confirmar a alteração e depois clique na ferramenta Letreiro ( tecla de atalho M ). Mude de Letreiro elíptico para Letreiro retangular, clicando no retângulo pontilhado abaixo de Editar.  Feito isso,  selecione toda a imagem branca que acabou de criar e a copie com o comando Crtl + c.

3 – Agora clique na janelinha da nossa base azul e cole a imagem do ticado que acabou de copiar ( use o comando Ctrl + v ). Você deve ter uma imagem parecida com esta:

Icone quase pronto

4 – Estamos quase no fim! Vá até a aba Camadas e selecione a camada que apareceu quando você colou a imagem branca de ticado ( aqui na minha tela é a camada 7). Clique nela, segure e arraste para a camada debaixo, fazendo com que a camada debaixo fique em primeiro lugar. É como empilhar fotografias: a que está em cima aparece em primeiro lugar. Queremos que nosso sinal de ticado fique embaixo da nossa meia lua transparente, isso vai dar um efeito interessante para nosso ícone.

5 – O que você precisa fazer agora é acertar o tamanho e posição do sinal de ticado. Para mudar seu tamanho você deve selecionar a camada em que a imagem está, depois clicar em Editar>Transformação livre… Pontos de edição vão aparecer em volta da sua imagem, indicando que seu tamanho pode ser alterado. Clique nesses pontos e altere o tamanho da imagem como quiser. Para confirmar aperte Enter.

DICA: Para que as proporções da imagem sejam mantidas quando for alterar seu tamanho, aperte e segure a tecla Shift ( também chamada de Fixa em alguns teclados ) e depois clique com o mouse em qualquer ponto de edição que esteja nos cantos da sua imagem. Dessa forma você consegue mudar suas medidas mantendo a proporção entre largura e altura. Depois de editar o tamanho aperte Enter.

E para alterar a posição da imagem dentro da nossa base azul basta clicar na ferramenta Mover (tecla de atalho v), clicar na imagem e posicioná-la onde desejar.

Aí está! Nosso primeiro ícone terminado! Salve no formato PNG para manter a transparência de suas laterais. Agora é só entrar na Fábrica de Aplicativos, clicar em editar seu app e enviar esse ícone para a aba que quiser ou então usá-lo como ícone principal, ícone de compartilhe.

Icone Destaque Pronto

*Para ver o app que inspirou este post, dê uma olhada no link: https://app.vc/guia_berrini
E se você alguma pergunta ou sugestão, deixe um comentário logo abaixo.

Até a próxima!

Alexandre Lima
Não-designer, mas dou um jeito. Igual a você!

2 Comments
  • Eliete
    Posted at 6:26 PM, 22/07/2014

    Segui passo a passo e na hora de alterar a imagem diz que:
    “a imagem é inválida para ícone de Moblet, escolha outra”

    • Posted at 4:51 PM, 04/08/2014

      Olá, Eliete. Você já acessou a nossa Central de Ajuda para ver se lá você consegue resolver seu problema? Caso não, entre na nossa comunidade e mande seu problema no tópico que mais se encaixa na sua dúvida!

      Grande abraço. Hugo