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
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.
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.
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.
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:
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:
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:
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:
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:
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:
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:
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?
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:
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:
14 – Altere a Opacidade da camada para 20. Com isso terminamos a base do nosso ícone. A imagem ficará assim:
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:
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:
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:
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.
